<template>
  <div>
    <el-descriptions title="基本信息" :column="2" border labelClassName="labelClassNameaaa">
      <el-descriptions-item label="订单号">{{ formData.id }}</el-descriptions-item>
      <el-descriptions-item label="保单状态">{{
        {
          XG: '新购',
          DSX: '待生效',
          DTH: '待替换',
          YGM: '已购买',
          BZZ: '保障中',
          YSX: '已失效',
          KTH: '可替换'
        }[formData.policyOrderStatus]
      }}</el-descriptions-item>
      <el-descriptions-item label="保单名称">{{ formData.policyName }}</el-descriptions-item>
      <el-descriptions-item label="所属网点">{{ formData.websitName }}</el-descriptions-item>
      <el-descriptions-item label="工程师名称">{{ formData.workerName }}</el-descriptions-item>
      <el-descriptions-item label="工程师编号">{{ formData.workerNumber }}</el-descriptions-item>
      <el-descriptions-item label="身份证号">{{ formData.workerIdcard }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{ formData.workerMobile }}</el-descriptions-item>
      <el-descriptions-item label="操作人">{{ formData.updateBy }}</el-descriptions-item>
      <el-descriptions-item label="操作时间">{{ formData.updateTime }}</el-descriptions-item>
    </el-descriptions>
    <br />
    <br />
    <zj-form-container ref="formRef" :formData="formData" :formRules="formRules">
      <zj-form-module title="保险信息" label-width="110px" :formData="formData" :formItems="formItems" :column="3">
      </zj-form-module>
    </zj-form-container>
    <div v-if="type === 0 || type === 1" style="text-align: right">
      <el-button size="mini" type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '@/utils/util'
import { policyOrderDetail, policyOrderUpdate } from '@/api/employerInsurance'
import ImageUpload from '@/components/file-upload'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
export default {
  components: {
    ImageUpload
  },
  props: {
    type: {
      type: Number,
      default: null
    },
    item: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      disabled: this.type === 2,
      // 表单数据
      formData: {
        belongCompany: '',
        belongCompanyCode: '',
        buyUnit: '',
        buyUnitId: '',
        classWebsitId: '',
        classWebsitName: '',
        companyWechatId: '',
        companyWechatName: '',
        createBy: '',
        createTime: '',
        endTime: '',
        fileUrl: '',
        id: '',
        isPay: '',
        isReceipt: '',
        isSend: '',
        monthDate: '',
        payAmount: 0,
        payTime: '',
        policyId: '',
        policyName: '',
        policyNumber: '',
        policyOrderStatus: '',
        receiptTime: '',
        replaceIdcard: '',
        replaceName: '',
        replaceNumber: '',
        replacePhone: '',
        sendBatch: '',
        sendTime: '',
        startTime: '',
        transactionId: '',
        type: '',
        updateBy: '',
        updateTime: '',
        websitId: '',
        websitName: '',
        websitUserId: '',
        workerIdcard: '',
        workerMobile: '',
        workerName: '',
        workerNumber: ''
      },
      formRules: {}
    }
  },
  computed: {
    formItems() {
      return [
        {
          name: 'el-input',
          attributes: { disabled: this.type == 2 },
          formItemAttributes: { label: '保单编号', prop: 'policyNumber', rules: [...required] }
        },
        {
          name: 'el-date-picker',
          attributes: { disabled: this.type == 2, type: 'date', style: { width: '100%' } },
          formItemAttributes: { label: '生效时间', prop: 'startTime', rules: [...required] }
        },
        {
          name: 'el-date-picker',
          attributes: { disabled: this.type == 2, type: 'date', style: { width: '100%' } },
          formItemAttributes: { label: '失效时间', prop: 'endTime', rules: [...required] }
        },
        {
          md: 24,
          isShow: true,
          name: 'slot-component',
          formItemAttributes: {
            label: '上传附件',
            prop: 'fileUrl',
            rules: [...required]
          },
          render: (h, { props, onInput }) => {
            return (
              <div>
                <ImageUpload fileList={this.formData.fileUrl} limit={1} fileType={['image']} isEdit={this.type == 1} />
              </div>
            )
          }
        }
      ]
    }
  },
  created() {
    policyOrderDetail({
      id: this.item.id
    }).then(res => {
      this.formData = { ...res.data, fileUrl: res.data.fileUrl ? [{ url: res.data.fileUrl }] : [] }
    })
  },
  methods: {
    submit() {
      this.$refs['formRef'].validate(valid => {
        if (valid) {
          policyOrderUpdate({
            ...this.formData,
            startTime: dateFormat('YYYY-mm-dd HH:MM:SS', new Date(this.formData.startTime)),
            endTime: this.formData?.endTime
              ? `${dateFormat('YYYY-mm-dd HH:MM:SS', new Date(this.formData.endTime))?.split(' ')?.[0]} 23:59:59`
              : '',
            fileUrl: this.formData?.fileUrl?.[0]?.url
          }).then(res => {
            this.$message({
              type: 'success',
              message: `保存成功!`
            })
            this.$emit('success')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .labelClassNameaaa {
  width: 160px !important;
}
</style>
