<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.status}}</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.namename}}</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,
          realName: 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
        // };
        // this.form=this.tourRow
        // this.dialogVisible = true;
        // getVehicleOrderDetail(params).then(res => {
        //   if (res.status == 200) {
        let a = this.tourRow;
        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>
