<template>
  <div class="container" style="padding-top: 13vw">
    <TopNav navTitle="报备" />
    <van-form @submit="onSubmit">
      <van-field
        :rules="[{ required: true, message: '请输入勤务名称' }]"
        required
        v-model="normalForm.qwmc"
        label="勤务名称"
      >
      </van-field>
      <div class="title_tab">勤务时间</div>
      <van-cell title="勤务日期" @click="calShow = true">
        <template #value>
          <span>{{ normalForm.qwrq }}</span>
        </template>
      </van-cell>
      <van-calendar
        v-model:show="calShow"
        @confirm="onConfirmTime"
        :min-date="minDate"
        :max-date="maxDate"
        color="#3e6ee8"
      ></van-calendar>
      <van-field
        readonly
        :rules="[{ required: true, message: '请选择开始时间' }]"
        required
        v-model="normalForm.kssj"
        placeholder="请选择开始时间"
        input-align="right"
        is-link
        label="开始时间"
        @click="showkssjPicker = true"
      />
      <van-popup v-model:show="showkssjPicker" position="bottom">
        <van-datetime-picker
          v-model="startTime"
          type="datatime"
          title="选择时间"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showkssjPicker = false"
          @confirm="ksConfirm"
        />
      </van-popup>

      <van-field
        readonly
        :rules="[{ required: true, message: '请选择结束时间' }]"
        required
        placeholder="请选择结束时间"
        v-model="normalForm.jssj"
        input-align="right"
        is-link
        label="结束时间"
        @click="showjssjPicker = true"
      />
      <van-popup v-model:show="showjssjPicker" position="bottom">
        <van-datetime-picker
          v-model="endTime"
          type="datatime"
          title="选择时间"
          @cancel="showjssjPicker = false"
          @confirm="jsConfirm"
        />
      </van-popup>

      <div class="title_tab">勤务警力</div>
      <van-field
        v-model="normalForm.xm"
        readonly
        input-align="right"
        label="姓名"
        is-link
        @click="showDialogfn('ry')"
      />
      <div
        class="listBox"
        v-for="(item, index) in normalForm.qwjlLists"
        :key="index"
      >
        <div class="left">
          <div>{{ item.xm }} ({{ item.sfzh }})</div>
          <div class="adress">{{ item.dwmc }}</div>
        </div>
        <div class="right" @click="deleteRy(index)">-</div>
      </div>
      <van-field v-model="normalForm.clxx" label="车辆信息"> </van-field>
      <van-field
        v-model="normalForm.sbmc"
        readonly
        input-align="right"
        label="选择设备信息"
        is-link
        placeholder="请选择设备信息"
        @click="popupShowCar = true"
      />

      <div class="title_tab">装备信息</div>
      <div class="zbBox">
        <span class="zbBox-item" v-for="(item,i) in normalForm.qwzbLists" :key="i">
          <span class="bt">{{item.zbmc}}</span>
          <van-stepper :min="0" :max="1000" v-model="item.zbsl" />
        </span>
      </div>
      <div style="padding: 0 5vw" v-if="obj.bbInfo">
        <van-button
          style="margin: 16px 0"
          :loading="loading"
          round
          @click="editFn(0)"
          block
          type="success"
        >
          结束报备
        </van-button>
      </div>
      <div style="margin: 16px 0; padding: 0 5vw" v-else>
        <van-button
          :loading="loading"
          round
          native-type="submit"
          block
          type="primary"
        >
          开始报备
        </van-button>
      </div>
    </van-form>
    <!-- 负责人 -->
    <SelectPeo
      :isRadio="isRadio"
      :selectType="selectType"
      :show="showSelect"
      :checkedList="normalForm.qwjlLists"
      @update:cancel="showSelect = false"
      @update:confirm="onComfirm"
      :key="selectIndex"
    />

    <!-- 弹出层 -->
    <van-popup v-model:show="popupShowCar" round position="bottom">
      <van-picker
        :columns="sblist.list"
        :columns-field-names="customFieldName"
        @cancel="popupShowCar = false"
        @confirm="submitPoup"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { getZBList, qwbbAdd, getSBList } from "@/api/checkponit.js";
import { getItem } from "../../../utils/storage";
import TopNav from "../../../components/topNav";
import SelectPeo from "./selectPeo.vue";
import { Dialog, Toast } from "vant";
import { dateFormat, hintToast } from "../../../utils/tools.js";
import { getDictList, setDict } from "../../../utils/dict";
import { computed, ref, reactive, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { get } from "vant/lib/utils";
Toast.allowMultiple();
const { D_BZ_HPZL } = getDictList("D_BZ_HPZL");
const router = useRouter();
const route = useRoute();
const minDate = new Date(2022, 0, 1);
const maxDate = new Date(2050, 0, 1);
const userInfo = getItem("userInfo");
const popupShowCar = ref(false); //选择车辆弹窗
const selectType = ref(""); //选择的类型
const isRadio = ref(false); //单选框默认选中
const showSelect = ref(false); //人员弹窗
const selectIndex = ref(1); //选择器组件KEY
const calShow = ref(false); //是否显示巡防日期选择器
const showkssjPicker = ref(false); // 开始时间结束时间
const showjssjPicker = ref(false); // 结束时间结束时间
const startTime = new Date()
const endTime = new Date()

const normalForm = reactive({
  qwmc: "",
  qwrq: dateFormat("", new Date()),
  ssbm: userInfo.deptName,
  ssbmdm: userInfo.deptList[0].deptCode,
  sbbh: "",
  sbmc: "",
  qwjlLists: [],
  qwzbLists: [
    {
      zbmc: "枪支",
      zbsl: 0,
      entryCode: "qz",
    },
    {
      zbmc: "弹药",
      zbsl: 0,
      entryCode: "dy",
    },
    {
      zbmc: "手铐",
      zbsl: 1,
      entryCode: "sk",
    },
    {
      zbmc: "执法仪",
      zbsl: 0,
      entryCode: "zfy",
    },
    {
      zbmc: "警棍",
      zbsl: 0,
      entryCode: "jg",
    },
    {
      zbmc: " 盾牌",
      zbsl: 0,
      entryCode: "dp",
    },
    {
      zbmc: "手电",
      zbsl: 1,
      entryCode: "sd",
    },
    {
      zbmc: " 急救包",
      zbsl: 0,
      entryCode: "jjb",
    },
    {
      zbmc: "防暴叉",
      zbsl: 0,
      entryCode: "fbc",
    },
    {
      zbmc: "防暴头盔",
      zbsl: 0,
      entryCode: "fbtk",
    },
    {
      zbmc: "手持对讲机",
      zbsl: 0,
      entryCode: "sjdjj",
    },
    {
      zbmc: "移动警务终端",
      zbsl: 0,
      entryCode: "ydjwzd",
    },
  ]
}); //表单数据
// 巡防日期

const obj = ref({
  bbInfo: null,
});
const sblist = {
  list: [],
}; //设备数据
const customFieldName = {
  text: "baseName",
};

onMounted(() => {
  getZbList();
  getsBList();
});
// 装备数据
function getZbList() {
  getZBList({ scSysDictionaryCatalogId: 20 }).then((res) => {
    let arr = [];
    normalForm.qwzbLists = res.scSysDictionaryEntrys.map((item) => {
      return {
        zbmc: item.entryName,
        zbsl: 0,
        entryCode: item.entryCode,
      };
    });
  });
}
// 设备数据
function getsBList() {
  getSBList({ typeDevicesCode: 8 }).then((res) => {
    sblist.list = res;
  });
}
// 选择开始时间
function ksConfirm(val) {
  normalForm.kssj = dateFormat("all", val);
  showkssjPicker.value = false;
}
// 选择结束时间
function jsConfirm(val) {
  normalForm.jssj = dateFormat("all", val);
  showjssjPicker.value = false;
}
//打开勤务警力选择框
function showDialogfn(val) {
  selectType.value = val;
  showSelect.value = true;
  selectIndex.value++;
}
//选中勤务时间
function onConfirmTime(val) {
  calShow.value = false;
  normalForm.qwrq = dateFormat("", val);
}
//选中人员确认按钮
function onComfirm(val) {
  let arr = [];
  val.forEach((item) => {
    let obj = {
      id: item.id,
      sfzh: item.sfzh,
      dwdm: item.ssbmdm,
      dwmc: item.ssbm,
      jylx: item.jylx,
      xm: item.xm,
      sjhm: item.lxdh,
    };
    arr.push(obj);
  });
  normalForm.qwjlLists = arr;
}

// 删除人员
function deleteRy(index) {
  normalForm.qwjlLists.splice(index, 1);
}

// 新增报备接口
function onSubmit() {
  normalForm.qwjlLists.forEach(item=>{
     item.jylx = item.jylx == '01'?1:2
    delete item.id
  })
  normalForm.kkbh = route.query.kkid;
  normalForm.kkmc = route.query.kkmc;
  qwbbAdd(normalForm).then((res) => {
    hintToast("保存成功");
    router.go(-1)
  });
}

function submitPoup(val) {
  normalForm.sbbh = val.scDevicesInfoId;
  normalForm.sbmc = val.baseName;
  popupShowCar.value = false;
}
//结束报备
function editFn(e) {
  Dialog.confirm({
    title: "提示",
    message: "是否确认结束报备!",
    confirmButtonColor: "#3e6ee8",
  }).then((res) => {});
}

// 获取装备数据
function getZbData() {}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.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);
}
.zbBox {
  display: flex;
  font-size: 12px;
  color: rgb(150, 146, 146);
  padding: 0 5vw;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  .zbBox-item {
    width: 48%;
    margin: 2vw 0;
    .bt {
      display: inline-block;
      width: 60px;
      text-align: center;
    }
    .zbBox-item:nth-child(2n) {
      margin-left: 4vw;
    }
  }
}
.popupTitle {
  color: #fff;
}
.listBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4vw 5vw;
  border-radius: 2vw;
  padding: 0.5vw 2vw;
  box-sizing: border-box;
  font-size: 13px;
  background-color: #e8eeff;
  .left {
    flex: 1;
    > div {
      max-width: 280px;
      line-height: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .adress {
      color: #727171;
    }
  }
  .right {
    width: 20px;
    height: 20px;
    margin-left: 4vw;
    line-height: 16px;
    text-align: center;
    background: red;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
  }
}
::v-deep .van-field__label {
  margin-right: 0px;
}
::v-deep .van-radio-group--horizontal,
.van-checkbox-group--horizontal {
  flex-wrap: nowrap;
  @include font_size($font_medium_s);
}
::v-deep .van-field__control--custom {
  justify-content: flex-end;
}
::v-deep .van-field__control {
  text-align: right;
}
</style>
