<template>
  <el-dialog title="客户号查询" :visible.sync="dialogVisible" width="80%" append-to-body
             :close-on-click-modal="false" @close="handleClose">
    <el-form :model="queryForm" inline size="small">
      <el-form-item label="客户号">
        <el-input v-model="queryForm.custId" placeholder="请输入客户号" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" :loading="loading" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="customerList">
      <el-table-column label="客户号" prop="cust_id" align="center" :show-overflow-tooltip="true"/>
      <el-table-column label="客户内码" prop="cust_isn" align="center" :show-overflow-tooltip="true"/>
      <el-table-column label="客户名称" prop="cust_name" align="center" :show-overflow-tooltip="true"/>
      <el-table-column label="用信天数" prop="faith_day" align="center"/>
      <el-table-column label="存款年日均" prop="balance_avg" align="center"/>
      <el-table-column label="历史贷款次数" prop="loan_count_his" align="center"/>
      <el-table-column label="上次贷款日期" prop="last_loan_date" align="center" width="130"/>
      <el-table-column label="操作" align="center" width="90">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleSelect(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import {queryPersonalCustomerMap, queryCorporateCustomerMap} from "@/api/loanPricing/workflow"

export default {
  name: "CustomerMapSelector",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    customerType: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      loading: false,
      queryForm: {
        custId: undefined
      },
      customerList: []
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    handleQuery() {
      const custId = this.queryForm.custId ? this.queryForm.custId.trim() : ''
      this.queryForm.custId = custId
      if (!custId) {
        this.$modal.msgWarning("请输入客户号")
        return
      }
      this.loading = true
      let request
      if (this.customerType === 'personal') {
        request = queryPersonalCustomerMap
      } else if (this.customerType === 'corporate') {
        request = queryCorporateCustomerMap
      } else {
        this.loading = false
        this.$modal.msgWarning("请选择客户类型")
        return
      }
      request(custId).then(response => {
        this.customerList = response.data || []
        if (this.customerList.length === 0) {
          this.$modal.msgWarning("未查询到客户信息")
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleSelect(row) {
      this.$emit('select', row)
      this.dialogVisible = false
    },
    handleClose() {
      this.queryForm.custId = undefined
      this.customerList = []
      this.loading = false
    }
  }
}
</script>
