<template>
  <section class="home">
    <ai-detail>
      <ai-title slot="title" title="信用报告查询工具" isShowBottomBorder/>
      <template #content>
        <el-input v-model="search.param" :placeholder="placeholder" @change="page.current=1,handleSearch()" clearable>
          <el-select slot="prepend" v-model="search.type" :clearable="false" @change="search.param=''">
            <el-option v-for="op in types" :key="op.dictValue" :value="op.dictValue" :label="op.dictName"/>
          </el-select>
          <el-button slot="append" type="text" @change="page.current=1,handleSearch()">搜索</el-button>
        </el-input>
        <ai-card v-if="hasResult" title="查询结果" class="mar-t16">
          <el-row type="flex" slot="right" class="color-666">秀兴通为您找到<p class="color-26f" v-text="page.total"/>个结果</el-row>
          <template #content>
            <ai-table :tableData="results" :total="page.total" :current.sync="page.current" :size.sync="page.size"
                      @getList="handleSearch" :col-configs="colConfigs" :dict="dict">
              <el-table-column slot="name" :label="nameLabel">
                <template slot-scope="{row}">
                  <el-row type="flex" align="middle">
                    <el-avatar :src="row.avatar">
                      <div v-text="defaultAvatar(row.name)"/>
                    </el-avatar>
                    <div class="mar-l8" v-text="row.name"/>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column slot="options" label="操作" align="center" width="100px">
                <template slot-scope="{row}">
                  <el-button type="text" @click="showDetail(row.id)">详情</el-button>
                </template>
              </el-table-column>
            </ai-table>
          </template>
        </ai-card>
        <ai-empty v-else>暂无查询结果</ai-empty>
      </template>
    </ai-detail>
  </section>
</template>

<script>
export default {
  name: "home",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    placeholder() {
      const texts = {
        0: "搜索个人姓名/身份证号",
        1: "搜索企业名称/法人姓名",
      }
      return texts[this.search.type]
    },
    hasResult: v => v.results?.length > 0,
    isCompany: v => v.search.type == 1,
    nameLabel: v => v.isCompany ? "企业名称" : "姓名",
    colConfigs() {
      const configs = {
        0: [
          {slot: "name"},
          {prop: "idNumber", label: "身份证号", width: 180},
        ],
        1: [
          {slot: "name"},
          {prop: "legalPersonName", label: "法人姓名", width: 80},
          {prop: "idNumber", label: "统一社会信用代码", width: 180},
          {prop: "address", label: "地址"},
        ],
      }
      return configs[this.search.type]
    },
  },
  data() {
    return {
      search: {type: "0", param: null},
      types: [
        {dictValue: "0", dictName: "个人"},
        {dictValue: "1", dictName: "企业"},
      ],
      page: {current: 1, size: 10, total: 0},
      results: []
    }
  },
  methods: {
    handleSearch() {
      this.instance.post("/appcreditreport/listForWeb", null, {
        params: {...this.search, ...this.page}
      }).then(res => {
        if (res?.data) {
          this.results = res.data.records
          this.page.total = res.data.total
        }
      })
    },
    showDetail(id) {
      const hash = this.isCompany ? "#company" : "#person"
      this.$router.push({hash, query: {id}})
    },
    defaultAvatar(name) {
      return name?.substring(0, 1) || "无"
    }
  },
}
</script>

<style lang="scss" scoped>
.home {
  ::v-deep .el-input-group__prepend {
    width: 100px;
  }

  ::v-deep .el-input-group__append {
    width: 100px;
    padding: 0;
    background: #26f;
    color: #fff;
    border-color: #26f;

    .el-button {
      width: 100%;
      height: 100%;
      margin: 0;
    }
  }
}
</style>
