<template>
  <div id="app">
    <el-row class="title">
      <el-radio-group v-model="selectedTab">
        <el-radio-button label="个人">个人</el-radio-button>
        <el-radio-button disabled label="企业">企业</el-radio-button>
        <el-radio-button disabled label="商户">商户</el-radio-button>
      </el-radio-group>
    </el-row>
    <el-row v-if="showSearch" class="searchBox">
      <el-input
        v-model="searchQuery"
        placeholder="输入客户名/证件号/手机号"
        style="width: 20%"
        clearable
        @clear="handleSearch(searchQuery)"
        @keyup.enter.native="handleSearch(searchQuery)"
      ></el-input>
      <el-button
        icon="el-icon-search"
        @click="handleSearch(searchQuery)"
      ></el-button>
    </el-row>
    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns" style="margin:20px 10px 0 10px; z-index: 2"></right-toolbar>
    <el-row>
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column
          align="center"
          key="custName"
          prop="custName"
          width="400"
          label="客户姓名"
          show-overflow-tooltip
          v-if="columns[0].visible"
        ></el-table-column>
        <el-table-column
          align="center"
          key="custIdc"
          prop="custIdc"
          label="证件号"
          v-if="columns[1].visible"
        ></el-table-column>
        <el-table-column
          align="center"
          key="custPhone"
          prop="custPhone"
          label="手机号"
          v-if="columns[2].visible"
        ></el-table-column>
             <el-table-column
          align="center"
          key="custId"
          prop="custId"
          label="客户号"
          v-if="columns[3].visible"
        ></el-table-column>
        <el-table-column prop="operate" label="操作" width="120px" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleCustDetail(scope.row.id)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        :current-page="pageNum"
      ></el-pagination>
    </el-row>
  </div>
</template>
<script>
import { listByKeyword,listSelectDetail } from "@/api/system/listByRetailKeywords.js";
// const getToken = require('@/utils/auth.js')
import {getToken} from '@/utils/auth.js'
export default {
  data() {
    return {
      loading: false,
      showSearch:true,
      selectedTab: "个人",
      tableData: [],
      total: 0,
      pageSize:10,
      pageNum:1,
      searchQuery: "",
      columns: [
        { key: 0, label: "客户姓名", visible: true },
        { key: 1, label: "证件号", visible: true },
        { key: 2, label: "手机号", visible: true },
        { key: 3, label: "客户号", visible: true },
      ],
    };
  },

  methods: {
    getList() {
      this.loading = true
      listByKeyword({keyword:this.searchQuery,pageSize:this.pageSize,pageNum:this.pageNum}).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      }).catch(err => console.error(err)).finally(() => {
        setTimeout(() => {
          this.loading = false
        }, 100)
      })
    },
    handleSearch() {
      this.handleCurrentChange(1) 
    },
    handleCustDetail(id) {
      listSelectDetail(id).then(res=> {
            this.$router.push({path:'/360charts/indexcharts/',query:{response:JSON.stringify(res.data)}})
      })
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getList();
      // this.handleSearch()
    },
    handleCurrentChange(newPage) {
      // console.log(newPage);
      this.pageNum = newPage;
      // this.handleSearch()
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style scoped>
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.searchBox {
  display: flex;
  justify-content: center;
  padding: 10px;
}
</style>