<template>
  <div class="wapper">
    <section class="search-box">
      <section class="search-cnt">
        <el-input v-model="searchQuery" placeholder="输入客户名称/证件号/手机号" clearable @clear="handleSearch(searchQuery)"
          @keyup.enter.native="handleSearch(searchQuery)">
        </el-input>
        <section class="search-btn" @click="handleSearch(searchQuery)">
          <i class="el-icon-search"></i>
        </section>
      </section>
    </section>
    <section class="table-wrap">
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column align="center" label="客户姓名" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text" @click="handleCustDetail(scope.row.custIdc)">{{ scope.row.custName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="custIdc" label="证件号" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text" @click="handleCustDetail(scope.row.custIdc)">{{ scope.row.custIdc }}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="custPhone" label="联系方式" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="custId" label="客户号" show-overflow-tooltip></el-table-column>
      </el-table>
    </section>
    <div class="personPage">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="->,total,sizes,prev,pager,next,sizes"
          :total="total" :current-page="pageNum"></el-pagination>
    </div>
  </div>
</template>

<script>
import { listByKeyword } from '@/api/system/listByRetailKeywords.js'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      searchQuery: '',
      tableData: [{
        custName: '张三',
        id: '164320313',
        phone: '13111111111',
        custId: '31239435'
      }],
      loading: false,
      pageSize:10,
      pageNum:1,
      total:null
    }
  },
  created() {
    this.initTableData()
  },
  methods: {
    initTableData() {
      this.loading = true
      listByKeyword({ keyword: this.searchQuery, pageSize: this.pageSize, pageNum: this.pageNum, orderByColumn: 'updateTime' })
        .then((res) => {

          this.tableData = res.data
          this.total = res.total
          this.loading = false
        })
        .catch((err) => console.error(err))
        .finally(() => {
          setTimeout(() => {
            this.loading = false
          }, 100)
        })
    },
    handleSearch() {
      this.initTableData()
     },
    handleCustDetail(custIdc) {
      if(custIdc){
        this.$router.push({ path: '/360charts/familyDetail', query: { custIdc: custIdc } })
      }else{
        Message.warning('该客户无证件号，故无法查看家庭图谱')
      }
     },
    handleCurrentChange(newPage){
      this.pageNum = newPage
      this.initTableData()
    },
    handleSizeChange(newSize){
      this.pageSize = newSize
      this.initTableData()
    },
  },

};
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 24px 0 0 0;

  .search-cnt {
    position: relative;
    width: 70%;
  }

  ::v-deep .el-input {
    width: 100%;
    position: relative;

    .el-input__inner {
      height: 44px;
      line-height: 44px;
      border-radius: 23px;
      border: 1px solid #ebebeb;
      padding-left: 30px;
    }

    .el-input__suffix {
      right: 85px;
    }
  }

  .search-btn {
    width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 2px;
    border: 1px solid #4886f8;
    background-color: #4886f8;
    border-radius: 20px;
    cursor: pointer;
    z-index: 1;

    .el-icon-search {
      color: #ffffff;
      font-size: 14px;
    }
  }
}

.table-wrap {
  padding: 30px 20px;
}
</style>
