<template>
  <a-drawer width="85%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
    <a-divider orientation="left">
      <b>{{ formTitle }}</b>
    </a-divider>
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="经办人" prop="userId">
            <a-input v-model="uersInfo.nickName" placeholder="请输入经办人" :disabled="true" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="车牌号" prop="plateNumber">
            <a-input v-model="form.plateNumber" placeholder="请输入车牌号" :disabled="formType == 3" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="保险单号" prop="warrantyCode">
            <a-input v-model="form.warrantyCode" placeholder="请输入保险单号" :disabled="formType == 3" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="保险发票照片" prop="insuranceInvoice">
            <file-upload
              :disabled="formType == 3"
              v-model="insuranceInvoice"
              type="image"
              module="register_bx"
              @UpdateImg="UpdateInvoice"
            ></file-upload>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="保险公司" prop="insuranceCompany">
            <a-input v-model="form.insuranceCompany" placeholder="请输入保险公司" :disabled="formType == 3" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="保单照片" prop="warrantyImageId">
            <file-upload
              :disabled="formType == 3"
              v-model="warrantyImageId"
              type="image"
              module="register_bd"
              @UpdateImg="UpdateWarranty"
            ></file-upload>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="保费" prop="insuranceExpense">
            <a-input v-model="form.insuranceExpense" placeholder="请输入保费" type="number" :disabled="formType == 3" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="保额" prop="insuranceInsured">
            <a-input v-model="form.insuranceInsured" placeholder="请输入保额" type="number" :disabled="formType == 3" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="投保日期" prop="insuranceTime">
            <a-date-picker
              style="width: 100%"
              v-model="form.insuranceTime"
              format="YYYY-MM-DD HH:mm:ss"
              allow-clear
              :disabled="formType == 3"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="到期日期" prop="dueTime">
            <a-date-picker
              style="width: 100%"
              v-model="form.dueTime"
              format="YYYY-MM-DD HH:mm:ss"
              allow-clear
              :disabled="formType == 3"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-form-model-item label="备注" prop="remark">
        <a-input v-model="form.remark" placeholder="请输入内容" type="textarea" allow-clear :disabled="formType == 3" />
      </a-form-model-item>
      <a-divider orientation="left">
        <b>保险登记详情</b>
      </a-divider>
      <sub-table
        ref="subTable"
        :list="subList"
        :formType="formType"
        @add="handleAddljclwInsuranceRegisterDetail"
        @delete="handleDeleteljclwInsuranceRegisterDetail"
      />
      <p>当前存在 {{ subList.length }} 条保险类</p>
      <!-- <a-button type="dashed" @click="$refs.subTable.show()"> 详情 </a-button> -->
      <br />
      <div class="bottom-control">
        <a-space>
          <a-button type="primary" :loading="submitLoading" @click="submitForm" v-if="formType != 3"> 保存 </a-button>
          <a-button type="dashed" @click="cancel"> 取消 </a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { getRegister, addRegister, updateRegister } from '@/api/clw/register'
import SubTable from './SubTable'
import { mapGetters } from 'vuex'
// import {user}
export default {
  name: 'CreateForm',
  props: {},
  components: {
    SubTable,
  },

  data() {
    return {
      submitLoading: false,
      subList: [],
      formTitle: '',
      // 表单参数
      form: {
        userId: null,

        plateNumber: null,

        warrantyCode: null,

        insuranceCompany: null,

        insuranceExpense: null,

        insuranceInsured: null,

        warrantyImageId: 123,

        insuranceInvoice: null,

        insuranceTime: null,

        dueTime: null,

        remark: null,
      },
      // 1增加,2修改
      formType: 1,
      open: false,
      rules: {},
      uersInfo: null,
      warrantyImageId: '', //保单
      insuranceInvoice: '', //保险
      rules: {
        plateNumber: [{ required: true, message: '车牌号不能为空', trigger: 'blur' }],

        warrantyCode: [{ required: true, message: '保险单号不能为空', trigger: 'blur' }],

        insuranceCompany: [{ required: true, message: '保险公司不能为空', trigger: 'blur' }],

        insuranceExpense: [{ required: true, message: '保费不能为空', trigger: 'blur' }],

        insuranceInsured: [{ required: true, message: '保额不能为空', trigger: 'blur' }],

        warrantyImageId: [{ required: true, message: '保单照片不能为空', trigger: 'blur' }],

        insuranceInvoice: [{ required: true, message: '保险发票照片不能为空', trigger: 'blur' }],

        insuranceTime: [{ required: true, message: '投保日期不能为空', trigger: 'change' }],

        dueTime: [{ required: true, message: '到期日期不能为空', trigger: 'change' }],
      },
    }
  },
  filters: {},
  created() {
    this.uersInfo = this.$store.getters.userInfo
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    onClose() {
      this.open = false
      this.subList = []
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
      this.subList = []
    },
    // 表单重置
    reset() {
      this.formType = 1
      this.form = {
        userId: null,

        plateNumber: null,

        warrantyCode: null,

        insuranceCompany: null,

        insuranceExpense: null,

        insuranceInsured: null,

        warrantyImageId: null,

        insuranceInvoice: null,

        insuranceTime: null,

        dueTime: null,

        remark: null,
      },
      this.insuranceInvoice=null
      this.warrantyImageId=null
      this.subList = []
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset()
      this.formType = 1
      this.open = true
      this.formTitle = '添加'
    },
    /** 新增子项操作 */
    handleAddljclwInsuranceRegisterDetail(row) {
      this.subList.push(row)
    },
    /** 删除子项操作 */
    handleDeleteljclwInsuranceRegisterDetail(index, indexs) {
      if (index !== undefined) {
        this.subList.splice(index, 1)
        return
      }
      indexs.forEach((item) => {
        this.subList.splice(item, 1)
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row, ids) {
      this.reset()
      this.formType = 2
      const insuranceId = row ? row.insuranceId : ids
      getRegister(insuranceId).then((response) => {
        this.form = response.data
        if (response.data.warrantyFile) {
          this.warrantyImageId = '/api' + response.data.warrantyFile.fileUrl
        }
        if (response.data.insuranceInvoiceFile) {
          this.insuranceInvoice = '/api' + response.data.insuranceInvoiceFile.fileUrl
        }
        this.subList = response.data.ljclwInsuranceRegisterDetailList
        this.open = true
        this.formTitle = '修改'
      })
    },
    //详情
    handleInfo(row, ids) {
      this.formType = 3
      const insuranceId = row ? row.insuranceId : ids
      getRegister(insuranceId).then((response) => {
        this.form = response.data
        if (response.data.warrantyFile) {
          this.warrantyImageId = '/api' + response.data.warrantyFile.fileUrl
        }
        if (response.data.insuranceInvoiceFile) {
          this.insuranceInvoice = '/api' + response.data.insuranceInvoiceFile.fileUrl
        }
        this.subList = response.data.ljclwInsuranceRegisterDetailList
        this.open = true
        this.formTitle = '详情'
      })
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.form.validate((valid) => {
        const time = this.form.dueTime.format ? this.form.dueTime.format('YYYY-MM-DD HH:mm:ss') : this.form.dueTime
        const time1 = this.form.insuranceTime.format
          ? this.form.insuranceTime.format('YYYY-MM-DD HH:mm:ss')
          : this.form.insuranceTime
        const params = {
          ...this.form,
          userId: this.uersInfo.userId,
          dueTime: time,
          insuranceTime: time1,
        }
        if (valid) {
          this.submitLoading = true
          this.form.ljclwInsuranceRegisterDetailList = this.subList
          if (this.form.insuranceId !== undefined && this.form.insuranceId !== null) {
            updateRegister(params)
              .then((response) => {
                this.$message.success('修改成功', 3)
                this.open = false
                this.$emit('ok')
                this.reset()
              })
              .finally(() => {
                this.submitLoading = false
              })
          } else {
            addRegister(params)
              .then((response) => {
                this.$message.success('新增成功', 3)
                this.open = false
                this.$emit('ok')
                this.reset()
              })
              .finally(() => {
                this.submitLoading = false
              })
          }
        } else {
          return false
        }
      })
    },
    // 保险
    UpdateInvoice(val) {
      this.insuranceInvoice = val.response.url
      this.form.insuranceInvoice = val.response.id
    },
    // 保单
    UpdateWarranty(val) {
      this.warrantyImageId = val.response.url
      this.form.warrantyImageId = val.response.id
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-col-10 {
  margin-right: 80px;
}
</style>
