<template>
  <view>
    <cu-custom :isBack="false"></cu-custom>
    <view class="main">
			<view class="main-top">
				<view class="title flex justify-between">
					<view>{{user.nickName||'未更新用户信息'}}</view>
					<text class="cuIcon-settings lg text-gray" @tap="goto('setting')"></text>
				</view>
			<view class="user">
			 <view class="user-info flex">
				 		<image mode="scaleToFill" :src="user.avatarUrl||defaultAvatar" class="avatar"></image>
						<view class="study-info">
							  <view class="user-name" @tap="switchStudent" v-if="isLogin&&user.nickName">
									{{ kid_info.name + '-' + kid_info.school_name }}
									<text class="iconfont margin-left-xs" style="font-size:18px;">&#xe600;</text>
								</view>
								<view  class="user-name"  @tap="login" v-else>
									 	 切换学生
										 <text class="iconfont margin-left-xs" style="font-size:18px;">&#xe716;</text>
								</view>
								 <view class="user-learn">已学习{{info.parent_data.learn_day}}天</view>
						</view>
			 </view>
			 <view class="user-relative flex justify-between" v-if="isLogin">
				  <view v-for="(relate,index) in courseRelates" :key="index" class="course-item" :style="'background:'+relate.background"
					@tap="goto(relate.page)">
						 <text class="iconfont back-img" style="font-size:32px;">{{relate.icon}}</text>
						 <view class="text-df">{{relate.name}}</view>
					</view>
			 </view>
			 <view class="user-relative flex justify-between" v-else>
				  <view class="course-item relate-item" v-for="(course,index) in courses" :key="index" :style="'background:'+course.background">
						<text class="iconfont back-img" style="font-size:40px;">{{course.icon}}</text>
						<view class="text-lg">{{course.title}}</view>
						<view class="text-xxl margin-top-xs">{{course.name}}</view>
					</view>
			 </view>
			</view>
			<view class="order">
				 <view class="order-title solid-bottom">我的订单</view>
				 <view class="order-info flex justify-between">
					  <view v-for="(order,index) in menuList" :key="index" @tap="toOrder(index)">
							  <view class="order-image">
									<text class="iconfont text-student" style="font-size:32px;">{{order.icon}}</text>
								</view>
							  {{order.title}}
							</view>
				 </view>
			</view>
			</view>
			<view class="margin cu-list box-shadow menu margin-top-lg bg-white">
				<view class="cu-item arrow" @tap="goto('classCart')">
					<text class="cuIcon-cart lg text-gray" style="font-size:18px;"></text>
        	<view class="content margin-left-sm">
          	<text class="text-black">购物车</text>
        	</view>
          <view class="action"></view>
        </view>
				<view class="cu-item arrow" @tap="goto('message')">
        	<text class="cuIcon-message lg text-gray" style="font-size:18px;"></text>
        	<view class="content margin-left-sm">
          	<text class="text-black">消息中心</text>
        	</view>
          <view class="action"></view>
        </view>
			  <view class="cu-item arrow" @tap="goto('onlineService')">
					<text class="iconfont text-gray" style="font-size:18px;">&#xe726;</text>
        	<view class="content margin-left-sm">
          	<text class="text-black">在线客服</text>
        	</view>
        </view>
			</view>
    </view>
    <mp-tabbar :outerSelected="2" />
   <view class="cu-modal drawer-modal justify-start" :class="modalName=='showStudent'?'show':''" @tap="hideModal">
      <scroll-view :scroll-y="true" class="cu-dialog basis-lg" @tap.stop=""
        :style="[{top:topHeader+'px',height:'calc(100vh - 48px - ' + topHeader + 'px)'}]">
        <view class="student-list padding-left">
          <view class="student margin-top-sm" v-for="(student,index) in students" :key="index" @tap="chooseKid(student.id)">
						 <view class="flex align-center">
								<image mode="scaleToFill" :src="defaultAvatar" class="avatar md"></image>
								<view class="margin-left-sm">{{student.name}}</view>
								<text class="cuIcon-check text-student margin-left" style="font-size:22px;" v-if="kid===student.id"></text>
						 </view>
						 <view class="flex">
							 <view class="cu-tag line-green margin-top-xs">
								{{student.school_name ? student.school_name : ''}}-{{student.grade_name}}-{{student.class_name}}
								</view>
						 </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { _getStudents, _getUserInfo } from '@/api/auth'
export default {
  data () {
    return {
      topHeader: this.globalCustomBarHeight,
      info: {},
      modalName: null,
      students: [],
      kid_info: {}, // 当前学生
      menuList: [
        {
          title: '全部订单',
          img: '/static/imgs/mine/qbdd.png',
          icon: '\ue897'
        },
        {
          title: '待付款',
          img: '/static/imgs/mine/dfk.png',
          icon: '\ue896'
        },
        {
          title: '已付款',
          img: '/static/imgs/mine/yfk.png',
          icon: '\ue656'
        },
        {
          title: '退课售后',
          img: '/static/imgs/mine/tksh.png',
          icon: '\ue61e'
        }
      ],
      courses: [
        {
          title: '启蒙教育',
          name: '我的机构',
          img: '/static/imgs/mine/wdjg.png',
          background: '#f8be32',
          icon: '\ue661'
        },
        {
          title: '启蒙教育',
          name: '我的老师',
          img: '/static/imgs/mine/wdls.png',
          background: '#67d2a9',
          icon: '\ue603'
        }
      ],
      courseRelates: [
        {
          name: '我的学生',
          img: '/static/imgs/mine/wdjhr.png',
          background: '#5FCFE0',
          page: 'myStudents',
          icon: '\ue604'
        },
        {
          name: '我的监护人',
          img: '/static/imgs/mine/wdjhr.png',
          background: '#f8be32',
          page: 'myParents',
          icon: '\ue60a'
        },
        {
          name: '我的老师',
          img: '/static/imgs/mine/wdjg.png',
          background: '#67d2a9',
          page: 'myTeachers',
          icon: '\ue603'
        },
        {
          name: '我的机构',
          img: '/static/imgs/mine/wdls.png',
          background: '#FF676E',
          page: 'myInstitution',
          icon: '\ue661'
        }
      ],
      loginIcon: '/static/imgs/mine/login.png',
      switchIcon: '/static/imgs/mine/login1.png',
      defaultAvatar: 'http://parent.kehoubaike.com/static/img/7f4e775d2e04234d1e1994b13146f6b.e5c47f3.png'
    }
  },
  computed: {
    ...mapGetters({
      user: 'user',
      isLogin: 'token',
      kid: 'kid'
    })
  },
  onShow() {
    this.get_info()
  },
  methods: {
    login() {
      this.globalNavigateTo('login')
    },
    get_info() {
      _getUserInfo().then(res => {
        this.info = res.data
        this.get_students()
      })
    },
    get_students() {
      _getStudents().then(res => {
        if (res.data.length < 1) {
          this.globalNavigateTo('myStudents')
          return false
        }
        this.students = res.data.student_data
        let kid = this.kid
        if (!kid) {
          kid = this.students[0].id
          this.$store.dispatch('setKid', this.students[0].id)
        }
        this.setkidInfo(kid)
      })
    },
    hideModal (e) {
      this.modalName = null
    },
    setkidInfo(kid) { // 设置学生信息
      this.kid_info = this.students.find(item => item.id === kid)
    },
    switchStudent() {
      this.modalName = 'showStudent'
    },
    goto(page) {
      if (!this.isLogin) {
        this.globalNavigateTo('login')
      } else {
        this.globalNavigateTo(page)
      }
    },
    toOrder(index) {
      this.globalNavigateTo('order', { type: index })
    },
    chooseKid(id) {
      uni.showModal({
        title: '',
        content: '确定选择该学生?',
        success: res => {
          if (res.confirm) {
            this.$store.dispatch('setKid', id).then(res => {
              this.setkidInfo(res)
              this.hideModal()
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import '~@/common/css/mixin.scss';
.title{
	@include title(10px,22px);
}
.main{
	padding-top:10px;
}
.main-top{
	padding:0 30rpx;
}
.user{

}
.user-info{
	margin-bottom:10px;
}
.study-info{
	margin-left:40rpx;
	padding-top:6px;
}
.user-name{
	@include title(10px,16px);
}
.user-learn{
	margin-top:20px;
}
.user-relative{
	width:100%;
}
.course-item{
	position:relative;
	border-radius:10px;
	padding:16rpx;
	width:24%;
	min-height:52px;
	color:#fff;
}
.course-item.relate-item{
	width:48%;
}
.back-img{
	position:absolute;
	bottom:8px;
	right:6px;
	opacity: .4;
}
.order{
	margin-top:10px;
}
.order-info{
	padding:0 30rpx;
}
.order-image{
	margin:10rpx auto;
	width:30px;
	height:30px;
	image{
		width:100%;
		height:100%;
	}
}
.order-title{
	padding-bottom:10px;
	@include title(10px,16px);
}
.switch-icon{
	margin-left:10rpx;
	width:1em;
	height:1em;
}
</style>
