<template>
  <div class="mortgage-pledge-info">
    <cy-info-title style="margin-top: 20px;">
      抵质押信息
      <div slot="right">
        <template v-if="ruleForm.mortgageInfo && !disabled">
          <el-button type="text" @click="addClick('mortgageAdd')">新增抵押</el-button>
          <el-button type="text" @click="addClick('pledgeAdd')">新增质押</el-button>
        </template>
      </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="mortgageInfo">
        <el-radio-group v-model="ruleForm.mortgageInfo" :disabled="disabled">
          <el-radio :label="true">有</el-radio>
          <el-radio :label="false">无</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <cy-comm-table
      v-if="ruleForm.mortgageInfo"
      ref="commTable"
      :columns="columns"
      :data="tableData"
      :count="0"
    />
    <cy-dialog ref="mortgageDialog" title="抵押信息" width="90%" top="5vh">
      <mortgage-dialog ref="mortgage" :disabled="mortgagePledgeDisabled" :details-info="mortgageData"></mortgage-dialog>
      <div v-if="!mortgagePledgeDisabled" class="submit-btn">
        <el-button @click="$refs.mortgageDialog.show = false">取消</el-button>
        <el-button type="primary" @click="mortgageSubmit">提交</el-button>
      </div>
    </cy-dialog>
    <cy-dialog ref="pledgeDialog" title="质押信息" width="90%" top="5vh">
      <pledge-dialog ref="pledge" :disabled="mortgagePledgeDisabled" :details-info="pledgeData"></pledge-dialog>
      <div v-if="!mortgagePledgeDisabled" class="submit-btn">
        <el-button @click="$refs.pledgeDialog.show = false">取消</el-button>
        <el-button type="primary" @click="pledgeSubmit">提交</el-button>
      </div>
    </cy-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {
    MortgageDialog: () => import('./MortgageDialog'),
    PledgeDialog: () => import('./PledgeDialog')
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        mortgageInfo: false
      },
      rules: {},
      tableData: [],
      mortgageData: {},
      pledgeData: {},
      handlerIndex: null,
      mortgagePledgeDisabled: false
    }
  },
  computed: {
    ...mapGetters(['constant']),
    columns() {
      return [
        {
          label: '序号',
          index: true
        },
        {
          label: '抵（质）押合同编号',
          prop: 'mortgageNo',
          width: 160
        },
        {
          label: '合同类型',
          prop: 'guarType',
          render: (h, row) => {
            const optionDom = [{ label: '抵押合同', value: 1 }, { label: '质押合同', value: 2 }].map(item => (<el-option
              key={item.value}
              label={item.label}
              value={item.value}
            ></el-option>))
            return (
              <el-select v-model={row.guarType} disabled placeholder='请选择合同类型'>
                {optionDom}
              </el-select>
            )
          }
        },
        {
          label: '债务人身份类型',
          prop: 'debtorIdType',
          width: 160,
          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.debtorIdType} disabled placeholder='请选择债务人身份类型'>
                {optionDom}
              </el-select>
            )
          }
        },
        {
          label: '债务人名称',
          prop: 'debtorName',
          width: 140
        },
        {
          label: '担保金额',
          prop: 'guarAmount'
        },
        {
          label: '币种',
          prop: 'currency',
          render: (h, row) => {
            const optionDom = this.constant.currencyType.map(item => (<el-option
              key={item.code}
              label={item.name}
              value={item.code}
            ></el-option>))
            return (
              <el-select v-model={row.currency} disabled placeholder='请选择币种'>
                {optionDom}
              </el-select>
            )
          }
        },
        {
          label: '合同生效日期',
          prop: 'mortContrValueDate',
          width: 150
        },
        {
          label: '合同到期日期',
          prop: 'mortContrExpireDate',
          width: 150
        },
        {
          label: '合同失效日期',
          prop: 'mortContrFinishDate',
          width: 150
        },
        {
          label: '操作',
          show: true,
          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
        }
      ]
    }
  },
  watch: {
    detailsInfo: {
      handler(newV) {
        const { mortgageInfo, mortgageBasicInfoList } = JSON.parse(JSON.stringify(newV))
        this.ruleForm = {
          mortgageInfo: mortgageInfo ?? false
        }
        this.tableData = mortgageBasicInfoList || []
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['idType', 'currencyType'])
  },
  methods: {
    addClick(type) {
      this.handlerIndex = null
      if (type === 'mortgageAdd') {
        this.mortgageData = {}
        this.$refs.mortgageDialog.show = true
      } else if (type === 'pledgeAdd') {
        this.pledgeData = {}
        this.$refs.pledgeDialog.show = true
      }
    },
    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) {
      const { guarType } = row
      if (type === 'edit' || type === 'see') {
        if (guarType === 1) {
          this.mortgageData = row
          this.$refs.mortgageDialog.show = true
        }
        if (guarType === 2) {
          this.pledgeData = row
          this.$refs.pledgeDialog.show = true
        }
      }
      if (type === 'edit') {
        this.handlerIndex = index
        this.mortgagePledgeDisabled = false
      } else if (type === 'delete') {
        this.tableData.splice(index, 1)
      } else if (type === 'see') {
        this.mortgagePledgeDisabled = true
      }
    },
    async mortgageSubmit() {
      const data = await this.$refs.mortgage.getParams()
      if (this.handlerIndex !== null) {
        this.$set(this.tableData, this.handlerIndex, data)
      } else {
        this.tableData.push(data)
      }
      this.$refs.mortgageDialog.show = false
    },
    async pledgeSubmit() {
      const data = await this.$refs.pledge.getParams()
      if (this.handlerIndex !== null) {
        this.$set(this.tableData, this.handlerIndex, data)
      } else {
        this.tableData.push(data)
      }
      this.$refs.pledgeDialog.show = false
    },
    getParams() {
      var list = JSON.parse(JSON.stringify(this.tableData))
      list = list.map(item => {
        item.fileStorageListId = item.fileStorageList && item.fileStorageList.map(item => item.id)
        delete item.fileStorageList

        item.cardFrontFileStorage = this.getFileType(item.cardFrontFileStorage)
        item.cardReverseFileStorage = this.getFileType(item.cardReverseFileStorage)
        item.cardFrontFileStorageId = item.cardFrontFileStorage && item.cardFrontFileStorage.map(item => item.id)[0] || ''
        delete item.cardFrontFileStorage

        item.cardReverseFileStorageId = item.cardReverseFileStorage && item.cardReverseFileStorage.map(item => item.id)[0] || ''
        delete item.cardReverseFileStorage

        if (item.guarType === 1) {
          item.mortgageCollateralInfoList.map(item => {
            item.fileStorageIds = item.fileStorageList && item.fileStorageList.map(item => item.id) || []
            delete item.fileStorageList
            return item
          })
        }
        if (item.guarType === 2) {
          item.mortgagePledgeInfoList.map(item => {
            item.fileStorageIds = item.fileStorageList && item.fileStorageList.map(item => item.id) || []
            delete item.fileStorageList
            return item
          })
        }
        return item
      })
      const params = {
        ...this.ruleForm,
        mortgageBasicInfoList: list
      }
      return params
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
