<template>
  <el-dialog title="订单详情" :visible.sync="dialogVisible" class="order-details">
    <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 :span="8">
          <el-form-item label="姓名:">
            <span>{{form.username}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机号:">
            <span>{{form.telephone}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="配车:">
            <span style="margin-right: 10px;">{{form.vehicleNumberPlat}}</span><el-button size="small" type="primary" icon="edit" v-if="form.status==4">重新配车</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="取车:">
            <span>{{form.orderRentVehicleDetail.startTime}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="">
            <span>{{form.orderRentVehicleDetail.startAddr}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交车公司:">
            <span>{{form.startCompanyName}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="还车:">
            <span>{{form.orderRentVehicleDetail.endTime}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="">
            <span>{{form.orderRentVehicleDetail.endAddr}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交车公司:">
            <span>{{form.endCompanyName}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <table class="orderDetail">
        <tr><th>房车</th><th>租借天数</th><th>费用明细</th>
        </tr>
        <tr>
          <td>{{form.name}}{{rentCostDetail}}</td>
          <td>{{form.orderRentVehicleDetail.dayNum}}天</td>
          <td>{{rentCostDetail}}</td>
        </tr>
        <tr>
          <td ></td>
          <td ></td>
          <td >共计:￥{{form.realAmount}}</td>
        </tr>
      </table>
      <div  v-if="form.orderVehicleCrosstownDto" style="margin: 20px 0;"><span style="font-size: 18px;font-weight: bold;">驾驶人信息</span></div>
      <table class="orderDetail" v-if="form.orderVehicleCrosstownDto">
        <tr><th>姓名</th><th>手机号</th><th>身份证号</th><th>驾照</th></tr>
        <tr>
          <td>{{form.orderVehicleCrosstownDto.licenseName}}</td>
          <td>{{form.orderVehicleCrosstownDto.licensePhone}}</td>
          <td>{{form.orderVehicleCrosstownDto.licenseIdCard}}</td>
          <td><img style="width: 140px;height: 140px;" :src="form.orderVehicleCrosstownDto?form.orderVehicleCrosstownDto.licenseImg:'https://xxtest.upyuns.com/image/app/default_%20avatar.png'"></td>
        </tr>
      </table>
    </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";
  export default {
    props: ["form", "rentCostDetail"],
    name: 'rentOrderDetailModal',
    components: {
      ElFormItem,
      ElCol,
      ElInput,
      ElRow
    },
    data() {
      return {
        dialogVisible: false
      }
    },
    watch: {
      dialogVisible(newValue, oldValue){
        if(!newValue){
          this.$emit("rentOrderDetailDialogEvent", false);
        }
      },
    },
    mounted() {
      this.dialogVisible = true;
    },
    methods: {

    }
  }
</script>
