<template>
	<view class="page">
		<cu-custom :isBack="false" :isHome="true">
			 <view slot="content">我的学生</view>
		</cu-custom>
		<scroll-view>
			<view class="cu-card case no-card">
				<view class="cu-item shadow">
					<view class="image">
      			<image src="/static/imgs/mine/img.png" mode="widthFix"></image>
						 <view class="image-tag">应趣教育 课后百科</view>
					</view>
				</view>
			</view>
			  <view class="cu-card">
					 <view class="cu-item shadow">
						  <view class="students-title flex justify-between align-center">
								 <view class="text-lg">学生列表</view>
								 <view class="text-xs text-grey">
									 <text class="text-red">点击选择，左滑删除，右侧添加</text>
									 <text class="cuIcon-roundaddfill text-cyan margin-left-xl add-icon"
									 @tap="showModal" data-target="ChooseModal"
									 ></text>
								 </view>
							</view>
							<view class="padding-lr text-right" v-if="!phone">
								  <text class="text-red text-xs">右侧点击绑定手机号，直接获取绑定学生列表</text>
									<text class="cuIcon-mobile text-cyan add-icon margin-left-xl" @tap="globalNavigateTo('bindPhone')"></text>
							</view>
							<view class="cu-list menu-avatar">
									<view class="cu-item" :class="moveModel=='move-box-'+ index?'move-cur':''"
									v-for="(item,index) in result.student_data" :key="index"
									@touchstart="ListTouchStart" @touchmove="ListTouchMove"
									@touchend="ListTouchEnd" :data-target="'move-box-' + index"
									@tap="chooseKid(item.id)">
									 <image mode="scaleToFill" :src="defaultAvatar" class="avatar md left"></image>
										<view class="content">
											<view>{{item.name}}</view>
											<view class="text-gray">{{item.school_name}}-{{item.grade_name}}-{{item.class_name}}</view>
										</view>
										<view class="action">
											<text class="cuIcon-check text-student font-check" v-if="item.id===kid"></text>
										</view>
										<view class="move student-move">
											<view class="bg-red" @tap.stop="unbind(item.id)">删除</view>
										</view>
									</view>
							</view>
					 </view>
				</view>
		</scroll-view>
		<!-- 选择学生列表 -->
		<view class="cu-modal" :class="modalName=='showStudents'?'show':''" @tap="hideModal">
			<view class="cu-dialog bg-student" @tap.stop=''>
				<view class="padding text-left modal-body radius-student">
					<view class="cu-list menu-avatar">
							<view class="cu-item"  v-for="(item,index) in chooseList" :key="index" @tap="save(item.id)">
								<view class="cu-inner" :class="{'checked':item.id===selectKid}">
									<image mode="scaleToFill" :src="defaultAvatar" class="avatar md left"></image>
									<view class="content">
											<view>{{item.name}}</view>
											<view class="text-gray">{{item.school_name}}-{{item.grade_name}}-{{item.class_name}}</view>
									</view>
								</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--添加学生-->
    <view class="cu-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
      <view class="cu-dialog bg-student" @tap.stop=''>
        <view class="cu-bar justify-around">
          <view class="content modal-title">添加学生</view>
        </view>
        <view class="padding-xl text-left modal-body">
				  <view>
            <input type="text"  v-model.trim="student.student_name" placeholder="请输入学生名字" class="student-input text-black text-lg">
          </view>
					<view class="margin-top" v-if="student.student_name">
            <input type="text"  v-model.trim="student.school_name" placeholder="请输入学校名称" class="student-input text-black text-lg">
          </view>
					<view class="margin-top">
						 <button class="student-input text-student text-left" @tap="get_students">获取学生</button>
					</view>
        </view>
        <view class="cu-bar modal-footer">
          <view class="action"></view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
import { _getStudents, _bindStudent, _unbindStudent } from '@/api/auth'
import { _shopList } from '@/api/course'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      showAdd: false,
      modalName: null,
      selectKid: 0,
      student: {
        student_name: '',
        school_name: ''
      },
      result: null,
      chooseList: [],
      moveModel: null,
      listTouchStart: 0,
      listTouchDirection: null,
      defaultAvatar: 'http://parent.kehoubaike.com/static/img/7f4e775d2e04234d1e1994b13146f6b.e5c47f3.png'
    }
  },
  computed: {
    ...mapGetters([
      'kid', 'phone'
    ])
  },
  onLoad() {
  },
  onShow() {
    this.get_list()
    const kid = this.kid
    if (kid) {
      this.selectKid = kid
    } else {
      uni.showModal({
        title: '请选择学生',
        content: '请先选择一个学生',
        showCancel: false,
        success: res => {

        }
      })
    }
  },
  methods: {
    showModal(e) {
      this.modalName = e.currentTarget.dataset.target
    },
    hideModal(e) {
      this.modalName = null
    },
    get_list() {
      _getStudents().then(res => {
        this.result = res.data
      })
    },
    get_students() {
      if (!this.student.student_name) return uni.showToast({ title: '请输入学生姓名', icon: 'none' })
      if (!this.student.school_name) return uni.showToast({ title: '请输入学校名称', icon: 'none' })
      _getStudents(this.student).then(res => {
        const students = res.data.student_data
        if (students.length > 0) {
          this.modalName = 'showStudents'
          this.chooseList = students
        } else {
          uni.showToast({ title: '暂无学生信息', icon: 'none' })
        }
      })
    },
    save(id) {
      this.selectKid = id
      uni.showModal({
        title: '确定绑定？',
        success: res => {
          if (res.confirm) {
            _bindStudent({ student: id }).then(res => {
              uni.showToast({ title: '绑定成功！' })
              this.$store.dispatch('setKid', id)
              this.setCarts()
              this.get_list()
              this.modalName = ''
            })
          }
        }
      })
    },
    unbind(id) {
      const _self = this
      uni.showModal({
        title: '确定解绑？',
        message: '',
        success: res => {
          if (res.confirm) {
            _unbindStudent({ student: id }).then(res => {
              if (res.code === 1) {
                uni.showToast({ title: '解绑成功！' })
                if (_self.kid === id) { _self.$store.dispatch('setKid', 0) }// 解绑选中学生
                this.get_list()
              }
            })
          }
        }
      })
    },
    chooseKid(id) {
      uni.showModal({
        title: '确定选择学生',
        message: '确定选择该学生?',
        success: res => {
          if (res.confirm) {
            this.selectKid = id
            this.$store.dispatch('setKid', id)
            this.setCarts()
            this.globalReLaunch('index')
          }
        }
      })
    },
    setCarts() { // 刷新购物车
      _shopList().then(res => {
        const carts = res.data.map(item => item.class_attend_id)
        this.$store.dispatch('setCarts', carts)
      })
    },
    ListTouchStart(e) {
      this.listTouchStart = e.touches[0].pageX
    },
    ListTouchMove(e) {
      this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
    },
    ListTouchEnd(e) {
      if (this.listTouchDirection === 'left') {
        this.moveModel = e.currentTarget.dataset.target
      } else {
        this.moveModel = null
      }
      this.listTouchDirection = null
    }
  }
}
</script>

<style lang="scss" scoped>
.page{
	height:100vh;
}
.image{
	padding-bottom:20px;
}
.image-tag{
	position:absolute;
	top:10px;
	left:10px;
	font-size:24px;
	font-weight:bold;
	color: #6d4f26;
}
.students-title{
	padding:0 30rpx;
}
.add-icon{
	display:inline-block;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	font-size:22px;
}
.student-input{
	height:40px;
	line-height:40px;
	border-radius:20px;
	background-color:#fff;
}
.radius-student{
	border-radius:20rpx;
}
.cu-inner{
	margin:10rpx;
	display:flex;
	align-items:center;
	width:100%;
}
.cu-inner.checked{
    background: #5fd0e4;
    color: #fff;
    border-radius: 20rpx;
}
.cu-dialog{
	width:90%;
}
.modal-title{
    font-weight: bold;
    color: #516029;
    font-size: 20px;
}
.font-check{
	font-size:22px;
}
.cu-list>.cu-item .move.student-move{
	width:130rpx;
	text-align:center;
}
.cu-list>.cu-item.move-cur{
	transform: translateX(-130rpx);
}
</style>
