<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.value }}<span v-show="item.value">日</span>
            </div>
            <div class="status" v-show="item.value">
              <span
                @click="routePush(evn, item)"
                v-for="(evn, index) in item.status"
                :key="index + 'evn'"
                v-show="item.value"
                :style="{ background: evn.color }"
                >{{ evn.text }}</span
              >
            </div>
            <div
              class="time"
              :class="
                item.status == '请假'
                  ? 'greenColor'
                  : item.status == '未报备'
                  ? 'grayColr'
                  : ''
              "
              v-show="item.value"
            ></div>
          </div>
        </div>
      </div>

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

<script setup>
import { getPbbbByMonth } from "../../../api/calender";
import TopNav from "../../../components/topNav.vue";
import CalendarList from "../components/calendarList.vue";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
const router = useRouter();
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 listData = ref([]);
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;
  starttime.value = nowtime.value;
  endtime.value = nowtime.value;
});
function routePush(e, t) {
  const timeDay = new Date();
  let y = timeDay.getFullYear();
  let m =
    timeDay.getMonth() + 1 < 10
      ? "0" + (timeDay.getMonth() + 1)
      : timeDay.getMonth() + 1;
  let d = timeDay.getDate() < 10 ? "0" + timeDay.getDate() : timeDay.getDate();
  const dtime = y + "-" + m + "-" + d;
  if (e.zt === "04") {
    return false;
  } else {
    router.push({
      path: "/xfbbInfo",
      query: {
        zt: e.zt,
        pbid: e.zt === "01" ? e.id : null,
        bbid: e.zt === "01" ? null : e.id,
        isDay: dtime === t.count ? 1 : 0,
      },
    });
  }
}
//状态字典
const ztDict = [
  {
    label: "未执勤",
    value: "01",
    color: "#7b7b7b",
  },
  {
    label: "执勤中",
    value: "02",
    color: "#51fb06",
  },
  {
    label: "已执勤",
    value: "03",
    color: "#0084ff",
  },
  {
    label: "请假",
    value: "04",
    color: "#f00",
  },
];
//状态数据处理
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;
}
function Draw(Year, Month) {
  getPbbbByMonth({ time: Year + "-" + Month })
    .then((res) => {
      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,
            });
          });
        }
      });
      calendarList.value = res.map((item, index) => {
        return {
          value: index + 1,
          kssj: "20:00", //假数据
          jssj: "23:59",
          status: checkZt(item.list), //假的状态
          count: Year + "-" + Month + "-" + item.day,
        };
      });
      for (
        var i = 1, firstDay = new Date(Year, Month - 1, 1).getDay();
        i <= firstDay;
        i++
      ) {
        calendarList.value.unshift("");
      }
    })
    .catch((err) => {});
}
// 上个月
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);
      }
      .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;
}
</style>