<template>
  <el-dialog title="旅游订单详情" :visible.sync="dialogVisible">
    <el-form :model="form" ref="form" label-width="90px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="订单号:">
            <span>{{form.no}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付时间:">
            <span>{{form.crtTime}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单状态:">
            <span>{{form.ststusName}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="出发地:">
            <span>{{form.orderTourDetail.startCityName}}{{form.orderTourDetail.startAddr}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="目的地:">
            <span>{{form.orderTourDetail.endAddr}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="活动日期:">
            <span>{{form.orderTourDetail.startTime}}~{{form.orderTourDetail.endTime}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <table class="orderDetail">
        <tr><th>旅行</th><th>价格</th><th>人数</th><th>保险</th></tr>
        <tr>
          <td>{{form.name}}</td>
          <td>{{tourCostDetail}}</td>
          <td>成人:{{form.orderTourDetail.adultNum}}  儿童:{{form.orderTourDetail.childNum}}</td>
          <td>{{insureDetail}}</td>
        </tr>
        <tr>
          <td ></td>
          <td ></td>
          <td ></td>
          <td >订单金额:{{form.realAmount}}元</td>
        </tr>
      </table>
      <div>
        <div style="margin: 20px 0;"><span style="font-size: 18px;font-weight: bold;">联系人信息</span></div>
        <div>
          <span style="font-weight: 700">联系人：</span><span class="label-text" >{{form.orderTourDetail.contactMan}}</span>
          <span style="font-weight: 700">联系电话：</span><span class="label-text" >{{form.orderTourDetail.contactPhone}}</span>
          <span  style="font-weight: 700">Email:</span><span class="label-text">{{form.orderTourDetail.contactEmail}}</span>
        </div>
      </div>
      <div>
        <div style="margin: 20px 0;"><span style="font-size: 18px;font-weight: bold;">出游人信息 成人{{form.orderTourDetail.adultNum}}人  儿童{{form.orderTourDetail.childNum}}人</span></div>
        <table class="orderDetail">
          <tr><th>身份</th><th>姓名</th><th>电话</th><th>身份证号</th></tr>
            <tr  v-for="(item,index) in form.orderTourDetail.userVoList " :key="index">
              <td v-if="item && item.isdel == 0 && item.isChild == 0">成人</td>
              <td v-if="item && item.isdel == 0 && item.isChild == 1">儿童</td>
							<td v-if="item && item.isdel == 0">{{item.name}}</td>
              <td v-if="item && item.isdel == 0">{{item.phone}}</td>
              <td v-if="item && item.isdel == 0">{{item.idCard}}</td>
							
            </tr>
        </table>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import ElInput from "../../../../node_modules/element-ui/packages/input/src/input.vue";
  import ElCol from "element-ui/packages/col/src/col";
  import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item.vue";
  import ElForm from "../../../../node_modules/element-ui/packages/form/src/form.vue";
  import {
    getVehicleOrderDetail
  } from 'api/vehicle/vehicleSchedulManage';
  import {
    timestamp2Date
  } from 'utils/dateUtils';
  export default {
    props: ["tourRow"],
    name: 'tourOrderDetailModal',
    components: {
      ElFormItem,
      ElCol,
      ElInput,
      ElRow
    },
    data() {
      return {
        dialogVisible: false,
        form: {
         couponAmount: undefined,
         crtHost: undefined,
         crtName: undefined,
         crtTime: undefined,
         crtUser: undefined,
         detailId: undefined,
         endCompanyName: undefined,
         goodsAmount: undefined,
         hasDiscount: undefined,
         hasMemberRight: undefined,
         hasPay: undefined,
         id: undefined,
         name: undefined,
         no: undefined,
         orderAmount: undefined,
         orderOrigin: undefined,
         orderTourDetail: {
         adultNum: undefined,
           childNum: undefined,
           contactEmail: undefined,
           contactMan: undefined,
           contactPhone: undefined,
           costDetail: undefined,
           crtTime: undefined,
           dayNum: undefined,
           endAddr: undefined,
           endTime: undefined,
           goodId: undefined,
           hasInsure: undefined,
           id: undefined,
           isOutside: undefined,
           orderId: undefined,
           siteId: undefined,
           spePriceId: undefined,
           startAddr: undefined,
           startCity: undefined,
           startCityName: undefined,
           startCompanyId: undefined,
           startTime: undefined,
           totalNumber: undefined,
           tourUserIds: undefined,
           updTime: undefined,
           verificationId: undefined
         },
         payOrigin: undefined,
         picture: undefined,
         realAmount: undefined,
         refundStatus: undefined,
         startCompanyName: undefined,
         status: undefined,
         ststusName:undefined,
         telephone: undefined,
         type: undefined,
         updTime: undefined,
         userId: undefined,
         username: undefined,
         vehicleNumberPlat: undefined,
         version: undefined,
       },
        costDetail:{
          key:undefined,
          val:undefined,
          children:[
            {
              key:undefined,
              detail:undefined,
              val:undefined
            }
          ]
        },
        insureDetail:'',//保险
        tourCostDetail:''
      }
    },
    watch: {
      dialogVisible(newValue, oldValue){
        if(!newValue){
          this.$emit("tourOrderDetailDialogEvent", false);
        }
      },
    },
    mounted() {
      this.getOrderInfo();//获取订单详情
    },
    methods: {
      //获取订单详情
      getOrderInfo(){
        let params = {
          orderNo: this.tourRow.no
        };
        getVehicleOrderDetail(params).then(res => {
          if (res.status == 200) {
            let a = res.data;
            this.form = a;
            this.form.orderTourDetail.startTime =a.orderTourDetail.startTime? timestamp2Date(a.orderTourDetail.startTime):''
            this.form.orderTourDetail.endTime = a.orderTourDetail.endTime?timestamp2Date(a.orderTourDetail.endTime):''
            if (a.orderTourDetail.costDetail){
              try {
                this.costDetail = JSON.parse(a.orderTourDetail.costDetail)
                var cost = '';
                if ( this.costDetail.children){
                  this.costDetail.children.forEach(function(a1) {
                    var detail = a1.detail==undefined?'':a1.detail
                    cost += a1.key + ":" +detail+" "
                  })
                }
              }catch (e) {
                  this.templateModel()
              }

            }
            if (this.form.status == 2) {
              this.form.ststusName = '取消';
            }
            if (this.form.status == 3) {
              this.form.ststusName = '待付款';
            }
            if (this.form.status == 4) {
              this.form.ststusName = '待出行';
            }
            if (this.form.status == 5) {
              this.form.ststusName = '出行中';
            }
            if (this.form.status == 6) {
              this.form.ststusName = '已完成';
            }
            if(a.orderTourDetail.hasInsure == 0) {
              this.insureDetail = "不需要保险"
            }
            this.tourCostDetail = cost;
            this.dialogVisible = true;
          } else {
            this.$notify({
              title: '失败',
              message: res.message,
              type: 'error',
              duration: 2000
            });
            this.$emit("tourOrderDetailDialogEvent", false);
          }
        });
      },
      templateModel(){
        this.costDetail= {
          key: undefined,
          val: undefined,
          children: [
            {
              key: undefined,
              detail: undefined,
              val: undefined
            }
          ]
        }
      }
    }
  }
</script>
<style>
  .label-text{
    margin-left: 10px;
    margin-right: 20px;
  }
  .label-title{
    margin-top: 10px;
  }
  .orderDetail tr th{
    background: #eef1f6;
  }
  .orderDetail tr td, .orderDetail tr th{
    width: 500px;
    text-align: center;
    border: 1px solid #dfe6ec;
    margin-left: 100px;
    margin-right: 100px;
    padding: 10px;
  }
  .label-value{
    margin-left: 80px;
    margin-right: 100px;
  }
  #license-img{
    width: 50px;
    height: 50px;
  }
  .order-details .el-form-item{
    margin-bottom: 10px !important;
  }
</style>
