<template>
    <div class="personBox" id="zdrxxtj">
        <div class="asideTitle mt60">
            <div>
              <span class="title">重点人信息统计</span>
              <span :class="active == it ? 'active'+`${idx}`:''" @click="changeDate(it)" class="tabsBtn pointer" v-for="(it,idx) in btns" :key="it">{{ it }}</span>
            </div>
        </div>
        <div class="asideCnt">
          <div class="seachBox flex">
            <MOSTY.Other style="flex:1" v-model="keywords" clearable placeholder="输入关键字" />
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </div>
          <MyTable @changePage="changePage" customClass="zdy_peo_table" :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" >
            <template #qtFxdj="{row}">
               <DictTag :tag="false" :value="row.qtFxdj" :options="D_GS_ZDQT_FXDJ"/>
            </template>
            <template #bqList="{row}">
              <span v-if="row.bqList">
                <span v-for="(it, idx) in row.bqList" :key="idx">{{it.bqMc  }}、</span>
              </span>
            </template>
            <template #qbcjList="{row}">
               <span v-if="row.qbcjList">
                  <span v-for="(it, idx) in row.qbcjList" :key="idx">{{it.xsMc  }}、</span>
               </span>
            </template>
            <template #qtZt="{row}">
               <DictTag :tag="false" :value="row.qtZt" :options="D_GS_ZDQT_ZT"/>
            </template>
          </MyTable>
        </div>
    </div>
</template>

<script setup>
import { qcckGet } from "@/api/qcckApi.js";
import * as MOSTY from "@/components/MyComponents/index";
import MyTable from "@/components/aboutTable/DarkTable.vue";
import { reactive, ref,onMounted,getCurrentInstance } from "vue";
const btns = ref(['重点人','重点群体'])
const active = ref('重点人');
const keywords = ref(''); // 搜索关键字
const { proxy } = getCurrentInstance();
const { D_GS_ZDQT_ZT,D_BZ_RYBQ,D_GS_ZDQT_FXDJ } = proxy.$dict('D_GS_ZDQT_ZT','D_BZ_RYBQ','D_GS_ZDQT_FXDJ') //获取字典数据
const pageData = reactive({
  tableData: [],
  keyCount: 0,
  tableConfiger: {
    loading: false,
    rowHieght: 61,
    haveControls: false,
    showSelectType: "null",
    stripe:true
  },
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageNum: 1
  }, //分页
  tableColumn: [
    { label: "姓名", prop: "ryXm", showOverflowTooltip: true },
    { label: "身份证号码", prop: "rySfzh",showOverflowTooltip: true },
    { label: "标签", prop: "bqList",showOverflowTooltip: true,showSolt:true },
    { label: "所属线索", prop: "qbcjList",showOverflowTooltip: true,showSolt:true },
  ]
});

onMounted(() => {
  tabHeightFn();
  getList();
});

// 切换标签
const changeDate = (val) =>{
  active.value = val;
  pageData.pageConfiger.pageNum = 1;
  pageData.tableData = [];
  switch(val){
    case '重点人':
      pageData.tableColumn = [
        { label: "姓名", prop: "ryXm", showOverflowTooltip: true },
        { label: "身份证号码", prop: "rySfzh",showOverflowTooltip: true },
        { label: "标签", prop: "bq",showOverflowTooltip: true },
        { label: "所属线索", prop: "xsmc",showOverflowTooltip: true },
      ];
      break;
    case '重点群体':
      pageData.tableColumn = [
        { label: "群体名称", prop: "qtMc", showOverflowTooltip: true },
        { label: "群体状态", prop: "qtZt",showSolt:true,showOverflowTooltip: true },
        { label: "群体风险等级", prop: "qtFxdj",showSolt:true, showOverflowTooltip: true },
      ];
      break;
  }
  getList();
}

// 搜索
const handleSearch = () => {
  pageData.pageConfiger.pageNum = 1; // 重置页码
  getList();
};

// 滚动分页加载
const changePage = () =>{
  if( pageData.tableConfiger.loading) return; // 防止重复加载
  pageData.pageConfiger.pageNum++;

}

const getList = () => {
  pageData.tableConfiger.loading = true;
  let url = active.value === '重点人' ? '/mosty-gsxt/tbGsxtZdry/selectPage' : '/mosty-gsxt/tbGsxtZdqt/selectPage';
  let params = {
    pageNum: pageData.pageConfiger.pageNum,
    pageSize: pageData.pageConfiger.pageSize,
    keywords: keywords.value,
  };
  qcckGet(params,url).then((res) => {
    console.log(res,'=====');
    
    let arr = res.records || [];
    pageData.tableData = pageData.pageConfiger.pageNum == 1 ? arr :  pageData.tableData.concat(arr);
    pageData.total = res.total;
    pageData.tableConfiger.loading = false;
  }).catch(() => {
    pageData.tableConfiger.loading = false;
  });
};

// 表格高度计算
const tabHeightFn = () => {
  pageData.tableHeight =  document.getElementById('zdrxxtj').offsetHeight - 160;
  window.onresize = function () {
    tabHeightFn();
  };
};

</script>
<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.personBox{
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0 10px;
    box-sizing: border-box;
    .seachBox{
        height: 40px;
        margin: 10px 0;
    }
    ::v-deep .el-input__inner{
        background: rgba(0,22,83,0.4);
        border-radius: 0;
        border: 1px solid #0072FF;
        color: #fff;
        height: 40px;
    }
    ::v-deep .el-button {
        height: 40px;
        border-radius: 0 4px 4px 0;
    }
}
.tabsBtn{
    font-size: 12px;
    padding: 5px 10px;
    background: #17459E;
    border: 1px solid #36A0FF;
    box-shadow: inset 0 0 1px #5D82D9;
}
.active0{
    background: #36A0FF;
    border-radius: 4px 0px 0px 4px;
    border: 1px solid #36A0FF;
}
.active1{
    background: #36A0FF;
    border-radius: 0px 4px 4px 0px;
    border: 1px solid #36A0FF;
}
.transition {
  transition: all 0.5s;
}
</style>
<style lang="scss">
.zdy_peo_table td.el-table__cell {
    color: #ffffff !important;
}
.zdy_peo_table th.el-table__cell {
    color: #ffffff !important;
    font-size: 15px;
}
.zdy_peo_table .el-table__body tr.el-table__row--striped td.el-table__cell{
    background: transparent !important;
}
.zdy_peo_table  .table_blue_row{
    background: linear-gradient( to right, #001D4B 0%, rgba(0,29,75,0.1) 100%) !important;
}
</style>