<template>
  <div class="studentDetail">
    <van-cell-group inset style="margin: 0.1rem 0.12rem" :border="false">
      <van-cell center :border="false">
        <template #icon>
          <van-image class="studentLogo" :src="avatar || iconStudent" />
        </template>
        <template #title>
          <div style="display: flex; align-items: center; font-size: 0.16rem">
            {{ username }}
            <img v-if="memberList.length > 0" style="width: 44px; height: 17px; margin-left: 4px" src="./images/icon-vip-active.png" alt="" />
            <img v-if="memberList.length <= 0" style="width: 44px; height: 17px; margin-left: 4px" src="./images/icon-vip.png" alt="" /></div>
        </template>
        <template #label>
          {{ subjectName }}
        </template>
      </van-cell>
      <!-- <van-cell style="padding-top: 3px; padding-bottom: 15px">
        <div class="studentMember">
          <img src="./images/icon_tips.png" />
          <span>该学员会员有效期剩余： {{ membershipDay }} 天</span>
        </div>
      </van-cell> -->
    </van-cell-group>

    <div class="title"><i></i>会员信息</div>
    <div class="memberSection">
      <div class="memberItem" v-for="(item, index) in memberList" :key="index">
        <i></i>「{{item.memberRankName}}」剩余有效期<span>{{ item.remainingDays }}</span>天
      </div>
    </div>

    <div class="title"><i></i>基础信息</div>
    <van-cell-group inset style="margin: 0.1rem 0.12rem" :border="false">
      <van-cell title="学员编号" :value="id"></van-cell>
      <van-cell title="分部" :value="organName"></van-cell>
      <van-cell title="手机号" :value="phone" center>
        <template #extra>
          <span @click="copyText(phone)" class="iconCopy">复制</span>
        </template>
      </van-cell>
      <van-cell title="年级" :value="currentGrade"></van-cell>
      <van-cell title="班级" :value="currentClass"></van-cell>
    </van-cell-group>

    <div class="title" v-if="musicGroupList.length > 0"><i></i>乐团信息</div>
    <van-cell-group inset style="margin: 0.1rem 0.12rem">
      <van-cell v-for="(item, index) in musicGroupList" :key="index" :label="item.musicGroupId" center>
        <template #title>
          <span style="font-weight: bold;font-size: .16rem;">{{ item.musicGroupName }}</span>
          <span :class="item.userMusicGroupStatus">{{ item.userMusicGroupStatus | musicGroupStudentType }}</span>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { findStudentMusicGroups, api_studentQueryUserInfo } from "./api";
export default {
  data() {
    const query = this.$route.query;
    return {
      iconStudent: require("@/assets/images/icon_student.png"),
      id: query.id,
      avatar: query.avatar,
      username: query.username,
      subjectName: query.subjectName,
      phone: query.phone,
      organName: query.organName,
      currentGrade: query.currentGrade,
      currentClass: query.currentClass,
      memberRankSettingId: query.memberRankSettingId,
      membershipDay: query.membershipDay,
      musicGroupList: [],
      memberList: [],
    };
  },
  async mounted() {
    try {
      const {data} = await api_studentQueryUserInfo({ userId: this.id })
      this.memberList = data.vipInfo || [];

      const res = await findStudentMusicGroups({ userId: this.id });
      this.musicGroupList = res.data || [];
    } catch {
      //
    }
  },
  methods: {
    copyText(text) {
      // 数字没有 .length 不能执行selectText 需要转化成字符串
      const textString = text.toString();
      let input = document.querySelector("#copy-input");
      if (!input) {
        input = document.createElement("input");
        input.id = "copy-input";
        input.readOnly = true; // 防止ios聚焦触发键盘事件
        input.style.position = "fixed";
        input.style.left = "-1000px";
        input.style.zIndex = "-1000";
        // 为了处理，页面滑动到底部的问题
        document.body.appendChild(input);
        // document.querySelector('#input-copy-container')?.appendChild(input)
      }

      input.value = textString;
      // ios必须先选中文字且不支持 input.select();
      selectText(input, 0, textString.length);
      // console.log(document.execCommand("copy"), "execCommand");
      if (document.execCommand("copy")) {
        document.execCommand("copy");
        // showToast("复制成功");
        this.$toast("复制成功");
      }
      input.blur();

      // input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
      // 选择文本。createTextRange(setSelectionRange)是input方法
      function selectText(textbox, startIndex, stopIndex) {
        if (textbox.createTextRange) {
          //ie
          const range = textbox.createTextRange();
          range.collapse(true);
          range.moveStart("character", startIndex); //起始光标
          range.moveEnd("character", stopIndex - startIndex); //结束光标
          range.select(); //不兼容苹果
        } else {
          //firefox/chrome
          textbox.setSelectionRange(startIndex, stopIndex);
          textbox.focus();
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.studentDetail {
  min-height: 100vh;
  overflow: hidden;
}
.studentMember {
  padding: 6px 8px;
  background: #fcedd3;
  border-radius: 0.14rem;
  display: flex;
  align-items: center;
  line-height: 0.18rem;
  img {
    width: 18px;
    height: 18px;
    margin-right: 5px;
  }
}
.studentLogo {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  margin-right: 10px;
  overflow: hidden;
}

.title {
  font-size: 0.16rem;
  font-weight: 500;
  color: #333333;
  line-height: 0.22rem;
  display: flex;
  align-items: center;
  margin: 0 0.12rem 0.1rem;
  i {
    display: inline-block;
    width: 4px;
    height: 14px;
    background: linear-gradient(180deg, #02e2db 0%, #01c1b5 100%);
    border-radius: 2px;
    margin-right: 0.06rem;
  }
}

.NORMAL,
.QUIT,
.APPLY {
  background: #efefef;
  border-radius: 0.06rem;
  font-size: 0.12rem;
  margin-left: .08rem;
  color: #999999;
  line-height: 0.18rem;
  padding: 0.02rem 0.08rem;
  vertical-align: text-bottom;
}

.NORMAL {
  color: #01c1b5;
  background: #e5f8f7;
}
.APPLY {
  color: #fa6400;
  background: #fee1cd;
}

.iconCopy {
  font-size: 0.14rem;
  color: #01c1b5;
  line-height: 0.2rem;
  padding-left: 0.16rem;
  // width: 0.18rem;
  // height: 0.18rem;
  // color: #333;
  // margin-left: 0.08rem;
}
.van-cell {
  font-size: .14rem;
  padding: .16rem .14rem;
}
.van-cell__label {
  font-size: .14rem;
}

.memberSection {
  margin: 0.1rem 0.12rem;
  background-color: #fff;
  border-radius: 8px;
  padding: .16rem .14rem;
}
.memberItem {
  font-size: .14rem;
  color: #333333;
  line-height: .2rem;
  padding-bottom: .16rem;
  &:last-child {
    padding-bottom: 0;
  }
  i {
    width: 4px;
    height: 4px;
    display: inline-block;
    background: #02CDBC;
    border-radius: 50%;
    vertical-align: middle;
  }
  span {
    color: #F44541;
    font-weight: bold;
    padding: 0 4px;
  }
}
</style>
