<template>
  <div class="play-plan">
    <Nav title="直播计划">
      <span class="right-icon" @click="goToPage('/reserve')"> 预约 </span>
    </Nav>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <vue-hash-calendar
        picker-type="date"
        :show-action="true"
        :show-week-view="showWeek"
        :theme-color="{
          'bg-color': '#fff',
        }"
        @change="onChange"
      >
        <template v-slot:day="scope">
          <div
            :class="[
              liveHistory.includes(
                dayjs(
                  `${scope?.date?.year}-${scope?.date?.month + 1}-${
                    scope?.date?.day
                  }`
                ).format('YYYYMMDD')
              )
                ? 'point'
                : '',
            ]"
          >
            <div v-if="scope?.extendAttr?.isToday">今</div>
            <div v-else>{{ scope?.date?.day }}</div>
          </div>
        </template>
        <template #today>
          <img
            @click="showWeek = !showWeek"
            class="date-icon"
            src="@/assets/images/date-icon.png"
          />
        </template>
      </vue-hash-calendar>
      <div class="line"></div>
      <van-list
        v-model:loading="loading"
        v-model:error="loadError"
        :finished="finished"
        finished-text="没有更多了"
        error-text="加载错误，请点击重新加载"
        @load="onLoad"
      >
        <div class="list" v-if="list.length">
          <VideoItem v-for="(item, index) in list" :key="index" :item="item" />
        </div>
        <Empty v-else text="精彩直播正在路上..." />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import Nav from "@/components/NavBar.vue";
import VideoItem from "@/components/VideoItem.vue";
import Empty from "@/components/Empty.vue";
import { queryLivePlan } from "@/api/index";
import dayjs from "dayjs";
import { getLiveHistory } from "@/api/index";

const showWeek = ref(true);

const list = ref([]);
const loading = ref(false);
const loadError = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const current = ref(1);

const router = useRouter();

const goToPage = (page) => {
  router.push(page);
};

const planTime = ref(dayjs(new Date()).format("YYYY-MM-DD"));
const onChange = (date) => {
  planTime.value = dayjs(date).format("YYYY-MM-DD");
};

watch(
  () => planTime.value,
  () => {
    refreshing.value = [];
    onRefresh();
  }
);

const onRefresh = () => {
  current.value = 1;
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
const onLoad = async () => {
  // 异步更新数据
  let ret = await queryLivePlan({
    size: 10,
    current: current.value,
    lastAuditTime:
      refreshing.value || !list.value.length
        ? ""
        : list.value[list.value.length - 1].auditTime,
    lastStatus:
      refreshing.value || !list.value.length
        ? ""
        : list.value[list.value.length - 1].liveStatus,
    planTime: planTime.value,
    type: 1,
  });
  if (ret.code === 0) {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }
    current.value++;
    list.value = list.value.concat(ret.data.list);
    finished.value = !ret.data.hasNext;
  } else {
    loadError.value = true
  }
  loading.value = false;
};

const liveHistory = ref([]);
const getLiveHistoryFn = async () => {
  let ret = await getLiveHistory();
  if (ret.code === 0 && ret.data) {
    liveHistory.value = ret.data;
  }
};
getLiveHistoryFn();
</script>
<style scoped lang="scss">
.play-plan {
  background: #fff;
}
.van-pull-refresh {
  min-height: 100%;
}
::v-deep .hash-calendar {
  .calendar_title {
    margin: 0 40px 0 20px;
    box-sizing: border-box;
    width: auto;
    border-bottom: 1px solid #f5f6f7;
  }
  .calendar_confirm {
    margin-right: 0;
  }
}
.right-icon {
  color: #333333;
  text-align: right;
  font-family: "PingFang SC";
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  opacity: 0.8;
}
.date-icon {
  width: 48px;
  height: 48px;
}
.line {
  height: 15px;
  background: #f5f6f7;
}
.list {
  padding: 24px 32px 40px;
}
.empty {
  padding-top: 100px;
}
::v-deep .calendar_day {
  position: relative;
}
.point::after {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  content: "";
  background: red;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
::v-deep .hash-calendar {
  font-size: 32px;
  .calendar_content {
    height: 136px;
  }
  .calendar_title_date {
    padding: 30px 15px;
  }
  .calendar_group {
    top: 70px;
    padding: 3px 0;
  }
  .calendar_group_li {
    left: 4px;
  }
  .calendar_day {
    width: 60px;
    height: 60px;
    font-size: 32px;
    margin-bottom: 8px;
  }
  .calendar_dot {
    width: 5px;
    height: 5px;
  }
}
</style>
