<template>
	<view class="page">
		<cu-custom :isBack="true" title="授权接送">
		</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 shadhow">
						  <view class="students-title flex justify-between align-center">
								 <view class="text-lg">监护人列表</view>
								 <view class="text-xs text-grey">
									 <text class="cuIcon-roundaddfill text-cyan margin-left-xl add-icon"
									 @tap="showModal" data-target="ChooseModal"
									 ></text>
								 </view>
							</view>
							<view class="cu-list menu-avatar">
									<view class="cu-item" v-for="parent in parents" :key="parent.id">
										<image mode="scaleToFill" :src="parent.avatar||defaultAvatar" class="avatar md left"></image>
										<view class="content">
											<view>{{parent.username}}</view>
											<view class="text-gray">{{parent.mobile}}</view>
										</view>
									</view>
							</view>
					 </view>
			</view>
		</scroll-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="params.username" placeholder="请输入授权人姓名" class="student-input text-black text-lg">
          </view>
					<view class="margin-top">
            <input type="text"  v-model.trim="params.mobile"
						@input="changePhone"
						 placeholder="请输入授权人手机号" class="student-input text-black text-lg">
          </view>
					<view class="margin-top auth-item">
            <input type="text"  v-model.trim="params.captcha" placeholder="请输入验证码" class="student-input text-black text-lg">
						 <text class="auth-code text-cyan" :class="{'text-gray':disableSendMsgBtn}" :disabled="disableSendMsgBtn"
            @tap="getCode">{{sendMsg}}</text>
          </view>
					<view class="margin-top">
						 <button class="student-input text-student text-center" @tap="save">确认授权</button>
					</view>
        </view>
        <view class="cu-bar modal-footer">
          <view class="action"></view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
import { _getPickup, _getCode, _addPickup } from '@/api/auth'
import validate from '@/common/utils/ys-validate'
export default {
  data() {
    return {
      modalName: null,
      parents: [],
      params: {
        username: '',
        mobile: '',
        captcha: ''
      },
      rules: [
        { name: 'username', required: true, type: 'required', errmsg: '请输入授权人姓名' },
        { name: 'mobile', required: true, type: 'phone', errmsg: '请输入正确手机号' },
        { name: 'captcha', required: true, type: 'number', errmsg: '请输入正确的验证码' }
      ],
      sendTime: 60,
      disableSendMsgBtn: true,
      sendMsg: '获取验证码',
      defaultAvatar: 'http://parent.kehoubaike.com/static/img/7f4e775d2e04234d1e1994b13146f6b.e5c47f3.png'
    }
  },
  onLoad(options) {
    this.get_list()
  },
  methods: {
    showModal(e) {
      this.modalName = e.currentTarget.dataset.target
    },
    hideModal(e) {
      this.modalName = null
    },
    save() {
      const validRes = validate.validate(this.params, this.rules)
      if (!validRes.isOk) {
        uni.showToast({
          icon: 'none',
          title: validRes.errmsg
        })
        return false
      }
      _addPickup(this.params).then(res => {
        this.hideModal()
        this.get_list()
      })
    },
    changePhone(e) {
      if (/^[1]([3-9])[0-9]{9}$/.test(e.detail.value)) {
        this.disableSendMsgBtn = false
      } else {
        this.disableSendMsgBtn = true
      }
    },
    getCode() {
      console.log(111)
      if (!this.disableSendMsgBtn) {
        this.leftTime = this.sendTime
        this.timing(this.leftTime)
        _getCode({ phone: this.params.mobile }).then(res => {
          uni.showToast({
            title: '验证码发送成功! 请注意查收！',
            duration: 3000
          })
        })
      }
    },
    timing () {
      this.disableSendMsgBtn = true
      const temSendMsgText = this.sendMsg
      this.sendMsg = this.leftTime + '秒后重试'
      this.timeInterval = setInterval(() => {
        this.leftTime--
        this.sendMsg = this.leftTime + '秒后重试'
        if (this.leftTime <= 0) {
          this.sendMsg = temSendMsgText
          clearInterval(this.timeInterval)
          if (/^[1]([3-9])[0-9]{9}$/.test(this.form.phone)) {
            this.disableSendMsgBtn = false
          }
        }
      }, 1000)
    },
    get_list() {
      _getPickup().then(res => {
        this.parents = res.data.pickup_data
      })
    }
  }
}
</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: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;
}
.auth-item{
	position:relative;
}
.auth-code{
	position:absolute;
	z-index:99;
	top:10px;
	right:20rpx;
	font-size:14px;
}
</style>
