<template>
	<view>
		<uni-forms ref="baseForm" :model="baseFormData" labelWidth="75px">
			<uni-forms-item label="姓名" name="name" required>
				<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" maxlength="6" trim="both" />
			</uni-forms-item>
			<uni-forms-item label="手机号" name="name" required>
				<button open-type="getPhoneNumber" type="primary" size="mini"
					@getphonenumber="getPhoneNumber">获取手机号</button>
			</uni-forms-item>
			<uni-forms-item label="微信号" name="weixinId" required>
				<uni-easyinput v-model="baseFormData.weixinId" placeholder="微信号(不便接听电话时微信沟通)" maxlength="25"
					trim="both" />
			</uni-forms-item>
			<uni-forms-item label="选择课程" required>
				<uni-data-picker placeholder="请选择课程" popup-title="课程大纲-具体课程" v-model="baseFormData.course" :clearIcon="false"
					:localdata="courseTree" />
			</uni-forms-item>
			<uni-forms-item label="辅导方式" required>
				<uni-data-checkbox v-model="baseFormData.mode" multiple :localdata="modes" />
			</uni-forms-item>
			<uni-forms-item label="学生性别" required>
				<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
			</uni-forms-item>
			<uni-forms-item label="课时费" required>
				<uni-easyinput v-model="baseFormData.fee" type="number" placeholder="请输入课时金额" />
			</uni-forms-item>
			<uni-forms-item label="上课时间" required="">
				<uni-datetime-picker v-model="baseFormData.datetimerange" type="datetimerange" rangeSeparator="至" />
			</uni-forms-item>
			<uni-forms-item label="期望目标" name="target">
				<uni-easyinput type="textarea" v-model="baseFormData.target" maxlength="100" trim="both" />
			</uni-forms-item>
			<uni-forms-item label="老师身份" required>
				<uni-data-checkbox v-model="baseFormData.identify" :localdata="identifies" />
			</uni-forms-item>
			<uni-forms-item label="老师学历" required>
				<uni-data-select v-model="baseFormData.education" :localdata="educations" />
			</uni-forms-item>
			<uni-forms-item label="老师性别" required>
				<uni-data-checkbox v-model="baseFormData.sexTeacher" :localdata="sexsTeacher" />
			</uni-forms-item>
			<uni-forms-item label="老师照片" required>
				<uni-data-checkbox v-model="baseFormData.hasPhoto" :localdata="hasPhotoes" />
			</uni-forms-item>
			<uni-forms-item label="对老师要求" name="demandTeacher">
				<uni-easyinput type="textarea" v-model="baseFormData.demandTeacher" maxlength="100" trim="both" />
			</uni-forms-item>
		</uni-forms>
		<view>
			<button type="primary">提交需求</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				baseFormData: {
					name: '',
					phone: '',
					weixinId: '',
					course: '1-2',
					mode: '',
					sex: '保密',
					fee: '',
					datetimerange: '',
					target: '',
					identify: '不限',
					education: '',
					sexTeacher: '不限',
					hasPhoto: '不限',
					demandTeacher: ''
				},
				// 选择课程
				courseTree: [{
						text: '一年级',
						value: '1-0',
						children: [{
								text: '1.1班',
								value: '1-1'
							},
							{
								text: '1.2班',
								value: '1-2'
							}
						]
					},
					{
						text: '二年级',
						value: '2-0',
						children: [{
								text: '2.1班',
								value: '2-1'
							},
							{
								text: '2.2班',
								value: '2-2'
							}
						]
					}
				],
				// 多选辅导方式数据源
				modes: [{
					text: '老师上门',
					value: '老师上门'
				}, {
					text: '学员上门',
					value: '学员上门'
				}, {
					text: '线上辅导',
					value: '线上辅导'
				}],
				// 单选性别数据源
				sexs: [{
					text: '男',
					value: '男'
				}, {
					text: '女',
					value: '女'
				}, {
					text: '保密',
					value: '保密'
				}],
				// 单选老师身份
				identifies: [{
					text: '不限',
					value: '不限'
				}, {
					text: '专职老师',
					value: '专职老师'
				}, {
					text: '在校大学生',
					value: '在校大学生'
				}],
				educations: [{
					value: '专科在读',
					text: '专科在读'
				}, {
					value: '专科毕业',
					text: '专科毕业'
				}, {
					value: '本科在读',
					text: '本科在读'
				}, {
					value: '本科毕业',
					text: '本科毕业'
				}, {
					value: '硕士在读',
					text: '硕士在读'
				}, {
					value: '硕士毕业',
					text: '硕士毕业'
				}, {
					value: '博士在读',
					text: '博士在读'
				}, {
					value: '博士毕业',
					text: '博士毕业'
				}],
				// 单选老师性别
				sexsTeacher: [{
					text: '不限',
					value: '不限'
				}, {
					text: '男',
					value: '男'
				}, {
					text: '女',
					value: '女'
				}],
				// 单选老师有无照片
				hasPhotoes: [{
					text: '不限',
					value: '不限'
				}, {
					text: '有照片',
					value: '有照片'
				}]
			};
		},
		created() {
			this.getPriceAndTree()
		},
		methods: {
			// 手机号
			async getPhoneNumber(e) {
				// console.log(e.detail.code)
				const query = {
					code: e.detail.code
				}
				const { data: result } = await uni.$http.get('/ucenter/mini-program-openid-uid/wxGetPhone', query)
				if (result.code === 20000) return uni.$showMsg('获取手机成功！')
			},
			// 树形结构的课程和价格表
			async getPriceAndTree() {
				const {
					data: result
				} = await uni.$http.get('/education/course-price/treeAndPrice')
				this.courseTree = result.data.treeCourse
			}
			
		}
	}
</script>

<style lang="scss" scoped>
</style>
