<template>
  <div class="home_child_list home_child_list_yx">
    <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="" />
      <img
        class="code"
        :class="item.whiteFlag == 1 && item.isBing == 1 ? 'code_auth' : ''"
        @click.stop="handleCode(index)"
        src="@/assets/code.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
    },
    // 点击浙学码
    handleCode(index) {
      if (this.childList[index].whiteFlag != 1 || this.childList[index].isBing != 1) {
        this.$toast('请先激活认证')
        return
      }

      localStorage.setItem('StudentDetialInfo', JSON.stringify(this.childList[index]))

      this.$router.push({ name: 'ZXCode' })
    },
    // 进入学生详情页
    handleStudentDetail(index) {
      localStorage.setItem('StudentDetialInfo', JSON.stringify(this.childList[index]))
      this.$router.push({ name: 'GrowUpRecord' })
    },
    // 获取孩子列表
    getChildList() {
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true,
      })
      let userInfo = localStorage.getItem('userInfo')
      userInfo = JSON.parse(userInfo)
      this.yxAxios.get(`${this.baseUrl}/prod/user/info/getPortalUserByNum?userNum=${userInfo?.centerNo}`).then((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)
            // console.log('555',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">
p {
  margin: 0;
}
.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;
    }
    .code {
      position: absolute;
      bottom: 50px;
      right: 45px;
      width: 72px;
    }
    .code_auth {
      right: 240px;
    }
    .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);
    }
  }
  .add_btn {
    border-color: #f63837;
    color: #f63837;
  }
}
// 绍兴研学个人中心绿主题
.home_child_list_yx {
  .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, rgb(56, 223, 162) 0%, rgb(132, 236, 205) 100%);
      box-shadow: 0px 4px 8px 0px rgba(37, 255, 128, 0.34);
    }
  }
  .add_btn {
    border-color: rgb(56, 223, 162);
    color: rgb(56, 223, 162);
  }
}
</style>