<template>
  <section class="loanList">
    <ai-list tabs>
      <ai-title slot="title" title="贷款审核"/>
      <template #tabs>
        <el-tabs>
          <el-tab-pane label="信贷审核">
            <ai-card hideTitle class="mar-t16">
              <template #content>
                <ai-search-bar class="mar-t8">
                  <template #left>
                    <ai-select placeholder="机构类型" :selectList="dict.getDict('financialOrganizationType')"
                               v-model="search.organizationType" @change="page.current=1,getTableData()"/>
                    <ai-select placeholder="审批状态" :selectList="dict.getDict('financialLoanApplyStatus2')"
                               v-model="search.status" @change="page.current=1,getTableData()"/>
                    <ai-search label="申请时间">
                      <el-date-picker size="small" v-model="search.applyTime" type="daterange"
                                      @change="handleFilterApplyTime" start-placeholder="开始时间" end-placeholder="结束时间"
                                      :default-time="['00:00:00','23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"/>
                    </ai-search>
                  </template>
                  <template #right>
                    <el-input size="small" placeholder="搜索产品名称、身份证、企业、贷款机构" v-model="search.enterpriseName" clearable
                              @change="page.current=1,getTableData()"/>
                  </template>
                </ai-search-bar>
                <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
                          @getList="getTableData" :col-configs="colConfigs" :dict="dict">
                  <el-table-column slot="expand" type="expand">
                    <template slot-scope="{row}">
                      <ai-wrapper>
                        <ai-info-item labelWidth="200px" v-for="op in desConfigs(row)" :key="op.prop" v-bind="op">
                          <custom-render v-if="op.render" :row="row" :render="op.render"/>
                          <p v-else-if="op.dict" v-text="dict.getLabel(op.dict,row[op.prop])"/>
                          <p v-else v-text="row[op.prop]"/>
                        </ai-info-item>
                      </ai-wrapper>
                    </template>
                  </el-table-column>
                  <el-table-column slot="options" label="操作" align="center">
                    <template slot-scope="{row}">
                      <el-button type="text" @click="showDetail(row.id)">详情</el-button>
                    </template>
                  </el-table-column>
                </ai-table>
              </template>
            </ai-card>
          </el-tab-pane>
          <el-tab-pane label="信贷统计" lazy>
            <loan-sta :instance="instance" :dict="dict" :permissions="permissions"/>
          </el-tab-pane>
        </el-tabs>
      </template>
    </ai-list>
  </section>
</template>

<script>
import {mapState} from "vuex";
import LoanSta from "./loanSta";

export default {
  name: "loanList",
  components: {
    LoanSta,
    customRender: {
      props: {
        row: Object,
        render: Function
      },
      render(h) {
        const {row, render} = this.$props
        return render(h, {row})
      }
    }
  },
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    ...mapState(['user']),
    colConfigs() {
      return [
        {slot: "expand"},
        {label: "产品名称", prop: "productName"},
        {label: "企业主体", prop: "enterpriseName"},
        {label: "申请时间", prop: "createTime", width: 160},
        {label: "联系人", prop: "name"},
        {label: "联系方式", prop: "phone"},
        {label: "状态", prop: "status", align: "center", dict: "financialLoanApplyStatus2"},
        {slot: "options"}
      ]
    }
  },
  data() {
    return {
      search: {status: "", applyTime: []},
      page: {current: 1, size: 10, total: 0},
      tableData: [],
    }
  },
  methods: {
    getTableData() {
      let status = this.search.status || 999
      this.instance.post("/appfinancialloanapply/list", null, {
        params: {...this.page, ...this.search, status}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data?.records
          this.page.total = res.data.total
        }
      })
    },
    showDetail(id) {
      this.$router.push({query: {id}})
    },
    handleFilterApplyTime() {
      this.page.current = 1
      this.search.applyStartDate = this.search.applyTime?.[0].substring(0, 10)
      this.search.applyEndDate = this.search.applyTime?.[1].substring(0, 10)
      this.getTableData()
    },
    desConfigs(row) {
      let ops = []
      if (row.organizationType == 2) {//担保产品
        ops = [
          {label: "担保机构", prop: "organizationName"},
        ]
      } else {//金融产品
        ops = [
          {label: "身份证号", render: (h, {row}) => h('p', this.idCardNoUtil.hideId(row.idNumber)), width: 160},
          {label: "贷款金额(万)", prop: "loanAmount"},
          {label: "贷款机构", prop: "organizationName"},
          {label: "机构类型", prop: "organizationType", dict: "financialOrganizationType"},
        ]
      }
      return ops
    }
  },
  created() {
    this.search.status = this.$route.query.status || "0"
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
.loanList {
  height: 100%;

  .mar-t8 {
    margin-top: 8px;
  }

  .mar-t16 {
    margin-top: 16px;
  }

  .staCard {
    text-align: center;
    margin: 0 16px 16px 0;
    box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
    border-radius: 4px;
    padding: 16px;
    box-sizing: border-box;
    background: #fff;

    &:last-of-type {
      margin-right: 0;
    }
  }
}
</style>
