<template>
    <div>
      <!-- 搜索 -->
      <div class="top-search flex">
        <el-select
          v-model="queryParam.personPost"
          filterable
          placeholder="请选择职务"
          size="mini"
          style="width: 25%"
          clearable
        >
          <el-option
            v-for="item in linePatrolPost"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="queryParam.groupNum"
          filterable
          placeholder="请选择组号"
          size="mini"
          style="width: 25%"
          clearable
        >
          <el-option
            v-for="item in linePatrolGroup"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
        <el-input
          v-model="queryParam.personName"
          size="mini"
          placeholder="请输入姓名"
          clearable
          style="width: 30%"
        >
        </el-input>
        <div>
          <el-button  @click="searchTable" size="mini">搜索</el-button>
        </div>
      </div>
      <!-- 列表 -->
      <div class="left-middle-table">
        <el-table
          v-loading="loading"
          :data="nameList"
          @select="select"
          @select-all="all"
          ref="multipleTable"
        >
          <el-table-column v-if='!disabled' type="selection" />
          <el-table-column label="姓名" align="center" prop="personName" />
          <el-table-column label="职务" align="center" prop="personPost" :formatter="postFormatter"/>
          <el-table-column label="组号" align="center" prop="groupNum" :formatter="groupFormatter"/>
        </el-table>
      </div>
    </div>
</template>

<script>
  import { linePatrolPersonList } from "@/api/regulation/person";
  export default {
    name: "people-table",
    props: {
      selectNameList: {
        type: Array,
      },
      disabled: {
        type: Boolean,
      },
    },
    data(){
        return{
          nameList: [],
          linePatrolPost: [],
          linePatrolGroup: [],
          personName: "",
          personPost: "",
          loading: false,
          queryParam:{
            personPost: null,
            personName: null,
            groupNum: null
          }
        }
    },
    created(){
      this.getLinePatrolPost();
      this.getLinePatrolGroup();
      this.getPersonInfo();
    },
    methods:{
      getPersonInfo(){
        this.loading = true;
        linePatrolPersonList(this.queryParam).then(res =>{
          this.loading = false;
          if(res.code == 200 && res.data && res.data.length > 0){
            this.nameList = res.data.filter(item =>(item.personPost != '0' && item.personPost != '1'));
            this.$nextTick((item) => {
                this.selectNameList.forEach((item) => {
                    this.toggleSelection(item.personId, true);
                });
            });
          }
        })
      },
      select(all,row){
        this.$emit("selectOne", all, row);
      },
      all(all){
        let allSelect = false;
        if (all.length == 0 || (all.length == 1 && [0] == undefined)) {
          allSelect = false;
        } else if (all.length > 1) {
          allSelect = true;
        }
        this.$emit("selectAll", this.nameList, allSelect);
      },
      getLinePatrolPost(){
        this.getDicts("t_line_patrol_post").then(response => {
          this.linePatrolPost = response.data.filter(item =>(item.dictCode != 112 && item.dictCode != 113));
      });
      },
      getLinePatrolGroup(){
        this.getDicts("t_line_patrol_group").then(response => {
            this.linePatrolGroup = response.data;
        });
      },
      groupFormatter(row){
        return this.selectDictLabel(this.linePatrolGroup, row.groupNum);
      },
      postFormatter(row){
        return this.selectDictLabel(this.linePatrolPost, row.personPost);
      },
      searchTable(){
        this.getPersonInfo();
      },
      toggleSelection(personId, SeclctFlag = false) {
        const item = this.nameList.find((item) => {
            return item.personId == personId;
        });
        this.$refs.multipleTable.toggleRowSelection(item, SeclctFlag);
      },
    }
  }
</script>

<style scoped lang="scss">
  .top-search {
    margin-bottom: 12px;
    justify-content: space-between;
  }
  .left-middle-table {
    flex: 1;
    // background: red;
    height: 331px;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      /* 设置滚动条宽度 */
      width: 4px;
      /* 设置滚动条背景色 */
      //background: black;
    }

    //滚动条轨道
    &::-webkit-scrollbar-track {
      background-color:transparent;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }

    //滚动条滑块
    &::-webkit-scrollbar-thumb {
      background-color: rgb(147,147,153,0.5);
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }
  }
</style>
