<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 @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/Home/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
      })
      this.mgop({
        api: 'mgop.sz.hswsy.getPortalUserByNum', // 必须
        host: 'https://mapi.zjzwfw.gov.cn/',
        dataType: 'JSON',
        type: 'GET',
        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
        headers: {
          //   'isTestUrl': '1'
        },
        data: {
          "userNum": sessionStorage.getItem('centerNo')
        },
        onSuccess: res => {
          console.log('getUserInfo', res)
          this.$toast.clear()
          if (res.data.code == 200) {
          this.childList = res.data.data.userInfo.subUsers
          }
        },
        onFail: err => {
          console.log('err', err)
        }
      });
    },
    addStudent(){
      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>