<template>
  <div class="container" style="padding-top: 13vw">
    <TopNav :navTitle="'值班报备'" />
    <van-form @submit="onSubmit">
      <div class="title_tab">值班班次</div>
      <van-field
        v-model="normalForm.bcmc"
        required
        name="班次"
        is-link
        readonly
        label="班次"
        placeholder="请选择班次"
        input-align="right"
        :rules="[{ required: true, message: '请选择班次' }]"
        @click="showDialogfn('qwbc')"
      />
      <van-field
        readonly
        v-if="normalForm.bcsc"
        v-model="normalForm.bcsc"
        input-align="right"
        label="班次时段"
      />
      <div class="title_tab">值班人员</div>
      <van-field
        v-model="normalForm.zbld"
        name="值班领导"
        required
        input-align="right"
        label="值班领导"
        is-link
        readonly
        placeholder="请值班领导"
        :rules="[{ required: true, message: '请选择值班领导' }]"
        @click="showDialogfn('zbld')"
      />
      <van-field
        v-model="normalForm.zhz"
        readonly
        input-align="right"
        name="picker"
        label="指挥长"
        placeholder="请选择指挥长"
        @click="showDialogfn('zhz')"
        is-link
      />
      <van-field
        v-model="normalForm.zzzhz"
        readonly
        input-align="right"
        name="picker"
        label="专职指挥长"
        placeholder="请选择专职指挥长"
        @click="showDialogfn('zzzhz')"
        is-link
      />
      <van-field
        v-model="normalForm.fz"
        readonly
        input-align="right"
        name="picker"
        label="法制"
        placeholder="请选择法制"
        @click="showDialogfn('fz')"
        is-link
      />

      <van-cell class="mulSelect" title="值班民警" color="#1989fa">
        <template #right-icon>
          <van-icon
            v-if="route.query.flag == 1"
            @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
                color="#7232dd"
                :closeable="route.query.flag == 1"
                @close="deleteCheckTag(item, index, 'mj')"
                plain
                >{{ item.jlxm }}</van-tag
              >
            </div>
          </div>
        </template>
      </van-cell>
      <van-cell class="mulSelect" title="值班辅警" color="#1989fa">
        <template #right-icon>
          <van-icon
            v-if="route.query.flag == 1"
            @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="route.query.flag == 1"
                @close="deleteCheckTag(item, index, 'fj')"
                color="#7232dd"
                plain
                >{{ item.jlxm }}</van-tag
              >
            </div>
          </div>
        </template>
      </van-cell>
      <div class="title_tab">联系方式</div>
      <van-field
        :readonly="route.query.flag == 1 ? false : true"
        v-model="normalForm.zbdh"
        name="值班电话"
        label="值班电话"
        placeholder="请选择值班电话"
        input-align="right"
      />
      <van-field
        :readonly="route.query.flag == 1 ? false : true"
        v-model="normalForm.hh"
        name="呼号"
        label="呼号"
        placeholder="请输入呼号"
        input-align="right"
      />
      <div
        style="margin: 16px 0; padding: 0 5vw"
        v-show="route.query.flag == 1"
      >
        <van-button
          :loading="loading"
          round
          @click="_submitZbbbData"
          block
          type="primary"
          v-if="route.query.zt === '01'"
        >
          开始报备
        </van-button>
        <van-button
          style="margin: 16px 0"
          :loading="loading"
          round
          @click="editFn()"
          block
          type="success"
          v-if="route.query.zt === '02'"
        >
          结束报备
        </van-button>
      </div>
    </van-form>
    <!-- 负责人 -->
    <Select
      bclx="01"
      :checked="r_checked"
      :selectType="selectType"
      :show="showSelect"
      :checkedList="list.checkedList"
      @update:cancel="showSelect = false"
      @update:confirm="onComfirm"
      :key="selectIndex"
    />
  </div>
</template>

<script setup>
import TopNav from "../../../components/topNav.vue";
import normalReport from "../components/normalReport";
import Select from "../../../components/Select.vue";
import { Dialog, Toast } from "vant";
import { dateFormat, hintToast } from "../../../utils/tools.js";
import { computed, ref, reactive, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getBcList } from "../../../api/xfbbAndZbbb.js";
import {
  submitZbbbData,
  startAndEndZbbbData,
  endTaskStatus,
} from "../../../api/yyzxApi.js";
import { getZbpbZqInfo, gettbQwZbbb } from "../../../api/report.js";
const active = ref("a");
const router = useRouter();
const route = useRoute();
const showSelect = ref(false);
const r_checked = ref(""); //单选框默认选中
const selectIndex = ref(1); //选择器组件KEY
const selectType = ref(""); //选择的类型
//表单数据
const normalForm = reactive({
  bcmc: "",
  bcsc: "",
  zbld: "",
  zhz: "",
  zzzhz: "",
  fz: "",
  hh: "",
  bcsc: "",
});
//选择数据
const list = reactive({
  mj: [], //选中的民警数据
  fj: [], //选中的辅警数据
  bcList: [], //班次信息
  bpInfo: { zbmj: [], zbfj: [], jlList: [], zbpbId: "", zbrq: "", qwbcid: "" }, //无报备的排班信息
  bbInfo: null, //报备信息
  checkedList: [], //默认选中的民辅警数据
});

onMounted(() => {
  Toast.loading({
    message: "加载...",
    forbidClick: true,
    loadingType: "spinner",
    duration: 0,
  });
  Promise.all([_getBcData(), getZbbbxx()])
    .then((res) => {
      Toast.clear();
    })
    .catch((err) => {
      Toast.clear();
    });
});
//确认选择
function onComfirm(val) {
  if (val.length <= 0) return;
  switch (selectType.value) {
    case "qwbc":
      r_checked.value = val[0].key;
      onbcConfirm(val[0]);
      break;
    case "zbld":
    case "zhz":
    case "zzzhz":
    case "fz":
      if (r_checked.value == val[0].key) {
        r_checked.value = "";
        if (selectType.value == "zbld") normalForm.zbld = "";
        if (selectType.value == "zhz") normalForm.zhz = "";
        if (selectType.value == "zzzhz") normalForm.zzzhz = "";
        if (selectType.value == "fz") normalForm.fz = "";
      } else {
        r_checked.value = val[0].key;
        onfzrConfirm(val[0]);
      }
      break;
    case "mj":
      // list.mj = [];
      val.forEach((item) => {
        list.checkedList.push(item.key);
        toggle(item);
      });
      break;
    case "fj":
      // list.fj = [];
      val.forEach((item) => {
        list.checkedList.push(item.key);
        toggle(item);
      });
      break;
  }
}
//打开选择框
function showDialogfn(val) {
  if (selectType.value !== val) r_checked.value = "";
  selectType.value = val;
  showSelect.value = true;
  selectIndex.value++;
}
//开始报备
function _submitZbbbData() {
  Reflect.deleteProperty(list.bpInfo, "zbmj");
  Reflect.deleteProperty(list.bpInfo, "zbfj");
  list.bpInfo.jlList = [...list.fj, ...list.mj];
  list.bpInfo.zbpbId = list.bpInfo.id; //排班ID
  list.bpInfo.zbrq = dateFormat();
  Dialog.confirm({
    title: "提示",
    message: "确认报备信息是否正确！",
    confirmButtonColor: "#3e6ee8",
  }).then((res) => {
    submitZbbbData(list.bpInfo).then((res) => {
      hintToast("成功")
      _startZbbbData(res, 0);
      _endTaskStatus("04", list.bpInfo.mrjlid, 2);
    });
  });
}
//结束任务
function _endTaskStatus(rwxl, ywid, rwzt) {
  let data = { rwxl, ywid, rwzt };
  try {
    let location = JSON.parse(bridge.getLocation());
    data.jd = location.app_x;
    data.wd = location.app_y;
  } catch (error) {}
  endTaskStatus(data).then((res) => {});
}
//结束报备
function editFn() {
  Dialog.confirm({
    title: "提示",
    message: "是否确认结束报备!",
    confirmButtonColor: "#3e6ee8",
  }).then((res) => {
    _startZbbbData(route.query.id, 1);
  });
}
//提交开始||结束报备
function _startZbbbData(id, bbzt) {
  startAndEndZbbbData({ id, bbzt }).then((res) => {
    list.bpInfo = null;
    router.go(-1);
  });
}

// 根据状态查询值班报备信息
function getZbbbxx() {
  const temp = route.query;
  if (temp.zt === "01") {
    getZbpbZqInfo(temp.id).then((res) => {
      list.bpInfo = res;
      _setHxData(res);
    });
  } else {
    gettbQwZbbb(temp.id).then((res) => {
      list.bpInfo = res;
      _setHxData(res);
    });
  }
}
//设置页面回显
function _setHxData(res) {
  let info = list.bcList.find((item) => {
    return item.id == res.qwbcid;
  });
  onbcConfirm(info);
  //值班人
  normalForm.zbld = `${res.zbldXm ? res.zbldXm : ""} ${
    res.zbldDh ? res.zbldDh : ""
  }`;
  normalForm.zbdh = res.zbldDh ? res.zbldDh : "";
  normalForm.zhz = `${res.zbzhzXm ? res.zbzhzXm : ""} ${
    res.zbzhzDh ? res.zbzhzDh : ""
  }`;
  normalForm.zzzhz = `${res.zzzhzXm ? res.zzzhzXm : ""} ${
    res.zzzhzDh ? res.zzzhzDh : ""
  }`;
  normalForm.fz = `${res.fzzbXm ? res.fzzbXm : ""} ${
    res.fzzbDh ? res.fzzbDh : ""
  }`;
  // 值班电话
  //呼号
  normalForm.hh = res.hh;
  //民辅警
  list.mj = JSON.parse(res.zbmj);
  list.fj = JSON.parse(res.zbfj);
}
//选中的班次数据
function onbcConfirm(val) {
  normalForm.bcmc = val.bcmc;
  normalForm.bcsc = `${val.kssj} - ${val.jssj}`;
}
//获取班次数据
function _getBcData() {
  let data = {
    type: 2,
    keyword: "",
    bclx: "01",
  };
  getBcList(data).then((res) => {
    if (res) {
      for (let i = 0; i < res.length; i++) {
        res[i].value = `${res[i].ssbm}-${res[i].bcmc}`;
        res[i].key = res[i].id;
      }
      list.bcList = res;
    }
  });
}
//选中领导数据
function onfzrConfirm(val) {
  switch (selectType.value) {
    case "zbld":
      normalForm.zbld = `${val.xm} ${val.lxdh}`;
      normalForm.zbdh = val.lxdh;
      break;
    case "zhz":
      normalForm.zhz = `${val.xm} ${val.lxdh}`;
      break;
    case "zzzhz":
      normalForm.zzzhz = `${val.xm} ${val.lxdh}`;
      break;
    case "fz":
      normalForm.fz = `${val.xm} ${val.lxdh}`;
      break;
  }
}
//删除选中的民辅警数据
function deleteCheckTag(item, index, val) {
  switch (val) {
    case "mj":
      list.mj.splice(index, 1);
      break;
    case "fj":
      list.fj.splice(index, 1);
      break;
  }
}
//选中民辅警数据
const toggle = (item) => {
  switch (selectType.value) {
    case "mj":
      list.mj.push({
        jh: item.jh,
        jllx: item.fl,
        jlxm: item.xm,
        sfzh: item.sfzh,
        xm: item.xm,
        lxdh: item.lxdh,
        xbdm: item.xbdm,
        id: item.ryid,
        qwjzId: "",
        jlId: item.ryid,
      });
      break;
    case "fj":
      list.fj.push({
        jh: item.jh,
        jllx: item.fl,
        jlxm: item.xm,
        id: item.id,
        sfzh: item.sfzh,
        xm: item.xm,
        lxdh: item.lxdh,
        xbdm: item.xbdm,
        qwjzId: "",
        jlId: item.id,
      });
      break;
  }
};
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.container {
  margin-top: 2vw;
}
.nav_tab {
  padding: 2vw;
  display: flex;
  justify-content: space-around;
  .tab {
    background: #a4aec8;
    color: #fff;
    height: 32px;
    line-height: 32px;
    width: 40vw;
    text-align: center;
    border-radius: 16px 16px 16px 0;
  }
  .tab.active {
    background: #517cea;
  }
}

.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 {
  @include font_color($font-color-theme);
  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 {
  @include table_item_color($table-item-theme);
  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>
