<template>
  <div>
    <van-sticky>
      <m-header :backUrl="backUrl" :isFixed="false"> </m-header>
      <search @onSearch="onSearch" placeholder="请输入姓名或手机号" />
    </van-sticky>
    <van-list
      v-model="loading"
      v-if="dataShow"
      key="data"
      :finished="finished"
      :immediate-check="false"
      finished-text="- 没有更多内容 -"
      @load="getStudent"
    >
      <van-cell
        v-for="(item, index) in dataList"
        :key="index"
        title-class="title-class"
        class="input-cell"
        :center="true"
        is-link
        @click="gotoStudentMisic(item)"
      >
        <template slot="icon">
          <img class="logo" v-if="item.avatar" :src="item.avatar" alt="" />
          <img
            class="logo"
            v-else
            src="@/assets/images/icon_student.png"
            alt=""
          />
        </template>
        <template slot="title">
          <div class="label">
            {{ item.username }}
          </div>
        </template>
        <template slot="default">
          是否有乐保: {{ item.hasInstrument ? "是" : "否" }}
        </template>
      </van-cell>
    </van-list>
    <m-empty class="empty" v-else key="data" />
  </div>
</template>
<script>
import MHeader from "@/components/header";
import search from "@/components/Search";
import MEmpty from "@/components/MEmpty";
import { getTeamStudentList } from "./api";
import itemVue from "../coupon/item.vue";
export default {
  components: {
    MHeader,
    search,
    MEmpty,
  },
  data() {
    return {
      backUrl: {
        status: true,
        path: "/serviceList",
      },
      dataShow: true,
      loading: false,
      finished: false,
      params: {
        search: null,
        musicGroupId: this.$route.query.musicGroupId,
        page: 1,
        rows: 20,
      },
      dataList: [],
    };
  },
  mounted() {
    this.getStudent();
  },
  methods: {
    onSearch(val) {
      this.params.search = val;
      this.params.page = 1;
      this.dataList = [];
      this.dataShow = true;
      this.loading = true;
      this.finished = false;
      this.getStudent();
    },
    async getStudent() {
      let params = this.params;
      params.search = params.search ? params.search : null;
      let studentList = null;
      // if (this.type == 'sale') {
      // 	studentList = await queryEduStudents(params)
      // } else {
      studentList = await getTeamStudentList(params);
      // }
      let result = studentList.data;
      this.loading = false;
      if (result.code == 200) {
        // 重点这句，判断是不是重复请求了
        if (this.dataList.length > 0 && result.data.pageNo == 1) {
          return;
        }
        params.page = result.data.pageNo;
        this.dataList = this.dataList.concat(result.data.rows);
        if (params.page >= result.data.totalPage) {
          this.finished = true;
        }
        this.params.page++;
      } else {
        this.finished = true;
      }
      // 判断是否有数据
      if (this.dataList.length <= 0) {
        this.dataShow = false;
      }
    },
    gotoStudentMisic(row) {
      this.$router.push({
        path: "/studentLeBao",
        query: {
          studentId: row.userId,
          avatar: row.avatar,
          username: row.username,
          phone: row.phone,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");

/deep/.van-cell__title {
  font-size: 0.14rem;
  color: @mFontColor;
  flex: 1 auto;
}

.logo {
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.12rem;
  border-radius: 100%;
}
.icon_phone {
  margin-left: 0.1rem;
  width: 0.14rem;
  height: 0.17rem;
  display: inline-block;
  background: url("../../assets/images/icon_phone.png") no-repeat center center;
  background-size: contain;
}

.title-class {
  display: flex;
  align-items: center;
  .label {
    display: flex;
    flex-direction: column;
    font-size: 0.16rem;
    color: #1a1a1a;
  }
}
</style>
