<template>
  <div class="descriptions-edit">
    <el-form ref="form" v-loading="loading" :model="form" :rules="rules" :show-message="false" v-enterboard>
      <el-descriptions :column="2" border title="基本信息">
        <el-descriptions-item>
          <template slot="label">所属客户<rq /></template>
            <MyFormItem prop="custName" :value="form.custName" :readonly="readonly">
              <CustInput width="100%" custType="1" :value="form.custId" :readonly="readonly" :label="form.custName" @change="handleCustChange" />
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">车牌号码<rq /></template>
            <MyFormItem prop="vehicleNumber" :value="form.vehicleNumber" :readonly="readonly">
              <el-input v-model="form.vehicleNumber" placeholder="请输入车牌号码" />
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">品牌型号</template>
            <MyFormItem prop="vehicleBrand" :value="form.vehicleBrand" :readonly="readonly">
              <el-input v-model="form.vehicleBrand" placeholder="请输入品牌型号" />
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">默认司机</template>
            <MyFormItem prop="driverName" :value="form.driverName" :readonly="readonly">
              <el-tooltip class="item" effect="dark" content="请先选择客户" placement="top" :disabled="!!form.custId">
                <DriverInput width="100%" :custId="form.custId" :value="form.driverId" :readonly="readonly || !form.custId" :label="form.driverName" @change="handleDriverChange" />
              </el-tooltip>
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">载重(吨)</template>
            <MyFormItem prop="vehicleLoad" :value="form.vehicleLoad" :readonly="readonly">
              <el-input v-model="form.vehicleLoad" placeholder="请输入载重" />
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">装载体积(m³)</template>
            <MyFormItem prop="vehicleVol" :value="form.vehicleVol" :readonly="readonly">
              <el-input v-model="form.vehicleVol" placeholder="请输入装载体积" />
            </MyFormItem>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions style="margin-top: 20px;" :column="2" border title="其他信息">
        <el-descriptions-item>
          <template slot="label">自重(吨)</template>
            <MyFormItem prop="weight" type="number" :value="form.weight" :readonly="readonly">
              <el-input v-model="form.weight" placeholder="请输入自重" />
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">发动机号</template>
            <MyFormItem prop="engineNumber" :value="form.engineNumber" :readonly="readonly">
              <el-input v-model="form.engineNumber" placeholder="请输入发动机号" />
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">车架号</template>
            <MyFormItem prop="frameNumber" :value="form.frameNumber" :readonly="readonly">
              <el-input v-model="form.frameNumber" placeholder="请输入车架号" />
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">行驶证截止日期</template>
            <MyFormItem prop="driveEndDate" :value="form.driveEndDate" :readonly="readonly">
              <el-date-picker class="el-date-picker" clearable v-model="form.driveEndDate" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择行驶证截止日期">
              </el-date-picker>
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">营运证截止日期</template>
            <MyFormItem prop="certValid" :value="form.certValid" :readonly="readonly">
              <el-date-picker class="el-date-picker" clearable v-model="form.certValid" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择营运证截止日期">
              </el-date-picker>
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">商险开始日期</template>
            <MyFormItem prop="consultBeginDate" :value="form.consultBeginDate" :readonly="readonly">
              <el-date-picker class="el-date-picker" clearable v-model="form.consultBeginDate" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择商险开始日期">
              </el-date-picker>
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">商险截止日期</template>
            <MyFormItem prop="consultEndDate" :value="form.consultEndDate" :readonly="readonly">
              <el-date-picker class="el-date-picker" clearable v-model="form.consultEndDate" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择商险截止日期">
              </el-date-picker>
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">备注</template>
            <MyFormItem prop="remark" :value="form.remark" :readonly="readonly">
              <el-input v-model="form.remark" placeholder="请输入备注" />
            </MyFormItem>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <FileGroupUpload
      :upload-types="uploadTypes"
      :readonly="readonly"
      @fileMap="fileMap"
    />
  </div>
</template>

<script>
import { getVehicle, addVehicle, updateVehicle } from "@/api/tm/vehicle";
import CustInput from "@/views/tm/components/CustInput";
import DriverInput from "@/views/tm/components/DriverInput";
import FileGroupUpload from '@/components/FileGroupUpload/index.vue'
import { v4 as generateUUID } from 'uuid'

export default {
  name: 'VehicleEdit',
  components: {
    DriverInput,
    CustInput,
    FileGroupUpload
  },
  props: {
    bid: [String, Number, Array],
    readonly: Boolean,
  },
  data() {           
    return {
      loading: false,
      form: this.defaultForm(),  
      rules: {
        custName: [
          { required: true, message: "所属客户不能为空", trigger: "change" }
        ],
        vehicleNumber: [
          { required: true, message: "车牌不能为空", trigger: "blur" }
        ],
      },
      uploadTypes: [],
    }
  },
  watch: {
    bid: {
      immediate: true,
      handler(val) {
        this.getDetail();
      }
    },
  },
  methods: {
    handleCustChange(custs) {
      const cust = custs.length > 0 ? custs[0] : {};
      if (this.form.custId != cust.id) {
        //清空司机
        this.handleDriverChange([]);
      }
      this.form.custId = cust.id;
      this.form.custCode = cust.custCode;
      this.form.custName = cust.custName;
    },
    handleDriverChange(drivers) {
      const driver = drivers.length > 0 ? drivers[0] : {};
      this.form.driverId = driver.driverId;
      this.form.driverName = driver.driverName;
    },
    // 获取详情
    getDetail() {
      this.form = this.defaultForm();
      this.resetForm("form");
      const uploadTypesTemp = [
        {
          prop: 'vehicleLicenseId',
          label: '行驶证',
          key: (generateUUID() + '').replace(/-/g, ''),
          max: 2,
          types: 'png,jpg',
        },
        {
          prop: 'operationCertificateId',
          label: '营运证', // 按钮名称
          key: (generateUUID() + '').replace(/-/g, ''), // 标识
          max: 2, // 最多上传数量
          types: 'png,jpg', // 限制上传类型
        },
        {
          prop: 'commercialInsuranceId',
          label: '商业险',
          key: (generateUUID() + '').replace(/-/g, ''),
          max: 2,
          types: 'png,jpg',
        },
        {
          prop: 'compulsoryTrafficInsuranceId',
          label: '交强险',
          key: (generateUUID() + '').replace(/-/g, ''),
          max: 2,
          types: 'png,jpg',
        },
      ]
        if (!this.bid) {
          this.uploadTypes = uploadTypesTemp
          return
        }
      if (!this.bid) {
        return;
      }
      this.loading = true;
      getVehicle(this.bid).then((res) => {
        this.loading = false;
        this.form = {...this.defaultForm(), ...res.data};
        this.uploadTypes = uploadTypesTemp.map(item => ({
          ...item,
          idFromServer: !!res.data?.[item.prop],
          key: res.data?.[item.prop] || item.key 
        }))
      }).catch((err) => {
        this.loading = false;
      });
    },
    // 默认表单
    defaultForm() {
      return {
        custId: null,
        custName: null,
        vehicleLoad: null,
        vehicleVol: null,
        vehicleBrand: null,
        vehicleNumber: null,
        frameNumber: null,
        engineNumber: null,
        driverId: null,
        driverName: null,
        driveBeginDate: null,
        driveEndDate: null,
        consultBeginDate: null,
        consultEndDate: null,
        certValid: null,
        weight: null,
        vehicleLicenseId: null,
        operationCertificateId: null,
        commercialInsuranceId: null,
        compulsoryTrafficInsuranceId: null,
        vehicleOwnershipCertificateId: null,
        otherFileId: null,
        remark: null
      };
    },
    fileMap(data) {
      this.form = { ...this.form, ...data };
    },
    // 提交表单
    submitForm() {
      if (this.readonly) {
        return;
      }
      this.$refs.form.validate((valid,  rules) => {
        if (!valid) {
          this.$modal.formWarning(rules);
          return;
        }
        if (this.$validate.hasValue(this.form.id)) {
          updateVehicle(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.$emit('saved', false);
          });
        } else {
          addVehicle(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.$emit('saved', true);
          });
        }
      });
    }
  }
}
</script>

<style>

</style>