<template>
  <el-dialog
    :visible.sync="visible"
    v-bind="modalOptions"
    append-to-body
  >
    <el-form
      ref="formData"
      :model="formData"
      size="mini"
      label-position="left"
      label-suffix=":"
      label-width="200px"
    >
      <!-- 申请信息 -->
      <div style="display: flex;padding-bottom: 14px;font-size: 16px;font-weight: bold;">
        <div
          style="width: 4px;height: 14px;margin-left: 6px;margin-right: 6px;background-color: #0519D4;border-radius: 2px;"
        >
        </div>
        <div>店铺信息</div>
      </div>
      <el-form-item label="商家ID" prop="shopId">
        {{ formData.shopId || '--' }}
      </el-form-item>
      <el-form-item label="店铺名称" prop="shopName">
        {{ formData.shopName || '--' }}
      </el-form-item>
      <el-form-item label="店铺类型" prop="authenType">
        <span v-if="formData.authenType === 1">个人</span>
        <span v-else-if="formData.authenType === 2">个体工商户</span>
        <span v-else-if="formData.authenType === 3">企业</span>
        <span v-else-if="formData.authenType === 4">其他组织</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="客服电话" prop="shopPhone">
        {{ formData.shopPhone || '--' }}
      </el-form-item>
      <el-form-item label="店铺负责人" prop="chargePersonName">
        {{ formData.chargePersonName || '--' }}
      </el-form-item>
      <el-form-item label="负责人电话" prop="chargePersonPhone">
        {{ formData.chargePersonPhone || '--' }}
      </el-form-item>
      <el-form-item label="店铺地址" prop="shopAdress">
        {{ formData.shopAdress || '--' }}
      </el-form-item>

      <div style="display: flex;padding-bottom: 14px;font-size: 16px;font-weight: bold;">
        <div
          style="width: 4px;height: 14px;margin-left: 6px;margin-right: 6px;background-color: #0519D4;border-radius: 2px;"
        >
        </div>
        <div>个人信息</div>
      </div>
      <el-form-item label="名称" prop="name">
        {{ formData.name || '--' }}
      </el-form-item>
      <el-form-item label="证件信息" prop="cardTypeName">
        {{ formData.cardTypeName || '--' }}
      </el-form-item>
      <el-form-item label="身份证号码" prop="idCard">
        {{ formData.idCard || '--' }}
      </el-form-item>
      <el-form-item label="身份证有效期" prop="cardTime">
        {{ formData.cardTime || '--' }}
      </el-form-item>
      <el-form-item label="证件照片正面" prop="cardPositive">
        <el-image
          v-if="formData.cardPositive" :src="formData.cardPositive" style="width:80px;height:80px"
          fit="cover" :preview-src-list="[ formData.cardPositive ]"
        />
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="证件照片反面" prop="cardSide">
        <el-image
          v-if="formData.cardSide" :src="formData.cardSide" style="width:80px;height:80px"
          fit="cover" :preview-src-list="[ formData.cardSide ]"
        />
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="手持证件照" prop="cardHand">
        <el-image
          v-if="formData.cardHand" :src="formData.cardHand" style="width:80px;height:80px"
          fit="cover" :preview-src-list="[ formData.cardHand ]"
        />
        <span v-else>--</span>
      </el-form-item>

      <div style="display: flex;padding-bottom: 14px;font-size: 16px;font-weight: bold;">
        <div
          style="width: 4px;height: 14px;margin-left: 6px;margin-right: 6px;background-color: #0519D4;border-radius: 2px;"
        >
        </div>
        <div>主体信息</div>
      </div>
      <el-form-item label="主体名称" prop="subjectName">
        {{ formData.subjectName || '--' }}
      </el-form-item>
      <el-form-item label="主体代码" prop="subjectCode">
        <!-- 4组织机构代码，123社会信用代码 -->
        {{ formData.subjectCode || '--' }}
      </el-form-item>
      <el-form-item label="注册地址" prop="subjectAdress">
        {{ formData.subjectAdress || '--' }}
      </el-form-item>
      <el-form-item label="营业期限开始时间" prop="subjectStartTime">
        {{ formData.subjectStartTime || '--' }}
      </el-form-item>
      <el-form-item label="营业期限结束时间" prop="subjectEndTime">
        {{ formData.subjectEndTime || '--' }}
      </el-form-item>
      <el-form-item label="主体证件照" prop="subjectLicense">
        <!-- 4机构证明材料，营业执照 -->
        <div v-if="formData.subjectLicense && formData.subjectLicense.length">
          <el-image
            v-for="(item, index) in formData.subjectLicense" :key="index" :src="item"
            style="width:80px;height:80px;margin-right: 10px;" fit="cover"
            :preview-src-list="formData.subjectLicense"
          />
        </div>
        <span v-else>--</span>
      </el-form-item>

      <div style="display: flex;padding-bottom: 14px;font-size: 16px;font-weight: bold;">
        <div
          style="width: 4px;height: 14px;margin-left: 6px;margin-right: 6px;background-color: #0519D4;border-radius: 2px;"
        >
        </div>
        <div>授权信息</div>
      </div>
      <el-form-item label="生效日期" prop="effectiveDate">
        {{ formData.effectiveDate || '--' }}
      </el-form-item>
      <el-form-item label="生效时限" prop="effectiveYear">
        {{ formData.effectiveYear || '--' }}
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { settlementGetById } from '@/api/business'

export default {
  name: 'DetailModal',
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '800px',
        title: '申请详情'
      },
      visible: false,
      formData: {
        shopId: '',
        shopName: '',
        authenType: '',
        shopPhone: '',
        chargePersonName: '',
        chargePersonPhone: '',
        shopAdress: '',
        name: '',
        cardTypeName: '',
        idCard: '',
        cardTime: '',
        cardPositive: '',
        cardSide: '',
        cardHand: '',
        subjectName: '',
        subjectCode: '',
        subjectAdress: '',
        subjectStartTime: '',
        subjectEndTime: '',
        subjectLicense: '',
        effectiveDate: '',
        effectiveYear: ''
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params)
      if (params.shopId) {
        this.getInfo(params.shopId)
      }
      this.visible = true
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await settlementGetById({ shopId: id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          shopId: res.data.shopId || '',
          shopName: res.data.shopName || '',
          authenType: res.data.authenType,
          shopPhone: res.data.shopPhone || '',
          chargePersonName: res.data.chargePersonName || '',
          chargePersonPhone: res.data.chargePersonPhone || '',
          shopAdress: res.data.shopAdress || '',
          name: res.data.name || '',
          cardTypeName: res.data.cardTypeName || '',
          idCard: res.data.idCard || '',
          cardTime: res.data.cardTime || '',
          cardPositive: res.data.cardPositive || '',
          cardSide: res.data.cardSide || '',
          cardHand: res.data.cardHand || '',
          subjectName: res.data.subjectName || '',
          subjectCode: res.data.subjectCode || '',
          subjectAdress: res.data.subjectAdress || '',
          subjectStartTime: res.data.subjectStartTime || '',
          subjectEndTime: res.data.subjectEndTime || '',
          subjectLicense: res.data.subjectLicense || '',
          effectiveDate: res.data.effectiveDate || '',
          effectiveYear: res.data.effectiveYear || ''
        })
      } finally {
        loading.close()
      }
    }
  }
}
</script>

