<template>
  <div style="padding-top: 13vw">
    <TopNav navTitle="部门值班报备清单" :showLeft="true" />
    <div class="calenderBox">
      <div class="calender-head">
        <div class="btn" @click="last">
          <van-icon name="arrow-left" color="#fff" />
        </div>
        <div class="text">{{ Year }}年{{ month }}月</div>
        <div class="btn" @click="next">
          <van-icon name="arrow" color="#fff" />
        </div>
      </div>
      <!-- 日历 -->
      <div class="list">
        <ul class="week">
          <li class="days" v-for="(item, index) in week" :key="index">
            {{ item }}
          </li>
        </ul>
        <div class="wrap">
          <div @click="checkDay(Year + '-' + month + '-' + item.value)" class="item"
            v-for="(item, index) in calendarList" :key="index">
            <div class="num" :class="calendarActive == Year + '-' + month + '-' + item.value
              ? 'active'
              : ''
              ">
              {{ item.value }}<span v-show="item.value">日</span>
            </div>
            <div class="status" v-show="item.value">
              <div v-for="item2 in item.list" :key="item2.id">
                <span @click="itemClick(item)" v-show="item.value" :style="{ background: item.color }">{{ item2.zbldXm
                  }}
                  {{
                    item2.kssj.split(":")[0] + ":" + item2.kssj.split(":")[1]
                  }}
                  {{
                    item2.jssj.split(":")[0] + ":" + item2.jssj.split(":")[1]
                  }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-item item_box">
      <div class="title">部门值班报备详情</div>
      <div v-for="item in zbInfo.list" :key="item.id">
        <div class="num-text">值班领导：{{ item.zbldXm }}</div>
        <div class="num-text" v-if="item.zbmj && item.zbmj.length > 0">
          值班民警：{{
            JSON.parse(item.zbmj)
              .map((jl) => jl.jlxm)
              .join("、") || "暂无"
          }}
        </div>
        <div class="num-text" v-if="item.zbfj && item.zbfj.length > 0">
          值班辅警：{{
            JSON.parse(item.zbfj)
              .map((jl) => jl.jlxm)
              .join("、") || "暂无"
          }}
        </div>
        <div class="num-text">值班电话：{{ item.zbldDh }}</div>
        <div class="num-text">值班时间：{{ item.kssj }} - {{ item.jssj }}</div>
      </div>
    </div>
    <div v-if="zbInfo.list.length === 0" style="text-align: center; padding: 12px 0; color: #828282">
      无今日值班
    </div>
  </div>
</template>

<script setup>
import { getDeptByMonth } from "../../../api/calender";
import TopNav from "../../../components/topNav.vue";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
const zbInfo = ref({
  list: [],
});
//日历选中高亮
const calendarActive = ref("");
const router = useRouter();
const week = ref(["周日", "周一", "周二", "周三", "周四", "周五", "周六"]);
const Year = ref(new Date().getFullYear()); //日历上的年份
const month = ref(new Date().getMonth() + 1); //日历上的月份
const Day = ref(new Date().getDate()); //日历上的天份
const nowYear = ref(new Date().getFullYear());
const nowmonth = ref(new Date().getMonth() + 1);
const nowDay = ref(new Date().getDate());

const starttime = ref("");
const endtime = ref("");
const nowtime = ref("");

const calendarList = ref([]);
onMounted(() => {
  Draw(nowYear.value, nowmonth.value);
  let time_month = nowmonth.value; //现在的月份
  let time_day = nowDay.value; //现在的天数
  if (nowmonth.value < 10) {
    time_month = 0 + "" + nowmonth.value;
  }
  if (nowDay.value < 10) {
    time_day = 0 + "" + nowDay.value;
  }
  nowtime.value = nowYear.value + "-" + time_month + "-" + time_day;
  calendarActive.value =
    nowYear.value + "-" + nowmonth.value + "-" + nowDay.value;
  starttime.value = nowtime.value;
  endtime.value = nowtime.value;
});
function itemClick(e) {
  zbInfo.value = e;
}
function checkDay(val) {
  calendarActive.value = val;
}
//状态字典
const ztDict = [
  {
    label: "无报备",
    value: "00",
    color: "#7b7b7b",
  },
  {
    label: "有报备",
    value: "01",
    color: "#51fb06",
  },
  {
    label: "今日报备",
    value: "02",
    color: "#51fb06",
  },
  {
    label: "今日排班",
    value: "03",
    color: "#7b7b7b",
  },
  {
    label: "无",
    value: "04",
    color: "#7b7b7b",
  },
  {
    label: "有排班",
    value: "05",
    color: "#7b7b7b",
  },
  {
    label: "无排班",
    value: "06",
    color: "#7b7b7b",
  },
];
//状态数据处理
function checkZt(list = []) {
  var zt = [];
  if (list.length > 0) {
    zt = list.map((item) => {
      return {
        text: ztDict.filter((item2) => item2.value === item.zt)[0].label,
        color: ztDict.filter((item2) => item2.value === item.zt)[0].color,
        id: item.id,
        zt: item.zt,
      };
    });
  }
  return zt;
}
const isToday = ref(true);
function Draw(Year, Month) {
  Toast.loading({
    message: "加载...",
    forbidClick: true,
    loadingType: "spinner",
    duration: 0,
  });
  getDeptByMonth({ time: Year + "-" + Month })
    .then((res) => {
      const copyRes = JSON.parse(JSON.stringify(res)).map((c) => {
        var ccc = [];
        if (!c.list) {
          ccc = [];
        } else {
          ccc = c.list.map((ci) => {
            return {
              ...ci,
              zt: c.type,
            };
          });
        }
        return {
          ...c,
          label: ztDict.filter((item2) => item2.value === c.type)[0].label,
          color: ztDict.filter((item2) => item2.value === c.type)[0].color,
          list: ccc,
        };
      });
      calendarList.value = copyRes.map((item, index) => {
        return {
          value: index + 1,
          kssj: "20:00", //假数据
          jssj: "23:59",
          status: checkZt(item.list), //假的状态
          count: Year + "-" + Month + "-" + item.day,
          ...item,
        };
      });
      if (isToday.value) {
        var toTime = new Date();
        var m =
          toTime.getMonth() < 9
            ? "0" + (toTime.getMonth() + 1)
            : toTime.getMonth() + 1;
        var d =
          toTime.getDate() < 10 ? "0" + toTime.getDate() : toTime.getDate();
        var toDay = toTime.getFullYear() + "-" + m + "-" + d;
        calendarList.value.forEach((v) => {
          if (v.time === toDay) {
            zbInfo.value = v;
            isToday.value = false;
          }
        });
      }
      for (
        var i = 1, firstDay = new Date(Year, Month - 1, 1).getDate();
        i <= firstDay;
        i++
      ) {
        calendarList.value.unshift("");
      }
      Toast.clear();
    })
    .catch((err) => {
      Toast.clear();
    });
}
// 上个月
function last() {
  month.value--;
  if (month.value == 0) {
    month.value = 12;
    Year.value--;
  }
  Draw(Year.value, month.value);
}
// 下个月
function next() {
  month.value++;
  if (month.value == 13) {
    month.value = 1;
    Year.value++;
  }
  Draw(Year.value, month.value);
}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";

.calenderBox {
  width: 100%;
  padding: 1vw;
  box-sizing: border-box;

  .calender-head {
    width: 100%;
    height: 15vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    line-height: 40px;
    position: relative;

    .change {
      position: absolute;
      right: 1vw;
      bottom: 2vw;
      cursor: pointer;
      color: #3e6ee8;
      @include font_size($font_medium_s);
    }

    .btn {
      width: 7vw;
      height: 7vw;
      line-height: 7vw;
      text-align: center;
      border-radius: 1vw;
      background: #3e6ee8;
      color: #fff;
    }

    .text {
      margin: 0 4vw;
      @include font_color($font-color-theme);
    }
  }

  .week {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    text-align: center;
    height: 10vw;
    line-height: 10vw;
    background: #164acc;
    color: #fff;

    .days {
      flex: 1;
    }
  }

  .wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .item {
      width: calc((100% / 7) - 1.3px);
      border: 1px solid #3e6ee8;
      border-top: none;
      font-size: 10px;
      min-height: 15vw;

      .num {
        text-align: right;
        padding-right: 1vw;
        box-sizing: border-box;
        @include font_color($font-color-theme);
      }

      .num.active {
        color: #1adb10;
      }

      .status {
        text-align: center;
        margin: 1vw 0;

        span {
          background: #3e6ee8;
          padding: 1px 1vw;
          display: block;
          width: 10vw;
          color: #fff;
          border-radius: 1vw;
          margin: 6px auto;
        }

        .green {
          background: #1adb10;
        }

        .gray {
          background: #83868f;
        }
      }

      .time {
        font-size: 10px;
        // height: 5vw;
        // line-height: 7vw;
        color: #3e6ee8;
        text-align: center;
      }

      .greenColor {
        color: #1adb10;
      }

      .grayColr {
        color: #83868f;
      }

      .BlueColor {
        color: #3e6ee8;
      }
    }

    .item:nth-child(7n + 2) {
      border-left: none;
    }

    .item:nth-child(7n + 3) {
      border-left: none;
    }

    .item:nth-child(7n + 4) {
      border-left: none;
    }

    .item:nth-child(7n + 5) {
      border-left: none;
    }

    .item:nth-child(7n + 6) {
      border-left: none;
    }

    .item:nth-child(7n + 7) {
      border-left: none;
    }
  }
}

.list {
  max-height: calc(100vh - 35vw);
  // overflow: hidden;
  // overflow-y: auto;
}

.list-item {
  padding: 3vw;
  margin: 2vh 5vw;
  border-radius: 2vw;

  .phone-icon {
    position: absolute;
    right: 5vw;
  }

  .address-box {
    display: flex;
    justify-content: space-between;

    .adress-left {
      color: #3e6ee8;
    }
  }

  .name-text {
    @include font_size($font_medium);
    color: #3e6ee8;
    margin-bottom: 1vh;
    font-weight: bold;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .title {
    @include font_size($font_medium);
    font-weight: 550;
  }

  .num-text {
    @include font_size($font_medium_s);
    color: #2b2b2b;
    padding: 4px 0;
  }
}
</style>