<template>
	<view class="page">
		<cu-custom :isBack="true" title="请假"></cu-custom>
		<form>
			<view class="cu-form-group">
				<view class="title">请假类型</view>
				<picker @change="changeType" :value="index" :range="types" range-key="name">
					<view class="picker">
						{{index>-1? types[index].name:'请选择请假类型'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">请假理由</view>
				<textarea maxlength="-1"  placeholder="请输入请假理由" v-model="params.reason"></textarea>
			</view>
		</form>
		<view class="solids-bottom bg-white text-center padding text-student margin-top" @tap="apply">
        提交申请
    </view>
	</view>
</template>

<script>
import { _leaveType, _askLeave } from '@/api/course'
import validate from '@/common/utils/ys-validate'
export default {
  data() {
    return {
      key: 1212,
      index: -1,
      types: [],
      params: {
        plan_id: '',
        reason: '',
        type_id: ''
      },
      rules: [
        { name: 'reason', required: true, type: 'required', errmsg: '请输入请假理由' },
        { name: 'type_id', required: true, type: 'required', errmsg: '请选择请假类型' }
      ]
    }
  },
  onLoad(options) {
    const id = decodeURIComponent(options.id)
    if (!id) uni.navigateBack()
    this.params.plan_id = id
    this.getTypes()
  },
  methods: {
    getTypes() {
      _leaveType().then(res => {
        this.types = res.data.leave_type_data
      })
    },
    changeType(e) {
      this.index = e.detail.value
      this.params.type_id = this.types[this.index].id
    },
    apply() {
      const validRes = validate.validate(this.params, this.rules)
      if (!validRes.isOk) {
        uni.showToast({
          icon: 'none',
          title: validRes.errmsg
        })
        return false
      }
      _askLeave(this.params).then(res => {
        uni.showToast({ title: '提交成功', icon: 'success' })
        setTimeout(() => {
          uni.navigateBack()
        }, 800)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page{
	height:100vh;
}
</style>
