<template>
  <div class="container">
    <van-config-provider :theme-vars="themeVars">
      <van-form @submit="onSubmit">
        <van-field v-model="specialForm.xfrq" name="巡防日期" label="巡防日期" placeholder="请选择巡防日期"
          :rules="[{ required: true, message: '请选择巡防日期' }]" right-icon="calendar-o" input-align="right"
          @click="showXfrq = true" />
        <div class="title_tab">人员车辆</div>
        <van-field v-model="specialForm.fzrXm" readonly name="picker" input-align="right" is-link label="负责人"
          placeholder="请选择负责人" @click="showfzrPicker = true" />

        <van-cell class="mulSelect" title="民警" color="#1989fa">
          <template #right-icon>
            <van-icon @click.stop="showDialogfn('mj')" name="add-o" color="#1989fa" size="22" />
          </template>
          <template #default>
            <div class="selected-box">
              <div class="check-item-tag" v-for="(item, index) in list.mj" :key="index">
                <van-tag closeable @close="deleteCheckTag(item, index, 'mj')" color="#7232dd" plain>{{ item.text
                  }}</van-tag>
                <!-- <van-badge>
                  <template #content>
                    <van-icon
                      name="cross"
                      class="badge-icon"
                      @click="deleteCheckTag(item, index, 'mj')"
                    />
                  </template>
                </van-badge> -->
              </div>
            </div>
          </template>
        </van-cell>
        <van-cell class="mulSelect" title="辅警" color="#1989fa">
          <template #right-icon>
            <van-icon @click.stop="showDialogfn('fj')" name="add-o" color="#1989fa" size="22" />
          </template>
          <template #default>
            <div class="selected-box">
              <div class="check-item-tag" v-for="(item, index) in list.fj" :key="index">
                <van-tag closeable @close="deleteCheckTag(item, index, 'fj')" color="#7232dd" plain>{{ item.text
                  }}</van-tag>
                <!-- <van-badge>
                  <template #content>
                    <van-icon
                      name="cross"
                      class="badge-icon"
                      @click="deleteCheckTag(item, index, 'fj')"
                    />
                  </template>
                </van-badge> -->
              </div>
            </div>
          </template>
        </van-cell>
        <div class="title_tab">装备</div>
        <van-cell class="mulSelect" title="智能装备" color="#1989fa">
          <template #right-icon>
            <van-icon @click.stop="showDialogfn('zn')" name="add-o" color="#1989fa" size="22" />
          </template>
          <template #default>
            <div class="selected-box">
              <div class="check-item-tag" v-for="(item, index) in list.zn" :key="index">
                <van-tag closeable @close="deleteCheckTag(item, index, 'zn')" color="#7232dd" plain>{{ item.text
                  }}</van-tag>
                <!-- <van-badge>
                  <template #content>
                    <van-icon
                      name="cross"
                      class="badge-icon"
                      @click="deleteCheckTag(item, index, 'zn')"
                    />
                  </template>
                </van-badge> -->
              </div>
            </div>
          </template>
        </van-cell>
        <van-cell class="mulSelect" title="警用器械" color="#1989fa">
          <template #right-icon>
            <van-icon @click.stop="showDialogfn('jy')" name="add-o" color="#1989fa" size="22" />
          </template>
          <template #default>
            <div class="selected-box">
              <div class="check-item-tag" v-for="(item, index) in list.jy" :key="index">
                <van-tag closeable @close="deleteCheckTag(item, index, 'jy')" color="#7232dd" plain>{{ item.text
                  }}</van-tag>
                <!-- <van-badge>
                  <template #content>
                    <van-icon
                      name="cross"
                      class="badge-icon"
                      @click="deleteCheckTag(item, index, 'jy')"
                    />
                  </template>
                </van-badge> -->
              </div>
            </div>
          </template>
        </van-cell>
        <div class="title_tab">巡逻</div>
        <van-cell class="mulSelect" title="巡防车辆" color="#1989fa">
          <template #right-icon>
            <van-icon @click.stop="showDialogfn('cl')" name="add-o" color="#1989fa" size="22" />
          </template>
          <template #default>
            <div class="selected-box">
              <div class="check-item-tag" v-for="(item, index) in list.cl" :key="index">
                <van-tag closeable @close="deleteCheckTag(item, index, 'cl')" color="#7232dd" plain>{{ item.text
                  }}</van-tag>
                <!-- <van-badge>
                  <template #content>
                    <van-icon
                      name="cross"
                      class="badge-icon"
                      @click="deleteCheckTag(item, index, 'cl')"
                    />
                  </template>
                </van-badge> -->
              </div>
            </div>
          </template>
        </van-cell>

        <!-- <div class="titlebbSjy">武器装备</div> -->
        <van-field class="change" name="radio" label="巡逻方式">
          <template #input>
            <van-radio-group v-model="specialForm.xlfs" direction="horizontal" :disabled="disable">
              <van-radio shape="square" checked-color="#3e6ee8" name="1">步巡</van-radio>
              <van-radio shape="square" checked-color="#3e6ee8" name="0">车巡</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="change" name="radio" label="着装类型">
          <template #input>
            <van-radio-group v-model="specialForm.zzlx" direction="horizontal" :disabled="disable">
              <van-radio shape="square" checked-color="#3e6ee8" name="0">制服</van-radio>
              <van-radio shape="square" checked-color="#3e6ee8" name="1">便衣</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="change" name="radio" label="武装类型">
          <template #input>
            <van-radio-group v-model="specialForm.wzlx" direction="horizontal" :disabled="disable">
              <van-radio shape="square" checked-color="#3e6ee8" name="0">武装</van-radio>
              <van-radio shape="square" checked-color="#3e6ee8" name="1">非武装</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-row>
          <van-col span="24" v-for="(item, index) in list.jy" :key="index">
            <van-field class="change" name="radio" label-width="50%" :label="item.qxmc" input-align="right">
              <template #input>
                <van-stepper v-model="item.qxsl" step="1" />
              </template>
            </van-field>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="24">
            <van-field rows="3" type="textarea" v-model="specialForm.bz" name="备注" placeholder="备注信息" />
          </van-col>
        </van-row>
        <div style="margin: 16px 0">
          <van-button :loading="loading" round @click="submit" block type="primary">
            {{ route.query.reportTitle === "报备" ? "提交" : "结束报备" }}
          </van-button>
        </div>
      </van-form>
    </van-config-provider>

    <van-popup v-model:show="showXfrq" position="bottom">
      <van-datetime-picker v-model="specialForm.xfrq" type="month-day" title="选择巡防日期" :min-date="minDate"
        :max-date="maxDate" :formatter="formatter" @confirm="onXfrqConfirm" @change="xfChange"
        @cancel="showXfrq = false" />
    </van-popup>
    <van-popup v-model:show="showjzPicker" position="bottom">
      <van-picker :columns="list.jzList" :columns-field-names="customJzFieldName" @confirm="onjzConfirm"
        @cancel="showjzPicker = false" />
    </van-popup>
    <van-popup v-model:show="showfzrPicker" position="bottom">
      <van-search v-model="list.phone" placeholder="请输入负责人电话号码" @update:model-value="getMJList()" />
      <van-picker :columns="list.fzrList" @confirm="onfzrConfirm" @cancel="showfzrPicker = false"
        :columns-field-names="customfzrFieldNamed" />
    </van-popup>
    <van-popup v-model:show="selfDefinedPopup" :style="{ width: '80%' }">
      <div class="popupTitle">{{ popupTitle }}</div>
      <van-search v-model="list.text" :placeholder="`请输入`" @update:model-value="getJYList(popupTitle)" />
      <div class="check-data-box">
        <van-checkbox-group v-model="checkedList">
          <van-cell-group inset>
            <van-cell v-for="(item, index) in list.mulChooseList" clickable :key="item" :title="`${item.text}`">
              <template #right-icon>
                <van-checkbox :name="item.text" :ref="(el) => (checkboxRefs[index] = el)"
                  @click="toggle(item, index)" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </div>
      <div class="popbtn-box">
        <van-button style="flex: 1" type="default" size="small" @click="selfDefinedPopup = false">取消
        </van-button>
        <van-button style="flex: 1" type="primary" size="small" @click="popSure">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import {
  selectDeckList,
  addXFBB,
  queryJzList,
  tbJcglXfll,
  getQwdj,
  getQwbc,
  getXfq,
} from "../../../api/report.js";
import {
  selectNextPage,
  sysUser,
  getZnzb,
  selectJyqx,
  getXfclList,
  selectKfdList,
} from "../../../api/patrolBasicInfo";
import {
  getBxdList,
  finishReport,
  getMybbTodayNew,
  getMyXfpbToday,
  getBcxx,
  getKfd,
  getXfqs,
} from "../../../api/common";
import { timeFormat } from "../../../utils/index";
import { computed, ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
//主题色
const themeType = ref(getStorage("themeSetting"));
const themeVars = ref({
  cellBackgroundColor: themeType.value == "light" ? "#fff" : "#041634",
  fieldInputTextColor: themeType.value == "light" ? "#333" : "#fff",
  fieldLabelColor: themeType.value == "light" ? "#333" : "#fff",
  cellTextColor: themeType.value == "light" ? "#333" : "#fff",
  radioLabelColor: themeType.value == "light" ? "#333" : "#fff",
  cellBorderColor: themeType.value == "light" ? "#dbdbdb" : "#001e6b",
});
const specialForm = reactive({
  xlfs: "1",
  zzlx: "1",
  wzlx: "1",
  qwdjLabel: "",
  qwdj: "",
  startEndDate: "",
  ksDate: "",
  jsDate: "",
  ksTime: "",
  jsTime: "",
  kssj: "",
  jssj: "",
  jzLabel: "",
  jzMc: "",
  jzId: "",
  xfbmLabel: "",
  xfbm: "",
  xfbmdm: "",
  ssbm: "",
  ssbmdm: "",
  fzrXm: "",
  fzrSfzh: "",
  fzrLxdh: "",
  fzrId: "",
  znzbList: [],
  jyqxList: [],
  clList: [],
  jlList: [],
  bz: "",
  xfrq: timeFormat(new Date()),
  jgts: 0,
  bcmc: "",
  xfbm: "",
  xfbmdm: "",
  xffwid: "",
  xffwlx: "",
  xlfa: "1", //巡逻方案
});
const list = reactive({
  columns: [],
  jzList: [],
  ssbmList: [],
  fzrList: [],
  phone: "",
  fzrTotal: 0,
  mjList: [],
  fjList: [],
  fjXm: "",
  mjXm: "",
  zbList: [],
  jyqxList: [],
  clList: [],
  cph: "",
  sbmc: "",
  qxMc: "",
  text: "",
  mulChooseList: [],
  mj: [],
  fj: [],
  zn: [],
  jy: [],
  cl: [],
  scoutsRangeList: [
    {
      text: "巡防区",
      value: "巡防区",
      children: [],
    },
    {
      text: "快反点",
      value: "快反点",
      children: [],
    },
  ],
  xfqList: [],
  kfdList: [],
  rcfaList: [],
  tsfaList: [],
  bxdMc: "",
});
onMounted(() => {
  getIsReport();
  getXUJZList();
  getDepts();
  getMJList();
  getFj();
  getMJ();
  getznzbs();
  getJyqx();
  getCl();
  getQwLevel();
  getQwbcList();
  getSourtRange();
});
// 判断已报备还是未报备
function getIsReport() {
  let flag = route.query.reportTitle;
  if (route.query.reportType === "02") {
    if (flag === "报备") {
      getMyXfpbToday().then((res1) => {
        specialForm.bbzt = "0";
        specialForm.ksTime = res1.kssj;
        specialForm.jsTime = res1.jssj;
        specialForm.fzrXm = res1.fzrXm;
        specialForm.fzrId = res1.fzrId;
        specialForm.jzMc = res1.jzMc;
        specialForm.wzlx = res1.wzlx;
        specialForm.xffwlx = res1.xffwlx;
        specialForm.jzId = res1.jzId;
        specialForm.qwbcId = res1.pbId;
        specialForm.xffwid = res1.xffwid;
        specialForm.zqsc = res1.zqsc;
        specialForm.xfrq = timeFormat(new Date());
        getXffwList(res1.xffwid);
        specialForm.xlfs = res1.xlfs;
        specialForm.fzrLxdh = res1.fzrLxdh;
        specialForm.fzrSfzh = res1.fzrSfzh;
        specialForm.bz = res1.bz;
        specialForm.kssj = res1.kssj;
        specialForm.jssj = res1.jssj;
        specialForm.jd = "104.13407";
        specialForm.wd = "29.99572";
        // specialForm.xlfaMc = res1.xlfaMc
        specialForm.famc = res1.xlfaMc;
        specialForm.xlfaLx = res1.xlfaLx ? res1.xlfaLx : "01";
        specialForm.xlfaId = res1.xlfaId;
        if (specialForm.xlfaLx === "02") {
          specialForm.xlfaMc = res1.xlfaMc;
        }
        getBcxxList(res1.qwbcId);
        list.cl = JSON.parse(res1.pbcl);
        if (list.cl.length > 0) {
          specialForm.xlfs = "0";
        }
        list.cl.forEach((ele) => {
          ele.text = ele.jdchphm;
        });
        list.fj = JSON.parse(res1.pbfj);
        list.fj.forEach((f) => {
          f.text = f.jlxm;
        });
        list.mj = JSON.parse(res1.pbmj);
        list.mj.forEach((m) => {
          m.text = m.jlxm;
        });
        list.zn = JSON.parse(res1.txzb);
        list.zn.forEach((m) => {
          m.text = m.sbmc;
        });
        list.jy = JSON.parse(res1.jyqx);
        list.jy.forEach((m) => {
          m.text = m.qxmc;
          m.qxsl = m.sl;
        });
      });
    } else if (flag === "已报备") {
      getMybbTodayNew().then((res2) => {
        getBcxxList(res2.qwbcId);
        specialForm.xffwlx = res2.xffwlx;
        specialForm.xffwid = res2.xffwid;
        getXffwList(res2.xffwid);
        specialForm.id = res2.id;
        specialForm.ksTime = res2.bbkssj ? res2.bbkssj.split(" ")[1] : "";
        specialForm.jsTime = res2.bbjssj ? res2.bbjssj.split(" ")[1] : "";
        specialForm.fzrXm = res2.fzrXm;
        specialForm.fzrId = res2.fzrId;
        specialForm.jzMc = res2.jzMc;
        specialForm.bz = res2.bz;
        specialForm.famc = res2.xlfaMc;
        specialForm.xlfaLx = res2.xlfaLx ? res2.xlfaLx : "01";
        specialForm.xlfaId = res2.xlfaId;
        specialForm.kssj = res2.kssj;
        specialForm.jssj = res2.jssj;
        specialForm.jzId = res2.jzId;
        specialForm.xfpbId = res2.qwbcId;
        specialForm.zqsc = res2.zqsc;
        specialForm.jd = "104.13407";
        specialForm.wd = "29.99572";
        specialForm.xfrq = timeFormat(new Date());
        // specialForm.xlfaMc = res2.xlfaMc
        if (res2.xlfaLx === "02") {
          specialForm.xlfaMc = res2.xlfaMc;
        }
        list.cl = JSON.parse(res2.pbcl);
        if (list.cl.length > 0) {
          specialForm.xlfs = "0";
        }
        list.cl.forEach((ele) => {
          ele.text = ele.jdchphm;
        });
        list.fj = JSON.parse(res2.pbfj);
        list.fj.forEach((f) => {
          f.text = f.jlxm;
        });
        list.mj = JSON.parse(res2.pbmj);
        list.mj.forEach((m) => {
          m.text = m.jlxm;
        });
        list.zn = JSON.parse(res2.txzb);
        list.zn.forEach((m) => {
          m.text = m.sbmc;
        });
        list.jy = JSON.parse(res2.jyqx);
        list.jy.forEach((m) => {
          m.text = m.qxmc;
          m.qxsl = m.qxsl;
        });
        specialForm.wzlx = res2.wzlx;
        specialForm.xffwlx = res2.xffwlx;
        specialForm.xlfs = res2.xlfs;
        specialForm.xffwid = res2.xffwid;
      });
    }
  }
}
// 查询班次信息
function getBcxxList(val) {
  getBcxx(val).then((res) => {
    specialForm.bcmc = res.bcmc ? res.bcmc : "";
  });
}
// 查询巡防范围通过id查询
function getXffwList(val) {
  if (specialForm.xffwlx === "1") {
    getXfqs({
      id: val,
    }).then((res) => {
      specialForm.xfqMc = res.xfqMc;
    });
  } else if (specialForm.xffwlx === "2") {
    getKfd({
      id: val,
    }).then((res) => {
      specialForm.kfdMc = res.kfdMc;
    });
  }
}
// 勤务等级
const showqwPicker = ref(false);

function getQwLevel() {
  getQwdj({
    pageSize: 200,
    pageCurrent: 1,
    fbzt: 1,
  }).then((res) => {
    qwdjList.value = res.records;
    qwdjList.value.forEach((item) => {
      if (item.qwdj === "01") {
        item.text = "一级勤务";
      } else if (item.qwdj === "02") {
        item.text = "二级勤务";
      } else if (item.qwdj === "03") {
        item.text = "三级勤务";
      } else if (item.qwdj === "04") {
        item.text = "日常勤务";
      }
    });
  });
}
const qwdjList = ref([]);

function onqwConfirm(value) {
  specialForm.qwdjLabel = value.text;
  specialForm.qwdj = value.value;
  showqwPicker.value = false;
}
// 选择勤务班次
const showbcPicker = ref(false);

function onbcConfirm(val) {
  specialForm.bcmc = val.bcmc;
  specialForm.ksTime = val.kssj;
  specialForm.jsTime = val.jssj;
  specialForm.qwbcId = val.id;
  specialForm.zqsc = val.zqsc;
  showbcPicker.value = false;
}
const bcList = ref([]);

function getQwbcList() {
  getQwbc({
    pageSize: 200,
    pageCurrent: 1,
    bcmc: "",
    bclx: "02",
  }).then((res) => {
    bcList.value = res.records;
    bcList.value.forEach((item) => {
      item.text = item.bcmc;
    });
  });
}
// 开始结束日期
const calendarShow = ref(false);

function onCalendarConfirm(values) {
  // specialForm.startEndDate = timeFormat(values[0]) + '至' + timeFormat(values[1])
  // specialForm.ksDate = timeFormat(values[0])
  // specialForm.jsDate = timeFormat(values[1])
  specialForm.xfrq = timeFormat(values) + " " + "00:00:00";
  calendarShow.value = false;
}
// 开始时间
const showksPicker = ref(false);

function onksConfirm(val) {
  specialForm.kssj = val + ":" + "00";
  // specialForm.kssj = specialForm.ksDate + ' ' + specialForm.ksTime
  showksPicker.value = false;
}

function ksChange(val) {
  specialForm.kssj = val + ":" + "00";
}
// 结束时间
const showjsPicker = ref(false);

function onjsConfirm(val) {
  specialForm.jssj = val + ":" + "00";
  // specialForm.jssj = specialForm.jsDate + ' ' + specialForm.jsTime
  showjsPicker.value = false;
}
const showXfrq = ref(false);
const currentDate = ref(new Date());
const minDate = new Date();
const maxDate = new Date(2050, 10, 1);
const formatter = (type, val) => {
  if (type === "month") {
    return `${val}月`;
  }
  if (type === "day") {
    return `${val}日`;
  }
  return val;
};
//巡防日期
function onXfrqConfirm(val) {
  let time = new Date(val);
  let year = time.getFullYear();
  let month = time.getMonth() + 1;
  let day = time.getDate();
  specialForm.xfrq = year + "-" + month + "-" + day;
  showXfrq.value = false;
}

function jsChange(val) {
  specialForm.jssj = val + ":" + "00";
}

function xfChange(val) {
  let time = new Date(val);
  let year = time.getFullYear();
  let month = time.getMonth() + 1;
  let day = time.getDate();
  specialForm.xfrq = year + "-" + month + "-" + day;
}
// 巡防范围
const showsrPicker = ref(false);

function onsrChange(value) {
  specialForm.xffwid =
    value.selectedOptions[value.selectedOptions.length - 1].id;
  specialForm.xffwlx = value.selectedOptions[0].text;
}
// 选择警组
const showjzPicker = ref(false);

function onjzConfirm(val) {
  list.mj = [];
  list.fj = [];
  list.cl = [];
  list.zn = [];
  list.jy = [];
  specialForm.jzMc = val.jzMc;
  specialForm.fzrXm = val.ddMjxm;
  specialForm.fzrLxdh = val.ddDh;
  specialForm.fzrId = val.ddMjid;
  specialForm.fzrSfzh = val.ddMjsfzh;
  specialForm.jh = val.ddMjjh;
  specialForm.jzId = val.id;
  specialForm.ssbm = val.ssbm;
  specialForm.ssbmdm = val.ssbmdm;
  // 民警辅警已有赋值
  val.jzryList.forEach((m) => {
    if (m.jllx === "01") {
      list.mj.push({
        jh: m.jh,
        jllx: m.jllx,
        jlxm: m.jlxm,
        text: m.jlxm,
        nl: m.nl,
        qwjzId: m.qwjzId,
        jlId: m.ryId,
        sfzh: m.sfzh,
        xbdm: m.xbdm,
        xm: m.jlxm,
        jh: m.jh,
        lxdh: m.lxdh,
      });
    }
    if (m.jllx === "02") {
      list.fj.push({
        jh: m.jh,
        jllx: m.jllx,
        jlxm: m.jlxm,
        text: m.jlxm,
        nl: m.nl,
        qwjzId: m.qwjzId,
        jlId: m.ryId,
        sfzh: m.sfzh,
        xbdm: m.xbdm,
        xm: m.jlxm,
        jh: m.jh,
        lxdh: m.lxdh,
      });
    }
  });
  // 车辆
  val.clList.forEach((c) => {
    list.cl.push({
      clId: c.clId,
      jdchphm: c.jdchphm,
      text: c.jdchphm,
      jdchpzldm: c.jdchpzldm,
      qwjzId: c.qwjzId,
    });
  });
  // 警用器械
  val.jyqxList.forEach((j) => {
    list.jy.push({
      qxid: j.qxId,
      qxmc: j.qxmc,
      text: j.qxmc,
      qxsl: j.sl ? j.sl : 1,
      qxlx: j.qxlx,
      qwjzId: j.qwjzId,
    });
  });
  // 智能装备
  val.txzbList.forEach((z) => {
    list.zn.push({
      sbmc: z.sbmc,
      text: z.sbmc,
      txzblx: z.txzblx,
      txzbId: z.zbId,
      qwjzId: z.qwjzId,
      hh: z.hh,
    });
  });
  showjzPicker.value = false;
}
const customJzFieldName = {
  text: "jzMc",
};
// 查询警组
function getXUJZList() {
  queryJzList({
    pageSize: 20,
    pageCurrent: 1,
  }).then((res) => {
    list.jzList = res.records;
  });
}
// 巡防部门
const showxfPicker = ref(false);

function onxfConfirm(val) {
  showxfPicker.value = false;
}
const customFieldNamed = {
  text: "orgName",
  value: "orgName",
  children: "childDeptList",
};
const showbmPicker = ref(false);

function onChange(value, selectedOptions) {
  specialForm.ssbmdm =
    value.selectedOptions[value.selectedOptions.length - 1].id;
}
// 查询部门
function getDepts() {
  selectNextPage({}).then((res) => {
    list.ssbmList = [res.records[0]];
  });
}
// 选择负责人
const showfzrPicker = ref(false);

function onfzrConfirm(val) {
  specialForm.fzrXm = val.userName;
  specialForm.jzMc = val.userName + "-" + "警组";
  specialForm.fzrSfzhL = val.idEntityCard;
  specialForm.fzrLxdh = val.telePhone;
  specialForm.fzrId = val.id;
  showfzrPicker.value = false;
}
const customfzrFieldNamed = {
  text: "userName",
};
// 查询负责人
function getMJList() {
  sysUser({
    current: 1,
    size: 50,
    phone: list.phone,
  }).then((res) => {
    list.fzrList = res.records;
    list.fzrTotal = res.total;
  });
}

// 查询民警辅警 智能装备 警用器械 巡防车辆
function getJYList(val) {
  switch (val) {
    case "选择民警":
      list.mjXm = list.text;
      getMJ();
      list.mulChooseList = list.mjList;
      break;
    case "选择辅警":
      list.fjXm = list.text;
      getFj();
      list.mulChooseList = list.fjList;
      break;
    case "选择智能装备":
      list.sbmc = list.text;
      getznzbs();
      list.mulChooseList = list.zbList;
      break;
    case "选择警用器械":
      list.qxMc = list.text;
      getJyqx();
      list.mulChooseList = list.jyqxList;
      break;
    case "选择巡防车辆":
      list.cph = list.text;
      getCl();
      list.mulChooseList = list.clList;
      break;
  }
}
// 民警
function getMJ() {
  tbJcglXfll({
    pageCurrent: 1,
    pageSize: 50,
    fl: "01", // 民警
    xm: list.mjXm,
  }).then((res) => {
    list.mjList = res.records;
    list.mjList.forEach((item) => {
      item.text = item.xm;
    });
  });
}
// 辅警
function getFj() {
  tbJcglXfll({
    pageCurrent: 1,
    pageSize: 50,
    fl: "02", // 辅警
    xm: list.fjXm,
  }).then((res) => {
    list.fjList = res.records;
    list.fjList.forEach((item) => {
      item.text = item.xm;
    });
  });
}
// 智能装备
function getznzbs() {
  // 智能装备
  getZnzb({
    pageNo: 1,
    pageSize: 50,
    sbmc: list.sbmc,
  }).then((res) => {
    list.zbList = res.records;
    list.zbList.forEach((item) => {
      item.text = item.sbmc;
    });
  });
}

function getJyqx() {
  // 警用器械
  selectJyqx({
    pageNo: 1,
    pageSize: 50,
    qxMc: list.qxMc,
  }).then((res) => {
    list.jyqxList = res.records;
    list.jyqxList.forEach((item) => {
      item.text = item.qxMc;
    });
  });
}

function getCl() {
  // 巡防车辆
  getXfclList({
    pageCurrent: 1,
    pageSize: 50,
    cph: list.cph,
  }).then((res) => {
    list.clList = res.records;
    list.clList.forEach((item) => {
      item.text = item.cph;
    });
  });
}
// 弹框标题
const checkList = reactive({});
const checkedList = ref([]);
const checkboxRefs = ref([]);
const popupTitle = ref("");
const selfDefinedPopup = ref(false);

function showDialogfn(val) {
  list.text = "";
  switch (val) {
    case "mj":
      popupTitle.value = "选择民警";
      checkedList.value = list.mj.map((el) => el.text);
      list.mulChooseList = list.mjList;
      break;
    case "fj":
      popupTitle.value = "选择辅警";
      checkedList.value = list.fj.map((el) => el.text);
      list.mulChooseList = list.fjList;
      break;
    case "zn":
      popupTitle.value = "选择智能装备";
      checkedList.value = list.zn.map((el) => el.text);
      list.mulChooseList = list.zbList;
      break;
    case "jy":
      popupTitle.value = "选择警用器械";
      checkedList.value = list.jy.map((el) => el.text);
      list.mulChooseList = list.jyqxList;
      break;
    case "cl":
      popupTitle.value = "选择巡防车辆";
      checkedList.value = list.cl.map((el) => el.text);
      list.mulChooseList = list.clList;
      break;
  }
  selfDefinedPopup.value = true;
}

function popSure() {
  selfDefinedPopup.value = false;
}
const toggle = (item, index) => {
  switch (popupTitle.value) {
    case "选择民警":
      if (!list.mj.map((m) => m.text).includes(item.text)) {
        list.mj.push({
          jh: item.jh,
          jllx: item.fl,
          jlxm: item.xm,
          text: item.xm,
          nl: 0,
          qwjzId: "",
          jlId: item.ryid,
          sfzh: item.sfzh,
          xbdm: item.xbdm,
          xm: item.jlxm,
          jh: item.jh,
          lxdh: item.lxdh,
          id: item.ryid,
        });
      } else {
        list.mj.splice(list.mj.map(m1 => m1.jlxm).indexOf(item.xm), 1)
      }
      break;
    case "选择辅警":
      if (!list.fj.map((f) => f.text).includes(item.text)) {
        list.fj.push({
          jh: item.jh,
          jllx: item.fl,
          jlxm: item.xm,
          text: item.xm,
          nl: 0,
          qwjzId: "",
          jlId: item.id,
          sfzh: item.sfzh,
          xbdm: item.xbdm,
          xm: item.jlxm,
          jh: item.jh,
          lxdh: item.lxdh,
          id: item.id,
        });
      } else {
        list.fj.splice(list.fj.map(f1 => f1.jlxm).indexOf(item.jlxm), 1)
      }
      break;
    case "选择智能装备":
      if (!list.zn.map((z) => z.text).includes(item.text)) {
        list.zn.push({
          sbmc: item.sbmc,
          text: item.sbmc,
          txzblx: item.scode,
          txzbId: item.id,
          hh: item.sbbh,
        });
      } else {
        list.zn.splice(list.zn.map(f1 => f1.text).indexOf(item.text), 1)
      }
      break;
    case "选择警用器械":
      if (!list.jy.map((j) => j.qxid).includes(item.id)) {
        list.jy.push({
          qxid: item.id,
          qxmc: item.qxMc,
          text: item.qxMc,
          qxsl: item.sl,
          qxlx: item.scode,
        });
      } else {
        list.jy.splice(list.jy.map(f1 => f1.text).indexOf(item.text), 1)
      }
      if (item.scode === "01") {
        specialForm.wzlx = "1";
      }
      break;
    case "选择巡防车辆":
      if (!list.cl.map((c) => c.clId).includes(item.cid)) {
        specialForm.xlfs = "0";
        list.cl.push({
          clId: item.cid,
          jdchphm: item.cph,
          text: item.cph,
          jdchpzldm: item.cllx,
        });
      } else {
        list.cl.splice(list.cl.map(f1 => f1.text).indexOf(item.text), 1)
      }
      break;
  }
};

function deleteCheckTag(item, index, val) {
  switch (val) {
    case "mj":
      list.mj.splice(index, 1);
      break;
    case "fj":
      list.fj.splice(index, 1);
      break;
    case "zn":
      list.zn.splice(index, 1);
      break;
    case "jy":
      list.jy.splice(index, 1);
      if (!list.jy.map((j) => j.scode).includes("01")) {
        specialForm.wzlx = "0";
      }
      break;
    case "cl":
      list.cl.splice(index, 1);
      if (list.cl == false) {
        specialForm.xlfs = "1";
      }
      break;
  }
}
// 查询巡防范围
function getSourtRange() {
  getXfq({
    pageCurrent: 1,
    pageSize: 200,
  }).then((res) => {
    let xfq = res.records;
    list.xfqList = res.records;
    list.scoutsRangeList[0].children = xfq;
  });
  selectKfdList({
    pageNum: 1,
    pageSize: 200,
  }).then((res) => {
    let kfd = res.records;
    list.kfdList = res.records;
    list.scoutsRangeList[1].children = kfd;
  });
}

// 日常方案
const showrcfaPicker = ref(false);

function onrcfaConfirm() {
  showrcfaPicker.value = false;
}

function getFaList() {
  getBxdList({
    pageSize: 50,
    pageCurrent: 1,
    bxdMc: list.bxdMc,
  }).then((res) => {
    list.records = res.records;
  });
}
// 特殊方案
const showtsfaPicker = ref(false);

function ontsfaConfirm() {
  showtsfaPicker.value = false;
}
// 巡防区
const filedxfqNames = {
  text: "xfqMc",
};
const showxfqPicker = ref(false);

function onxfqConfirm(val) {
  specialForm.xffwid = val.id;
  specialForm.xfqMc = val.xfqMc;
  specialForm.xffwmc = val.xfqMc;
  showxfqPicker.value = false;
}
// 快反点
const filedkfdNames = {
  text: "kfdMc",
};
const showkfdPicker = ref(false);

function onkfdConfirm(val) {
  specialForm.xffwid = val.kfdId;
  specialForm.kfdMc = val.kfdMc;
  specialForm.xffwmc = val.kfdMc;
  showkfdPicker.value = false;
}

// 新增报备接口
function submit() {
  specialForm.jlList = [...list.mj, ...list.fj];
  specialForm.clList = list.cl;
  specialForm.jyqxList = list.jy;
  specialForm.znzbList = list.zn;
  const params = {
    xlfs: specialForm.xlfs,
    wzlx: specialForm.wzlx,
    zzlx: specialForm.zzlx,
    ssbmdm: specialForm.ssbmdm,
    ssbm: specialForm.ssbm,
    xfrq: specialForm.xfrq,
    xffwlx: specialForm.xffwlx,
    xffwid: specialForm.xffwid,
    qwbcId: specialForm.qwbcId,
    kssj: specialForm.ksTime,
    jssj: specialForm.jsTime,
    zqsc: specialForm.zqsc,
    jzId: specialForm.jzId,
    fzrXm: specialForm.fzrXm,
    fzrId: specialForm.fzrId,
    jzMc: specialForm.jzMc,
    fzrSfzh: specialForm.fzrSfzh,
    fzrLxdh: specialForm.fzrLxdh,
    bz: specialForm.bz,
    jlList: specialForm.jlList,
    znzbList: specialForm.znzbList,
    jyqxList: specialForm.jyqxList,
    clList: specialForm.clList,
    bblx: "02",
  };
  if (route.query.reportTitle === "报备") {
    addXFBB(params).then((res) => {
      finishReport({
        bbzt: "0",
        id: res,
      }).then((res) => { });
      router.push("/home");
    });
  } else if (route.query.reportTitle === "已报备") {
    finishReport({
      bbzt: "1",
      id: specialForm.id,
    }).then((res) => {
      router.push("/home");
    });
  }
}
</script>

<style lang="scss" scoped>
.popupTitle {
  text-align: center;
  background-color: rgb(11, 137, 247);
  height: 6vh;
  line-height: 6vh;
}

.popbtn-box {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.check-item-tag {
  display: inline-block;
  margin: 0 6px;
}

.check-data-box {
  height: 25vh;
  overflow: auto;
}

.time-box {
  display: flex;
}

::v-deep .mulSelect .van-cell__title,
.van-cell__value {
  flex: unset;
}

::v-deep .mulSelect .van-cell__value {
  flex: 1;
}

.title_tab {
  padding-left: 7vw;
  position: relative;
  margin: 2vw 0;
  letter-spacing: 2px;
}

.title_tab::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5vw;
  bottom: 0;
  width: 4px;
  background: #3b6be7;
  border-radius: 2px;
}

.van-cell:after {
  display: none;
}

.van-cell {
  background: #e4e9f6;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 6px;
  margin: 8px 5%;
  width: 90%;
  overflow: hidden;
  color: var(--van-cell-text-color);
  font-size: var(--van-cell-font-size);
  line-height: var(--van-cell-line-height);
}

.popupTitle {
  color: #fff;
}
</style>
