<template>
  <div class="wrap">
    <m-header v-if="headerStatus" />
    <div class="searchSection">
      <div class="searchDate">
        <div class="date startDate" @click="dateSection.status = true">
          开始
          <span class="squrt">{{ dateSection.showStartDate }}</span>
        </div>
        -
        <div class="date endDate" @click="dateEndSection.status = true">
          结束
          <span class="squrt">{{ dateEndSection.showEndDate }}</span>
        </div>
      </div>
      <!-- <div class="searchMore">
                筛选<i class="arrowDown"></i>
      </div>-->
      <van-dropdown-menu>
        <!-- <div class="susqurt">|</div> -->
        <van-dropdown-item title="筛选" ref="item" v-model="search.status">
          <div class="dropList">
            <div class="dropItem">
              <p class="dropTitle">课程类型</p>
              <div class="radioGroup" id="courseType">
                <span
                  :class="search.type == 'PRACTICE' ? 'actived' : ''"
                  @click="search.type = 'PRACTICE'"
                  >网管课</span
                >
                <span
                  :class="search.type == 'VIP' ? 'actived' : ''"
                  @click="search.type = 'VIP'"
                  >VIP课</span
                >
                <span
                  :class="search.type == 0 ? 'actived' : ''"
                  @click="search.type = 0"
                  >全部</span
                >
              </div>
            </div>
            <div class="dropItem">
              <p class="dropTitle">评价进度</p>
              <div class="radioGroup">
                <span
                  :class="search.hasReview == 0 ? 'actived' : ''"
                  @click="search.hasReview = 0"
                  >待完成</span
                >
                <span
                  :class="search.hasReview == 1 ? 'actived' : ''"
                  @click="search.hasReview = 1"
                  >已完成</span
                >
              </div>
            </div>
            <div class="dropItem">
              <p class="dropTitle">提交作业</p>
              <div class="radioGroup">
                <span
                  :class="search.hasHandHomework == 1 ? 'actived' : ''"
                  @click="search.hasHandHomework = 1"
                  >是</span
                >
                <span
                  :class="search.hasHandHomework == 0 ? 'actived' : ''"
                  @click="search.hasHandHomework = 0"
                  >否</span
                >
              </div>
            </div>
            <div class="dropItem">
              <p class="dropTitle">完成双向沟通</p>
              <div class="radioGroup">
                <span
                  :class="search.hasLiaison == 1 ? 'actived' : ''"
                  @click="search.hasLiaison = 1"
                  >是</span
                >
                <span
                  :class="search.hasLiaison == 0 ? 'actived' : ''"
                  @click="search.hasLiaison = 0"
                  >否</span
                >
              </div>
            </div>
            <div class="dropItem">
              <p class="dropTitle">学生是否到课</p>
              <div class="radioGroup">
                <span
                  :class="search.hasArrived == 1 ? 'actived' : ''"
                  @click="search.hasArrived = 1"
                  >是</span
                >
                <span
                  :class="search.hasArrived == 0 ? 'actived' : ''"
                  @click="search.hasArrived = 0"
                  >否</span
                >
              </div>
            </div>
          </div>
          <div class="btnGroup">
            <div class="btn btn-reset" @click="resetSerach">重置</div>
            <div class="btn btn-sure" @click="submitInfo">确定</div>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div v-if="dataShow" key="data">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="- 没有更多了 -"
        @load="getList"
      >
        <van-cell
          v-for="(item, index) in courseList"
          :key="index"
          class="cellGroup"
          :title="item.classDate | filterClass"
          value-class="sectionValue"
        >
          <template slot="title">
            <div class="titleWrap" style="word-break: break-all">
              <img class="titleIcon" :src="getIcon(item.groupType)" alt="" />
              <div class="">
                <p class="content van-ellipsis courseName">
                  {{ item.courseName }}
                </p>
                <p class="content van-ellipsis courseTime">
                  {{ item.classDate | formatTimer }}
                </p>
              </div>
            </div>

            <!--  -->
          </template>

          <template solt="default">
            <van-button
              type="primary"
              round
              size="small"
              v-if="item.reviewId == 0"
              @click="submitReview(item)"
              >提交评价</van-button
            >
            <van-button
              type="primary"
              round
              class="van-update"
              size="small"
              v-if="item.reviewId > 0"
              @click="submitReview(item)"
              >修改评价</van-button
            >
          </template>
        </van-cell>
      </van-list>
    </div>

    <m-empty class="empty" msg="暂无数据" v-else key="data" />

    <!-- 日期开始弹窗 -->
    <van-popup position="bottom" v-model="dateSection.status" class="radius">
      <van-datetime-picker
        v-model="dateSection.currentDate"
        type="date"
        :min-date="dateSection.minDate"
        :max-date="dateSection.maxDate"
        :formatter="formatter"
        @confirm="confirmStartTime()"
        @cancel="cancelTime()"
      />
    </van-popup>
    <!-- 日期结束弹窗 -->
    <van-popup position="bottom" v-model="dateEndSection.status" class="radius">
      <van-datetime-picker
        v-model="dateEndSection.currentDate"
        type="date"
        :min-date="dateSection.minDate"
        :max-date="dateSection.maxDate"
        :formatter="formatter"
        @confirm="confirmEndTime()"
        @cancel="cancelTime()"
      />
    </van-popup>

    <!-- <van-popup position="bottom" v-model="search.status"></van-popup> -->
  </div>
</template>
<script>
import MHeader from "@/components/MHeader";
import MEmpty from "@/components/MEmpty";
import { browser } from "@/common/common";
import { getOnlineCourse } from "@/api/audition";
// SINGLE,MIX,HIGH,VIP,DEMO,COMPREHENSIVE,PRACTICE,ENLIGHTENMENT,TRAINING_SINGLE,TRAINING_MIX,CLASSROOM,COMM,HIGH_ONLINE,MUSIC_NETWORK
export default {
  name: "teacherList",
  components: { MHeader, MEmpty },
  data() {
    return {
      headerStatus: true,
      dateSection: {
        status: false,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: null,
        showStartDate: null,
      },
      dateEndSection: {
        status: false,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: null,
        showEndDate: null,
      },
      search: {
        status: false,
        hasReview: null,
        hasHandHomework: null,
        hasLiaison: null,
        hasArrived: null,
        type: null, //课程类型
      },
      courseList: [],
      loading: false,
      finished: false,
      dataShow: true, // 是否显示
      page: 1,
      iconList: {
        pIcon: require("@/assets/images/Pdot.png"),
        mIcon: require("@/assets/images/Mdot.png"),
        wIcon: require("@/assets/images/Wdot.png"),
        vIcon: require("@/assets/images/Vdot.png"),
        tIcon: require("@/assets/images/Tdot.png"),
      },
    };
  },
  created() {
    let params = this.$route.query;
    if (params.Authorization) {
      localStorage.setItem("Authorization", decodeURI(params.Authorization));
      localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }
  },
  mounted() {
    document.title = "线上课评价";
    let params = this.$route.query;
    if (params.Authorization) {
      localStorage.setItem("Authorization", decodeURI(params.Authorization));
      localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }
    if (browser().android || browser().iPhone) {
      this.headerStatus = false;
    }
    this.dateSection.currentDate = new Date();
    this.dateSection.showStartDate = this.timeFormat(
      this.dateSection.currentDate
    );
    this.dateEndSection.currentDate = new Date();
    this.dateEndSection.showEndDate = this.timeFormat(
      this.dateEndSection.currentDate
    );
    let evaluationList = sessionStorage.getItem("evaluationList");
    if (evaluationList) {
      this.search = JSON.parse(evaluationList);
      this.dateSection.showStartDate = this.timeFormat(
        new Date(this.search.startTime.replace(/-/g, "/"))
      );
      this.dateSection.currentDate = new Date(
        this.search.startTime.replace(/-/g, "/")
      );
      this.dateEndSection.currentDate = new Date(
        this.search.endTime.replace(/-/g, "/")
      );
      this.dateEndSection.showEndDate = this.timeFormat(
        new Date(this.search.endTime.replace(/-/g, "/"))
      );
    }
  },
  methods: {
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type == "day") {
        return `${val}日`;
      }
      return val;
    },
    confirmStartTime() {
      this.dateSection.showStartDate = this.timeFormat(
        this.dateSection.currentDate
      );
      this.dataShow = true;
      this.page = 1;
      this.onRefresh();
      this.dateSection.status = false;
    },
    confirmEndTime() {
      this.dateEndSection.showEndDate = this.timeFormat(
        this.dateEndSection.currentDate
      );
      this.dataShow = true;
      this.page = 1;
      this.onRefresh();
      this.dateEndSection.status = false;
    },
    cancelTime() {
      this.dateEndSection.status = false;
      this.dateSection.status = false;
    },
    timeFormat(time) {
      // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + "/" + month + "/" + day;
    },
    resetSerach() {
      this.search = {
        status: false,
        hasReview: null,
        hasHandHomework: null,
        hasLiaison: null,
        hasArrived: null,
        type: null,
      };
    },
    submitInfo() {
      // 提交请求
      this.onRefresh();
      this.dataShow = true;
      this.page = 1;
      this.search.status = false;
      this.$refs.item.toggle();
    },
    getList() {
      this.loading = true;
      this.search.startTime =
        this.dateSection.showStartDate.replace(/\//g, "-") + " 00:00:00";
      (this.search.endTime =
        this.dateEndSection.showEndDate.replace(/\//g, "-") + " 23:59:59"),
        (this.search.page = this.page);
      this.search.type = this.search.type ? this.search.type : null;
      this.search.rows = 20;
      getOnlineCourse(this.search).then((res) => {
        let result = res.data;
        this.loading = false;
        if (result.code == 200) {
          sessionStorage.setItem("evaluationList", JSON.stringify(this.search));
          this.page = result.data.pageNo;
          this.courseList = this.courseList.concat(result.data.rows);
          if (this.page >= result.data.totalPage) {
            this.finished = true;
          }
          this.page++;
        } else {
          this.finished = true;
        }
        // 判断是否有数据
        if (this.courseList.length <= 0) {
          this.dataShow = false;
        }
      });
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.page = 1;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = false;
      this.courseList = [];
      this.getList();
    },
    submitReview(item) {
      this.$router.push({
        path: "/courseEvaluation",
        query: { id: item.id, reviewId: item.reviewId, isInside: true },
      });
    },
    getIcon(type) {
      let obj = {
        MUSIC: this.iconList.mIcon,
        VIP: this.iconList.vIcon,
        DEMO: this.iconList.tIcon,
        PRACTICE: this.iconList.pIcon,
        COMM: this.iconList.wIcon,
      };

      return obj[type] || this.iconList.vIcon;
    },
  },
  filters: {
    filterClass(val) {
      return val.substring(0, 10);
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");
.wrap {
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #f3f4f8;
}
/deep/.van-dropdown-item__content {
  height: 100%;
  max-height: 100%;
}
.searchSection {
  display: flex;
  justify-content: space-between;
  background: #fff;
  margin-bottom: 0.12rem;
  padding: 0.1rem 0.16rem;
  align-items: center;
  height: 50px;
  .searchDate {
    display: flex;
    align-items: center;
    color: #666666;
    height: auto;
    .startDate {
      margin-right: 0.05rem;
    }
    .endDate {
      margin-left: 0.05rem;
    }
    .date {
      background-color: #f5f5f5;
      padding: 0.02rem 0.15rem;
      // border: 1px solid #e5e5e5;
      border-radius: 0.12rem;
      font-size: 0.14rem;
      color: #999999;

      span {
        padding-left: 0.04rem;
        font-size: 0.15rem;
        color: #666666;
        position: relative;
        &::after {
          position: absolute;
          top: 50%;
          right: -10px;
          margin-top: -5px;
          border: 3px solid;
          border-color: transparent transparent @mColor @mColor;
          -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
          opacity: 0.8;
          content: "";
        }
      }
    }
  }
  /deep/.van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    border-width: 0 0;
  }

  /deep/.van-dropdown-menu__title {
    font-size: 0.17rem;
    color: #1a1a1a;
    height: auto;
    &::after{
      border-color: transparent transparent @mColor @mColor;
    }
  }

  .btnGroup {
    display: flex;
    margin-top: 0.15rem;
    position: fixed;
    width: 100%;
    bottom: 0;
    .btn {
      width: 50%;
      text-align: center;
      font-size: 0.17rem;
      color: #000;
      padding: 0.12rem 0;
    }
    .btn-reset {
      background-color: #eeeff3;
      color: @mColor;
    }
    .btn-sure {
      background-color: @mColor;
      color: #fff;
    }
  }
  .dropList {
    margin-bottom: 0.55rem;
  }
  .dropItem {
    padding: 0.1rem 0.16rem;
    .dropTitle {
      font-size: 0.14rem;
      color: #1a1a1a;
    }
    #courseType {
      span {
        width: 1.02rem;
      }
    }
    .radioGroup {
      display: flex;
      justify-content: space-between;
      padding-top: 0.08rem;
      flex-wrap: wrap;
      span {
        color: #000000;
        background-color: #ffffff;
        width: 48%;
        padding: 0.08rem 0;
        text-align: center;
        border-radius: 2px;
        border: 1px solid #e2e0e0;
        &.actived {
          color: @mColor;
          // background: url("../../assets/images/audition/icon_check.png")
          //   no-repeat bottom right #e4f6f5;
          // background-size: 0.2rem;
          border: 1px solid @mColor;
          background: #ffffff;
        }
      }
    }
  }
}
.cellGroup {
  // padding: 0.16rem;
  font-size: 0.14rem;
  line-height: 0.24rem;
}
.sectionTitle {
  font-size: 0.16rem;
  color: #808080;
  align-items: center;
  display: flex;
}
.sectionValue {
  display: flex;
  width: 70%;
  justify-content: flex-end;
  align-items: center;
  height: auto !important;

  .van-button {
    font-size: 0.14rem;
    background-color: @mColor;
    border-color: @mColor;
    padding: 0 0.12rem;
    min-width: 0.88rem;
    height: 0.3rem;
    &.van-update {
      background-color: #fff;
      color: @mColor;
    }
  }
}
/deep/.van-cell {
  padding: 17px 16px;
}
/deep/.van-cell__title {
  font-size: 0.14rem;
  color: @mFontColor;
}
.logo {
  width: 0.35rem;
  height: 0.35rem;
  margin-right: 0.12rem;
  border-radius: 100%;
}
.input-cell {
  padding: 0.12rem 0.16rem 0.2rem;
  .van-radio {
    justify-content: flex-end;
  }
}
/deep/.van-cell__value {
  height: 0.2rem;
}
/deep/.van-radio__icon .van-icon {
  border-color: @sFontColor;
}
/deep/.van-radio__icon--checked {
  .van-icon {
    border-color: @orangeColor;
    background: @orangeColor;
  }
}
.van-tag {
  margin-left: 0.08rem;
}
.button-group {
  margin: 0.3rem 0.26rem 0.2rem;
  .van-button--primary {
    background: @mColor;
    border: 1px solid @mColor;
    font-size: 0.18rem;
  }
}
/deep/.van-dropdown-menu__bar {
  box-shadow: none;
}
.titleWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .content {
    width: 2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.17rem;
    color: #1a1a1a;
  }
  .courseName {
    font-size: 0.16rem;
    color: #1a1a1a;
  }
  .courseTime {
    font-size: 0.13rem;
    color: #666;
  }
}
.titleIcon {
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.1rem;
}
// /deep/.van-picker__cancel,
// /deep/.van-picker__confirm {
//   color: @mColor;
// }

.susqurt {
  position: absolute;
  color: #d3d3d3;
  left: -5px;
  top:11px;
}
</style>