<template>
  <div class="visitList">
    <van-sticky>
      <m-header v-if="headerStatus" :isFixed="false" />
      <van-tabs v-model="active" @change="tabChange" title-active-color="#000000" title-inactive-color="#808080" color="#01C1B5" class="van-hairline--bottom">
        <van-tab title="全部学员" name="all">
          <train-model ref="trainModel1" @onLoad="onLoad" :selectValues="params" :active="active" :defaultTime="0" />
        </van-tab>
        <van-tab title="待回访学员" name="visited">
          <train-model ref="trainModel2" @onLoad="onLoad" :selectValues="params" :playTime="playTime" :trainNum="trainNum" :active="active" :defaultTime="-1" />
        </van-tab>
      </van-tabs>
    </van-sticky>

    <van-list v-model="loading" v-if="dataShow" :finished="finished" finished-text="- 没有更多了 -" :immediate-check="false" @load="getList">
      <van-cell-group class="data-content" :border="false" v-for="(item, index) in list" :key="index" @click="onHref(item)">
        <van-cell style="padding: 16px 12px" :center="true">
          <template #title>
            <div class="teacher_info">
              <img src="./images/v3.png" class="memberLogo" v-if="item.memberFlag" />
              <img class="logo" v-if="item.avatar" :src="item.avatar" alt="" />
              <img class="logo" v-else src="../../assets/images/icon_student.png" alt="" />
              <p style="color: #1a1a1a; font-size: 0.14rem">{{ item.username }}</p>
            </div>
          </template>
          <p style="font-size: 14px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ item.musicGroupName }}</p>
        </van-cell>
        <van-cell is-link :clickable="false" center style="padding: 12px 12px 16px">
          <template #title>
            <van-grid :border="false" column-num="4" :clickable="true">
              <van-grid-item text="练习时长">
                <template #icon>{{ item.totalPlayTime }}分钟</template>
              </van-grid-item>
              <van-grid-item text="练习次数">
                <template #icon
                  ><span style="color: #01c1b5">{{ item.trainNum }}次</span></template
                >
              </van-grid-item>
              <van-grid-item text="练习天数">
                <template #icon
                  ><span style="color: #ff802c">{{ item.trainDay }}天</span></template
                >
              </van-grid-item>
              <van-grid-item text="评测次数">
                <template #icon
                  ><span style="color: #f79c00">{{ item.recordNum }}次</span></template
                >
              </van-grid-item>
            </van-grid>
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>
    <m-empty v-else msg="暂无练习统计" />
  </div>
</template>
<script>
import MHeader from "@/components/MHeader";
import MEmpty from "@/components/MEmpty";
// import dayjs from "dayjs";
import { browser } from "@/common/common";
import { countStudentTrain } from "./api.js";
import trainModel from "./trainModel.vue";
import { sysTenantConfig } from "../rules/api";
export default {
  components: { MHeader, MEmpty, trainModel },
  data() {
    const activeType = sessionStorage.getItem("trainTab");
    sessionStorage.removeItem("trainTab");
    const trainParams = sessionStorage.getItem("trainParams");
    sessionStorage.removeItem("trainParams");
    let params = null;
    if (trainParams) {
      const tempResult = JSON.parse(trainParams);
      params = {
        ...tempResult,
        page: 1,
        rows: 20,
      };
    }
    return {
      headerStatus: true,
      active: activeType || "all",
      list: [],
      loading: false,
      finished: false,
      params: params
        ? params
        : {
            page: 1,
            rows: 20,
          },
      dataShow: true,
      // 类型为回访学员时
      formatEndTime: null,
      formatStartTime: null,
      trainNum: 0,
      playTime: 0,
    };
  },
  created() {
    this.tenantId = sessionStorage.getItem("tenantId") || null;
  },
  async mounted() {
    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;
    }
    document.title = "练习统计";
    try {
      let res = await sysTenantConfig({ group: "DAYA_BASIC" });
      const { data } = res;
      data.forEach((item) => {
        if (item.paramName == "student_cloud_teacher_train_num") {
          this.trainNum = item.paranValue;
        } else if (item.paramName == "student_cloud_teacher_total_play_time") {
          this.playTime = item.paranValue;
        }
      });
    } catch (e) {}
    // this.getList()
  },
  methods: {
    onLoad(value) {
      this.params = Object.assign(this.params, value);
      this.onResetList();
    },
    tabChange() {
      if (this.$refs.trainModel1) {
        this.$refs.trainModel1.changeDropDownItemStatus();
      }
      if (this.$refs.trainModel2) {
        this.$refs.trainModel2.changeDropDownItemStatus();
      }
      if (this.active == "visited" && this.$refs.trainModel2) {
        this.$refs.trainModel2.onAllFilter();
      } else if (this.active == "all" && this.$refs.trainModel1) {
        this.$refs.trainModel1.onAllFilter();
      }
    },
    search(val) {
      this.params.search = val;
      this.onResetList();
    },
    onResetList() {
      this.list = [];
      this.params.page = 1;
      this.dataShow = true;
      this.loading = true;
      this.finished = false;
      this.getList();
    },
    onHref(item) {
      sessionStorage.setItem("trainTab", this.active);
      sessionStorage.setItem("trainParams", JSON.stringify(this.params));
      this.$router.push({
        path: "/trainDetail",
        query: {
          userId: item.userId,
          username: item.username,
          phone: item.phone,
          musicGroupName: item.musicGroupName,
          avatar: item.avatar,
          visitFlag: item.visitFlag,
        },
      });
    },
    async getList() {
      let params = this.params;
      let visitFlag = this.active != "all" ? 1 : null;
      try {
        let res = await countStudentTrain({ ...params, visitFlag });
        let result = res.data;
        this.loading = false;
        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>
@import url("../../assets/commonLess/variable.less");

.visitList {
  min-height: 100vh;
  // .visitTime {
  //     .van-cell__right-icon{
  //     // line-height: .36rem;
  //     }
  // }
  /deep/.van-dropdown-menu__bar {
    box-shadow: none;
  }
}

/deep/.van-tab {
  font-size: 0.16rem;
}
/deep/.search .van-search {
  margin: 10px 0;
}

.data-content {
  margin: 0.1rem 0.15rem 0;
  border-radius: 0.1rem;
  overflow: hidden;
  .logo {
    width: 0.4rem;
    height: 0.4rem;
    // margin-right: 0.12rem;
    border-radius: 100%;
  }
  &:first-child {
    margin-top: 0;
  }
  .van-row-item {
    display: flex;
    align-items: center;
  }
  /deep/.van-grid-item__content {
    padding: 0.03rem;
  }
  /deep/.van-grid-item__content {
    background-color: transparent;
  }
  /deep/.van-grid-item__icon-wrapper {
    font-size: 0.15rem;
    font-weight: 500;
    color: #000;
  }
  /deep/.van-grid-item__text {
    padding-top: 0.03rem;
    font-size: 0.12rem;
    color: #808080;
  }
  .teacher_info {
    position: relative;
    display: flex;
    align-items: center;
    img {
      margin-right: 0.1rem;
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 50%;
    }
    .memberLogo {
      position: absolute;
      left: 0.3rem;
      top: -0.04rem;
      width: 20px;
      height: 20px;
    }
  }
}
.btnWrap {
  display: flex;
  flex-direction: row;
  .cancelBtn {
    height: 48px;
    line-height: 48px;
    background: #eeeff3;
    color: @mColor;
    text-align: center;
    width: 100%;
  }
  .okBtn {
    width: 100%;
    height: 48px;
    line-height: 48px;
    background: @mColor;
    color: #fff;
    text-align: center;
  }
}
</style>
