<template>
  <div class="bigBox" v-if="modelValue">
    <div class="container" :class="title == '街面巡组-实际列表' ? 'container1' : ''">
      <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-input v-model="listQuery.fzrXm" placeholder="请输入负责人" />
          </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%">
          <el-table-column label="序号" type="index" align="center" width="80" />
          <el-table-column label="部门名称" show-overflow-tooltip align="center" prop="ssbm" />
          <el-table-column label="巡组名称" align="center" prop="jzMc">
            <template #default="{ row }">
              <div v-if="row.jzMc">{{ row.jzMc }}</div>
              <div v-else>{{ row.fzrXm }}巡组</div>
            </template>
          </el-table-column>

          <el-table-column label="报备类型" align="center">
            <template #default="{ row }">
              <dict-tag :options="D_BZ_BBFS" :value="row.bblx" :tag="false" />
            </template>
          </el-table-column>

          <el-table-column label="巡逻时间" align="center" prop="kssj" width="146">
            <template #default="{ row }">
              <div v-show="row.bblx != '02'">{{ row.kssj + "至" + row.jssj }}</div>
            </template>
          </el-table-column>
          <el-table-column label="巡逻车辆" align="center" prop="">
            <template #default="{ row }">
              <el-tag v-for="(item, index) in checkJson(row.pbcl)" :key="index">{{ item }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="负责人" align="center" prop="fzrXm" />

          <template v-if="title == '街面巡组-实际列表'">
            <el-table-column label="巡逻时长" prop="xfsc" align="center" />
            <el-table-column label="巡逻里程" prop="xflc" align="center" />
            <!-- <el-table-column label="接收指令数" align="center" width="95" />
            <el-table-column label="盘查人员数" align="center" width="95" />
            <el-table-column label="盘查车辆数" align="center" width="95" /> -->
          </template>
        </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 { http } from "@/api/service";
import { ref, onMounted, getCurrentInstance, reactive, onUnmounted } from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_BBFS } = proxy.$dict("D_BZ_BBFS");
const timeRange = ref([])
const list = reactive({
  tableData: []
});
const title = ref("");

onMounted(() => {
  emitter.on("showJMXZWindow", (res) => {
    title.value = res == "jh" ? "街面巡组-计划列表" : "街面巡组-实际列表"
    getList();
    modelValue.value = true;
  });
});
function checkJson(e) {
  let data = [];
  if (e) {
    data = JSON.parse(e).map((item) => item.jdchphm);
  }
  return data;
}
onUnmounted(() => {
  emitter.off("showJMXZWindow");
});
const modelValue = ref(false);
const total = ref(0);
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  ssbmdm: "",
  fzrXm: ""
});

const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getList();
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getList();
};

function closeDialog() {
  modelValue.value = false;
  listQuery.value.ssbmdm = "";
  listQuery.value.fzrXm = "";
  listQuery.value.pageCurrent = 1;
  listQuery.value.pageSize = 20;
  timeRange.value = []
  list.tableData = [];
}
// 搜索
function handleFilter() {
  listQuery.value.pageCurrent = 1;
  getList();
}
//重置
function reset() {
  listQuery.value.ssbmdm = "";
  listQuery.value.fzrXm = "";
  listQuery.value.pageCurrent = 1;
  listQuery.value.pageSize = 20;
  timeRange.value = []
  getList();
}

function getList() {
  let pramas = {
    pageNum: listQuery.value.pageCurrent,
    pageSize: listQuery.value.pageSize,
    fzrXm: listQuery.value.fzrXm,
    ssbmdm: listQuery.value.ssbmdm,
  };
  if (timeRange.value.length > 0) {
    pramas.startTime = timeRange.value[0]
    pramas.endTime = timeRange.value[1]
  }
  if (title.value == "街面巡组-计划列表") {
    pramas.xzlx = "01";
    http.getJMXZ(pramas).then((res) => {
      if (res.records) list.tableData = res.records;
      total.value = res.total;
    });
  } else {
    pramas.xzlx = "02";
    http.selectSjjmxzList(pramas).then((res) => {
      if (res.records) {
        res.records.forEach((item) => {
          if (item.xfsc != 0) item.xfsc = (item.xfsc / 3600).toFixed(2) + "/h";
          if (item.xflc != 0) item.xflc = (item.xflc / 1000).toFixed(2) + "/KM";
        });
        list.tableData = res.records;
      }
      total.value = res.total;
    });
  }
}
</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;
    }
  }

  .container1 {
    width: 82%;
  }
}

.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>
