<template>
  <div class="responsible-person">
    <cy-info-title>
      相关还款责任人信息
      <div slot="right">
        <el-button v-if="!disabled" type="text" @click="addClick('add')">新增</el-button>
      </div>
    </cy-info-title>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" label-position="top" class="rule-form-orange">
      <el-form-item label="有无相关还款责任人" prop="approvalConclusion">
        <el-radio-group v-model="ruleForm.respRepay" :disabled="disabled">
          <el-radio :label="true">有</el-radio>
          <el-radio :label="false">无</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template v-if="ruleForm.respRepay">
      <cy-comm-table
        ref="commTable"
        :columns="columns"
        :data="tableData"
        :count="0"
      />
    </template>
    <cy-dialog ref="dialog" title="相关还款责任人信息" width="90%" top="5vh">
      <responsible-person-dialog ref="responsiblePerson" :key="responsibleKey" :details-info="responsibleData" :disabled="responsiblePersonDisabled" :guarantee-object="ruleForm.guaranteeObject"></responsible-person-dialog>
      <div v-if="!responsiblePersonDisabled" class="submit-btn">
        <el-button @click="$refs.dialog.show = false ">取消</el-button>
        <el-button type="primary" @click="responsibleDialogSubmit">提交</el-button>
      </div>
    </cy-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {
    responsiblePersonDialog: () => import('./ResponsiblePersonDialog')
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        respRepay: false
      },
      rules: {},
      tableData: [],
      responsibleData: {},
      responsibleKey: 0,
      handlerIndex: null,
      responsiblePersonDisabled: false
    }
  },
  computed: {
    ...mapGetters(['constant']),
    columns() {
      return [
        {
          label: '序号',
          index: true
        },
        {
          label: '保证合同编号',
          prop: 'maxGuarMcc',
          width: 160
        },
        {
          label: '身份类别',
          prop: 'arlpIdType',
          render: (h, row) => {
            const optionDom = this.constant.idType.map(item => (<el-option
              key={item.code}
              label={item.name}
              value={item.code}
            ></el-option>))
            return (
              <el-select v-model={row.arlpIdType} disabled placeholder='请选择身份类别'>
                {optionDom}
              </el-select>
            )
          }
        },
        {
          label: '还款责任人类型',
          prop: 'arlpType',
          width: 160,
          render: (h, row) => {
            const optionDom = this.constant.quotaDisburseArlpType.map(item => (<el-option
              key={item.code}
              label={item.name}
              value={item.code}
            ></el-option>))
            return (
              <el-select v-model={row.arlpType} disabled placeholder='请选择还款责任人类型'>
                {optionDom}
              </el-select>
            )
          }
        },
        {
          label: '责任人名称',
          prop: 'arlpName',
          width: 140
        },
        {
          label: '身份标识类型',
          prop: 'arlpCertType',
          width: 140,
          render: (h, row) => {
            const optionDom = this.arlpTypeList(row).map(item => (<el-option
              key={item.code}
              label={item.name}
              value={item.code}
            ></el-option>))
            return (
              <el-select v-model={row.arlpCertType} disabled placeholder='请选择身份标识类型'>
                {optionDom}
              </el-select>
            )
          }
        },
        {
          label: '身份标识号码',
          prop: 'arlpCertNum',
          width: 140
        },
        {
          label: '还款责任金额',
          prop: 'arlpAmt',
          width: 140
        },
        {
          label: '联保标识',
          prop: 'wartySign',
          render: (h, row) => {
            const optionDom = [{ label: '单人保证/多人分保', value: 0 }, { label: '联保', value: 1 }].map(item => (<el-option
              key={item.value}
              label={item.label}
              value={item.value}
            ></el-option>))
            return (
              <el-select v-model={row.wartySign} disabled placeholder='请选择联保标识'>
                {optionDom}
              </el-select>
            )
          }
        },
        {
          label: '操作',
          render: (h, row, index) => {
            const btnList = [
              {
                msg: '编辑',
                category: 'edit',
                show: !this.disabled
              },
              {
                msg: '删除',
                category: 'delete',
                show: !this.disabled
              },
              {
                msg: '查看',
                category: 'see',
                show: this.disabled
              }
            ]
            const options = btnList.map(item => {
              return (
                item.show && <span class='table-icon-box' style='font-size: 14px;' onClick={() => { this.handlerOperate(item.category, row, index) }}>
                  { item.msg }
                </span>
              )
            })
            return <div>{ options }</div>
          },
          width: 130
        }
      ]
    },
    arlpTypeList() {
      return (row) => {
        return this.constant.certType.filter(item => item.code.includes(row.arlpIdType))
      }
    }
  },
  watch: {
    detailsInfo: {
      handler(newV) {
        if (newV === undefined) return
        const { respRepay, rltRepayList, reviewMasterContract: { applicantCompanyName }} = JSON.parse(JSON.stringify(newV))
        this.ruleForm = {
          respRepay: respRepay ?? false,
          guaranteeObject: applicantCompanyName
        }
        this.tableData = rltRepayList && rltRepayList.map(item => {
          item.guaranteeCardFrontFileStorage = this.getFileType(item.guaranteeCardFrontFileStorage)
          item.guaranteeCardReverseFileStorage = this.getFileType(item.guaranteeCardReverseFileStorage)
          item.spouseCardFrontFileStorage = this.getFileType(item.spouseCardFrontFileStorage)
          item.spouseCardReverseFileStorage = this.getFileType(item.spouseCardReverseFileStorage)
          return item
        }) || []
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['idType', 'certType', 'quotaDisburseArlpType'])
  },
  methods: {
    getFileType(type) {
      if (Object.prototype.toString.call(type) === '[object Object]') {
        return [type]
      } else if (Object.prototype.toString.call(type) === '[object Array]') {
        return type
      } else {
        return []
      }
    },
    handlerOperate(type, row, index) {
      if (type === 'edit') {
        this.$refs.dialog.show = true
        this.responsiblePersonDisabled = false
        this.responsibleData = row
        this.handlerIndex = index
      } else if (type === 'delete') {
        this.tableData.splice(index, 1)
      } else if (type === 'see') {
        this.$refs.dialog.show = true
        this.responsibleData = row
        this.responsiblePersonDisabled = true
      }
    },
    addClick() {
      this.$refs.dialog.show = true
      this.responsibleData = {}
      this.responsibleKey += 1
      this.handlerIndex = null
    },
    async responsibleDialogSubmit() {
      const data = await this.$refs.responsiblePerson.getParams()
      if (this.handlerIndex !== null) {
        this.$set(this.tableData, this.handlerIndex, data)
      } else {
        this.tableData.push(data)
      }
      this.$refs.dialog.show = false
    },
    getParams() {
      var list = JSON.parse(JSON.stringify(this.tableData))
      list = list.map(item => {
        item.guaranteeCardFrontFileStorageId = item.guaranteeCardFrontFileStorage && item.guaranteeCardFrontFileStorage.map(item => item.id)[0] || ''
        delete item.guaranteeCardFrontFileStorage
        item.guaranteeCardReverseFileStorageId = item.guaranteeCardReverseFileStorage && item.guaranteeCardReverseFileStorage.map(item => item.id)[0] || ''
        delete item.guaranteeCardReverseFileStorage
        item.spouseCardFrontFileStorageId = item.spouseCardFrontFileStorage && item.spouseCardFrontFileStorage.map(item => item.id)[0] || ''
        delete item.spouseCardFrontFileStorage
        item.spouseCardReverseFileStorageId = item.spouseCardReverseFileStorage && item.spouseCardReverseFileStorage.map(item => item.id)[0] || ''
        delete item.spouseCardReverseFileStorage
        item.fileStorageIds = item.fileStorages && item.fileStorages.map(item => item.id) || []
        delete item.fileStorages
        return item
      })
      const params = {
        ...this.ruleForm,
        rltRepayList: list
      }
      return params
    }
  }
}
</script>

<style lang="scss" scoped>
.responsible-person {

}
</style>
