<template>
  <el-dialog
    :title="props.PoliceType == 'MJ' ? '选择民警' : '选择辅警'"
    width="1400px"
    :model-value="modelValue"
    @close="closed"
  >
    <div>
      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
        <el-form-item label="所属部门">
          <MOSTY.Department
            width="100%"
            clearable
            v-model="listQuery.ssbmdm"
          />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input
            placeholder="请输入姓名"
            v-model="listQuery.xm"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input
            placeholder="请输入身份证号码"
            v-model="listQuery.sfzh"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="handleFilter">查询</el-button>
          <el-button type="info" @click="reset()"> 重置 </el-button>
        </el-form-item>
      </el-form>
      <div class="tabBox" :class="props.Single?'tabBoxRadio':''" style="margin-top: 0px">
        <el-table
          ref="multipleUserRef"
          @selection-change="handleSelectionChange"
          :data="tableData"
          border
          style="width: 100%"
          height="450"
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column
            prop="xm"
            align="center"
            :label="PoliceType == 'MJ' ? '民警姓名' : '辅警姓名'"
          ></el-table-column>
          <el-table-column
            sortable
            prop="sfzh"
            show-overflow-tooltip
            align="center"
            label="身份证号码"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="ssbm"
            label="所属部门"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            prop="jh"
            label="警号"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
      <div class="fenye" :style="{ top: tableHeight + 'px' }">
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.pageCurrent"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closed">取消</el-button>
        <el-button type="primary" @click="onComfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import * as rule from "@/utils/rules.js";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { defineProps, watch, ref, onMounted, nextTick } from "vue";

import { getTbJcglXfll } from "@/api/xfll";
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  roleId: {
    type: String,
    default: ""
  },
  PoliceType: {
    type: String,
    default: ""
  },
  //是否单选
  Single: {
    type: Boolean,
    default: false
  }
});
const total = ref(0);
const listQueryDefault = ref({})
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  ssbmdm:'',
  sfzh:''
});
const multipleUserRef = ref(null);
const multipleSelectionUser = ref([]);
const form = ref({});
const tableData = ref([]);
const emits = defineEmits(["update:modelValue", "choosedPolice"]);
onMounted(()=>{
  listQueryDefault.value = JSON.parse(JSON.stringify(listQuery.value))
  handleFilter()
})

// 查询
function handleFilter () {
  listQuery.value.pageCurrent = 1;
  getListData();
};
// 列表
function getListData () {
  const params = listQuery.value;
  if (props.roleId) params.roleId = props.roleId;
  let lx = props.PoliceType
  params.fl = lx =='MJ'?'01': lx =='FJ'?'02':''
  tableData.value = [];
  getTbJcglXfll(params).then((res)=>{
    tableData.value = res?.records;
    total.value = Number(res.total);
  });
};
// 多选
function handleSelectionChange (val){
  if(props.Single){
    if(val.length>1){
      let del_row = val.shift()
      multipleUserRef.value.toggleRowSelection(del_row,false)
    }
    multipleSelectionUser.value = val;
  }else{
    multipleSelectionUser.value = val;
  }
  
};


// 确定按钮
function onComfirm() {
  const userList = multipleSelectionUser.value
  let params = {userList: userList,type: props.PoliceType};
  if (props.Single) {
    emits("choosedPolice", userList);
  } else {
    emits("choosedPolice", params);
  }
  closed();
};

// 关闭弹窗
function closed() {
  emits("update:modelValue", false);
};

// 重置弹窗
function reset() {
  listQuery.value = JSON.parse(JSON.stringify(listQueryDefault.value))
  getListData();
};

// pageSize 改变触发
function handleSizeChange(currentSize){
  listQuery.value.pageSize = currentSize;
  getListData();
};

// 页码改变触发
function handleCurrentChange (currentPage) {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};




</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";

</style>
<style>
.tabBoxRadio .el-checkbox__inner{
  border-radius: 50% !important;
}
.tabBoxRadio .el-table__header-wrapper .el-checkbox{
  display: none;
}
</style>
