<!-- 全县值班 -->
<template>
  <div class="qxzbrl">
    <div class="titleBox">
      <div class="title">我的巡防排班</div>
      <el-button style="margin-top: 12px" @click="active = !active">
        {{ active ? "列表模式" : "日历模式" }}
      </el-button>
    </div>
    <ZbCalendar @calClick='getListData' :list="list" v-if="active" />
    <List v-else />
  </div>
</template>

<script setup>
import List from "./list";
import { getPbbbByMonth } from "@/api/service/watchmanSchedulingPbjl.js";
import { ref, onMounted } from "vue";
import ZbCalendar from "@/components/ZbCalendar/Calendar";
//状态字典
const ztDict = [
  {
    label: "未执勤",
    value: "01",
    color: "#7b7b7b",
  },
  {
    label: "执勤中",
    value: "02",
    color: "#51fb06",
  },
  {
    label: "执勤",
    value: "03",
    color: "#0084ff",
  },
  {
    label: "请假",
    value: "04",
    color: "#f00",
  },
];
const active = ref(true);

//日历组件key
//日历数据
const list = ref([]);
function getListData(e){
    list.value = []
    getPbbbByMonth({time:e}).then(res=>{
        res.forEach(v=>{
            v.list.forEach(item=>{
                list.value.push({
                    title:ztDict.filter(evn=>evn.value===item.zt)[0].label,
                    day:v.day,
                    start:e+'-'+v.day,
                    end:e+'-'+v.day,
                    time:item.time,
                    color:ztDict.filter(evn=>evn.value===item.zt)[0].color
                })
            })
        })
    })
}
onMounted(() => {
  var time = new Date()
    getListData(time.getFullYear()+'-'+(time.getMonth()+1))
});
</script>

<style lang="scss" scoped>
.qxzbrl {
  height: calc(100vh - 110px);
}
</style>