<template>
  <div class="home_child_list home_child_list_kq">
    <div class="stu_info" v-for="(item,index) in childList" :key="index" @click="handleStudentDetail(index)">
      <div class="title">
        <p>学生信息</p>
        <button v-if="item.whiteFlag!=1||item.isBing!=1" @click.stop="Certification(index)">激活认证</button>
      </div>
      <img v-if="item.whiteFlag==1&&item.isBing==1" class="img_auth" src="@/assets/home/auth.png" alt="">
      <div class="item">
        <van-icon name="manager" /><span>{{item.travelerName}}</span>
      </div>
      <div class="item">
        <van-icon name="medal" /><span>{{item.enrollYear}}</span>
      </div>
      <div class="item">
        <van-icon name="wap-home" /><span>{{item.schoolName}}</span>
      </div>
    </div>
    <div class="add_btn" @click="addStudent">
      <van-icon name="add" />
      添加学生信息
    </div>
    <van-popup style="background: transparent;" get-container="body" v-model="showAddChildPopupGroup">
      <AddChildPopupGroup @complete="complete" :step="step" :travelerNum="travelerNum"></AddChildPopupGroup>
    </van-popup>
  </div>
</template>
<script>
import AddChildPopupGroup from '@/views/Home/component/AddChildPopupGroup'

export default {
  props: {
    parent: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      showAddChildPopupGroup: false,//新增孩子弹出框
      childList: [],//孩子列表
      step: 1,
      travelerNum: ''
    }
  },
  mounted () {
    this.getChildList()
  },
  methods: {
    // 激活认证
    Certification (index) {
      this.step = 2
      this.travelerNum = this.childList[index].travelerNum
      this.showAddChildPopupGroup = true
    },
    // 进入学生详情页
    handleStudentDetail (index) {
      localStorage.setItem('StudentDetialInfo', JSON.stringify(this.childList[index]))
      this.$router.push({ name: 'StudentDetail' })
    },
    // 获取孩子列表
    getChildList () {
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true
      })
      this.yxAxios.get(`${this.proxyUrl}/user/info/getPortalUserByNum?userNum=${localStorage.getItem('centerNo')}`).then((res) => {
        console.log('getUserInfo', res)
          this.$toast.clear()
          if (res.data.code == 200) {
            const userInfo = res.data.data.userInfo
            this.childList = userInfo.subUsers
            if (userInfo.schoolNames || userInfo.schoolNames == [] || userInfo.schoolNames == 'null') {
            localStorage.setItem('schoolNames', JSON.stringify(userInfo.schoolNames))
              this.$store.commit('changeSchool', userInfo.schoolNames)
              if (localStorage.getItem('schoolNamesChoose')) {
              localStorage.setItem('schoolNamesChoose', JSON.stringify(userInfo.schoolNames[0]))
              }
            } else {
            localStorage.setItem('schoolNames', [])
              this.$store.commit('changeSchool', [])
            }
          }
      })
    },
    addStudent () {
      this.step = 1
      this.showAddChildPopupGroup = true
    },
    complete () {
      this.showAddChildPopupGroup = false;
      this.getChildList()
    },
  },
  components: {
    AddChildPopupGroup
  }

}
</script>
<style lang="scss">
.home_child_list {
  width: 100%;
  padding: 16px 24px;
  box-sizing: border-box;
  .stu_info {
    position: relative;
    width: 100%;
    height: 252px;
    box-sizing: border-box;
    padding: 24px 28px;
    margin-bottom: 16px;
    border-radius: 12px;
    &:nth-of-type(2n) {
      background: linear-gradient(47deg, #ff7371 0%, #fdd17c 100%);
      box-shadow: 0px 4px 8px 0px rgba(254, 151, 117, 0.11);
    }
    &:nth-of-type(2n-1) {
      background: linear-gradient(41deg, #316ff0 0%, #2afffb 100%);
      box-shadow: 0px 4px 8px 0px rgba(37, 171, 255, 0.34);
    }
    .title {
      // margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 42px;
      p {
        font-size: 32px;
        font-weight: bold;
        color: #fff;
      }
      button {
        color: #ffffff;
        font-size: 20px;
        height: 40px;
        border-radius: 30px;
        border: 0;
        background: linear-gradient(137deg, #83b2ff 0%, #3c80ef 100%);
        box-shadow: 0px 4px 8px 0px rgba(106, 154, 232, 0.5);
      }
    }
    .img_auth {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 196px;
    }
    .item {
      display: inline-block;
      margin-bottom: 24px;
      color: #fff;
      font-size: 28px;
      span {
        margin-left: 16px;
      }
      &:nth-of-type(2) {
        margin-right: 60px;
      }
      &:last-of-type {
        display: block;
      }
    }
  }
  .add_btn {
    width: 100%;
    box-sizing: border-box;
    line-height: 96px;
    border-radius: 16px;
    border: 4px dashed #3074ff;
    text-align: center;
    font-size: 30px;
    color: #3074ff;
  }
}
// 柯桥个人中心红色主题
.home_child_list_kq {
  .stu_info {
    &:nth-of-type(2n) {
      background: linear-gradient(47deg, #ff7371 0%, #fdd17c 100%);
      box-shadow: 0px 4px 8px 0px rgba(254, 151, 117, 0.11);
    }
    &:nth-of-type(2n-1) {
      background: linear-gradient(41deg, #f03131 0%, #ff90a8 100%);
      box-shadow: 0px 4px 8px 0px rgba(37, 171, 255, 0.34);
    }
    .title {
      button {
        background: linear-gradient(137deg, #ff83a2 0%, #ef3c63 100%);
        box-shadow: 0px 4px 8px 0px rgba(232, 106, 165, 0.5);
      }
    }
  }
  .add_btn {
    border-color: #f63837;
    color: #f63837;
  }
}
</style>
<style lang="scss">
.elder {
  .home_child_list .stu_info {
    height: auto;
    .title p {
      font-size: 40px;
    }
    .item {
      font-size: 38px;
    }
  }
}
</style>