<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 class="change" @click="isChange = !isChange">
          <van-icon name="exchange" size="16" color="#3e6ee8" />
          {{ isChange ? "切换表格" : "切换列表" }}
        </div>
      </div>
      <!-- 日历列表 -->
      <div v-if="!isChange" class="list">
        <ul class="week">
          <li class="days" v-for="(item, index) in week" :key="index">
            {{ item }}
          </li>
        </ul>
        <div class="wrap">
          <div class="item" v-for="(item, index) in calendarList" :key="index">
            <div class="num">
              {{ item.day }}<span v-show="item.list">日</span>
            </div>
            <div class="status" v-show="item.status">
              <span
                @click="routePush(evn, item)"
                v-for="(evn, index) in item.status"
                :key="index + 'evn'"
                v-show="evn.text"
                :style="{ background: evn.color }"
                >{{ evn.text }}</span
              >
            </div>
          </div>
        </div>
      </div>

      <!-- 日历列表 -->
      <div v-else class="list">
        <CalendarList :listData="listData"></CalendarList>
      </div>
    </div>
  </div>
</template>

<script setup>
import TopNav from "../../../components/topNav.vue";
import CalendarList from "../components/calendarListZb.vue";
import router from "../../../router/index.js";
import { getZbbbByMonth } from "@/api/calender";
import { onMounted, reactive, ref } from "vue";
import { Toast } from "vant";
const isChange = ref(false);
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 loading = ref(false);
const listData = ref([]);

//状态字典
const ztDict = [
  {
    label: "待值班",
    value: "01",
    color: "#7b7b7b",
  },
  {
    label: "值班中",
    value: "02",
    color: "",
  },
  {
    label: "已值班",
    value: "03",
    color: "#0084ff",
  },
  {
    label: "",
    value: "04",
    color: "",
  },
];
const calendarList = ref([]);
//状态数据处理
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,
        time: item.time,
      };
    });
  }
  return zt;
}
onMounted(() => {
  Toast.loading({
    message: "加载...",
    forbidClick: true,
    loadingType: "spinner",
    duration: 0,
  });
  Promise.all([
    getzbCalendar(Year.value, month.value),
    Draw(nowYear.value, nowmonth.value),
  ])
    .then((res) => {
      Toast.clear();
    })
    .catch((err) => {
      Toast.clear();
    });
  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;
  starttime.value = nowtime.value;
  endtime.value = nowtime.value;
});
//跳转报备
function routePush(evn, item) {
  // router.push("/yyzx/views/addZbbb");
  let flag = 0;
  let currentTi = "";
  let y = Year.value; //现在的月份
  let m = month.value; //现在的天数
  if (y < 10) {
    y = 0 + "" + y;
  }
  if (m < 10) {
    m = 0 + "" + m;
  }
  currentTi = y + "" + m + "" + item.day;
  if (nowtime.value === currentTi) {
    flag = 1;
  }
  if (evn.zt !== "04") {
    router.push({
      path: "/yyzx/views/addZbbbInfo",
      query: {
        zt: evn.zt,
        id: evn.id,
        text: evn.text,
        color: evn.color,
        flag: flag,
      },
    });
  }
}
//初始化日历数据
function Draw(Year, Month) {
  var calendar = [];
  //用当月第一天在一周中的日期值作为当月离第一天的天数(获取当月第一天是周几)
  for (
    var i = 1, firstDay = new Date(Year, Month - 1, 1).getDay();
    i <= firstDay;
    i++
  ) {
    calendar.push("");
  }
  //用当月最后一天在一个月中的日期值作为当月的天数
  for (
    var i = 1, monthDay = new Date(Year, Month, 0).getDate();
    i <= monthDay;
    i++
  ) {
    let time_month = Month;
    let time_day = i;
    if (Month < 10) {
      time_month = 0 + "" + Month;
    }
    if (i < 10) {
      time_day = 0 + "" + i;
    }
    calendar.push({
      value: i,
      kssj: "20:00", //假数据
      jssj: "23:59",
      status: "值班", //假的状态
      count: Year + "" + time_month + "" + time_day,
    });
  }
  calendar[10].status = "未报备";
  calendar[15].status = "未报备";
  calendar[20].status = "请假";
  calendar[21].status = "请假";
  calendar[20].time = "";
  calendar[21].time = "";
  calendarList.value = calendar;
}
// 上个月
function last() {
  month.value--;
  if (month.value == 0) {
    month.value = 12;
    Year.value--;
  }
  Draw(Year.value, month.value);
  getzbCalendar(Year.value, month.value);
}
// 下个月
function next() {
  month.value++;
  if (month.value == 13) {
    month.value = 1;
    Year.value++;
  }
  Draw(Year.value, month.value);
  getzbCalendar(Year.value, month.value);
}

// 获取日历数据
const getzbCalendar = (Year, Month) => {
  getZbbbByMonth({
    time: Year + "-" + Month,
  }).then((res) => {
    if (res && res.length > 0) {
      listData.value = [];
      res.map((item) => {
        if (item.list.length === 0) {
          listData.value.push({
            time: Year + "-" + Month + "-" + item.day,
            zqsj: "--",
            zqzt: "--",
            zt: "04",
          });
        } else {
          item.list.map((env) => {
            listData.value.push({
              time: Year + "-" + Month + "-" + item.day,
              zqsj: env.time,
              zqzt: ztDict.filter((item2) => item2.value === env.zt)[0].label,
              zt: env.zt,
              id: env.id,
            });
          });
        }
      });

      res.forEach((element) => {
        if (element.list.length > 0) {
          element.status = checkZt(element.list);
        }
      });
    }

    calendarList.value = res;
    for (
      var i = 1, firstDay = new Date(Year, Month - 1, 1).getDay();
      i <= firstDay;
      i++
    ) {
      calendarList.value.unshift("");
    }
  });
};
</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;
    @include font_size($font_medium_s);
    background: #164acc;
    color: #fff;
    .days {
      flex: 1;
    }
  }
  .wrap {
    width: 100%;
    // height: auto;
    // overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: calc((100% / 7) - 1.3px);
      border: 1px solid #3e6ee8;
      border-top: none;
      font-size: 10px;
      min-height: 17vw;
      .num {
        @include font_color($font-color-theme);
        text-align: right;
        height: 5vw;
        line-height: 5vw;
        padding-right: 1vw;
        box-sizing: border-box;
      }
      .status {
        text-align: center;
        // height: 5vw;
        line-height: 5vw;
        margin: 1vw 0;
        span {
          background: #3e6ee8;
          display: inline-block;
          padding: 1px 1vw;
          margin: 4px 0;
          color: #fff;
          border-radius: 1vw;
        }
        .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;
}

@import "../../../assets/styles/mixin.scss";
.box-rank {
  width: 100%;
  height: 100%;
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8vw;
    @include font_size($font_medium_s);
    @include font_color($font-color-theme);
    .text {
      flex: 1;
      text-align: center;
    }
    .mc {
      color: #3e6ee8;
    }
  }
  .item:nth-child(2n + 1) {
    @include table_item_color($table-item-theme);
  }
  .item:nth-child(1) {
    background: #3e6ee8 !important;
    color: #fff;
  }
  .red {
    color: red !important;
  }
  .green {
    color: #88e9af;
  }
  .blue {
    color: #3e6ee8;
  }
}
</style>