<template>
  <div class="bigBox" v-if="modelValue">
    <div class="container">
      <div class="header">
        <span class="title">{{ title }}</span>
        <span class="close" @click="closeDialog">
          <el-icon :size="22"><CircleClose /></el-icon>
        </span>
      </div>
      <div class="search">
        <el-form ref="formRef" :model="listQuery">
          <el-form-item label="所属部门">
            <MOSTY.Department width="200px" clearable v-model="listQuery.ssbmdm" />
          </el-form-item> &nbsp;&nbsp;
          <el-form-item label=" 时间段">
            <el-date-picker
              v-model="timeRange"
              popper-class="jl-time"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              range-separator="至"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择开始时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button class="serchBtn" @click="handleFilter"> 查询 </el-button>
            <el-button @click="reset()"> 重置 </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="datalist">
        <!-- 盘人 -->
        <el-table
          ref="multipleUserRef"
          :data="list.tableData"
          border
          width="100%"
          height="100%"
          v-if="title == '盘查工作-盘人'"
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80"
          />
          <el-table-column
            prop="xm"
            show-overflow-tooltip
            align="center"
            label="姓名"
          />
          <el-table-column prop="xbdm" align="center" label="性别">
            <template #default="{ row }">
              <dict-tag :options="D_BZ_XB" :value="row.xbdm" :tag="false" />
            </template>
          </el-table-column>
          <el-table-column
            prop="sfzh"
            align="center"
            label="身份证号码"
            show-overflow-tooltip
          />
          <el-table-column
            prop="bqxxsj"
            align="center"
            label="标签名称"
            show-overflow-tooltip
          />
          <el-table-column prop="pcclJgmc" align="center" label="盘查结果" />
          <el-table-column prop="pcsj" label="盘查时间" align="center" />
          <el-table-column prop="pcmjXm" label="盘查民警姓名" align="center" />
          <el-table-column prop="pcmjJh" label="盘查民警警号" align="center" />
          <el-table-column
            prop="ssbm"
            label="所属部门"
            align="center"
            show-overflow-tooltip
          />
        </el-table>
        <!-- 盘车 -->
        <el-table
          ref="multipleUserRef"
          :data="list.tableData"
          border
          width="100%"
          height="100%"
          v-else
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80"
          />
          <el-table-column prop="hphm" align="center" label="号牌号码" />
          <el-table-column prop="jdcsyr" align="center" label="车主" />
          <el-table-column prop="pcclJgmc" align="center" label="盘查结果" />
          <el-table-column prop="pcsj" label="盘查时间" align="center" />
          <el-table-column prop="pcmjXm" align="center" label="盘查民警姓名" />
          <el-table-column prop="pcmjJh" align="center" label="盘查民警警号" />
          <el-table-column prop="ssbm" label="所属部门" align="center" />
        </el-table>
      </div>
      <div class="fenye">
        <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>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import emitter from "@/utils/eventBus.js";
import { getItem } from "@/utils/storage";
import { timeValidate } from "@/utils/time.js";
import { getPcclList, getPcryList } from "@/api/dpApi/home.js";
import { ref, onMounted, onUnmounted, getCurrentInstance, reactive } from "vue";
const timeRange = ref([])
const { proxy } = getCurrentInstance();
const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
const list = reactive({
  tableData: []
});
const title = ref("");
const modelValue = ref(false);
const total = ref(0);
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  ssbmdm: ""
});
onMounted(() => {
  emitter.on("showPCGZWindow", (res) => {
    title.value = res == "pr" ? '盘查工作-盘人': '盘查工作-盘车'
    res == "pr" ? getpcryList(): getpcclList()
    modelValue.value = true;
  });
});
onUnmounted(() => {
  emitter.off("showPCGZWindow");
});

function closeDialog() {
  modelValue.value = false;
  listQuery.value.ssbmdm = "";
  listQuery.value.pageCurrent = 1;
  listQuery.value.pageSize = 20;
  timeRange.value = []
  list.tableData = [];
}
// 搜索
function handleFilter() {
  listQuery.value.pageCurrent = 1;
  title.value == "盘查工作-盘人" ? getpcryList(): getpcclList()
 
}
//重置
function reset() {
  listQuery.value.ssbmdm = "";
  listQuery.value.pageCurrent = 1;
  timeRange.value = []
  handleFilter()
}
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  title.value == "盘查工作-盘人" ? getpcryList(): getpcclList()
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  title.value == "盘查工作-盘人" ? getpcryList(): getpcclList()
};

// 盘人
function getpcryList() {
  let pramas = {
    pageCurrent: listQuery.value.pageCurrent,
    pageSize: listQuery.value.pageSize,
    ssbmdm:listQuery.value.ssbmdm
  };
  if(timeRange.value.length > 0){
    pramas.startTime = timeRange.value[0]
    pramas.endTime = timeRange.value[1]
  }
  getPcryList(pramas).then((res) => {
    list.tableData = res.records;
    total.value = res.total;
    listQuery.value.pageCurrent = res.current;
  });
}

//盘车
function getpcclList() {
  let pramas = {
    pageCurrent: listQuery.value.pageCurrent,
    pageSize: listQuery.value.pageSize,
    ssbmdm:listQuery.value.ssbmdm
  };
  getPcclList(pramas).then((res) => {
    list.tableData = res.records;
    total.value = res.total;
    listQuery.value.pageCurrent = res.current;
  });
}
</script>

<style lang="scss" scoped>
.bigBox {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99;
  .container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 80%;
    height: 80vh;
    background: #052342;
    padding: 0 20px;
    .header {
      width: 100%;
      height: 60px;
      line-height: 60px;
      .title {
        float: left;
        font-size: 16px;
      }
      .close {
        float: right;
        font-size: 16px;
        cursor: pointer;
      }
    }
    .datalist {
      height: 60vh;
    }
    .fenye {
      height: 60px;
    }
  }
}
.el-form {
  display: flex;
}
.serchBtn {
  margin-left: 20px;
}
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
::v-deep .el-form-item{
  align-items: center;
}
::v-deep .el-input__inner{
  margin: 0 !important;
}
</style>
