<template>
  <div>
    <div class="titleBox">
      <div class="title">警力报备</div>
      <div class="btnBox">
        <el-button type="primary" @click="add">
          <el-icon style="vertical-align: middle">
            <CirclePlus />
          </el-icon>
          <span style="vertical-align: middle">新增</span>
        </el-button>

        <el-button typeof="danger">
          <el-icon style="vertical-align: middle">
            <Delete />
          </el-icon>
          <span style="vertical-align: middle">批量删除</span>
        </el-button>
      </div>
    </div>
    <div class="searchBox" ref="searchBox">
      <el-form :model="listQuery" :inline="true">
        <el-form-item label="巡防部门">
          <MOSTY.Department
            width="180px"
            clearable
            filterable
            v-model="listQuery.deptIds"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleFilter"> 查询 </el-button>
          <el-button @click="reset()"> 重置 </el-button>
        </el-form-item>
      </el-form>
      <div class="tongji">
        统计人数：在岗民警<span>{{ tongjiData.zgmjs }}</span
        >人， 不在岗民警 <span>{{ tongjiData.bzgmjs }}</span
        >人， 在岗率
        <span>{{ percentage(tongjiData.zgmjs, tongjiData.bzgmjs) }}</span
        >； 在岗辅警 <span>{{ tongjiData.zgfjs }}</span
        >人， 不在岗辅警 <span>{{ tongjiData.bzgfjs }}</span
        >人， 在岗率
        <span>{{ percentage(tongjiData.zgfjs, tongjiData.bzgfjs) }}</span
        >
        <!-- ；街面民警 <span>{{ tongjiData.jmmj }}</span
        >人， 街面辅警 <span>{{ tongjiData.jmfj }}</span
        >人 -->
      </div>
      <div class="echarts">
        <div class="title">统计图表：</div>
        <div class="item" v-for="(item, index) in echdata" :key="index">
          <PieEcharts :data="item.data" :title="item.title" />
        </div>
      </div>
    </div>
    <div class="tabBox">
      <el-table
        :data="tableData"
        border
        ref="dataTreeList"
        row-key="id"
        :tree-props="{ children: 'itemList', hasChildren: true }"
        style="width: 100%"
        :key="keyCount"
        :height="tableHeight"
      >
        <el-table-column
          type="index"
          show-overflow-tooltip
          align="center"
          width="60px"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop=""
          show-overflow-tooltip
          align="center"
          label="所属部门"
        >
        </el-table-column>
        <el-table-column
          prop=""
          show-overflow-tooltip
          align="center"
          label="开始时间"
        >
        </el-table-column>
        <el-table-column
          prop=""
          show-overflow-tooltip
          align="center"
          label="结束时间"
        >
        </el-table-column>
        <el-table-column
          prop=""
          show-overflow-tooltip
          align="center"
          label="在岗民警"
        >
        </el-table-column>
        <el-table-column
          prop=""
          show-overflow-tooltip
          align="center"
          label="在岗辅警"
        >
        </el-table-column>
        <el-table-column
          prop=""
          show-overflow-tooltip
          align="center"
          label="值班民警"
        >
        </el-table-column>
        <el-table-column
          prop=""
          show-overflow-tooltip
          align="center"
          label="值班辅警"
        >
        </el-table-column>
        <el-table-column
          prop=""
          show-overflow-tooltip
          align="center"
          label="不在岗民警"
        >
        </el-table-column>
        <el-table-column
          prop=""
          show-overflow-tooltip
          align="center"
          label="不在岗辅警"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="200px"
        >
          <template #default="{ row }">
            <el-button @click="update(row)" size="small">修改</el-button>
            <el-button type="danger" @click="delDictItem(row)" size="small"
              >注销</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <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>
    <div v-if="dialogFormVisible" class="dialog">
      <div class="head_box">
        <span class="title">{{ title }}</span>
        <div>
          <el-button
            type="primary"
            size="small"
            @click="submit"
            :loading="btnLoading"
            >保存</el-button
          >
          <el-button size="small" @click="close">关闭</el-button>
        </div>
      </div>
      <el-form
        ref="elform"
        :model="form"
        :rules="rules"
        :inline="true"
        label-position="top"
      >
        <div class="from_label">勤务班次</div>
        <el-form-item label="巡防部门" prop="">
          <el-cascader
            v-if="!chackipt"
            style="width: 100%"
            ref="cascader"
            v-model="form.ssbmdm"
            :options="depList"
            :props="props"
            @change="handleChange"
            :show-all-levels="false"
          />
          <el-input
            style="width: 100%"
            v-model="form.ssbm"
            v-if="chackipt"
            @focus="focusF"
          ></el-input>
        </el-form-item>
        <el-form-item label="起止时间" style="width: 48%">
          <el-date-picker
            v-model="qzSj"
            style="width: 100%"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="changeQzSj"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        /></el-form-item>
        <el-form-item style="width: 48%" label="在岗民警" prop="">
          <el-input
            @click="zgMjVisible = true"
            v-model="mjtext"
            placeholder="请选择"
            clearable
            readonly
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item style="width: 48%" label="在岗辅警" prop="">
          <el-input
            @click="zgFjVisible = true"
            v-model="fjtext"
            readonly
            placeholder="请选择"
            clearable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item style="width: 48%" label="值班民警" prop="">
          <el-input
            @click="zbMjVisible = true"
            v-model="mjtext"
            placeholder="请选择"
            clearable
            readonly
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item style="width: 48%" label="值班辅警" prop="">
          <el-input
            @click="zbFjVisible = true"
            v-model="fjtext"
            readonly
            placeholder="请选择"
            clearable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item style="width: 48%" label="不在岗民警" prop="">
          <el-input
            @click="bzgMjVisible = true"
            v-model="mjtext"
            placeholder="请选择"
            clearable
            readonly
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item style="width: 48%" label="不在岗辅警" prop="">
          <el-input
            @click="bzgFjVisible = true"
            v-model="fjtext"
            readonly
            placeholder="请选择"
            clearable
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
    </div>
    <MjLoad v-model="zgMjVisible" @choosedUsers="hanlderChooseZgMj" />
    <FjLoad v-model="zgFjVisible" @choosedUsers="hanlderChooseZgFj" />
    <MjLoad v-model="zbMjVisible" @choosedUsers="hanlderChooseZbMj" />
    <FjLoad v-model="zbFjVisible" @choosedUsers="hanlderChooseZbFj" />
    <MjLoad v-model="bzgMjVisible" @choosedUsers="hanlderChooseBzgMj" />
    <FjLoad v-model="bzgFjVisible" @choosedUsers="hanlderChooseBzgFj" />
  </div>
</template>
    
<script setup>
import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
import FjLoad from "@/components/MyComponents/ChooseJz/FjLoad.vue";
import * as MOSTY from "@/components/MyComponents/index";
import PieEcharts from "./components/PieEcharts.vue";
import { getQwbc } from "@/api/service/shift.js";
import { selectDeptPage } from "@/api/user-manage";
import {
  getJlbb,
  addJlbb,
  deleteJlbb,
  getJlbbInfo,
  updateJlbb,
  getCountBmjlbb
} from "@/api/service/policeForceReport.js";
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const searchBox = ref(null); // 搜索盒子
const tongjiData = ref({});
const qzSj = ref([]);
const tableHeight = ref(); // 表格高度
const cascader = ref(null);
const tableData = ref([]); //表格数据
const depList = ref([]); //部门数据
const chackipt = ref(true);
const btnLoading = ref(false); //按钮截流
const keyCount = ref(0); //tabel组件刷新值
const chooseUserVisible = ref(false);
const chooseList = ref([]);
const qwbaDataList = ref([]);
const title = ref("警力报备");
const elform = ref(null);
const total = ref(0);
const zgMjVisible = ref(false); //在岗民警弹窗
const zgMjData = ref([]);
const zgFjVisible = ref(false); //在岗辅警弹窗
const zgFjData = ref([]);
const bzgMjVisible = ref(false); //不在岗民警弹窗
const bzgMjData = ref([]);
const bzgFjVisible = ref(false); //不在岗辅警弹窗
const bzgFjData = ref([]);
const zbMjVisible = ref(false); //值班民警弹窗
const zbMjData = ref([]);
const zbFjVisible = ref(false); //值班辅警弹窗
const zbFjData = ref([]);
//图表数据
const echdata = ref([
  {
    title: "警种统计",
    data: [
      { value: 0, name: "民警" },
      { value: 0, name: "辅警" },
      { value: 0, name: "特警" },
      { value: 0, name: "交警" },
      { value: 0, name: "辅警" }
    ]
  },
  {
    title: "性别",
    data: [
      { value: 0, name: "男" },
      { value: 0, name: "女" },
      { value: 0, name: "未知" }
    ]
  },
  {
    title: "人员类型",
    data: [
      { value: 0, name: "民警" },
      { value: 0, name: "辅警" }
    ]
  },
  {
    title: "年龄分布",
    data: [
      { value: 0, name: "0~30" },
      { value: 0, name: "31~40" },
      { value: 0, name: "41~50" },
      { value: 0, name: "50以上" }
    ]
  }
]);
const dialogFormVisible = ref(false); //弹窗
//搜索数据
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20
});
//表单数据
const form = ref({});
function changeQzSj() {
  if (qzSj.value.length == 2) {
    form.value.kssj = qzSj.value.length[0];
    form.value.jssj = qzSj.value.length[1];
  }
}
//百分比转化
function percentage(a, b) {
  let data = "--";
  if (a + b == 0) {
    data = "0%";
  } else {
    data = ((a / (a + b)) * 100).toFixed(2) + "%";
  }
  return data != NaN + "%" ? data : "--";
}
//级联选择器配置
const props = {
  expandTrigger: "children",
  children: "childDeptList",
  label: "orgName",
  value: "id",
  checkStrictly: true,
  emitPath: false
};
//表单验证
const rules = reactive({});
//获取警力报备统计数据
function getBbtj() {
  getCountBmjlbb().then((res) => {
    tongjiData.value = res;
    echdata.value[1].data = res.xbtj.map((item) => {
      let name = "未知";
      if (item.type == "1") {
        name = "男";
      } else if (item.type == "2") {
        name = "女";
      }
      return { value: item.sl, name };
    });
    echdata.value[2].data = res.rylxtj.map((item) => {
      return { value: item.sl, name: item.type == "01" ? "民警" : "辅警" };
    });
    echdata.value[3].data = res.nlfbtj.map((item) => {
      let name = "";
      if (item.type == "1") {
        name = "0~30";
      } else if (item.type == "2") {
        name = "31~40";
      } else if (item.type == "3") {
        name = "31~50";
      } else {
        name = "50以上";
      }
      return { value: item.sl, name };
    });
  });
}

//警力弹窗回调
function hanlderChooseZgMj(data) {
}
function hanlderChooseZgFj() {}
function hanlderChooseZbMj() {}
function hanlderChooseZbFj() {}
function hanlderChooseBzgMj() {}
function hanlderChooseBzgFj() {}
//获取列表数据
function getQwbcData() {
  let params = {
    pageCurrent: 1,
    pageSize: 1000
  };
  getQwbc(params).then((res) => {
    qwbaDataList.value = res.records;
  });
}
//搜索
function handleFilter() {
  getListData();
}
//查询条件选择部门
function handleChange(e) {
  let data = cascader.value.getCheckedNodes();
  form.value.ssbm = data[0].text;
  const ids = JSON.parse(JSON.stringify(e));
  form.value.ssbmdm = ids;
}
//重置
function reset() {
  listQuery.value = {
    pageCurrent: 1,
    pageSize: 20
  };
  getListData();
}
//新增表单重置
function resetForm() {
  form.value = {};
}
//新增
function add() {
  chackipt.value = false;
  resetForm();
  title.value = "警力报备";
  dialogFormVisible.value = true;
}
// 选中某个班次
function chooseSomeOne(item) {
  chooseList.value.push(item);
}
function focusF() {
  chackipt.value = false;
}
//删除某个班次
function deleteBc(val) {
  chooseList.value = chooseList.value.filter((item) => {
    return item.id != val.id;
  });
}
//修改
function update() {
  chackipt.value = true;
  resetForm();
  title.value = "警力报备修改";
  dialogFormVisible.value = true;
}
//注销
function delDictItem() {
  proxy.$confirm("确定要删除", "警告", {
    type: "warning"
  });
}
//获取列表数据
function getListData() {
  getJlbb(listQuery.value).then((res) => {
    tableData.value = res.records;
    total.value = res.total;
  });
}
//关闭弹窗
function close() {
  dialogFormVisible.value = false;
  //   formReset();
}
//提交
function submit() {
  elform.value.validate((valid) => {
    if (valid) {
      btnLoading.value = true;
      setTimeout(() => {
        btnLoading.value = false;
      }, 1500);
    }
  });
}
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};
// 表格高度计算
const tabHeightFn = () => {
 tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
};
onMounted(() => {
  selectDeptPage({}).then((res) => {
    depList.value = res.records;
  });
  getBbtj();
  getListData();
  getQwbcData();
  proxy.mittBus.on("mittFn", (data) => {
    keyCount.value = data;
  });
  tabHeightFn();
  window.onresize = function () {
    tabHeightFn();
  };
});
onUnmounted(() => {
  proxy.mittBus.off("mittFn");
});
</script>
    
<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
.min {
  position: relative;
}
.min::after {
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  content: "分钟";
}
.tongji {
  line-height: 28px;
  color: #81c3ed;
  > span {
    font-size: 24px;
    padding: 0 8px;
  }
}
.echarts {
  height: 160px;
  color: #81c3ed;
  display: flex;
  justify-content: space-between;
  .item {
    width: 23%;
  }
}
.chooce-bc {
  width: 100%;
  min-height: 120px;
  box-sizing: border-box;
  display: flex;
  .chooce-bc-top {
    padding: 12px;
    flex: 1;
    border: 1px solid #03438b;
    .bc-title {
      width: 100%;
      height: 30px;
      font-size: 14px;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .colose {
        cursor: pointer;
      }
    }
  }
  .choose-bc-bottom {
    padding: 12px;
    flex: 1;
    border: 1px solid #03438b;
    .bc-title {
      width: 100%;
      height: 30px;
      font-size: 14px;
      color: #fff;
    }
  }
  .chooce-bc-btn-box {
    height: 120px;
    overflow: hidden;
    overflow-y: auto;
    .chooce-bc-btn-item {
      float: left;
      cursor: pointer;
      margin-right: 7px;
      margin-bottom: 4px;
      line-height: 12px;
      text-align: center;
      font-size: 12px;
      padding: 4px;
      background: orange;
      border-radius: 10px;
      .item {
        line-height: 14px;
      }
    }
  }
}
.from_label {
  width: 100%;
  line-height: 2.5em;
  text-indent: -68px;
  font-size: 16px;
}
</style>