<template>
    <a-drawer width="55%" :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" v-if="form">
        <a-row>
        <a-col :span="10">
          <a-form-model-item label="提醒日期">
            <a-input v-model="form.remindTime" placeholder="暂无信息" disabled /> </a-form-model-item
        ></a-col>
        <a-col :span="10"
          ><a-form-model-item label="提醒人" >
            <a-input v-model="form.remindUserName" placeholder="暂无信息" disabled /> </a-form-model-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="提醒内容" >
            <a-input
              v-model="form.remindMessage"
              placeholder="暂无信息"
              :disabled="formType == 3"
            /> </a-form-model-item
        ></a-col>
        <a-col :span="10">
          <a-form-model-item label="提醒类型">
            <a-input :value="dict.label['remind_type'][form.remindType]" placeholder="暂无信息" :disabled="formType == 3" /> </a-form-model-item
        ></a-col>
      </a-row>
      <a-divider orientation="left">
        <b>保险登记详情</b>
      </a-divider>
        <a-row>
          <!-- <a-col :span="10">
            <a-form-model-item label="经办人" >
              <a-input v-model="uersInfo.metaDetail.remindUserName" placeholder="请输入经办人" :disabled="true" />
            </a-form-model-item>
          </a-col> -->
          <a-col :span="10">
            <a-form-model-item label="车牌号" >
              <a-input v-model="form.metaDetail.plateNumber" placeholder="请输入车牌号" :disabled="formType == 3" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="10">
            <a-form-model-item label="保险单号" >
              <a-input v-model="form.metaDetail.warrantyCode" placeholder="请输入保险单号" :disabled="formType == 3" />
            </a-form-model-item>
          </a-col>
          <a-col :span="10">
            <a-form-model-item label="保险发票照片" >
              <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="保险公司" >
              <a-input v-model="form.metaDetail.insuranceCompany" placeholder="请输入保险公司" :disabled="formType == 3" />
            </a-form-model-item>
          </a-col>
          <a-col :span="10">
            <a-form-model-item label="保单照片" >
              <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="保费" >
              <a-input v-model="form.metaDetail.insuranceExpense" placeholder="请输入保费" type="number" :disabled="formType == 3" />
            </a-form-model-item>
          </a-col>
          <a-col :span="10">
            <a-form-model-item label="保额">
              <a-input v-model="form.metaDetail.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="投保日期">
              <a-date-picker
                style="width: 100%"
                v-model="form.metaDetail.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="到期日期">
              <a-date-picker
                style="width: 100%"
                v-model="form.metaDetail.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="备注" >
          <a-input v-model="form.metaDetail.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"
        />
        <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 { getmsgInfo } from '@/api/records'
  import SubTable from './SubTable'
  import { mapGetters } from 'vuex'
  // import {user}
  export default {
    name: 'CreateForm',
    dicts: ['remind_type'],
    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,
          metaDetail:{}
        },
        // 1增加,2修改
        formType: 1,
        open: false,
        rules: {},
        uersInfo: null,
        warrantyImageId: '', //保单
        insuranceInvoice: '', //保险
      }
    },
    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 = []
      },
      //详情
      handleInfo(row, ids) {
        this.formType = 3
        getmsgInfo(row.id).then((response) => {
          this.form = response.data
          if (response.data.metaDetail.warrantyFile) {
            this.warrantyImageId = '/api' + response.data.metaDetail.warrantyFile.fileUrl
          }
          if (response.data.metaDetail.insuranceInvoiceFile) {
            this.insuranceInvoice = '/api' + response.data.metaDetail.insuranceInvoiceFile.fileUrl
          }
          this.subList = response.data.metaDetail.ljclwInsuranceRegisterDetailList
          this.open = true
        })
      },
      // 保险
      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: 40px;
  }
  /deep/.ant-select{
    color: #000;
  }
  /deep/.ant-input{
    color: #000;
  }
  </style>
  