<!-- 全县值班 -->
<template>
  <div class="qxzbrl">
    <div class="titleBox">
      <div class="title">部门巡防排班日历</div>
      <!-- <div class="jzlist">
        <span v-for="item in jzlist" :style="{ color: item.c }" :key="item.c">
          <i :style="{ background: item.c }"></i> {{ item.name }}
        </span>
      </div> -->
    </div>
    <ZbCalendar
      @calClick="calClick"
      :list="list"
      v-if="list.length > 0"
      :isClick="true"
      :API="getXfpbInfo"
    />
    <el-dialog width="90%" v-model="loading" :title="title">
      <div class="calendarLoad">
        <div class="item" v-for="(item,itemIndex) in calendrData" :key="item.id">
          <span
            :style="{ background: upJSON(item.qwbcId)[itemIndex%upJSON(item.qwbcId).length].bcys }"
            class="jz"
            >{{ upJSON(item.qwbcId)[itemIndex%upJSON(item.qwbcId).length].bcmc }}</span
          >
          <p>
            时间：{{ putTime(item.ksrq) + "  " + item.kssj }}-{{
              putTime(item.jsrq) + "  " + item.jssj
            }}
          </p>
          <p>跨天数：</p>
          <p>执勤时长：{{ item.zqsc / 60 }} 小时</p>
          <p>警组负责人：{{ item.fzrXm }}</p>
          <p>
            勤务民警：
            <span class="t" v-for="t in upJSON(item.pbmj)" :key="t.id">{{
              t.jlxm
            }}</span>
          </p>
          <p>
            勤务辅警：
            <span class="t" v-for="t in upJSON(item.pbfj)" :key="t.id">{{
              t.jlxm
            }}</span>
          </p>
          <p>
            武装类型： <span class="t"></span> 着装类型：
            <span class="t"></span>
          </p>
          <p>物资：</p>
          <div class="wz">
            <span v-for="(qx, i) in upJSON(item.jyqx)" :key="i + 0.678"
              >{{ qx.qxmc }} ({{ qx.qxsl }}个)</span
            >
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getXfpb, rlpbQuery } from "@/api/service/watchmanSchedulingPbjl.js";
import ZbCalendar from "@/components/ZbCalendar/index";
import { handleTime } from "@/utils/time.js";
const title = ref("排班详情");
const jzlist = ref([
  { name: "警组一", c: "hwb(28deg 41% 23%)" },
  { name: "警组二", c: "rgb(254 94 33)" },
  { name: "警组三", c: "rgb(15 246 7)" }
]);
//日历组件key

//日历数据
const list = ref([]);
const calendrData = ref({});
const loading = ref(false);

function calClick(data) {
  let prams = {
    pbrq: data
  };
  rlpbQuery(prams).then((res) => {
    title.value = data + "排班详情";
    calendrData.value = res;
    loading.value = true;
  });
}
onMounted(() => {
  getXfpb({
    pageCurrent: 1,
    pageSize: 1000
  }).then((res) => {
    let calendarData = [];
    res.records.forEach((v) => {
      // let qwbcIds = JSON.parse(v.qwbcId);
      // let n = qwbcIds.length;
      if (v.ksrq && v.jsrq) {
        // let data = handleTime(v.ksrq.substring(0, 10), v.jsrq.substring(0, 10));
        // data.forEach((item, index) => {
        //   calendarData.push({
        //     title: qwbcIds[index % n].bcmc,
        //     start: item.start,
        //     end: item.end,
        //     myData: item.start,
        //     color: qwbcIds[index % n].bcys
        //   });
        // });
      } else {
        // calendarData.push({
        //   title: qwbcIds[index % n].bcmc,
        //   start: v.xfrq.substring(0, 10),
        //   myData: v.xfrq.substring(0, 10),
        //   color: qwbcIds[index % n].bcys
        // });
      }
    });
    list.value = calendarData;
  });
});
//时间处理
function putTime(time) {
  let n = new Date(time);
  return n.toLocaleDateString().replace(/\//g, "-");
}
//转JSON数据
function upJSON(data,i) {
  return JSON.parse(data);
}
</script>

<style lang="scss" scoped>
.qxzbrl {
  height: calc(100vh - 110px);
}
.jzlist {
  position: absolute;
  top: 20px;
  left: 200px;
  > span {
    position: relative;
    margin: 0 12px;
    > i {
      position: absolute;
      height: 10px;
      width: 10px;
      top: 50%;
      margin-top: -5px;
      border-radius: 50%;
      left: -12px;
    }
  }
}
//弹窗样式
.calendarLoad {
  display: flex;
  .item {
    width: 20%;
    border: 1px solid #095ed6;
    padding: 12px;
    margin: 0 12px 12px;
    background: #092562;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    .jz {
      position: absolute;
      top: 0;
      left: 0;
      line-height: 24px;
      padding: 0 12px;
    }
    .t {
      margin-right: 12px;
    }
    .wz {
      float: left;
      height: 200px;
      > span {
        border: 1px solid #095ed6;
        padding: 4px 12px;
        margin-right: 12px;
        height: 40px;
        border-radius: 20px;
      }
    }
  }
}
::v-deep .el-dialog__body {
  color: #ffffff;
}
</style>