<script setup>
import ChoosePolice from "@/components/MyComponents/choosePolice";
import ZnzbLoad from "@/components/MyComponents/ChooseJz/ZnzbLoad.vue";
import JyqxLoad from "@/components/MyComponents/ChooseJz/JyqxLoad.vue";
import JyclLoad from "@/components/MyComponents/ChooseJz/JzclLoad.vue";
import JzLoad from "@/components/MyComponents/ChooseJz/JzLoad.vue";
import {
  getXfpb,
  addXfpb,
  deleteXfpb,
  getXfpbByUser,
  getXfpbInfo,
  updateXfpb
} from "@/api/service/watchmanSchedulingPbjl.js";
import { getQwbc } from "@/api/service/shift.js";
import { getKfd } from "@/api/basicsmanage/quick-rebate.js";
import { getXfqy } from "@/api/basicsmanage/patrolArea.js";
import { selectDeptPage } from "@/api/user-manage";
import {
  ref,
  getCurrentInstance,
  onMounted,
  onUnmounted,
  watch,
  reactive
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const { D_ZDY_XFFWLX, D_BZ_DJQW, D_BZ_ZZLX, D_BZ_WZLX } = proxy.$dict(
  "D_BZ_WZLX",
  "D_ZDY_XFFWLX",
  "D_BZ_DJQW",
  "D_BZ_ZZLX"
);
const keyCount = ref(0); //tabel组件刷新值
const bacthIndex = ref(0); //批量操作下标值
const PoliceType = ref(""); //民警辅警弹窗
const mjList = ref([]);
const chooseUserVisible = ref(false);
const batchActive = ref(false); //批量新增
const fjList = ref([]);
const form = ref({ wzlx: "1", zzlx: "1" }); //新增表单
const tableData = ref([]); //表格数据
const total = ref(0);
const cascader = ref(null);
const depList = ref([]); //部门数据
const chackipt = ref(true); //部门选择控制
const chackAdd = ref(false); //新增修改切换
const jyqxVisible = ref(false); //警用器械弹窗
const jyqxData = ref([]);
const jyclVisible = ref(false); //警用车辆弹窗
const jyclData = ref([]);
const choosePoliceVisible = ref(false); //民警辅警弹窗
const znzbVisible = ref(false); //智能装备弹窗
const znzbData = ref([]);
const jzVisible = ref(false); //警组
const loading = ref(false); //新增保存按钮截流
const ids = ref([]); //表格选中id集合
const searchBox = ref(null); //搜索盒子
const loadingTable = ref(false); //表格加载状态
const tableHeight = ref(); // 表格高度
const QzrqS = ref([]); // 表格高度
const dialogFormVisible = ref(false);
const title = ref("新增"); //弹窗标题
const elform = ref(null); //新增表单容器
const bacthForm = ref({}); //批量新增表单
const qwbaDataList = ref([]); //勤务班次数据
const checkDay = ref(1);
const checkB = ref(1);
// 循环周期
const xhzqVal = ref(3);
// 循环周期自定义
const zdyDisabVal = ref(true);
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 10
}); //搜索表单
//表单验证
const rules = ref({
  fzrXm: [
    {
      required: true,
      message: "请选择负责人",
      trigger: "change"
    }
  ],
  ssbmdm: [
    {
      required: true,
      message: "请选择巡防部门",
      trigger: "change"
    }
  ],
  xfrq: [
    {
      required: true,
      message: "请选择巡防排班日期",
      trigger: "change"
    }
  ],
  qwbcId: [
    {
      required: true,
      message: "请选择排班类型",
      trigger: "change"
    }
  ],
  jzMc: [
    {
      required: true,
      message: "请选择警组",
      trigger: "change"
    }
  ],
  xhlx: [
    {
      required: true,
      message: "请选择循环类型",
      trigger: "change"
    }
  ],
  pbksrq: [
    {
      required: true,
      message: "请选择排班开始日期",
      trigger: "change"
    }
  ]
});
//部门级联选择器配置
const props = {
  expandTrigger: "children",
  children: "childDeptList",
  label: "orgName",
  value: "id",
  checkStrictly: true,
  emitPath: false
};
//巡防区数据
const xfList = reactive({
  xfqList: [],
  kfdList: [],
  jczList: []
});
//巡防范围配置
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 {
      getKfd({ pageNum: 1, pageSize: 100 }).then((res) => {
        nodes = res.records.map((item) => {
          return { value: item.kfdId, label: item.kfdMc, leaf: level >= 1 };
        });
        resolve(nodes);
      });
    }
  }
};
function upQzrqS() {
  if (QzrqS.value.length == 2) {
    listQuery.value.pbksrq = QzrqS.value[0];
    listQuery.value.pbjsrq = QzrqS.value[1];
  }
}
function zdyDisabFn(e) {
  if (e == 3 || e == 7 || e == 1 || e == 2) {
    zdyDisabVal.value = true;
    bacthForm.value.xhzq = e;
    let arr = [];
    let num = bacthForm.value.mrbc * bacthForm.value.xhzq;
    for (let i = 1; i <= num; i++) {
      arr.push({
        jlList: [],
        jyqxList: [],
        znzbList: [],
        clList: [],
        wzlx: "1",
        zzlx: "1"
      });
    }
    bacthForm.value.zqList = arr;
  } else {
    zdyDisabVal.value = false;
  }
}
//选则民警、辅警
function choosePolice(type, i) {
  bacthIndex.value = i;
  PoliceType.value = type;
  choosePoliceVisible.value = true;
}
//查询条件选择部门
function handleChange(e) {
  let data = cascader.value.getCheckedNodes();
  const ids = JSON.parse(JSON.stringify(e));
  if (dialogFormVisible.value) {
    form.value.xfbm = data[0].text;
    form.value.ssbmdm = ids;
  } else {
    bacthForm.value.ssbm = data[0].text;
    bacthForm.value.ssbmdm = ids;
  }
}
// 获取列表
function getListData() {
  loadingTable.value = true;
  getXfpbByUser(listQuery.value).then((res) => {
    tableData.value = res.records;
    total.value = res.total;
    loadingTable.value = false;
  }).catch(()=>{
    loadingTable.value = false;
  });;
}
// 选择民警
function choosedPolice(police) {
  if (police.type == "MJ") {
    if (dialogFormVisible.value) {
      mjList.value = police.userList.map((item) => {
        return {
          jlId: item.id,
          jllx: item.fl,
          jlxm: item.xm,
          sfzh: item.idEntityCard,
          xbdm: item.sex,
          lxdh: item.mobile
        };
      });
    } else {
      //批量
      let arrfj = bacthForm.value.zqList[bacthIndex.value].jlList.filter(
        (item) => {
          return item.jllx == "02";
        }
      );
      let arrmj = police.userList.map((item) => {
        return {
          jlId: item.id,
          jllx: item.fl,
          jlxm: item.xm,
          sfzh: item.sfzh,
          xbdm: item.xbdm,
          lxdh: item.lxdh
        };
      });
      bacthForm.value.zqList[bacthIndex.value].jlList = [...arrmj, ...arrfj];
    }
  }
  if (police.type == "FJ") {
    if (dialogFormVisible.value) {
      fjList.value = police.userList.map((item) => {
        return {
          jlId: item.id,
          jllx: item.fl,
          jlxm: item.xm,
          sfzh: item.sfzh,
          xbdm: item.xbdm,
          lxdh: item.lxdh
        };
      });
    } else {
      let arrmj = bacthForm.value.zqList[bacthIndex.value].jlList.filter(
        (item) => {
          return item.jllx == "01";
        }
      );
      let arrfj = police.userList.map((item) => {
        return {
          jlId: item.id,
          jllx: item.fl,
          jlxm: item.xm,
          sfzh: item.sfzh,
          xbdm: item.xbdm,
          lxdh: item.lxdh
        };
      });
      bacthForm.value.zqList[bacthIndex.value].jlList = [...arrmj, ...arrfj];
    }
  }
}
//选择负责人
const hanlderChoose = (users) => {
  const user = users[0];
  if (dialogFormVisible.value) {
    form.value.fzrXm = user.xm;
    form.value.fzrLxdh = user.lxdh;
    form.value.fzrSfzh = user.sfzh;
  } else {
    bacthForm.value.zqList[bacthIndex.value].fzrXm = user.xm;
    bacthForm.value.zqList[bacthIndex.value].fzrLxdh = user.lxdh;
    bacthForm.value.zqList[bacthIndex.value].fzrSfzh = user.sfzh;
    bacthForm.value.zqList[bacthIndex.value].fzrId = user.ryid;
  }
  chooseUserVisible.value = false;
};
//负责人弹窗
function bacthFzr(i) {
  chooseUserVisible.value = true;
  bacthIndex.value = i;
}
function bacthJz(i) {
  jzVisible.value = true;
  bacthIndex.value = i;
}
function handleCloseCl(tag) {
  if (dialogFormVisible.value) {
    jyclData.value.splice(jyclData.value.indexOf(tag), 1);
  } else {
    bacthForm.value.zqList[bacthIndex.value].clList.splice(
      bacthForm.value.zqList[bacthIndex.value].clList.indexOf(tag),
      1
    );
  }
}
function handleClose(tag, type, i = 0) {
  if (dialogFormVisible.value) {
    if (type == "mj") {
      mjList.value.splice(mjList.value.indexOf(tag), 1);
    } else {
      fjList.value.splice(fjList.value.indexOf(tag), 1);
    }
  } else {
    bacthIndex.value = i;
    bacthForm.value.zqList[bacthIndex.value].jlList.splice(
      bacthForm.value.zqList[bacthIndex.value].jlList.indexOf(tag),
      1
    );
  }
}
function bcathChoosePolice(type, i) {
  PoliceType.value = type;
  choosePoliceVisible.value = true;
  bacthIndex.value = i;
}
function bcathXfcl(i) {
  jyclVisible.value = true;
  bacthIndex.value = i;
}
function bcathJyqx(i) {
  bacthIndex.value = i;
  jyqxVisible.value = true;
}
function bcathZnzb(i) {
  bacthIndex.value = i;
  znzbVisible.value = true;
}
//选择警用车辆
function hanlderChooseJycl(arr) {
  const clList = arr.map((item) => {
    return { clId: item.cid, jdchphm: item.cph, jdchpzldm: item.cplx };
  });
  if (dialogFormVisible.value) {
    jyclData.value = clList;
  } else {
    bacthForm.value.zqList[bacthIndex.value].clList = clList;
  }
}
//选择警用器械
function hanlderChooseJyqx(arr) {
  const jyqxList = arr.map((item) => {
    return { qxid: item.id, qxlx: item.scode, qxsl: 1, qxmc: item.qxMc };
  });
  if (dialogFormVisible.value) {
    jyqxData.value = jyqxList;
  } else {
    bacthForm.value.zqList[bacthIndex.value].jyqxList = jyqxList;
  }
}
function handleCloseQx(tag, i = 0) {
  //单条新增
  if (dialogFormVisible.value) {
    jyqxData.value.splice(jyqxData.value.indexOf(tag), 1);
    let arr = jyqxData.value.map((item) => item.qxlx);
    if (arr.indexOf("01") !== -1) {
      form.value.wzlx = "1";
    } else {
      form.value.wzlx = "1";
    }
  } else {
    bacthIndex.value = i;
    bacthForm.value.zqList[bacthIndex.value].jyqxList.splice(
      bacthForm.value.zqList[bacthIndex.value].jyqxList.indexOf(tag),
      1
    );
  }
}
function handleCloseZb(tag, i) {
  if (dialogFormVisible.value) {
    znzbData.value.splice(znzbData.value.indexOf(tag), 1);
  } else {
    bacthIndex.value = i;
    bacthForm.value.zqList[bacthIndex.value].znzbList.splice(
      bacthForm.value.zqList[bacthIndex.value].znzbList.indexOf(tag),
      1
    );
  }
}
function mrbcChange(e) {
  let arr = [];
  let num = bacthForm.value.xhzq * e;
  for (let i = 1; i <= num; i++) {
    arr.push({
      jlList: [],
      jyqxList: [],
      znzbList: [],
      clList: [],
      wzlx: "1",
      zzlx: "1"
    });
  }
  bacthForm.value.zqList = arr;
}
//选择智能装备
function hanlderChooseZnzb(arr) {
  const txzbList = arr.map((item) => {
    return {
      txzblx: item.scode,
      txzbId: item.id,
      sbmc: item.sbmc,
      hh: item.sbbh
    };
  });
  if (dialogFormVisible.value) {
    znzbData.value = txzbList;
  } else {
    bacthForm.value.zqList[bacthIndex.value].znzbList = txzbList;
  }
}
//选择警组
function hanlderChooseJz(arr) {
  if (dialogFormVisible.value) {
    mjList.value = [];
    fjList.value = [];
    const data = arr[0];
    form.value.fzrXm = data.ddMjxm;
    form.value.fzrLxdh = data.ddDh;
    form.value.fzrId = data.ddMjid;
    form.value.fzrSfzh = data.ddMjsfzh;
    jyqxData.value = data.jyqxList;
    jyclData.value = data.clList;
    znzbData.value = data.txzbList.map((item) => {
      return {
        txzbId: item.zbId,
        sbmc: item.sbmc,
        txzblx: item.txzblx,
        hh: item.hh
      };
    });
    data.jzryList.forEach((v) => {
      if (v.jllx == "01") {
        mjList.value.push(v);
      } else {
        fjList.value.push(v);
      }
    });
    form.value.jzMc = data.jzMc;
    form.value.jzId = data.id;
  } else {
    bacthForm.value.zqList[bacthIndex.value].fzrXm = arr[0].ddMjxm;
    bacthForm.value.zqList[bacthIndex.value].jzId = arr[0].id;
    bacthForm.value.zqList[bacthIndex.value].fzrSfzh = arr[0].ddMjsfzh;
    bacthForm.value.zqList[bacthIndex.value].jzMc = arr[0].jzMc;
    bacthForm.value.zqList[bacthIndex.value].fzrId = arr[0].ddMjid;
    bacthForm.value.zqList[bacthIndex.value].fzrLxdh = arr[0].ddDh;
    bacthForm.value.zqList[bacthIndex.value].jyqxList = arr[0].jyqxList.map(
      (item) => {
        return {
          qxId: item.qxId,
          qxlx: item.qxlx,
          qxsl: item.qxsl,
          qxmc: item.qxmc
        };
      }
    );
    bacthForm.value.zqList[bacthIndex.value].clList = arr[0].clList.map(
      (item) => {
        return {
          clId: item.clId,
          jdchphm: item.jdchphm,
          jdchpzldm: item.jdchpzldm
        };
      }
    );
    bacthForm.value.zqList[bacthIndex.value].jlList = arr[0].jzryList.map(
      (item) => {
        return {
          jlId: item.ryId,
          jllx: item.jllx,
          jlxm: item.jlxm,
          sfzh: item.sfzh,
          xbdm: item.xbdm,
          lxdh: item.lxdh
        };
      }
    );
    bacthForm.value.zqList[bacthIndex.value].znzbList = arr[0].txzbList.map(
      (item) => {
        return {
          txzbId: item.zbId,
          sbmc: item.sbmc,
          txzblx: item.txzblx,
          hh: item.hh
        };
      }
    );
  }
}
function setQwbc(e) {
  bacthIndex.value = e;
  qwbaDataList.value.forEach((v) => {
    if (v.id == form.value.qwbcId) {
      if (dialogFormVisible.value) {
        form.value.kssj = v.kssj;
        form.value.jssj = v.jssj;
        form.value.qwbcId = v.id;
        form.value.zqsc = v.zqsc;
      }
    }
    if (v.id == bacthForm.value.zqList[bacthIndex.value].qwbcId) {
      bacthForm.value.zqList[bacthIndex.value].kssj = v.kssj;
      bacthForm.value.zqList[bacthIndex.value].jssj = v.jssj;
      bacthForm.value.zqList[bacthIndex.value].qwbcId = v.id;
      bacthForm.value.zqList[bacthIndex.value].zqsc = v.zqsc;
    }
  });
}
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 add() {
  title.value = "新增巡防排班";
  chackipt.value = false;
  chackAdd.value = true;
  dialogFormVisible.value = true;
}
// 批量新增
function batchAddFn() {
  bacthForm.value = {
    mrbc: 1,
    xhzq: 3,
    jsrqlx: "0",
    zqList: [
      {
        jlList: [],
        jyqxList: [],
        znzbList: [],
        clList: [],
        wzlx: "1",
        zzlx: "1"
      },
      {
        jlList: [],
        jyqxList: [],
        znzbList: [],
        clList: [],
        wzlx: "1",
        zzlx: "1"
      },
      {
        jlList: [],
        jyqxList: [],
        znzbList: [],
        clList: [],
        wzlx: "1",
        zzlx: "1"
      }
    ]
  };
  xhzqVal.value = 3;
  chackipt.value = false;
  title.value = "批量新增巡防排班";
  chackAdd.value = true;
  batchActive.value = true;
}
function focusF() {
  chackipt.value = false;
}
//关闭弹窗
function close() {
  dialogFormVisible.value = false;
  form.value = {
    wzlx: "1",
    zzlx: "1"
  };
  znzbData.value = [];
  jyqxData.value = [];
  jyclData.value = [];
  mjList.value = [];
  fjList.value = [];
}
//关闭批量弹窗
function closeBacth() {
  batchActive.value = false;
  loading.value = false;
}

// 时分秒截取
function setHm(item) {
  return item.split(":")[0] + ":" + item.split(":")[1];
}
//提交
function submit() {
  elform.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      if (dialogFormVisible.value) {
      } else {
        const params = {
          xhzq: bacthForm.value.xhzq,
          ssbmdm: bacthForm.value.ssbmdm,
          ssbm: bacthForm.value.ssbm,
          pbksrq: bacthForm.value.pbksrq,
          pbjsrq: bacthForm.value.jsrqlx == 1 ? bacthForm.value.pbjsrq : null,
          jsrqlx: bacthForm.value.jsrqlx,
          xhlx: bacthForm.value.xhlx,
          mrbc: bacthForm.value.mrbc,
          bz: bacthForm.value.bz,
          zqList: bacthForm.value.zqList.map((e, i) => {
            return {
              xffwlx: e.xffwlx ? e.xffwlx[0] : null,
              xffwid: e.xffwlx ? e.xffwlx[1] : null,
              jzMc: e.jzMc || "",
              jzId: e.jzId || "",
              fzrXm: e.fzrXm || "",
              fzrId: e.fzrId || "",
              zqsc: e.zqsc | "",
              bcs: (i % bacthForm.value.mrbc) + 1,
              xfzq: Math.floor(i / bacthForm.value.mrbc) + 1,
              fzrSfzh: e.fzrSfzh || "",
              fzrLxdh: e.fzrLxdh || "",
              jlList: e.jlList || [],
              clList: e.clList || [],
              znzbList: e.znzbList || [],
              jyqxList: e.jyqxList || [],
              wzlx: e.wzlx || "",
              zzlx: e.zzlx || "",
              qwbcId: e.qwbcId || "",
              kssj: e.kssj || "",
              jssj: e.jssj || ""
            };
          })
        };
        if (chackAdd.value) {
          addXfpb(params).then(() => {
            proxy.$message({
              type: "success",
              message: "新增成功"
            });
            loading.value = false;
            batchActive.value = false;
            getListData();
          });
        } else {
          params.id = bacthForm.value.id;
          updateXfpb(params).then(() => {
            proxy.$message({
              type: "success",
              message: "修改成功"
            });
            loading.value = false;
            batchActive.value = false;
            getListData();
          });
        }
      }
    }
  });
}
function sortBy(field) {
  //根据传过来的字段进行排序
  return (x, y) => {
    return x[field] - y[field];
  };
}
//修改
function update(row) {
  title.value = "巡防排班详情";
  getXfpbInfo(row.id).then((res) => {
    xhzqVal.value =
      res.xhzq == 2 || res.xhzq == 3 || res.xhzq == 1 ? res.xhzq : 0;
    bacthForm.value.xhzq = res.xhzq;
    bacthForm.value.ssbmdm = res.ssbmdm;
    bacthForm.value.ssbm = res.ssbm;
    bacthForm.value.pbksrq = res.pbksrq;
    bacthForm.value.pbjsrq = res.pbjsrq;
    bacthForm.value.jsrqlx = res.jsrqlx;
    bacthForm.value.id = res.id;
    bacthForm.value.xhlx = res.xhlx;
    bacthForm.value.mrbc = res.mrbc;
    bacthForm.value.bz = res.bz;
    const arrSort = res.zqList
      .map((item, i) => {
        item.xffwList.forEach((el) => {
          el.value = el.glbid;
          el.label = el.fwMc;
        });
        return {
          xffwlx: item.xffwlx,
          jzMc: item.jzMc,
          xffwList: item.xffwList,
          xf: item.xffwList.map((_item) => _item.glbid),
          jzId: item.jzId,
          fzrXm: item.fzrXm,
          fzrId: item.fzrId,
          zqsc: item.zqsc,
          bcs: item.bcs,
          xfzq: item.xfzq,
          fzrSfzh: item.fzrSfzh,
          fzrLxdh: item.fzrLxdh,
          jlList: item.jlList,
          clList: item.clList,
          znzbList: item.znzbList,
          jyqxList: item.jyqxList,
          wzlx: item.wzlx,
          zzlx: item.zzlx,
          qwbcId: item.qwbcId,
          x: item.xfzq * res.mrbc - res.mrbc + item.bcs,
          kssj: item.kssj,
          jssj: item.jssj
        };
      })
      .sort(sortBy("x"));
    bacthForm.value.zqList = arrSort;
    // bacthForm.value.zqList = arrSort.map((item, i) => {
    //   return {
    //     xffwlx: item.xffwlx,
    //     jzMc: item.jzMc,
    //     jzId: item.jzId,
    //     fzrXm: item.fzrXm,
    //     fzrId: item.fzrId,
    //     zqsc: item.zqsc,
    //     bcs: item.bcs,
    //     xfzq: item.xfzq,
    //     fzrSfzh: item.fzrSfzh,
    //     fzrLxdh: item.fzrLxdh,
    //     jlList: item.jlList,
    //     clList: item.clList,
    //     znzbList: item.znzbList,
    //     jyqxList: item.jyqxList,
    //     wzlx: item.wzlx,
    //     zzlx: item.zzlx,
    //     qwbcId: item.qwbcId,
    //     kssj: item.kssj,
    //     jssj: item.jssj
    //   };
    // });
    chackAdd.value = false;
    chackipt.value = true;
    batchActive.value = true;
    // form.value = res;
    // form.value.xffwlx = [res.xffwlx, res.xffwid];
    // form.value.pbksrq = res.xfrq;
    // res.jlList.forEach((v) => {
    //   if (v.jllx == "01") {
    //     mjList.value.push(v);
    //   } else {
    //     fjList.value.push(v);
    //   }
    // });
    // znzbData.value = res.znzbList;
    // jyqxData.value = res.jyqxList;
    // jyclData.value = res.clList;
    // dialogFormVisible.value = true;
    //查询出所有巡防数据
    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 };
      });
    });
  });
}
//批量数据
const handleSelectionChange = (val) => {
  ids.value = [];
  if (val) {
    val.forEach((item) => {
      ids.value.push(item.id);
    });
  }
};
//删除
function delDictItem(row) {
  proxy
    .$confirm("确定要删除", "警告", {
      type: "warning"
    })
    .then(() => {
      deleteXfpb(row.id).then(() => {
        proxy.$message({
          type: "success",
          message: "删除成功"
        });
        getListData();
      });
    })
    .catch(() => {
      proxy.$message.info("已取消");
    });
}
//批量删除
function batchDelete() {
  proxy
    .$confirm("确定要删除", "警告", {
      type: "warning"
    })
    .then(() => {
      deleteXfpb(ids.value).then(() => {
        proxy.$message({
          type: "success",
          message: "删除成功"
        });
        getListData();
      });
    })
    .catch(() => {
      proxy.$message.info("已取消");
    });
}
//点击查询
const handleFilter = () => {
  listQuery.value.pageCurrent = 1;
  getListData();
};
//点击重置
const reset = () => {
  QzrqS.value = [];
  listQuery.value = {
    pageCurrent: 1,
    pageSize: 10
  };
  getListData();
};
// 表格高度计算
const tabHeightFn = () => {
 tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};
function xhzqChange() {
  let arr = [];
  let num = bacthForm.value.mrbc * bacthForm.value.xhzq;
  for (let i = 1; i <= num; i++) {
    arr.push({
      jlList: [],
      jyqxList: [],
      znzbList: [],
      clList: [],
      wzlx: "1",
      zzlx: "1"
    });
  }
  bacthForm.value.zqList = arr;
}
onMounted(() => {
  getQwbcData();
  getListData();
  tabHeightFn();
  window.onresize = function () {
    tabHeightFn();
  };
  selectDeptPage({}).then((res) => {
    depList.value = res.records;
  });
  proxy.mittBus.on("mittFn", (data) => {
    keyCount.value = data;
  });
});
onUnmounted(() => {
  proxy.mittBus.off("mittFn");
});

watch(
  () => jyqxData.value,
  (val) => {
    let arr = val.map((item) => item.qxlx);
    if (arr.indexOf("01") !== -1) {
      form.value.wzlx = "1";
    } else {
      form.value.wzlx = "0";
    }
  }
);
</script>
<template>
  <div>
    <div class="searchBox" ref="searchBox">
      <el-form :model="listQuery" :inline="true">
        <!-- <el-form-item label="巡防部门">
          <MOSTY.Department
            
            width="200px"
            clearable
            filterable
            v-model="listQuery.ssbmdm"
          />
        </el-form-item> -->
        <el-form-item label="起止时间">
          <el-date-picker
            v-model="QzrqS"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="upQzrqS"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </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="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 label="序号" type="index" align="center" width="80" />
        <el-table-column
          label="巡防部门"
          prop="ssbm"
          align="center"
          width="180"
        />
        <el-table-column
          sortable
          label="排班开始日期"
          prop="pbksrq"
          align="center"
        />
        <el-table-column
          sortable
          label="排班结束日期"
          prop="pbjsrq"
          align="center"
        />
        <el-table-column label="每日班次数量" prop="mrbc" align="center" />
        <el-table-column label="循环周期" prop="xhzq" align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="250px"
        >
          <template #default="{ row }">
            <el-button @click="update(row)" size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye" :style="{ top: tableHeight + 'px' }">
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.pageCurrent"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 单条新增 -->
    <div class="dialog" v-if="dialogFormVisible">
      <div class="head_box">
        <span class="title">{{ title }}</span>
        <div>
          <el-button
            :loading="loading"
            type="primary"
            size="small"
            @click="submit"
            >保存</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"
        disabled
      >
        <el-form-item prop="ssbmdm" label="巡防部门">
          <el-cascader
            v-if="!chackipt"
            style="width: 100%"
            ref="cascader"
            v-model="form.ssbmdm"
            :options="depList"
            :props="props"
            @change="handleChange"
            :show-all-levels="false"
          />
          <el-input
            v-model="form.ssbm"
            v-if="chackipt"
            @focus="focusF"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pbksrq" label="巡防日期">
          <el-date-picker
            style="width: 100%"
            v-model="form.pbksrq"
            placeholder="请选择"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item prop="xffwlx" label="巡防范围类型">
          <el-cascader
            clearable
            style="width: 100%"
            v-model="form.xffwlx"
            :options="D_ZDY_XFFWLX"
            :props="propsXffw"
          />
        </el-form-item>
        <el-form-item prop="jzMc" label="巡防警组">
          <el-input
            style="width: 100%"
            v-model="form.jzMc"
            placeholder="请选择警组"
            @click="jzVisible = true"
          ></el-input>
        </el-form-item>
        <el-form-item prop="fzrXm" label="负责人">
          <el-input
            @click="chooseUserVisible = true"
            clearable
            style="width: 100%"
            v-model="form.fzrXm"
            placeholder="请选择"
          ></el-input>
        </el-form-item>
        <el-form-item prop="fzrLxdh" label="负责人身份证号">
          <el-input
            style="width: 100%"
            v-model="form.fzrSfzh"
            placeholder="请填写负责人身份证号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="fzrLxdh" label="负责人电话">
          <el-input
            style="width: 100%"
            v-model="form.fzrLxdh"
            placeholder="请填写负责人电话"
          ></el-input>
        </el-form-item>
        <el-form-item style="width: 48%" label="巡防民警成员">
          <div class="ipt" @click.stop="choosePolice('MJ', index)">
            <el-tag
              v-for="tag in mjList"
              :key="tag.id"
              class="mx-1"
              closable
              :type="tag.type"
              @close="handleClose(tag, 'mj', index)"
            >
              {{ tag.jlxm }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item style="width: 48%" label="巡防辅警成员">
          <div class="ipt" @click.stop="choosePolice('FJ', index)">
            <el-tag
              v-for="tag in fjList"
              :key="tag.id"
              class="mx-1"
              closable
              :type="tag.type"
              @close="handleClose(tag, 'fj', index)"
            >
              {{ tag.jlxm }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item style="width: 48%" label="巡防车辆">
          <div class="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 style="width: 100%" label="智能装备">
          <div class="ipt" @click="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="警用器械">
          <div class="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
          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="1"
          />
        </el-form-item>
        <div style="width: 100%"></div>
        <el-form-item label="武装类型" prop="">
          <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="">
          <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 style="width: 100%" prop="qwbcId" label="巡防班次">
          <el-radio-group @change="setQwbc" v-model="form.qwbcId">
            <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-date-picker
            readonly
            style="width: 100%"
            v-model="form.kssj"
            placeholder="请选择"
            format="HH:mm"
            value-format="HH:mm"
          />
        </el-form-item>
        <el-form-item prop="jssj" label="结束时间">
          <el-date-picker
            readonly
            style="width: 100%"
            v-model="form.jssj"
            placeholder="请选择"
            format="HH:mm"
            value-format="HH:mm"
          />
        </el-form-item>
        <el-form-item prop="zqsc" label="执勤时长">
          <el-input
            readonly
            class="min"
            style="width: 100%"
            v-model="form.zqsc"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item prop="bz" label="备注" style="width: 100%">
          <el-input
            v-model="form.bz"
            placeholder="请输入关键字"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
      </el-form>
    </div>
    <!-- 批量 -->
    <div class="dialog" v-if="batchActive">
      <div class="head_box">
        <span class="title">{{ title }}</span>
        <div>
          <el-button size="small" @click="closeBacth">关闭</el-button>
        </div>
      </div>
      <el-form
        ref="elform"
        :model="bacthForm"
        :rules="rules"
        :inline="true"
        label-position="top"
      >
        <el-row class="top_header">
          <el-form-item style="width: 73%" label="循环周期">
            <el-radio-group disabled v-model="xhzqVal" @change="zdyDisabFn">
              <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-radio-group>
            <el-input-number
              @change="xhzqChange"
              style="margin-left: 12px"
              v-model="bacthForm.xhzq"
              :min="1"
              :max="10"
              disabled
            />
          </el-form-item>
          <el-form-item label="结束日期类型">
            <el-radio-group disabled v-model="bacthForm.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 prop="ssbmdm" label="巡防部门">
            <el-cascader
              v-if="!chackipt"
              style="width: 100%"
              ref="cascader"
              v-model="bacthForm.ssbmdm"
              :options="depList"
              :props="props"
              @change="handleChange"
              :show-all-levels="false"
              disabled
            />
            <el-input
              disabled
              v-model="bacthForm.ssbm"
              v-if="chackipt"
              @focus="focusF"
            ></el-input>
          </el-form-item>
          <el-form-item prop="pbksrq" label="开始日期">
            <el-date-picker
              disabled
              style="width: 100%"
              v-model="bacthForm.pbksrq"
              placeholder="请选择"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>

          <el-form-item
            v-if="bacthForm.jsrqlx == 1"
            prop="pbjsrq"
            label="结束日期"
          >
            <el-date-picker
              style="width: 100%"
              v-model="bacthForm.pbjsrq"
              placeholder="请选择"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              disabled
            />
          </el-form-item>
          <el-form-item prop="xhlx" label="循环类型">
            <el-select
              disabled
              v-model="bacthForm.xhlx"
              placeholder="请选择循环类型"
            >
              <el-option value="0" label="每天循环"></el-option>
              <el-option value="1" label="工作日循环"></el-option>
              <el-option value="2" label="休息日循环"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="每日班次数量">
            <el-select
              v-model="bacthForm.mrbc"
              @change="mrbcChange"
              disabled
              placeholder="请选择"
            >
              <el-option :value="1" label="一班"></el-option>
              <el-option :value="2" label="二班"></el-option>
              <el-option :value="3" label="三班"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <div class="check_btn">
          <div class="check_day">
            第
            <el-input-number
              :disabled="false"
              @change="checkB = 1"
              v-model="checkDay"
              :min="1"
              :max="xhzqVal"
              size="small"
            ></el-input-number>
            天
          </div>
          <div class="check_b">
            <el-button
              v-for="i in 6"
              :key="i + 'b'"
              @click="checkB = i"
              :class="checkB === i ? 'active' : ''"
              v-show="bacthForm.mrbc >= i"
              size="small"
              >第{{ i }}班</el-button
            >
          </div>
        </div>
        <el-row
          style="width: 100%"
          v-for="(item, index) in bacthForm.zqList"
          v-show="(checkDay - 1) * bacthForm.mrbc + checkB === index + 1"
          :key="index"
        >
          <el-form-item label="巡防范围类型">
            <!-- <el-cascader
              disabled
              style="width: 100%"
              v-model="item.xffwlx"
              :options="D_ZDY_XFFWLX"
              :props="propsXffw"
            /> -->
            <el-radio-group v-model="item.xffwlx" :disabled="true">
              <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="item.xffwlx == '1'">
            <el-select
              v-model="item.xf"
              clearable
              disabled
              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="item.xffwlx == '2'">
            <el-select
              v-model="item.xffwList[0].glbid"
              clearable
              disabled
              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="item.xffwlx == '3'">
            <el-select
              v-model="item.xffwList[0].glbid"
              clearable
              disabled
              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 label="巡防警组">
            <el-input
              disabled
              style="width: 100%"
              v-model="item.jzMc"
              placeholder="请选择警组"
            ></el-input>
          </el-form-item>
          <el-form-item label="负责人">
            <el-input
              disabled
              style="width: 100%"
              v-model="item.fzrXm"
              placeholder="请选择"
            ></el-input>
          </el-form-item>
          <el-form-item prop="fzrLxdh" label="负责人身份证号">
            <el-input
              disabled
              style="width: 100%"
              v-model="item.fzrSfzh"
              placeholder="请填写负责人身份证号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="fzrLxdh" label="负责人电话">
            <el-input
              disabled
              style="width: 100%"
              v-model="item.fzrLxdh"
              placeholder="请填写负责人电话"
            ></el-input>
          </el-form-item>
          <el-form-item style="width: 48%" label="巡防民警成员">
            <div class="ipt">
              <el-tag
                v-for="tag in item.jlList"
                :key="tag.id"
                v-show="tag.jllx == '01'"
                class="mx-1"
                closable
                :type="tag.type"
              >
                {{ tag.jlxm }}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item style="width: 48%" label="巡防辅警成员">
            <div class="ipt">
              <el-tag
                v-for="tag in item.jlList"
                :key="tag.id"
                v-show="tag.jllx == '02'"
                class="mx-1"
                closable
                :type="tag.type"
              >
                {{ tag.jlxm }}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item style="width: 48%" label="巡防车辆">
            <div class="ipt">
              <el-tag
                v-for="tag in item.clList"
                :key="tag.id"
                class="mx-1"
                closable
                :type="tag.type"
              >
                {{ tag.jdchphm }}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item style="width: 100%" label="智能装备">
            <div class="ipt">
              <el-tag
                v-for="tag in item.znzbList"
                :key="tag.id"
                class="mx-1"
                closable
                :type="tag.type"
              >
                {{ tag.sbmc }}
              </el-tag>
            </div>
          </el-form-item>

          <el-form-item style="width: 100%" label="警用器械">
            <div class="ipt">
              <el-tag
                v-for="tag in item.jyqxList"
                :key="tag.id"
                class="mx-1"
                closable
                :type="tag.type"
              >
                {{ tag.qxmc }}
              </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="1"
            />
          </el-form-item>
          <div style="width: 100%"></div>
          <el-form-item label="武装类型">
            <el-radio-group disabled v-model="item.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="着装类型">
            <el-radio-group disabled v-model="item.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 style="width: 100%" label="巡防班次">
            <el-radio-group
              disabled
              @change="setQwbc(index)"
              v-model="item.qwbcId"
            >
              <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 label="开始时间">
            <el-date-picker
              readonly
              style="width: 100%"
              v-model="item.kssj"
              placeholder="请选择"
              format="HH:mm"
              value-format="HH:mm"
            />
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              readonly
              style="width: 100%"
              v-model="item.jssj"
              placeholder="请选择"
              format="HH:mm"
              value-format="HH:mm"
            />
          </el-form-item>
          <el-form-item label="执勤时长">
            <el-input
              readonly
              class="min"
              style="width: 100%"
              v-model="item.zqsc"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-form-item prop="bz" label="备注" style="width: 100%">
          <el-input
            v-model="bacthForm.bz"
            placeholder="请输入关键字"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
      </el-form>
    </div>
    <ChoosePolice
      v-model="choosePoliceVisible"
      :PoliceType="PoliceType"
      @choosedPolice="choosedPolice"
    >
    </ChoosePolice>
    <ChoosePolice
      v-model="chooseUserVisible"
      PoliceType="MJ"
      @choosedPolice="hanlderChoose"
      :Single="true"
    >
    </ChoosePolice>
    <JyqxLoad v-model="jyqxVisible" @choosedUsers="hanlderChooseJyqx" />
    <JyclLoad v-model="jyclVisible" @choosedUsers="hanlderChooseJycl" />
    <ZnzbLoad v-model="znzbVisible" @choosedUsers="hanlderChooseZnzb" />
    <JzLoad v-model="jzVisible" @choosedUsers="hanlderChooseJz" />
  </div>
</template>
<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
.ipt {
  border: 1px solid rgb(7, 85, 188);
  width: 100%;
  line-height: 32px;
  min-height: 32px;
  border-radius: 4px;
}
.chooce-bc {
  // margin: 12px;
  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;
      }
    }
  }
}
.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;
  }
}
.min {
  position: relative;
}
.min::after {
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  content: "分钟";
}
.jgtitle {
  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;
  }
}
.mrbc {
  position: relative;
  > span {
    position: absolute;
    left: -66px;
    top: 0;
    line-height: 22px;
    background: #03438b;
    width: 40px;
    padding: 0 12px;
    border-radius: 4px;
    border: 1px solid #1e7ce7;
  }
}
.check_btn {
  width: 100%;
  padding: 16px 0;
}
.check_b {
  padding-top: 12px;
  .active {
    background: linear-gradient(0deg, #1983e5, #1b67dd);
  }
}
.top_header {
  background-image: url("~@/assets/xfbb.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 20px 20px 0 20px;
}
::v-deep .el-radio--default{
  margin-bottom: 20px;
}
</style>
