<template>
  <div>
    <!-- 头部 -->
    <div class="titleBox">
      <div class="title">值班排班</div>
      <div class="btnBox">
        <el-button type="primary" @click="addDate('more')">
          <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
          <span style="vertical-align: middle">批量新增</span>
        </el-button>
        <el-button typeof="danger" @click="dleteDate">
          <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
            :placeholder="placeholder"
            width="200px"
            clearable
            filterable
            v-model="listQuery.ssbmid"
          />
        </el-form-item>
        <el-form-item label="起止时间">
          <el-date-picker
            v-model="timeList"
            type="daterange"
            clearable
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="getListData"> 查询 </el-button>
          <el-button @click="reset"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格内容 -->
    <div class="tabBox">
      <el-table
        :data="tableData"
        border
        row-key="id"
        style="width: 100%"
        :key="keyCount"
        :height="tableHeight"
        v-loading="loadingtable"
        element-loading-background="rgba(0,0,0,0.3)"
        element-loading-text="数据加载中。。"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column
          type="index"
          show-overflow-tooltip
          align="center"
          width="60px"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="ssbm"
          show-overflow-tooltip
          align="center"
          label="值班部门"
        >
        </el-table-column>
        <el-table-column
          prop="zbmc"
          show-overflow-tooltip
          align="center"
          label="值班名称"
        >
        </el-table-column>
        <el-table-column
          prop="zbpbksrq"
          show-overflow-tooltip
          align="center"
          sortable
          label="开始日期"
        >
        </el-table-column>
        <el-table-column
          prop="zbpbjsrq"
          show-overflow-tooltip
          align="center"
          sortable
          label="结束日期"
        >
        </el-table-column>
        <el-table-column
          prop="mrbc"
          show-overflow-tooltip
          align="center"
          label="班次数量"
        >
          <template #default="{ row }">
            <el-tag
              class="mx-1"
              v-for="item in bcslOptions"
              v-show="item.value == row.mrbc"
              :key="item.value"
              >{{ item.label }}</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column
          prop="xhlx"
          show-overflow-tooltip
          align="center"
          label="排班类型"
        >
          <template #default="{ row }">
            <dict-tag :options="D_BZ_PBXHLX" :value="row.xhlx"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template #default="{ row }">
            <el-button @click="upDown(row)" size="small">预览</el-button>
            <el-button @click="update(row.id, 'eidt')" size="small"
              >修改</el-button
            >
            <el-button type="danger" @click="delDictItem(row.id)" 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="dialogFormVisibleMore" class="dialog">
      <div class="head_box">
        <span class="title">{{ title }}</span>
        <div>
          <el-button
            type="primary"
            size="small"
            :loading="btnLoading"
            @click="submit"
            >保存</el-button
          >
          <el-button size="small" @click="closeDialog">关闭</el-button>
        </div>
      </div>
      <el-form
        ref="elform"
        :model="formData"
        :rules="rules"
        :inline="true"
        label-position="top"
      >
        <el-row class="top_header">
          <el-form-item label="值班部门" prop="ssbmdm">
            <MOSTY.Department
              :placeholder="formData.ssbm"
              width="200px"
              clearable
              filterable
              v-model="formData.ssbmdm"
            />
          </el-form-item>
          <el-form-item label="排班名称" prop="zbmc">
            <el-input
              v-model="formData.zbmc"
              placeholder="请填写排班名称"
            ></el-input>
          </el-form-item>
          <el-form-item prop="zbpbksrq" label="开始日期">
            <el-date-picker
              style="width: 100%"
              v-model="formData.zbpbksrq"
              placeholder="请选择开始日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item
            prop="zbpbjsrq"
            label="结束日期"
            v-if="formData.jsrqlx != '0'"
          >
            <el-date-picker
              style="width: 100%"
              v-model="formData.zbpbjsrq"
              placeholder="请选择结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="有无期限">
            <el-radio-group v-model="formData.jsrqlx">
              <el-radio label="0" size="large">无期限</el-radio>
              <el-radio label="1" size="large">有期限</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item style="width: 48%" label="循环周期">
            <el-radio-group v-model="formData.xhzq" @change="chooceDay">
              <el-radio :label="1">1天</el-radio>
              <el-radio :label="2">2天</el-radio>
              <el-radio :label="3">3天</el-radio>
              <el-radio :label="7">一周</el-radio>
              <el-radio :label="0">自定义</el-radio>
              <el-input-number
                v-model="dayCount"
                :min="1"
                @change="handleCOuntDay"
                :max="10"
                :disabled="formData.xhzq != 0"
              />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="每日班次数量" prop="mrbc">
            <el-select
              v-model="formData.mrbc"
              placeholder="请选择每日班次数量"
              @change="chooseBc"
            >
              <el-option
                v-for="item in bcslOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="值班类型" prop="xhlx">
            <el-select v-model="formData.xhlx" placeholder="请选择值班类型">
              <el-option
                v-for="item in D_BZ_PBXHLX"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-col :span="12">
            <el-form-item label="值班描述" style="width: 147%">
              <el-input placeholder="请填写值班描述" v-model="formData.zbms" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="check_btn">
          <div class="check_b">
            <el-button
              v-show="formData.xhzq >= i || dayCount >= i"
              :class="checkDay === i ? 'active' : ''"
              v-for="i in 10"
              :key="i + 'day'"
              size="small"
              @click="changeDay(i)"
              >第{{ i }}天</el-button
            >
          </div>
        </div>
        <el-row
          class="main_contain"
          v-for="(item, index) in list.zbList"
          :key="index"
        >
          <el-row
            v-show="checkDay == v.zbzq"
            v-for="(v, i) in item.mrbclist"
            :key="i"
            class="zbbcList"
          >
            <div
              v-for="(num, numi) in [
                '第一班',
                '第二班',
                '第三班',
                '第四班',
                '第五班',
                '第六班'
              ]"
              :key="num"
              class="main_contain_title"
              v-show="i === numi"
            >
              <div class="title_l"></div>
              <span>{{ num }}</span>
              <div class="title_r"></div>
            </div>
            <div style="display: flex; flex-wrap: wrap">
              <el-form-item label="值班领导">
                <el-input
                  clearable
                  @click="handleChoose(index, i, 'zzld')"
                  style="width: 100%"
                  v-model="v.zbldXm"
                  placeholder="请选择值班领导"
                ></el-input>
              </el-form-item>
              <el-form-item prop="zbzhzXm" label="值班指挥长">
                <el-input
                  clearable
                  @click="handleChoose(index, i, 'zhz')"
                  style="width: 100%"
                  v-model="v.zbzhzXm"
                  placeholder="请选择值班指挥长"
                ></el-input>
              </el-form-item>
              <el-form-item prop="zzzhzXm" label="专职指挥长">
                <el-input
                  clearable
                  style="width: 100%"
                  v-model="v.zzzhzXm"
                  @click="handleChoose(index, i, 'zzzhz')"
                  placeholder="请选择专职指挥长"
                ></el-input>
              </el-form-item>
              <el-form-item prop="fzzbXm" label="法制值班">
                <el-input
                  clearable
                  style="width: 100%"
                  v-model="v.fzzbXm"
                  @click="handleChoose(index, i, 'fzzb')"
                  placeholder="请选择法制值班"
                ></el-input>
              </el-form-item>
              <el-form-item prop="zbldDh" label="值班领导电话">
                <el-input
                  style="width: 100%"
                  v-model="v.zbldDh"
                  placeholder="请填写值班电话"
                ></el-input>
              </el-form-item>
              <el-form-item prop="hh" label="呼号">
                <el-input
                  style="width: 100%"
                  v-model="v.hh"
                  placeholder="请填写呼号"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="值班民警"
                @click.stop="choosePolice('MJ', index, i)"
              >
                <div :class="v.mjList.length === 0 ? 'ipt mj' : 'ipt'">
                  <el-tag
                    v-for="tag in v.mjList"
                    :key="tag.id"
                    class="mx-1"
                    closable
                    :type="tag.type"
                    @close="handleClose(tag, 'mj', index, i)"
                  >
                    {{ tag.jlxm }}
                  </el-tag>
                </div>
              </el-form-item>
              <el-form-item
                label="值班辅警"
                @click.stop="choosePolice('FJ', index, i)"
              >
                <div :class="v.fjList.length === 0 ? 'ipt fj' : 'ipt'">
                  <el-tag
                    v-for="tag in v.fjList"
                    :key="tag.id"
                    class="mx-1"
                    closable
                    :type="tag.type"
                    @close="handleClose(tag, 'fj', index, i)"
                  >
                    {{ tag.jlxm }}
                  </el-tag>
                </div>
              </el-form-item>
              <el-form-item style="width: 100%" prop="qwbcid" label="值班班次">
                <el-radio-group v-model="v.qwbcid" @change="setQwbc(v)">
                  <el-radio
                    v-for="item in qwbaDataList"
                    :key="item.id"
                    :label="item.id"
                  >
                    <div class="tags" :style="{ borderColor: item.bcys }">
                      <span>{{ setHm(item.kssj) }}-{{ setHm(item.jssj) }}</span>
                      <span>{{ item.bcmc }}</span>
                    </div>
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="kssj" label="开始时间">
                <el-time-picker
                  style="width: 100%"
                  @change="changeZqsc(v.kssj, v.jssj, index, i)"
                  v-model="v.kssj"
                  format="HH:mm:ss"
                  value-format="HH:mm:ss"
                  placeholder="请选择开始时间"
                />
              </el-form-item>
              <el-form-item prop="jssj" label="结束时间">
                <el-time-picker
                  style="width: 100%"
                  @change="changeZqsc(v.kssj, v.jssj, index, i)"
                  format="HH:mm:ss"
                  value-format="HH:mm:ss"
                  v-model="v.jssj"
                  placeholder="请选择结束时间"
                />
              </el-form-item>
              <el-form-item prop="zbsc" label="值班时长">
                <el-input
                  class="min"
                  readonly
                  v-model="v.zbsc"
                  style="width: 100%"
                />
              </el-form-item>
              <div class="zblistLine"></div>
            </div>
          </el-row>
        </el-row>

        <el-form-item label="备注" style="width: 100%">
          <el-input
            v-model="formData.bz"
            placeholder="请输入关键字"
            show-word-limit
            type="textarea"
        /></el-form-item>
      </el-form>
    </div>
    <ChooseUser
      v-model="chooseUserVisible"
      :LeaderType="LeaderType"
      @choosedUsersLeader="hanlderChoose"
    ></ChooseUser>
    <template v-if="PoliceType == 'MJ'">
      <MjLoad v-model="choosePoliceVisible" @choosedUsers="choosedPolice" />
    </template>
    <template v-else>
      <FjLoad v-model="choosePoliceVisible" @choosedUsers="choosedPolice" />
    </template>
    <DownLoad :key="downKey" v-model="Activedown" :data="downData" />
  </div>
</template>

<script setup>
import DownLoad from "./downXlsx.vue";
import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
import FjLoad from "@/components/MyComponents/ChooseJz/FjLoad.vue";
import * as MOSTY from "@/components/MyComponents/index";
import ChooseUser from "@/components/MyComponents/ChooseUser";
import ChoosePolice from "@/components/MyComponents/choosePolice";
import { selectDeptPage } from "@/api/user-manage";
import { getItem } from "@/utils/storage";
import { getQwbc } from "@/api/service/shift.js";
import router from "@/router";
import { useRoute } from "vue-router";
import { getDict, setCascader } from "@/utils/dict";
import {
  zbPbAdd,
  zbPbLook,
  zbPbDetail,
  zbPbUpdate,
  zbPbDelete
} from "@/api/service/shifTscheduling.js";
import {
  ref,
  reactive,
  onMounted,
  onUnmounted,
  getCurrentInstance,
  onBeforeMount,
  nextTick
} from "vue";
const downKey = ref(1);
const Activedown = ref(false);
const { proxy } = getCurrentInstance();
const { D_BZ_PBXHLX } = proxy.$dict("D_BZ_PBXHLX");
const checkDay = ref(1);
const checkB = ref(1);
const searchBox = ref(null); // 搜索盒子
const tableHeight = ref(); // 表格高度
const tableData = ref([]); //表格数据
const loadingtable = ref(false); //表格加载
const timeList = ref([]); //搜索时间
const listQuery = ref({ pageCurrent: 1, pageSize: 10 }); //搜索数据
const title = ref("");
const dialogFormVisibleOne = ref(false); //单个添加的弹窗
const dialogFormVisibleMore = ref(false); //多个添加的弹窗
const btnLoading = ref(false); //弹窗的加载
const depList = ref([]); //部门数据
const mjList = ref([]); //民警列表
const total = ref(0);
const fjList = ref([]); //辅警列表
const qwbaDataList = ref([]); //值班班次
const chooseUserVisible = ref(false); //值班领导弹窗
const choosePoliceVisible = ref(false); //民警\辅警弹窗
const PoliceType = ref(""); //民警辅警弹窗
const LeaderType = ref(""); //领导弹窗
const cascader = ref("");
const elform = ref(null);
const ids = ref([]); //批量删除的ID
const downData = ref({});
const placeholder = ref("请选择部门"); //placeholder语法
const InNum = reactive({
  numl: "",
  num2: ""
}); //下标
function changeDay(e) {
  checkDay.value = e;
  checkB.value = 1;
}
//级联选择器配置
const props = {
  expandTrigger: "children",
  children: "childDeptList",
  label: "orgName",
  value: "id",
  checkStrictly: true,
  emitPath: false
};
const form = ref({
  jsrqlx: "0",
  mrbc: 1
}); //表单数据单个
//导出预览
function upDown(row) {
  downData.value = row;
  Activedown.value = true;
  downKey.value++;
}
const dayCount = ref(1); //天数
const formData = ref({
  jsrqlx: "0",
  mrbc: 1,
  xhzq: 1
}); //多单数据表单

let dataCopy = ref({
  zbldXm: "",
  zbzhzXm: "",
  zzzhzXm: "",
  fzzbXm: "",
  zbldDh: "",
  hh: "",
  qwbcid: "",
  kssj: "",
  jssj: "",
  zbsc: "",
  mjList: [],
  fjList: []
});
const list = reactive({
  zbList: [
    {
      mrbclist: [{ ...dataCopy.value, zbzq: 1, bcs: 1 }]
    }
  ]
});

//班次数量
const bcslOptions = ref([
  {
    value: 1,
    label: "一班"
  },
  {
    value: 2,
    label: "二班"
  },
  {
    value: 3,
    label: "三班"
  },
  {
    value: 4,
    label: "四班"
  },
  {
    value: 5,
    label: "五班"
  },
  {
    value: 6,
    label: "六班"
  }
]); // 每日班次

// 排班类型
const pblxOptions = ref([
  {
    value: "1",
    label: "每日循环"
  },
  {
    value: "2",
    label: "工作日循环"
  },
  {
    value: "3",
    label: "节假日循环"
  }
]);

//表单验证
const rules = ref({
  zbpbksrq: [
    {
      required: true,
      message: "请选择开始日期",
      trigger: "change"
    }
  ],
  zbpbjsrq: [
    {
      required: true,
      message: "请选择结束日期",
      trigger: "change"
    }
  ],
  ssbmdm: [
    {
      required: true,
      message: "请选择值班部门",
      trigger: "change"
    }
  ],
  xhzq: [
    {
      required: true,
      message: "请选择循环周期",
      trigger: "change"
    }
  ],
  mrbc: [
    {
      required: true,
      message: "请选择每日班次数量",
      trigger: "change"
    }
  ],
  xhlx: [
    {
      required: true,
      message: "请选择排班类型",
      trigger: "change"
    }
  ]
});
const getSysMenuTree = async (deptId) => {
  const params = {
    menuName: "",
    current: 1,
    size: 100
  };
  const res = await selectDeptPage(params);
  depList.value = res?.records;
  setCascader(deptId, depList.value, "childDeptList", (e) => {
    placeholder.value = e.orgName;
  });
};

onMounted(() => {
  let time = useRoute().query.time;
  let deptId = useRoute().query.bm;
  getSysMenuTree(deptId);
  if (time) {
    timeList.value = [time, time];
    listQuery.value.zbpbksrq = timeList.value[0];
    listQuery.value.zbpbjsrq = timeList.value[1];
    let dept = getItem("deptId");
    listQuery.value.ssbmid = deptId;
    getListData();
  }
  getListData(); // 获取列表
  getQwbcData(); //获取勤务班次数据
  tabHeightFn();
  window.onresize = function () {
    tabHeightFn();
  };
});

//获取列表数据
function getListData() {
  loadingtable.value = true;
  const query = JSON.parse(JSON.stringify(listQuery.value));
  if (timeList.value) {
    query.zbpbksrq = timeList.value[0];
    query.zbpbjsrq = timeList.value[1];
  }
  zbPbLook(query)
    .then((res) => {
      loadingtable.value = false;
      tableData.value = res.records;
      total.value = res.total;
    })
    .catch(() => {
      loadingtable.value = false;
    });
}

//查询条件选择部门
function handleChange(e) {
  let data = cascader.value.getCheckedNodes();
  formData.value.ssbm = data[0].label;
}
//提交
function submit() {
  elform.value.validate((valid) => {
    if (valid) {
      let isZbld = true;
      list.zbList.forEach((c) => {
        c.mrbclist.forEach((v) => {
          if (!v.zbldXm) {
            isZbld = false;
          }
        });
      });
      if (!isZbld) {
        proxy.$message({
          type: "error",
          message: "请选择值班领导"
        });
      } else {
        btnLoading.value = true;
        let data = JSON.parse(JSON.stringify(formData.value));
        data.ssbmid = data.ssbmdm;
        if (data.xhzq === 0) {
          data.xhzq = dayCount.value;
        }
        let arr = [];
        list.zbList.forEach((item, i) => {
          item.mrbclist.forEach((v, t) => {
            v.zbzq = i + 1;
            v.bcs = t + 1;
            v.jlList = v.mjList.concat(v.fjList);
            arr.push(v);
          });
        });
        data.pbzqList = arr;
        if (title.value == "批量新增值班排班") {
          zbPbAdd(data)
            .then((res) => {
              proxy.$message({
                type: "success",
                message: "新增成功"
              });
              dialogFormVisibleMore.value = false;
              btnLoading.value = false;
              getListData();
            })
            .catch(() => {
              btnLoading.value = false;
            });
        }
        if (title.value == "修改值班排班") {
          zbPbUpdate(data)
            .then((res) => {
              proxy.$message({
                type: "success",
                message: "编辑成功"
              });
              dialogFormVisibleMore.value = false;
              btnLoading.value = false;
              getListData();
            })
            .catch(() => {
              btnLoading.value = false;
            });
        }
      }
    }
  });
}
// 表格高度计算
const tabHeightFn = () => {
 tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
};

// 添加数据
function addDate(val) {
  //批量添加
  title.value = "批量新增值班排班";
  dialogFormVisibleMore.value = true;
  let deptData = getItem("deptId");
  formData.value = {
    jsrqlx: "0",
    mrbc: 1,
    xhzq: 1
  };
  dayCount.value = 1;
  list.zbList = [
    {
      mrbclist: [{ ...dataCopy.value, zbzq: 1, bcs: 1 }]
    }
  ];
  formData.value.ssbmdm = deptData[deptData.length - 1].deptId;
  formData.value.ssbm = deptData[deptData.length - 1].deptName;
}
// 编辑
function update(id, type) {
  checkDay.value = 1;
  checkB.value = 1;
  title.value = "修改值班排班";
  dialogFormVisibleMore.value = true;
  getDetail(id);
}

// 通过id获取详情
function getDetail(id) {
  zbPbDetail(id).then((res) => {
    formData.value.ssbmdm = parseInt(res.ssbmid);
    formData.value.ssbm = res.ssbm;
    formData.value.id = res.id;
    formData.value.zbms = res.zbms;
    formData.value.xhlx = res.xhlx;
    formData.value.zbmc = res.zbmc;
    formData.value.xhzq = [1, 2, 3, 7].includes(res.xhzq) ? res.xhzq : 0;
    if (res.zbpbjsrq === "2099-12-31") {
      formData.value.zbpbjsrq = null;
    } else {
      formData.value.zbpbjsrq = res.zbpbjsrq;
    }
    formData.value.zbpbksrq = res.zbpbksrq;
    formData.value.jsrqlx = res.jsrqlx;
    formData.value.bz = res.bz;
    formData.value.mrbc = res.mrbc;
    dayCount.value = res.xhzq;
    let list1 = [];
    let arr = [];
    arr = uprequrie(res.pbzqList)
      .map((item) => {
        return {
          ...item,
          x: item.zbzq * res.mrbc - res.mrbc + item.zbzq
        };
      })
      .sort(sortBy("x"));
    arr.forEach((item, index) => {
      let obj1 = {
        mrbclist: []
      };
      res.pbzqList.forEach((v, t) => {
        if (item.zbzq == v.zbzq) {
          let mjList1 = [];
          let fjlist1 = [];
          item.jlList.forEach((c) => {
            if (c.jllx == "01") {
              mjList1.push(c);
            }
            if (c.jllx == "02") {
              fjlist1.push(c);
            }
          });
          v.mjList = mjList1;
          v.fjList = fjlist1;
          obj1.mrbclist.push(v);
        }
      });
      obj1.mrbclist.sort(sortBy("bcs"));
      list1.push(obj1);
    });
    list.zbList = list1;
  });
}
function sortBy(field) {
  //根据传过来的字段进行排序
  return (x, y) => {
    return x[field] - y[field];
  };
}
// 去重
function uprequrie(arr, type) {
  let obj = {};
  let mewArr = arr.reduce((item, next) => {
    obj[next.zbzq] ? "" : (obj[next.zbzq] = true && item.push(next));
    return item;
  }, []);
  return mewArr;
}

// 选择领导menq
function handleChoose(num1, num2, type) {
  InNum.num1 = num1;
  InNum.num2 = num2;
  LeaderType.value = type;
  chooseUserVisible.value = true;
}

//选则民警、辅警
function choosePolice(type, num1, num2) {
  InNum.num1 = num1;
  InNum.num2 = num2;
  PoliceType.value = type;
  choosePoliceVisible.value = true;
}

//用户领导
function hanlderChoose(users) {
  let type = users.type;
  const user = users.userList;
  list.zbList.forEach((item, i) => {
    if (i == InNum.num1) {
      item.mrbclist.forEach((v, t) => {
        if (t == InNum.num2) {
          if (type == "zzld") {
            v.zbldXm = user[0].userName;
            v.zbldId = user[0].id;
            v.zbldDh = user[0].mobile;
            v.zbldSfzh = user[0].idEntityCard;
          }
          if (type == "zhz") {
            v.zbzhzXm = user[0].userName;
            v.zbzhzDh = user[0].mobile;
            v.zbzhzId = user[0].id;
            v.zbzhzSfzh = user[0].idEntityCard;
          }
          if (type == "zzzhz") {
            v.zzzhzXm = user[0].userName;
            v.zzzhzDh = user[0].mobile;
            v.zzzhzId = user[0].id;
            v.zzzhzSfzh = user[0].idEntityCard;
          }
          if (type == "fzzb") {
            v.fzzbXm = user[0].userName;
            v.fzzbDh = user[0].mobile;
            v.fzzbId = user[0].id;
            v.fzzbSfzh = user[0].idEntityCard;
          }
          if (type == "MJ") {
            v.mjList = user.map((item) => {
              return {
                jlId: item.id,
                jllx: "01",
                jlxm: item.userName,
                sfzh: item.idEntityCard,
                xbdm: item.sex,
                lxdh: item.mobile
              };
            });
          }
        }
      });
    }
  });
  InNum.num1 = "";
  InNum.num2 = "";
}

// 选择辅警\民警
function choosedPolice(police) {
  list.zbList.forEach((item, i) => {
    if (i == InNum.num1) {
      item.mrbclist.forEach((v, t) => {
        if (t == InNum.num2) {
          if (PoliceType.value == "MJ") {
            v.mjList = police.map((item) => {
              return {
                jlId: item.ryid,
                jllx: item.fl,
                jlxm: item.xm,
                sfzh: item.sfzh,
                xbdm: item.xbdm,
                lxdh: item.lxdh
              };
            });
          } else {
            v.fjList = police.map((item) => {
              return {
                jlId: item.id,
                jllx: item.fl,
                jlxm: item.xm,
                sfzh: item.sfzh,
                xbdm: item.xbdm,
                lxdh: item.lxdh
              };
            });
          }
        }
      });
    }
  });
  InNum.num1 = "";
  InNum.num2 = "";
}

function changeZqsc(kssj, jssj, index, i) {
  if (kssj && jssj) {
    let h = kssj.split(":")[0] * 1;
    let m = kssj.split(":")[1] * 1;
    let endh = jssj.split(":")[0] * 1;
    let endm = jssj.split(":")[1] * 1;
    let sc = endh * 60 + endm - (h * 60 + m);
    if (sc <= 0) {
      sc += 60 * 24;
    }
    list.zbList[index].mrbclist[i].zbsc = sc;
  }
}
//民警辅警删除
function handleClose(tag, type, index, i) {
  if (type == "mj") {
    const n = list.zbList[index].mrbclist[i].mjList.indexOf(tag);
    list.zbList[index].mrbclist[i].mjList.splice(n, 1);
  } else {
    const n = list.zbList[index].mrbclist[i].fjList.indexOf(tag);
    list.zbList[index].mrbclist[i].fjList.splice(n, 1);
  }
}

//选择天数
function chooceDay(val) {
  dayCount.value = val;
  checkDay.value = 1;
  checkB.value = 1;
  let arr = [];
  if (val !== 0) {
    for (let i = 0; i < val; i++) {
      let obj = {
        mrbclist: [{ ...dataCopy.value }]
      };
      arr.push(obj);
    }
    list.zbList = arr;
  } else {
    const num = list.zbList.length;
    dayCount.value = num;
    handleCOuntDay(num);
  }
  chooseBc(formData.value.mrbc);
}
// 自定义天数
function handleCOuntDay(val) {
  checkDay.value = 1;
  checkB.value = 1;
  let arr = [];
  for (let i = 0; i < val; i++) {
    let obj = {
      mrbclist: [{ ...dataCopy.value }]
    };
    arr.push(obj);
  }
  list.zbList = arr;
  chooseBc(formData.value.mrbc);
}

//选择每日班次数量
function chooseBc(val) {
  //记录上一次zbzq及bcs
  const copyBcs = list.zbList[0].mrbclist.length;
  const copyZbzq = list.zbList.length;
  checkDay.value = 1;
  checkB.value = 1;
  // //如果是减少则直接删除每天对应班次
  // if(val<=copyBcs){
  //   for(let i = 0;i<copyZbzq;i++){
  //     for(let j = 0;j<copyBcs-val;j++){
  //       list.zbList[i].mrbclist = list.zbList[i].mrbclist.filter(item=>item.bcs!==val+j+1)
  //     }
  //   }
  // }else{
  //   //如果增加则在每天数据基础上push
  //   for (let j = 0; j < list.zbList.length; j++) {
  //     let arr = [];
  //     for (let i = 0; i < val; i++) {
  //       arr.push({ ...dataCopy.value,zbzq:j+1,bcs:i+1 });
  //     }
  //     list.zbList[j].mrbclist = arr;
  //   }
  // }
  for (let j = 0; j < list.zbList.length; j++) {
    let arr = [];
    for (let i = 0; i < val; i++) {
      arr.push({ ...dataCopy.value, zbzq: j + 1, bcs: i + 1 });
    }
    list.zbList[j].mrbclist = arr;
  }
}

function setQwbc(item) {
  qwbaDataList.value.forEach((v) => {
    if (v.id == item.qwbcid) {
      item.kssj = v.kssj;
      item.jssj = v.jssj;
      item.qwbcid = v.id;
      item.zbsc = v.zbsc;
    }
  });
}
// // 获取勤务班次数据
function getQwbcData() {
  let params = {
    pageCurrent: 1,
    pageSize: 1000,
    bclx: "01"
  };
  getQwbc(params).then((res) => {
    qwbaDataList.value = res.records.map((item) => {
      return {
        bcys: item.bcys,
        kssj: item.kssj,
        jssj: item.jssj,
        id: item.id,
        zbsc: item.zqsc,
        bcmc: item.bcmc
      };
    });
  });
}

// 关闭弹窗
function closeDialog() {
  dialogFormVisibleMore.value = false;
}

//执勤时长验证
function checkZbsc(rule, value, callback) {
  if (value <= 0) {
    return callback(new Error("请选择正确的时间范围"));
  } else {
    callback();
  }
}
// 时分秒截取
function setHm(item) {
  return item.split(":")[0] + ":" + item.split(":")[1];
}
//批量数据
const handleSelectionChange = (val) => {
  ids.value = [];
  if (val) {
    val.forEach((item) => {
      ids.value.push(item.id);
    });
  }
};
function dleteDate() {
  batchDelete(ids.value);
}
function delDictItem(id) {
  batchDelete([id]);
}
// 删除的方法
//批量删除数据
const batchDelete = (id) => {
  proxy
    .$confirm("确定要删除", "警告", {
      type: "warning"
    })
    .then(() => {
      zbPbDelete(id).then((res) => {
        proxy.$message({
          message: "删除成功",
          type: "success"
        });
        getListData();
      });
    })
    .catch(() => {
      proxy.$message.info("已取消");
    });
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};
function handleTime(val) {
  if (val) {
    listQuery.value.zbpbksrq = val[0];
    listQuery.value.zbpbjsrq = val[1];
  } else {
    listQuery.value.zbpbksrq = "";
    listQuery.value.zbpbjsrq = "";
  }
}
// 重置
function reset() {
  listQuery.value = { pageCurrent: 1, pageSize: 10, ssbmid: "" };
  timeList.value = [];
  listQuery.value.ssbmid = "";
  placeholder.value = "请选择部门";
  getListData();
  router.push("/shifTscheduling/index");
}
</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: "分钟";
}
.chooce-bc {
  width: 100%;
  min-height: 300px;
  border: 1px solid #03438b;
  padding: 4px 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .chooce-bc-top {
    height: 150px;
    .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-line {
    width: 100%;
    height: 1px;
    background: #6d6f73;
  }
  .choose-bc-bottom {
    height: 150px;
    .bc-title {
      width: 100%;
      height: 30px;
      font-size: 14px;
      color: #fff;
    }
  }
  .chooce-bc-btn-box {
    height: 118px;
    overflow: hidden;
    overflow-y: auto;
    .chooce-bc-btn-item {
      border: 2px solid;
      float: left;
      cursor: pointer;
      margin-right: 7px;
      margin-bottom: 4px;
      line-height: 12px;
      text-align: center;
      font-size: 12px;
      padding: 4px;
      border-radius: 10px;
      .item {
        line-height: 14px;
      }
    }
  }
}
.tags {
  padding: 4px 12px;
  border-radius: 4px;
  color: #fff;
  border: 2px solid;
  display: flex;
  flex-direction: column-reverse;
  align-content: center;
  align-items: center;
  > span {
    line-height: 1em;
    font-size: 12px;
  }
}
.ipt {
  border: 1px solid rgb(7, 85, 188);
  width: 100%;
  line-height: 32px;
  min-height: 32px;
  border-radius: 4px;
  position: relative;
  background: #001238;
}
.mj::after {
  content: "请选择值班民警";
  position: absolute;
  top: 0;
  left: 12px;
  color: #c0c4cc;
}
.fj::after {
  content: "请选择值班辅警";
  position: absolute;
  top: 0;
  left: 12px;
  color: #c0c4cc;
}
.min {
  position: relative;
}
.min::after {
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  content: "分钟";
}
.jgtitle {
  position: relative;
  padding-top: 20px;
  width: 100%;
  margin: 0 1%;
  height: 32px;
  line-height: 32px;
  background: #023774;
  padding: 0 10px 0 12px;
  border-left: 3px solid #1e7ce7;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  &::v-deep .el-icon {
    margin-top: 9px;
  }
}
.jgBc {
  padding: 2px 8px;
  border-radius: 2px;
  color: #fff;
  background: #03438b;
  margin: 0 0 10px 10px;
}
.top_header {
  background-image: url("~@/assets/xfbb.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 20px 20px 0 20px;
}
.zbbcList {
  margin-bottom: 12px;
  background-image: url("~@/assets/images/layout/paiban_bg.png");
  padding: 12px 0;
  background-size: 100% 100%;
  .main_contain_title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    > span {
      margin: 0 18px;
    }
    .title_l {
      height: 14px;
      width: 120px;
      background-image: url("~@/assets/images/layout/paiban_title_bg.png");
      background-size: 100% 100%;
      transform: rotate(180deg);
    }
    .title_r {
      height: 14px;
      width: 120px;
      background-image: url("~@/assets/images/layout/paiban_title_bg.png");
      background-size: 100% 100%;
    }
  }
}
.top_header,
.main_contain {
  &::v-deep .el-form-item__label {
    position: relative;
    padding-left: 12px;
  }
  &::v-deep .el-form-item__label::after {
    content: "";
    background: #4da1ff;
    width: 2px;
    position: absolute;
    top: 4px;
    left: 0;
    bottom: 4px;
  }
}
.check_btn {
  padding: 16px 0;
}
.check_b {
  padding-top: 12px;
  .active {
    background: linear-gradient(0deg, #1983e5, #1b67dd);
  }
}
</style>
