<template>
  <div class="beforeVisitList">
    <van-sticky>
      <van-cell
        @click="showCalendar = true"
        title-style="font-size: .14rem;"
        value-class="calendarColor"
      >
        {{ calendarValue }}
      </van-cell>
    </van-sticky>

    <div class="section">
      <van-list
        v-model="loading"
        v-if="dataShow"
        :finished="finished"
        finished-text="- 没有更多了 -"
        @load="getList"
      >
        <van-cell is-link class="visit-item" @click="onDetail(item)" v-for="(item, index) in list" :key="index">
          <template #icon>
            <img class="user-logo" v-if="item.avatar" :src="item.avatar" alt="" />
            <img
              v-else
              class="user-logo"
              src="../../assets/images/icon_student.png"
              alt=""
            />
          </template>
          <template #title>
            <div class="title">
              <p class="name">{{ item.username }}</p>
              <p class="time">
                {{ item.classDate }}
                <span class="tips"><i class="icon_dot"></i>教学内容未达标</span>
              </p>
            </div>
          </template>
        </van-cell>
      </van-list>
      <m-empty v-else msg="暂无待回访记录" />
    </div>

    <van-calendar
      v-model="showCalendar"
      :minDate="minDate"
      :default-date="defaultDate"
      :first-day-of-week="1"
      :formatter="formatterDay"
      color="#01C1B5"
      type="range"
      get-container="body"
      @select="selectDate"
      @confirm="onConfirm"
      @close="onClose"
    />
  </div>
</template>

<script>
import MEmpty from "@/components/MEmpty";
import { getNowDateAndMonday, getNowDateAndSunday } from "@/common/common";
import dayjs from "dayjs";
import { queryStudyStandardWaitVisit } from "./api";
export default {
  name: "beforeVisitList",
  components: { MEmpty },
  data() {
    return {
      showCalendar: false,
      minDate: new Date(2000, 0, 1),
      defaultDate: [],
      // 类型为全部时
      startDay: null,
      endDay: null,
      list: [],
      loading: false,
      finished: false,
      params: {
        page: 1,
        rows: 20,
      },
      dataShow: true,
    };
  },
  mounted() {
    let day = 0;
    let startTime = new Date(),
      endTime = new Date();
    startTime = getNowDateAndMonday(
      dayjs()
        .subtract(Math.abs(day), "day")
        .format("YYYY-MM-DD")
    );
    endTime = getNowDateAndSunday(
      dayjs()
        .subtract(Math.abs(day), "day")
        .format("YYYY-MM-DD")
    );
    this.defaultDate = [new Date(startTime), new Date(endTime)];
    this.startDay = startTime;
    this.endDay = endTime;
  },
  computed: {
    calendarValue() {
      return `${dayjs(this.startDay).format("YYYY年MM月DD日")} - ${dayjs(
        this.endDay
      ).format("YYYY年MM月DD日")}`;
    },
  },
  methods: {
    onDetail(item) {
      this.$router.push({
        path: '/visitDetail',
        query: {
          avatar: item.avatar,
          username: item.username,
          classDate: item.classDate,
          reviewId: item.courseScheduleReviewId,
          courseScheduleId: item.courseScheduleId,
          objectId: item.studentAttendanceId,
          userId: item.userId,
          phone: item.phone
        }
      })
    },
    formatterDay(day) {
      const month = day.date.getMonth() + 1;
      const date = day.date.getDate();
      let nowDate = new Date();
      if (month == nowDate.getMonth() + 1 && date == nowDate.getDate()) {
        day.text = "今天";
      }
      return day;
    },
    selectDate(date) {
      let [start, end] = date;
      if (start) {
        const num = dayjs(start).get("day");
        if (num === 0) {
          start = dayjs(start).subtract(6, "day");
        } else {
          start = dayjs(start).subtract(num - 1, "day");
        }
      }
      if (start) {
        const num = 7 - dayjs(start).get("day");
        if (num < 7) {
          end = dayjs(start).add(num, "day");
        }
      }
      this.defaultDate = [new Date(start.valueOf()), new Date(end.valueOf())];
    },
    onConfirm(date) {
      let [start, end] = date;
      this.showCalendar = false;
      if (start) {
        const num = dayjs(start).get("day");
        if (num === 0) {
          start = dayjs(start).subtract(6, "day");
        } else {
          start = dayjs(start).subtract(num - 1, "day");
        }
      }
      if (end) {
        const num = 7 - dayjs(end).get("day");
        if (num < 7) {
          end = dayjs(end).add(num, "day");
        }
      }
      this.startDay = dayjs(start).format("YYYY-MM-DD");
      this.endDay = dayjs(end).format("YYYY-MM-DD");

      this.list = [];
      this.params.page = 1;
      this.dataShow = true;
      this.loading = true;
      this.finished = false;
      this.getList()
    },
    onClose() {
      // 关闭弹窗时初始化默认日期
      this.defaultDate = [new Date(this.startDay), new Date(this.endDay)];
    },
    async getList() {
      let params = this.params;
      if (this.startDay && this.endDay) {
        params.startDate = dayjs(new Date(this.startDay)).format(
          "YYYY-MM-DD"
        );
        params.endDate = dayjs(new Date(this.endDay)).format(
          "YYYY-MM-DD"
        );
      } else {
        params.startDate = null;
        params.endDate = null;
      }
      try {
        const res = await queryStudyStandardWaitVisit(params);
        const result = res.data;
        this.loading = false;
        if (params.page > result.pageNo) {
          return;
        }
        params.page = result.pageNo;
        this.list = this.list.concat(result.rows);
        if (params.page >= result.totalPage) {
          this.finished = true;
        }
        this.params.page++;
        // 判断是否有数据
        if (this.list.length <= 0) {
          this.dataShow = false;
        }
      } catch {
        this.finished = true;
        this.dataShow = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.calendarColor {
  font-size: 0.15rem;
  color: #1a1a1a;
  text-align: center;
}
/deep/.van-calendar__confirm {
  height: 46px;
}

.visit-item {
  margin: 0.1rem 0.12rem;
  border-radius: 0.1rem;
  padding: 0.18rem 0.12rem;
  width: auto;
  .user-logo {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
  }
  .title {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 0.1rem;
    color: #666666;
    font-size: 0.13rem;
    .name {
      font-size: 0.16rem;
      color: #1a1a1a;
    }
    .time {
      display: flex;
      align-items: center;
    }
    .tips {
      font-size: 0.12rem;
      color: #ff5a5f;
      background: #fff3f3;
      border-radius: 3px;
      margin-left: 0.05rem;
      padding: 0 0.05rem 0 0.03rem;
      line-height: 0.18rem;
      display: inline-block;
      display: flex;
      align-items: center;
      .icon_dot {
        display: inline-block;
        margin-right: 0.03rem;
        width: 0.1rem;
        height: 0.1rem;
        background: url("../afterClassEvaluate/images/dot.png") no-repeat center;
        background-size: contain;
      }
    }
  }
}
</style>
