<template>
  <div class="home_child_list" :class="parent=='HomeKQ'?'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 @click="handleYanxue(index)">出示研学码</button> -->
      </div>
      <img v-if="item.whiteFlag" 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"></AddChildPopupGroup>
    </van-popup>
  </div>
</template>
<script>
import AddChildPopupGroup from '@/views/PublicHome/component/AddChildPopupGroup'

export default {
  props: {
    parent: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      showAddChildPopupGroup: false,//新增孩子弹出框
      childList: [],//孩子列表
    }
  },
  mounted () {
    this.getChildList()
  },
  methods: {
    // 研学码
    // handleYanxue (index) {
    //   sessionStorage.setItem('bindYanxueCodeChildInfo',JSON.stringify(this.childList[index]))
    //   this.$router.push({ name: 'YanxueCode' })
    // },
    // 进入学生详情页
    handleStudentDetail (index) {
      sessionStorage.setItem('StudentDetialInfo', JSON.stringify(this.childList[index]))
      this.$router.push({ name: 'StudentDetail' })
    },
    // 获取孩子列表
    getChildList () {
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true
      })
      let userInfo = sessionStorage.getItem('userInfo');
      userInfo = JSON.parse(userInfo)
      this.yxAxios.get(`${this.proxyUrl}/prod/user/info/getPortalUserByNum?userNum=${userInfo?.centerNo}`).then((res) => {
        this.$toast.clear()
        if (res.data.code == 200) {
          this.childList = res.data.data.userInfo.subUsers
        }
      })
    },
    addStudent(){
      let isLogin = this.checkLogin()
      if (!isLogin) return;
      this.showAddChildPopupGroup=true
    },
    complete () {
      this.showAddChildPopupGroup = false;
      this.getChildList()
    },
    // 判断是否已登录
    checkLogin () {
      if (process.env.NODE_ENV != "production") return true;
      const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      if (!userInfo?.phone) {
        sessionStorage.setItem('prePage', 'Home' + sessionStorage.getItem('publicName'));
        sessionStorage.setItem('prePageQuery', JSON.stringify({ showTab: this.$route.query.showTab }));
        this.$router.push({ name: 'LoginPublic', query: { publicName: sessionStorage.getItem('publicName') } })
        return false;
      }
      return true;
    },
  },
  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>