<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.status}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="姓名:">
            <span>{{form.realName}}</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?form.vehicleNumberPlat:form.vehicalNumberPlat}}</span>
            <el-button size="small" type="primary" icon="edit" v-if="form.status==4" @click="resetCar">重新配车</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="" label-width="10px">
            <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="" label-width="10px">
            <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>
    <div class="modal_modal" v-show="resetCarVisible"></div>
    <!-- 重新配车 -->
    <el-dialog title="重新配车" :visible.sync="resetCarVisible" :append-to-body='true' :modal="false">
      <el-form :model="resetCarForm" ref="carForm" :rules="rules" label-width="90px">
        <el-form-item label="车牌号:" prop="numberPlate">
          <el-input v-model="resetCarForm.numberPlate" placeholder="请输入重配的车牌号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelResetCar">取消</el-button>
        <el-button type="primary" @click="update('carForm')">确定</el-button>
      </div>
    </el-dialog>
  </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 {editObj} from 'api/vehicle/vehicleInfo';

  export default {
    props: ["form", "rentCostDetail"],
    name: 'rentOrderDetailModal',
    components: {
      ElFormItem,
      ElCol,
      ElInput,
      ElRow
    },
    data() {
      return {
        updateNumberPlat: false,//是否重新配车
        dialogVisible: false,
        resetCarVisible: false,
        resetCarForm: {
          no: '',
          numberPlate: '',//重新配车车牌号
        },
        rules: {
          numberPlate: [
            {
              type: 'string',
              required: true,
              message: '请输入车牌号',
              trigger: 'blur'
            }
          ]
        },
      }
    },
    watch: {
      dialogVisible(newValue, oldValue) {
        if (!newValue) {
          this.$emit("rentOrderDetailDialogEvent", this.updateNumberPlat);
        }
      },
    },
    mounted() {
      this.dialogVisible = true;
    },
    methods: {
      resetCar() {
        this.clearFrom();
        this.resetCarVisible = true
        this.resetCarForm.no = this.form.no
      },
      cancelResetCar() {
        this.resetCarVisible = false
      },
      clearFrom() {
        this.resetCarForm = {
          no: '',
          numberPlate: '',//重新配车车牌号
        }
      }, /**
       * 重新配车
       * */
      update(formName) {
        let that = this;
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            editObj(this.resetCarForm).then(response => {
              if (response.status === 200) {
                this.$notify({
                  title: '成功',
                  message: '修改成功',
                  type: 'success',
                  duration: 2000
                });
                this.resetCarVisible = false
                this.form.vehicleNumberPlat = this.resetCarForm.numberPlate
                this.updateNumberPlat = true
              } else {
                this.$notify({
                  title: '失败',
                  message: response.message,
                  type: 'error',
                  duration: 2000
                });
              }
            });
          } else {
            return false;
          }
        });
      },

    }
  }
</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;
  }

  .modal_modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background: #000;
    z-index: 2000;
  }
</style>
