<template>
  <div class="afterClassEvaluate">
    <van-sticky>
      <m-header v-if="headerStatus" :isFixed="false" />
      <van-tabs
        v-model="params.evaluateFlag"
        title-active-color="#000000"
        title-inactive-color="#808080"
        @change="onTabChange"
        color="#01C1B5"
        class="van-hairline--bottom"
      >
        <van-tab title="待评价课程" :name="0"> </van-tab>
        <van-tab title="评价记录" :name="1"> </van-tab>
      </van-tabs>
    </van-sticky>

    <van-list
      v-model="loading"
      v-if="dataShow"
      :finished="finished"
      finished-text="- 没有更多了 -"
      :immediate-check="false"
      @load="getList"
    >
      <item v-for="(item, i) in list" :dataInfo="item" :key="i" @onItem="onItem" />
    </van-list>
    <m-empty v-else msg="暂无课后评价" />
  </div>
</template>

<script>
import dayjs from 'dayjs';
import MHeader from "@/components/MHeader";
import MEmpty from '@/components/MEmpty';
import { browser } from "@/common/common";
import { courseEvaluateList } from './api'
import Item from './modal/item'
import { postMessage, listenerMessage } from '@/helpers/native-message'
export default {
  name: "afterClassEvaluate",
  components: { MHeader, MEmpty, Item },
  data() {
    let evaluateFlag = sessionStorage.getItem('afterClassEvaluate')
    sessionStorage.removeItem('afterClassEvaluate')
    return {
      headerStatus: true,
      list: [],
      loading: false,
      finished: false,
      params: {
        evaluateFlag: Number(evaluateFlag) || 0,
        page: 1,
        rows: 20,
      },
      dataShow: true,
    };
  },
  methods: {
    onItem(item) {
      sessionStorage.setItem('afterClassEvaluate', this.params.evaluateFlag)
      // 待评价 线下乐团课
      if(this.params.evaluateFlag === 0 && item.groupType == 'MUSIC' && item.teachMode == 'OFFLINE') {
        postMessage({ api: 'openMusicEvaluate', content: { courseScheduleId: item.courseScheduleId, masterTeacherFlag: item.masterTeacherFlag} })
      } else {
        this.$router.push({
          path: '/afterClassEvaluateDetail',
          query: {
            id: item.courseScheduleId,
            evaluateFlag: this.params.evaluateFlag,
            reviewId: item.courseScheduleReviewId,
            groupType: item.groupType,
            isInside: true // 判断是否是内部跳转
          }
        })
      }
    },
    onTabChange(val) {
      this.list = [];
      this.params.page = 1;
      this.params.evaluateFlag = val;
      this.dataShow = true;
      this.loading = true;
      this.finished = false;
      this.getList()
    },
    async getList() {
      let params = this.params;
      try {
        let res = await courseEvaluateList({ ...params });
        let result = res.data;
        this.loading = false;
        if (params.page > result.pageInfo.pageNo) {
          return;
        }
        params.page = result.pageInfo.pageNo;
        const rows = result.pageInfo.rows
        this.list = this.list.concat(rows);
        if (params.page >= result.pageInfo.totalPage) {
          this.finished = true;
        }
        this.params.page++;
        // 判断是否有数据
        if (this.list.length <= 0) {
          this.dataShow = false;
        }
      } catch {
        this.finished = true;
        this.dataShow = false;
      }
    },
    reload() {
      let isHidden = document.hidden;
      if (!isHidden) {
        this.list = [];
        this.params.page = 1;
        this.dataShow = true;
        this.loading = true;
        this.finished = false;
        this.getList()
      }
    }
  },
  async mounted() {
    if (browser().android || browser().iPhone) {
      this.headerStatus = false;
    }
    await this.getList()

    document.addEventListener('visibilitychange', this.reload)

    document.title = '课后评价';
  },
  beforeDestroy() {
    document.removeEventListener('visibilitychange', this.reload)
  }
};
</script>

<style lang="less" scoped>
.afterClassEvaluate {
  min-height: 100vh;
}
</style>
