<template>
  <el-dialog title="历史贷款合同选择" :visible.sync="dialogVisible" width="80%" append-to-body
             :close-on-click-modal="false" @close="handleClose">
    <el-table :data="contracts" v-loading="loading" @row-click="handleRowClick">
      <el-table-column label="选择" align="center" width="70">
        <template slot-scope="scope">
          <el-radio
            class="history-contract-radio"
            v-model="selectedContractKey"
            :label="contractRadioValue(scope.row, scope.$index)"
            @change="handleRadioChange(scope.row)"
          >
            <span class="history-contract-radio-text">选择</span>
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column label="客户内码" prop="cust_isn" align="center" :show-overflow-tooltip="true"/>
      <el-table-column label="历史贷款合同号" prop="loan_contract_history" align="center" :show-overflow-tooltip="true"/>
      <el-table-column label="历史贷款担保方式" prop="guar_type_history" align="center"/>
      <el-table-column label="历史贷款产品代码" prop="product_code_history" align="center"/>
      <el-table-column label="历史贷款利率" prop="loan_rate_history" align="center">
        <template slot-scope="scope">
          <span>{{ formatRate(scope.row.loan_rate_history) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="历史贷款金额" prop="loan_amount_history" align="center"/>
      <el-table-column label="历史贷款签订时间" prop="loan_sign_date_history" align="center" width="150"/>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirmSelect">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {formatRate} from "@/utils/rate"

export default {
  name: "HistoryContractSelector",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    contracts: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectedContract: null,
      selectedContractKey: null
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    formatRate,
    contractRadioValue(row, index) {
      return row.loan_contract_history || `${row.cust_isn || ''}-${index}`
    },
    handleRowClick(row, column, event) {
      this.selectedContract = row
      this.selectedContractKey = this.contractRadioValue(row, this.contracts.indexOf(row))
    },
    handleRadioChange(row) {
      this.selectedContract = row
    },
    confirmSelect() {
      if (!this.selectedContract) {
        this.$modal.msgWarning("请选择历史贷款合同")
        return
      }
      if (!this.selectedContract.loan_rate_history) {
        this.$modal.msgWarning("历史贷款利率不能为空")
        return
      }
      this.$emit('select', this.selectedContract)
      this.dialogVisible = false
    },
    handleClose() {
      this.selectedContract = null
      this.selectedContractKey = null
    }
  }
}
</script>

<style scoped>
.history-contract-radio ::v-deep .el-radio__label {
  display: none;
}
</style>
