<template>
  <el-dialog v-model="visible" width="90%">
    <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 :disabled="ids.length == 0" typeof="danger" @click="batchDelete">-->
<!--            <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.ssbmdm" />
          </el-form-item>
          <el-form-item label="负责人">
            <el-input v-model="listQuery.fzrXm" placeholder="请输入负责人姓名"></el-input>
          </el-form-item>
          <el-form-item label="巡防日期范围">
            <el-date-picker v-model="Qzrq" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" @change="upQzrq" format="YYYY-MM-DD" value-format="YYYY-M-D HH:mm:ss" />
          </el-form-item>
          <el-form-item label="巡防报备范围">
            <el-date-picker v-model="xfbbRange" type="datetimerange" unlink-panels range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" @change="upxfbb" format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
          <el-form-item>
            <el-button @click="handleFilter"> 查询 </el-button>
            <el-button @click="reset()"> 重置 </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="cntBox-bb">
        <div class="tabBox">
          <el-table ref="multipleUserRef" :data="tableData" border @selection-change="handleSelectionChange" 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="数据加载中。。">
            <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 prop="ssbm" show-overflow-tooltip align="center" label="巡防部门" />
            <!-- <el-table-column prop="xfrq" show-overflow-tooltip align="center" label="巡防日期">
              <template #default="{ row }">
                <div> {{ row.xfrq ? row.xfrq.substring(0, 10) : row.xfrq }} </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column prop="kssj" show-overflow-tooltip align="center" label="计划开始时间" v-if="!isShowMap" />
            <el-table-column prop="jssj" show-overflow-tooltip align="center" label="计划结束时间" v-if="!isShowMap" />
            <el-table-column prop="bbkssj" show-overflow-tooltip align="center" label="报备开始时间" />
            <el-table-column prop="bbjssj" show-overflow-tooltip align="center" label="报备结束时间" /> -->

            <el-table-column prop="fzrXm" show-overflow-tooltip align="center" label="负责人" v-if="!isShowMap" />
            <el-table-column prop="jlList" show-overflow-tooltip align="center" label="民警" v-if="!isShowMap">
              <template #default="{ row }">
                <el-checkbox-group v-model="formData.xfbbQwJlId" @change="handleChange($event, row)">
                  <template v-for="(item, index) in row.jlList" :key="index">
                    <el-checkbox
                      v-show="item.jllx == '01'"
                      :label="item.id"
                      :disabled="formData.xfbbQwJlId?.[0] !== item.id && formData.xfbbQwJlId?.length > 0"
                      >{{ item.jlxm }}
                    </el-checkbox>
                  </template>
                </el-checkbox-group>
                <!-- <el-tag class="mx-1" v-for="item in row.jlList" v-show="item.jllx == '01'" :key="item.id">{{ item.jlxm
                  }}</el-tag> -->
              </template>
            </el-table-column>
            <el-table-column prop="jlList" show-overflow-tooltip align="center" label="辅警" v-if="!isShowMap">
              <template #default="{ row }">
                <el-tag class="mx-1" v-for="item in row.jlList" v-show="item.jllx == '02'" :key="item.id">{{ item.jlxm
                  }}</el-tag>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="wzlx" show-overflow-tooltip align="center" label="武装类型" v-if="!isShowMap">
              <template #default="{ row }">
                <dict-tag :options="D_BZ_WZLX" :value="row.wzlx" :tag="false"></dict-tag>
              </template>
            </el-table-column>
            <el-table-column prop="xfsc" show-overflow-tooltip align="center" label="巡逻时长">
              <template #default="{ row }">
                <span v-if="row.xfsc">{{ (row.xfsc / 3600).toFixed(2) + "/h" }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="xflc" show-overflow-tooltip align="center" label="巡逻里程">
              <template #default="{ row }">
                <span v-if="row.xflc">{{ (row.xflc / 1000).toFixed(2) + "/KM" }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="bblx" show-overflow-tooltip align="center" label="报备类型" v-if="!isShowMap">
              <template #default="{ row }">
                <dict-tag :options="D_BZ_BBFS" :value="row.bblx" :tag="false"></dict-tag>
              </template>
            </el-table-column> -->
<!--            <el-table-column label="操作" align="right" fixed="right" :width="isShowMap ? '200px' : '390px'">-->
<!--              <template #default="{ row }">-->
<!--                <el-button @click="lookGj(row, 'gjhf')" size="small">轨迹回放</el-button>-->
<!--                <el-button @click="lookGj(row, 'clgj')" size="small">车辆轨迹</el-button>-->
<!--                <el-button @click="infDate(row)" size="small" v-if="!isShowMap">详情</el-button>-->
<!--                <el-button v-if="row.bbzt != 1 && row.bbzt != 0 && !isShowMap" @click="update(row)"-->
<!--                           size="small">修改</el-button>-->
<!--                <el-button v-if="row.bbzt != 0 && row.bbzt != 1 && !isShowMap" size="small"-->
<!--                           @click="baoBei(row, '0')">报备</el-button>-->
<!--                <el-button v-if="row.bbzt == 0 && !isShowMap" size="small" @click="baoBei(row, '1')">结束报备</el-button>-->
<!--                <el-button type="danger" size="small" @click="delDictItem(row)" v-if="!isShowMap">删除</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 class="mapbox" v-if="isShowMap" :style="{ height: tableHeight + 50 + 'px' }">-->
        <!--        &lt;!&ndash; 轨迹回放 &ndash;&gt;-->
        <!--        <MapDialog v-model:modelValue="isShowMap" :lxtype="typeGj" :data="gJDate" />-->
        <!--      </div>-->
      </div>
      <div v-if="dialogFormVisible" class="dialog">
        <div class="head_box">
          <span class="title">{{ title }}</span>
          <div>
            <el-button v-if="isDetail" type="primary" size="small" @click="submit" :loading="btnLoading">{{ infoLoad ?
              "开始报备" : "结束报备" }}</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">
          <el-form-item label="巡防部门" prop="ssbmdm">
            <MOSTY.Department width="180px" clearable filterable v-model="form.ssbmdm" />
          </el-form-item>

          <el-form-item label="巡防日期" prop="xfrq">
            <el-date-picker :disabled="ischooseTime" style="width: 100%" v-model="form.xfrq" placeholder="请选择"
                            format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
          </el-form-item>
          <el-form-item prop="xffwlx" label="巡防范围类型">
            <el-radio-group v-model="form.xffwlx" @change="rad(form.xffwlx)">
              <el-radio label="1">巡防区</el-radio>
              <el-radio label="2">快反点</el-radio>
              <el-radio label="3">检查站</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="巡防区" v-if="form.xffwlx == '1'">
            <el-select @change="fxChange" v-model="form.xf" clearable multiple placeholder="请选择巡防区">
              <el-option v-for="item in xfList.xfqList" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="快反点" v-if="form.xffwlx == '2'">
            <el-select @change="fxChange" v-model="form.xffwid" clearable placeholder="请选择快反点">
              <el-option v-for="item in xfList.kfdList" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="检查站" v-if="form.xffwlx == '3'">
            <el-select @change="fxChange" v-model="form.xffwid" clearable placeholder="请选择检查站">
              <el-option v-for="item in xfList.jczList" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item style="width: 100%" label="班次选择" prop="qwbcId">
            <el-radio-group @change="setQwbc" v-model="form.qwbcId">
              <el-radio style="margin: 8px" 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%" v-model="form.kssj" placeholder="请选择" format="HH:mm:ss"
                            value-format="HH:mm:ss" @change="setJgts" />
          </el-form-item>
          <el-form-item prop="jssj" label="结束时间">
            <el-time-picker style="width: 100%" v-model="form.jssj" placeholder="请选择" format="HH:mm:ss"
                            value-format="HH:mm:ss" @change="setJgts" />
          </el-form-item>
          <el-form-item label="选择警组" prop="jzId">
            <el-select v-model="form.jzId" filterable style="width: 100%" placeholder="请选择警组" @change="setJz">
              <el-option v-for="item in jzData" :key="item.id" :label="item.jzMc" :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="负责人" prop="fzrXm">
            <el-input readonly @click="chooseUserVisible = true" v-model="form.fzrXm" placeholder="请选择负责人" clearable
                      style="width: 100%" />
          </el-form-item>
          <el-form-item label="身份证" prop="fzrSfzh">
            <el-input style="width: 100%" v-model="form.fzrSfzh" placeholder="请填写负责人身份证号"></el-input>
          </el-form-item>
          <el-form-item label="负责人电话" prop="fzrLxdh">
            <el-input style="width: 100%" v-model="form.fzrLxdh" placeholder="请填写负责人电话"></el-input>
          </el-form-item>
          <el-form-item style="width: 100%" label="民警" prop="">
            <div :class="mjData.length === 0 ? 'ipt mj' : 'ipt'" @click.stop="mjVisible = true">
              <el-tag v-for="tag in mjData" :key="tag.id" class="mx-1" closable :type="tag.type" @close="handleClose(tag)">
                {{ tag.jlxm }}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item style="width: 100%" label="辅警" prop="">
            <div :class="fjData.length === 0 ? 'ipt fj' : 'ipt'" @click.stop="fjVisible = true">
              <el-tag v-for="tag in fjData" :key="tag.id" class="mx-1" closable :type="tag.type"
                      @close="handleClosefj(tag)">
                {{ tag.jlxm }}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item style="width: 100%" label="智能装备" prop="">
            <div :class="znzbData.length === 0 ? 'ipt znzb' : 'ipt'" @click.stop="znzbVisible = true">
              <el-tag v-for="tag in znzbData" :key="tag.id" class="mx-1" closable :type="tag.type"
                      @close="handleCloseZb(tag)">
                {{ tag.sbmc }}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item style="width: 100%" label="警用器械" prop="">
            <div :class="jyqxData.length === 0 ? 'ipt jyqx' : 'ipt'" @click.stop="jyqxVisible = true">
              <el-tag v-for="tag in jyqxData" :key="tag.id" class="mx-1" closable :type="tag.type"
                      @close="handleCloseQx(tag)">
                {{ tag.qxmc }}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item style="width: 100%" label="巡防车辆" prop="">
            <div :class="jyclData.length === 0 ? 'ipt cl' : 'ipt'" @click.stop="jyclVisible = true">
              <el-tag v-for="tag in jyclData" :key="tag.id" class="mx-1" closable :type="tag.type"
                      @close="handleCloseCl(tag)">
                {{ tag.jdchphm }}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item v-for="item in jyqxData" :key="item.qxid" :label="item.qxmc">
            <el-input-number style="width: 100%" v-model="item.qxsl" class="mx-4" :min="0" />
          </el-form-item>
          <div style="width: 100%"></div>
          <el-form-item label="巡逻方式" prop="xlfs">
            <el-radio-group v-model="form.xlfs" class="ml-4">
              <el-radio v-for="(item, index) in D_BZ_XLFS" :label="item.value" :key="index">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="武装类型" prop="wzlx">
            <el-radio-group v-model="form.wzlx" class="ml-4">
              <el-radio v-for="(item, index) in D_BZ_WZLX" :label="item.value" :key="index">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="着装类型" prop="zzlx">
            <el-radio-group v-model="form.zzlx" class="ml-4">
              <el-radio v-for="(item, index) in D_BZ_ZZLX" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" style="width: 100%">
            <el-input v-model="form.bz" placeholder="请输入关键字" show-word-limit type="textarea" />
          </el-form-item>
        </el-form>
      </div>
      <!--    <ChooseUser v-model="chooseUserVisible" @choosedUsers="hanlderChoose" />-->
      <!--    <MjLoad v-model="mjVisible" @choosedUsers="hanlderChooseMj" />-->
      <!--    <FjLoad v-model="fjVisible" @choosedUsers="hanlderChooseFj" />-->
      <!--    <JyqxLoad v-model="jyqxVisible" @choosedUsers="hanlderChooseJyqx" />-->
      <!--    <JyclLoad v-model="jyclVisible" @choosedUsers="hanlderChooseJycl" />-->
      <!--    <ZnzbLoad v-model="znzbVisible" @choosedUsers="hanlderChooseZnzb" />-->

    </div>

    <template #footer>
      <el-button @click="handleClickClose">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import emitter from "@/utils/eventBus.js";
// import ChooseUser from "@/components/MyComponents/ChooseUser";
// import MapDialog from './mapDialog.vue'
// import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
// import FjLoad from "@/components/MyComponents/ChooseJz/FjLoad.vue";
// import JyqxLoad from "@/components/MyComponents/ChooseJz/JyqxLoad.vue";
// import JyclLoad from "@/components/MyComponents/ChooseJz/JzclLoad.vue";
// import ZnzbLoad from "@/components/MyComponents/ChooseJz/ZnzbLoad.vue";
import { getQwbc } from "@/api/service/shift.js";
import * as MOSTY from "@/components/MyComponents/index";
import { selectDeptPage } from "@/api/user-manage";
import { getqwdj } from "@/api/service/grade.js";
import { getXfbb, addXfbb, deleteXfbb, getXfbbInfo, updateXfbb, xfbb, getMybbTodayNew, getMyXfpbToday } from "@/api/service/watchmanFiling.js";
import { getJzList } from "@/api/basicsmanage/servicejz.js";
import { getKfd } from "@/api/basicsmanage/quick-rebate.js";
import { getXfqy } from "@/api/basicsmanage/patrolArea.js";
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, nextTick, computed } from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_ZZLX, D_BZ_WZLX, D_BZ_XLFS, D_BZ_BBFS } = proxy.$dict("D_BZ_ZZLX", "D_BZ_WZLX", "D_BZ_XLFS", "D_BZ_BBFS");
const gJDate = ref({})
const D_BZ_DJQW = ref([]);
const qwbaDataList = ref([]); //勤务班次数据
const searchBox = ref(null); // 搜索盒子
const Qzrq = ref([]);
const xfbbRange = ref([]);
const typeGj = ref('') //轨迹回放类型
const jzData = ref([]); //警组列表数据
const tableHeight = ref(); // 表格高度
const loadingTable = ref(true);
const chackAdd = ref(false);
const qwbcD = ref([]); //勤务班次单选数据
const cascader = ref(null);
const ids = ref([]); //批量删除的ID
const tableData = ref([]); //表格数据
const depList = ref([]); //部门数据
const infoLoad = ref(false);
const btnLoading = ref(false); //按钮截流
const keyCount = ref(0); //tabel组件刷新值
const chooseUserVisible = ref(false);
const title = ref("新增巡防报备");
const elform = ref(null);
const total = ref(0);
const mjVisible = ref(false); //民警弹窗
const mjData = ref([]);
const fjVisible = ref(false); //辅警弹窗
const fjData = ref([]);
const jyqxVisible = ref(false); //警用器械弹窗
const jyqxData = ref([]);
const jyclVisible = ref(false); //警用车辆弹窗
const jyclData = ref([]);
const znzbVisible = ref(false); //智能装备弹窗
const znzbData = ref([]);
const dialogFormVisible = ref(false); //弹窗

const isShowMap = ref(false) //展示地图

const formData = ref({})

//搜索数据
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  // bbzt: 0
});
//表单数据
const form = ref({});
//级联选择器配置

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(["update:modelValue", "selectionChange"]);
const visible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    if (val) {
      nextTick(() => {
        tabHeightFn()
      })
    };
    emits("update:modelValue", val);
  }
})

watch(() => isShowMap.value, (val) => {
  emitter.emit('closeMeun')
})
function upQzrq(val) {
  listQuery.value.ksXfrq = val ? val[0] : '';
  listQuery.value.jsXfrq = val ? val[1] : '';
}
function upxfbb(val) {
  listQuery.value.bbkssj = val ? val[0] : '';
  listQuery.value.bbjssj = val ? val[1] : '';
}
//表单验证
const rules = reactive({
  ssbmdm: [
    {
      required: true,
      message: "请选择部门",
      trigger: "change"
    }
  ],
  xfrq: [
    {
      required: true,
      message: "请选择巡防日期",
      trigger: "change"
    }
  ],
  xffwlx: [
    {
      required: true,
      message: "请选择巡防范围类型",
      trigger: "change"
    }
  ],
  qwbcId: [
    {
      required: true,
      message: "请选择巡防排班",
      trigger: "change"
    }
  ],
  jssj: [
    {
      required: true,
      message: "请选择结束时间",
      trigger: "change"
    }
  ],
  kssj: [
    {
      required: true,
      message: "请选择开始时间",
      trigger: "change"
    }
  ],
  jzId: [
    {
      required: true,
      message: "请选择警组",
      trigger: "change"
    }
  ],
  fzrXm: [
    {
      required: true,
      message: "请选择负责人",
      trigger: "change"
    }
  ]
});
//选择用户
const hanlderChoose = (users) => {
  const user = users[0];
  form.value.fzrXm = user.userName;
  form.value.fzrSfzh = user.idEntityCard;
  form.value.fzrLxdh = user.mobile;
  form.value.fzrId = user.id;
};

const nowYear = ref(new Date().getFullYear());
const nowmonth = ref(new Date().getMonth() + 1);
const nowDay = ref(new Date().getDate());
const nowtime = ref("");
const xfList = reactive({
  xfqList: [],
  kfdList: [],
  jczList: []
});
const xffwList = ref([]); //用户选中的巡防类型数
// 获取当天的报备信息或排班信息 没有报备信息则查询排班
const ischooseTime = ref(false);
//选中的巡防区
function fxChange(val) {
  xffwList.value = [];
  if (form.value.xffwlx == "1") {
    val.forEach((item) => {
      xfList.xfqList.forEach((el) => {
        if (item == el.value)
          xffwList.value.push({
            fwMc: el.label,
            glbid: el.value,
            id: el.value,
            qwlx: "1",
            xffwlx: form.value.xffwlx
          });
      });
    });
  } else if (form.value.xffwlx == "2") {
    val.forEach((item) => {
      xfList.kfdList.forEach((el) => {
        if (item == el.value)
          xffwList.value.push({
            fwMc: el.label,
            glbid: el.value,
            id: el.value,
            qwlx: "1",
            xffwlx: form.value.xffwlx
          });
      });
    });
  } else if (form.value.xffwlx == "3") {
    val.forEach((item) => {
      xfList.jczList.forEach((el) => {
        if (item == el.value)
          xffwList.value.push({
            fwMc: el.label,
            glbid: el.value,
            id: el.value,
            qwlx: "1",
            xffwlx: form.value.xffwlx
          });
      });
    });
  }
}
//选择巡防区
function rad(item, index) {
  form.value.xf = null;
  form.value.xffwList = [];
  switch (item.value) {
    case "1":
      form.value.xf = [];
      break;
    case "2":
      form.value.xf = "";
      break;
    case "3":
      form.value.zqList.xf = "";
      break;
  }
}
function getTodayInfo() {
  getMybbTodayNew().then((res) => {
    if (res === null) {
      getMyXfpbToday().then((respb) => {
        if (respb !== null) {
          let time_month = nowmonth.value; //现在的月份
          let time_day = nowDay.value; //现在的天数
          if (nowmonth.value < 10) {
            time_month = 0 + "" + nowmonth.value;
          }
          if (nowDay.value < 10) {
            time_day = 0 + "" + nowDay.value;
          }
          nowtime.value = nowYear.value + "-" + time_month + "-" + time_day;
          infoLoad.value = true;
          form.value = respb;
          mjData.value = !form.value.pbmj ? [] : JSON.parse(form.value.pbmj);
          fjData.value = !form.value.pbfj ? [] : JSON.parse(form.value.pbfj);
          jyclData.value = !form.value.pbcl ? [] : JSON.parse(form.value.pbcl);
          znzbData.value = !form.value.txzb ? [] : JSON.parse(form.value.txzb);
          jyqxData.value = !form.value.jyqx ? [] : JSON.parse(form.value.jyqx);
          form.value.xfrq = nowtime.value;
          ischooseTime.value = true;
          form.value.xffwlx = respb.xffwlx;
          try {
            form.value.xf = respb.xffwid.split(",");
          } catch (error) {
            form.value.xf = respb.xffwid;
          }
          fxChange(form.value.xf);
        }
      });
    } else {
      infoLoad.value = false;
      form.value = res;
      mjData.value = !form.value.pbmj ? [] : JSON.parse(form.value.pbmj);
      fjData.value = !form.value.pbfj ? [] : JSON.parse(form.value.pbfj);
      jyclData.value = !form.value.pbcl ? [] : JSON.parse(form.value.pbcl);
      znzbData.value = !form.value.txzb ? [] : JSON.parse(form.value.txzb);
      jyqxData.value = !form.value.jyqx ? [] : JSON.parse(form.value.jyqx);
      ischooseTime.value = false;
      form.value.xffwlx = res.xffwlx;
      try {
        form.value.xf = res.xffwid.split(",");
      } catch (error) {
        form.value.xf = res.xffwid;
      }
      fxChange(form.value.xf);
    }
  });
}
//巡防范围配置
const propsXffw = {
  lazy: true,
  lazyLoad(node, resolve) {
    const { level, value } = node;
    let nodes = [];
    if (value == "1") {
      getXfqy({ pageCurrent: 1, pageSize: 1000 }).then((res) => {
        nodes = res.records.map((item) => {
          return { value: item.id, label: item.xfqMc, leaf: level >= 1 };
        });
        resolve(nodes);
      });
    } else if (value == "2") {
      getKfd({ pageNum: 1, pageSize: 100, dwlxs: "01" }).then((res) => {
        nodes = res.records.map((item) => {
          return { value: item.kfdId, label: item.kfdMc, leaf: level >= 1 };
        });
        resolve(nodes);
      });
    } else if (value == "3") {
      getKfd({ pageNum: 1, pageSize: 100, dwlxs: "02" }).then((res) => {
        nodes = res.records.map((item) => {
          return { value: item.kfdId, label: item.kfdMc, leaf: level >= 1 };
        });
        resolve(nodes);
      });
    }
  }
};
//获取勤务等级
function getQwDj() {
  let params = { fbzt: "1", pageCurrent: 1, pageSize: 1000 };
  getqwdj(params).then((res) => {
    D_BZ_DJQW.value = res.records.map((item) => {
      let data = "一级勤务";
      if (item.qwdj == "01") {
        data = "一级勤务";
      } else if (item.qwdj == "02") {
        data = "二级勤务";
      } else if (item.qwdj == "03") {
        data = "三级勤务";
      } else {
        data = "日常勤务";
      }
      return { value: item.qwdj, label: data };
    });
  });
}
// 时分秒截取
function setHm(item) {
  return item.split(":")[0] + ":" + item.split(":")[1];
}
//搜索
function handleFilter() {
  listQuery.value.pageNum = 1
  getListData();
}

//巡防力量弹框相关
function handleClose(tag) {
  mjData.value.splice(mjData.value.indexOf(tag), 1);
}
//选择民警
function hanlderChooseMj(arr) {
  const jzryList = arr.map((item) => {
    return {
      jlId: item.id,
      jllx: item.fl,
      jlxm: item.xm,
      sfzh: item.sfzh,
      lxdh: item.lxdh,
      xbdm: item.xbdm,
      xl: item.lx ? item.lx : "04"
    };
  });
  mjData.value = jzryList;
}
function handleClosefj(tag) {
  fjData.value.splice(fjData.value.indexOf(tag), 1);
}
function getQwbcData() {
  let params = {
    pageCurrent: 1,
    pageSize: 1000,
    bclx: "02"
  };
  getQwbc(params).then((res) => {
    qwbaDataList.value = res.records.map((item) => {
      return {
        bcys: item.bcys,
        kssj: item.kssj,
        jssj: item.jssj,
        id: item.id,
        zqsc: item.zqsc,
        bcmc: item.bcmc
      };
    });
  });
}
function setQwbc() {
  qwbaDataList.value.forEach((v) => {
    if (v.id == form.value.qwbcId) {
      form.value.kssj = v.kssj;
      form.value.jssj = v.jssj;
      form.value.qwbcId = v.id;
      form.value.zqsc = v.zqsc;
      qwbcD.value = [v];
    }
  });
}
//选择辅警
function hanlderChooseFj(arr) {
  const jzryList = arr.map((item) => {
    return {
      jlId: item.id,
      jllx: item.fl,
      jlxm: item.xm,
      sfzh: item.sfzh,
      lxdh: item.lxdh,
      xbdm: item.xbdm,
      xl: item.lx
    };
  });
  fjData.value = jzryList;
}
function handleCloseCl(tag) {
  jyclData.value.splice(jyclData.value.indexOf(tag), 1);
}
//选择警用车辆
function hanlderChooseJycl(arr) {
  const clList = arr.map((item) => {
    return {
      clId: item.cid,
      jdchphm: item.cph,
      jdchpzldm: item.cplx,
      gpsId: item.gpsId
    };
  });
  jyclData.value = clList;
}
function handleCloseZb(tag) {
  znzbData.value.splice(znzbData.value.indexOf(tag), 1);
}
//选择智能装备
function hanlderChooseZnzb(arr) {
  const txzbList = arr.map((item) => {
    return {
      txzblx: item.scode,
      zbId: item.id,
      sbmc: item.sbmc,
      hh: item.sbbh,
      sbbh: item.sbbh,
      sfrh: item.sfrh,
      sfzy: item.sfzy,
      sfxt: item.sfxt
    };
  });
  znzbData.value = txzbList;
}
function handleCloseQx(tag) {
  jyqxData.value.splice(jyqxData.value.indexOf(tag), 1);
}

//切换警组
function setJz() {
  jzData.value.forEach((v) => {
    if (form.value.jzId == v.id) {
      form.value.fzrXm = v.ddMjxm;
      form.value.fzrId = v.ddMjid;
      form.value.jzMc = v.jzMc;
      form.value.fzrSfzh = v.ddMjsfzh;
      form.value.fzrLxdh = v.ddDh;
      jyqxData.value = v.jyqxList.map((item) => {
        return {
          qxid: item.qxId,
          qxlx: item.scode,
          qxsl: item.qxsl,
          qxmc: item.qxmc
        };
      });
      jyclData.value = v.clList.map((item) => {
        return {
          clId: item.clId,
          jdchphm: item.jdchphm,
          jdchpzldm: item.jdchpzldm,
          gpsId: item.gpsId
        };
      });
      fjData.value = [];
      mjData.value = [];
      v.jzryList.forEach((item) => {
        if (item.jllx == "01") {
          mjData.value.push({
            jlId: item.ryId,
            jllx: item.jllx,
            jlxm: item.jlxm,
            sfzh: item.sfzh,
            lxdh: item.lxdh,
            xbdm: item.xbdm
          });
        } else {
          fjData.value.push({
            jlId: item.ryid,
            jllx: item.jllx,
            jlxm: item.jlxm,
            sfzh: item.sfzh,
            lxdh: item.lxdh,
            xbdm: item.xbdm
          });
        }
      });
      znzbData.value = v.txzbList.map((item) => {
        return {
          txzblx: item.txzblx,
          zbId: item.zbId,
          sbmc: item.sbmc,
          hh: item.hh,
          sbbh: item.sbbh,
          sfrh: item.sfrh,
          sfzy: item.sfzy,
          sfxt: item.sfxt
        };
      });
    }
  });
}
function setJgts() {
  if (form.value.kssj && form.value.jssj) {
    let start =
      form.value.kssj.split(":")[0] * 3600 +
      form.value.kssj.split(":")[1] * 60 +
      orm.value.kssj.split(":")[2] * 1;
    let end =
      form.value.jssj.split(":")[0] * 3600 +
      form.value.jssj.split(":")[1] * 60 +
      orm.value.jssj.split(":")[2] * 1;
    if (start <= end) {
      form.value.jgts = 1;
    } else {
      form.value.jgts = 0;
    }
  }
}
//选择警用器械
function hanlderChooseJyqx(arr) {
  const jyqxList = arr.map((item) => {
    return { qxid: item.id, qxlx: item.scode, qxsl: 1, qxmc: item.qxMc };
  });
  jyqxData.value = jyqxList;
}
// 获取警组列表
function getJzData() {
  let params = {
    pageCurrent: 1,
    pageSize: 1000
  };
  getJzList(params).then((res) => {
    jzData.value = res.records;
  });
}
//重置
function reset() {
  Qzrq.value = [];
  xfbbRange.value = [];
  listQuery.value = {
    pageCurrent: 1,
    pageSize: 20
  };
  getListData();
}
//新增表单重置
function resetForm() {
  form.value = {
    xlfs: "1",
    wzlx: "1",
    zzlx: "1",
    xffwlx: "1",
    xf: ""
  };
}
//新增
function add() {
  getTodayInfo();
  isDetail.value = true;
  infoLoad.value = true;
  chackAdd.value = true;
  jyclData.value = [];
  mjData.value = [];
  fjData.value = [];
  jyqxData.value = [];
  znzbData.value = [];
  resetForm();
  title.value = "新增巡防报备";
  dialogFormVisible.value = true;
}

// 轨迹回放
function lookGj(row, type) {
  if (type == 'clgj' && row.clList && row.clList.length == 0) {
    isShowMap.value = false;
    return proxy.$message({ type: "info", message: '该数据没有报备车辆' });
  }
  typeGj.value = type
  gJDate.value = row
  isShowMap.value = true;
}

//详情
const isDetail = ref(true);
function infDate(row) {
  isDetail.value = false;
  infoLoad.value = false;
  chackAdd.value = false;
  jyclData.value = [];
  mjData.value = [];
  fjData.value = [];
  jyqxData.value = [];
  znzbData.value = [];
  getXfbbInfo(row.id).then((res) => {
    form.value = JSON.parse(JSON.stringify(res));
    console.log(form.value);
    if (res.xffwlx && res.xffwid) {
      form.value.xffwlx = res.xffwlx;
      try {
        form.value.xf = res.xffwid.split(",");
      } catch (error) {
        form.value.xf = res.xffwid;
      }
    }
    res.clList.forEach((v) => {
      jyclData.value.push(v);
    });
    res.jyqxList.forEach((v) => {
      jyqxData.value.push(v);
    });
    res.jlList.forEach((v) => {
      if (v.jllx == "01") {
        mjData.value.push(v);
      } else {
        fjData.value.push(v);
      }
    });
    res.znzbList.forEach((v) => {
      znzbData.value.push(v);
    });
    title.value = "巡防报备详情";
    dialogFormVisible.value = true;
  });
}
//修改
function update(row) {
  isDetail.value = true;
  infoLoad.value = true;
  chackAdd.value = false;
  jyclData.value = [];
  mjData.value = [];
  fjData.value = [];
  jyqxData.value = [];
  znzbData.value = [];
  getXfbbInfo(row.id).then((res) => {
    form.value = JSON.parse(JSON.stringify(res));
    if (res.xffwlx && res.xffwid) {
      form.value.xffwlx = [res.xffwlx, res.xffwid];
    }
    res.clList.forEach((v) => {
      jyclData.value.push(v);
    });
    res.jyqxList.forEach((v) => {
      jyqxData.value.push(v);
    });
    res.jlList.forEach((v) => {
      if (v.jllx == "01") {
        mjData.value.push(v);
      } else {
        fjData.value.push(v);
      }
    });
    res.znzbList.forEach((v) => {
      znzbData.value.push(v);
    });
    title.value = "巡防报备修改";
    dialogFormVisible.value = true;
  });
}
// 获取当天日期
function nowDateFn() {
  let now = new Date();
  let year = now.getFullYear();
  let month = now.getMonth() + 1;
  let date = now.getDate();
  if ((month + "").length == 1) {
    month = "0" + month;
  }
  if ((date + "").length == 1) {
    date = "0" + date;
  }
  return year + "-" + month + "-" + date;
}
//报备
function baoBei(row, zt) {
  let text = "报备";
  if (zt == 1) {
    text = "结束报备";
    const bbjssj = "";
  } else {
    text = "开始报备";
  }
  proxy
    .$confirm(`是否${text}？`)
    .then(() => {
      xfbb({ id: row.id, bbzt: zt }).then(() => {
        proxy.$message({
          type: "success",
          message: `${text}成功`
        });
        getListData();
      });
    })
    .catch(() => {
      proxy.$message.info("已取消操作");
    });
}
//删除
function delDictItem(row) {
  proxy
    .$confirm("确定删除报备数据？", "警告", { type: "warning" })
    .then(() => {
      deleteXfbb([row.id]).then(() => {
        proxy.$message({
          type: "success",
          message: "删除成功"
        });
        getListData();
      });
    })
    .catch(() => {
      proxy.$message.info("已取消");
    });
}
//批量数据
const multipleUserRef = ref(null);
const multipleSelectionUser = ref([])
const handleSelectionChange = async (val) => {
  // ids.value = [];
  // if (val) {
  //   val.forEach((item) => {
  //     ids.value.push(item.id);
  //   });
  // }

  await nextTick()

  if (val?.length > 1) {
    let del_row = val?.shift();
    multipleUserRef.value.toggleRowSelection(del_row, false);
  }
  multipleSelectionUser.value = val;
  
  if (multipleSelectionUser.value?.[0]?.id !== formData.value?.id) {

    formData.value.xfbbQwJlId = []
    formData.value.id = ''
  }
};

const handleClickClose = () => {
  // emits("selectionChange", [])
  visible.value = false
}

const handleChange = async (val, obj) => {
  if (val?.length > 1) {
    let del_row = val?.shift();
  }
  console.log(val);
  
  formData.xfbbQwJlId = val
  formData.value.id = obj?.id
  await nextTick()
  multipleUserRef.value.toggleRowSelection(obj, true)
  
  multipleSelectionUser.value = [obj]
}

// 确定
const onSubmit = () => {
  if (multipleSelectionUser.value.length === 0) {
    proxy.$message({
      type: "warning",
      message: "请选择下发巡组"
    });
    return
  }
  
  const obj = multipleSelectionUser.value?.[0]?.jlList?.find(i => i?.id == formData.value?.xfbbQwJlId[0])
  
  emits("selectionChange", {
    list: multipleSelectionUser.value,
    xfbbName: `${multipleSelectionUser.value?.[0]?.fzrXm}-${obj?.jlxm}`,
    ...formData?.value
  })

  visible.value = false
}

function batchDelete() {
  proxy
    .$confirm("确定批量删除报备数据？", "警告", { type: "warning" })
    .then(() => {
      deleteXfbb(ids.value).then(() => {
        proxy.$message({
          type: "success",
          message: "删除成功"
        });
        getListData();
      });
    })
    .catch(() => {
      proxy.$message.info("已取消");
    });
}
//获取列表数据
function getListData() {
  loadingTable.value = true;
  getXfbb(listQuery.value)
    .then((res) => {
      tableData.value = res.records;
      total.value = res.total;
      loadingTable.value = false;
    })
    .catch(() => {
      loadingTable.value = false;
    });
}
//关闭弹窗
function close() {
  dialogFormVisible.value = false;
}
function getUUid() {
  var list = [];
  var hexDigits = "0123456789abcdefghijklmnopqrstuvwxyz";
  for (var i = 0; i < 32; i++) {
    list[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  }
  list[14] = "4";
  list[19] = hexDigits.substr((list[19] & 0x3) | 0x8, 1);
  list[8] = list[13] = list[18] = list[23];
  let uuid = list.join("");
  return uuid;
}


//提交
function submit() {
  if (infoLoad.value) {
    elform.value.validate((valid) => {
      if (valid) {
        let params = JSON.parse(JSON.stringify(form.value));
        params.xfbmdm = params.ssbmdm;
        params.jlList = [...fjData.value, ...mjData.value];
        params.znzbList = znzbData.value;
        params.jyqxList = jyqxData.value;
        params.clList = jyclData.value;
        if (form.value.xffwlx) {
          params.xffwList = xffwList.value;
        }
        btnLoading.value = true;
        D_BZ_DJQW.value.forEach((v) => {
          if (v.value == params.qwdjId) {
            params.qwdj = v.label;
          }
        });
        if (chackAdd.value) {
          params.id = getUUid()
          addXfbb(params).then((res) => {
            btnLoading.value = false;
            xfbb({ id: res, bbzt: 0 }).then(() => {
              proxy.$message({ type: "success", message: `新增成功` });
              dialogFormVisible.value = false;
              getListData();
            });
          }).catch(() => {
            btnLoading.value = false;
          });
        } else {
          updateXfbb(params).then(() => {
            btnLoading.value = false;
            proxy.$message({
              type: "success",
              message: "修改成功"
            });
            dialogFormVisible.value = false;
            getListData();
          }).catch(() => {
            btnLoading.value = false;
          });;
        }
      }
    });
  } else {
    // 结束报备
    xfbb({ id: form.value.id, bbzt: 1 }).then(() => {
      proxy.$message({
        type: "success",
        message: `结束报备成功`
      });
      dialogFormVisible.value = false;
      getListData();
    });
  }
}
/**
 * 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(() => {
  getQwbcData();
  getJzData();
  selectDeptPage({}).then((res) => {
    depList.value = res.records;
  });
  getListData();
  proxy.mittBus.on("mittFn", (data) => {
    keyCount.value = data;
  });
  // tabHeightFn();
  window.onresize = function () {
    nextTick(() => {
      tabHeightFn()
    })
  };
  //查询出所有巡防数据
  getXfqy({ pageCurrent: 1, pageSize: 1000 }).then((res) => {
    xfList.xfqList = res.records.map((item) => {
      return { value: item.id, label: item.xfqMc };
    });
  });
  getKfd({ pageNum: 1, pageSize: 100, dwlxs: "01" }).then((res) => {
    xfList.kfdList = res.records.map((item) => {
      return { value: item.kfdId, label: item.kfdMc };
    });
  });
  getKfd({ pageNum: 1, pageSize: 100, dwlxs: "02" }).then((res) => {
    xfList.jczList = res.records.map((item) => {
      return { value: item.kfdId, label: item.kfdMc };
    });
  });
});
onUnmounted(() => {
  proxy.mittBus.off("mittFn");
});
watch(
  () => jyclData.value,
  (val) => {
    if (val != null && val.length > 0) {
      form.value.xlfs = "0";
    } else {
      form.value.xlfs = "1";
    }
  },
  { deep: true }
);
</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;
  }
}

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

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

.cl::after {
  content: "请选择车辆";
  position: absolute;
  top: 0;
  left: 12px;
  color: #c0c4cc;
}

.znzb::after {
  content: "请选择智能装备";
  position: absolute;
  top: 0;
  left: 12px;
  color: #c0c4cc;
}

.jyqx::after {
  content: "请选择警用器械";
  position: absolute;
  top: 0;
  left: 12px;
  color: #c0c4cc;
}

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

.cntBox-bb {
  display: flex;
  height: 100%;

  .tabBox {
    flex: 1;
    height: 100%;

    ::v-deep {
      .el-checkbox__inner {
        border-radius: 50% !important;
      }

      .el-table__header-wrapper .el-checkbox {
        display: none;
      }

      .el-table--fit {
        height: calc(100% - 30px);
      }
    }

    .fenye {
      bottom: 0;
    }
  }

  .mapbox {
    width: 1000px;
    padding: 0 10px;
    box-sizing: border-box;
  }
}

::v-deep .el-form--inline .el-form-item {
  margin-right: 8px;
}

::v-deep .el-date-editor--datetimerange.el-input__inner {
  width: 356px;
}
</style>
