<template>
  <div class="descriptions-edit">
    <el-form ref="form" v-loading="loading" v-enterboard :model="form" :rules="rules" :show-message="false">
      <el-descriptions :column="2" border>
        <el-descriptions-item>
          <template slot="label">所属客户<rq /></template>
          <MyFormItem prop="custName" :value="form.custName" :readonly="readonly">
            <CustInput width="100%" cust-type="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="driverName" :value="form.driverName" :readonly="readonly">
            <el-input v-model="form.driverName" placeholder="请输入司机姓名" />
          </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">身份证号</template>
          <MyFormItem prop="idNumber" :value="form.idNumber" :readonly="readonly">
            <el-input v-model="form.idNumber" placeholder="请输入身份证号" />
          </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">性别</template>
          <MyFormItem prop="sex" :value="form.sex" :readonly="readonly">
            <template slot="readonly">
              <dict-tag :options="dict.type.sys_user_sex" :value="form.sex" />
            </template>
            <el-select v-model="form.sex" placeholder="请选择客户类型" clearable>
              <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">出生年月</template>
          <MyFormItem prop="birthDate" :value="form.birthDate" :readonly="readonly">
            <el-date-picker
              v-model="form.birthDate"
              class="el-date-picker"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择出生年月"
            />
          </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">驾驶证类型</template>
          <MyFormItem prop="licenseType" :value="form.licenseType" :readonly="readonly">
            <el-select v-model="form.licenseType" placeholder="请选择驾驶证类型" clearable>
              <el-option v-for="dict in dict.type.license_type" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">联系方式</template>
          <MyFormItem prop="mobileNumber" :value="form.mobileNumber" :readonly="readonly">
            <el-input v-model="form.mobileNumber" placeholder="请输入联系方式" />
          </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 { getDriver, addDriver, updateDriver } from '@/api/tm/driver'
import CustInput from '@/views/tm/components/CustInput'
import FileGroupUpload from '@/components/FileGroupUpload/index.vue'
import { v4 as generateUUID } from 'uuid'

export default {
  name: 'DriverEdit',
  dicts: ['sys_user_sex', 'license_type'],
  components: {
    CustInput,
    FileGroupUpload
  },
  props: {
    bid: [String, Number, Array],
    readonly: Boolean
  },
  data() {
    return {
      loading: false,
      form: this.defaultForm(),
      rules: {
        custName: [
          { required: true, message: '所属客户不能为空', trigger: 'change' }
        ],
        driverName: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ]
      },
      uploadTypes: []
    }
  },
  watch: {
    bid: {
      immediate: true,
      handler(val) {
        this.getDetail()
      }
    }
  },
  methods: {
    handleCustChange(custs) {
      const cust = custs.length > 0 ? custs[0] : {}
      this.form.custId = cust.id
      this.form.custCode = cust.custCode
      this.form.custName = cust.custName
    },
    // 获取详情
    async getDetail() {
      try {
        this.form = this.defaultForm()
        this.resetForm('form')
        let uploadTypesTemp = [
          {
            prop: 'professionalCertificateId',
            label: '从业证书',
            key: (generateUUID() + '').replace(/-/g, ''),
            max: 3,
            types: 'png,jpg',
          },
          {
            prop: 'drivingCertificateId',
            label: '驾驶证书', // 按钮名称
            key: (generateUUID() + '').replace(/-/g, ''), // 标识
            max: 3, // 最多上传数量
            types: 'png,jpg', // 限制上传类型
          },
          {
            prop: 'identityCardId',
            label: '身份证',
            key: (generateUUID() + '').replace(/-/g, ''),
            max: 2,
            types: 'png,jpg',
          }
        ]
        if (!this.bid) {
          this.uploadTypes = uploadTypesTemp
          return
        }

        this.loading = true
        // 获取详情
        const res = await getDriver(this.bid)
        this.form = { ...this.defaultForm(), ...res.data }
        this.uploadTypes = uploadTypesTemp.map(item => ({
          ...item,
          idFromServer: !!res.data?.[item.prop],
          key: res.data?.[item.prop] || item.key // 如果获取详情时已经有fileId就用接口返回的，否则就用uuid生成一个
        }))
      } catch (e) {
        console.error(e)
      } finally {
        this.loading = false
      }
    },
    // 默认表单
    defaultForm() {
      return {
        custId: null,
        custName: null,
        driverName: null,
        idNumber: null,
        sex: null,
        birthDate: null,
        licenseType: null,
        mobileNumber: null,
        remark: null
      }
    },
    // 提交表单
    submitForm() {
      if (this.readonly) {
        return
      }
      this.$refs.form.validate((valid, rules) => {
        if (!valid) {
          this.$modal.formWarning(rules)
          return
        }
        if (this.$validate.hasValue(this.form.driverId)) {
          updateDriver(this.form).then(response => {
            this.$modal.msgSuccess('修改成功')
            this.$emit('saved', false)
          })
        } else {
          addDriver(this.form).then(response => {
            this.$modal.msgSuccess('新增成功')
            this.$emit('saved', true)
          })
        }
      })
    },
    fileMap(data) {
      this.form = { ...this.form, ...data };
    },
  }
}
</script>

<style lang="scss" scoped>
.descriptions-edit {
}
</style>
