<template>
	<view>
		<view class="nav-bar"></view>
		<view class="form-cont">
			<uni-forms ref="pointForm" :rules="rules" :modelValue="pointFormData" label-position="top">
				<uni-forms-item required name="userId" label="授权人" label-width="150">
					<!-- <button @click="showTree1">{{ fqrBtn }}</button>
					<peng-tree
						v-model="pointFormData.fqr"
						ref="pengTree1"
						:range="peopleRange"
						:multiple="false"
						@confirm="tree1Confirm"
						:cascade="true"
						:selectParent="false"
					></peng-tree> -->
					<uni-easyinput :disabled="true" :placeholder="yourName"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="getId" label="受益人(注:部门无下属人员时无需选择)" label-width="150">
					<button @click="showTree2">{{ syrBtn }}</button>
					<peng-tree
						v-model="pointFormData.getId"
						ref="pengTree2"
						:range="peopleRange"
						:multiple="false"
						@confirm="tree2Confirm"
						:cascade="true"
						:selectParent="false"
					></peng-tree>
				</uni-forms-item>
				<uni-forms-item required name="rewartId" label="被奖/惩人(注:部门无下属人员时无需选择)" label-width="150">
					<button @click="showTree3">{{ bjrBtn }}</button>
					<peng-tree
						v-model="pointFormData.rewartId"
						ref="pengTree3"
						:range="peopleRange"
						:multiple="false"
						@confirm="tree3Confirm"
						:cascade="true"
						:selectParent="false"
					></peng-tree>
				</uni-forms-item>
				<uni-forms-item required name="typeId" label="奖惩类型" label-width="150">
					<uni-data-select
					  v-model="pointFormData.typeId"
					  :localdata="awardPunishRange"
					  @change="awardChange"
					></uni-data-select>
				</uni-forms-item>
				<uni-forms-item required name="pictureAddressArr" label="现场照片" label-width="150">
					<uni-file-picker 
						v-show="photoStatus == 0" 
						v-model="pointFormData.pictureAddressArr" 
						@select="uploadPhoto" 
						:del-icon="false"
						limit="3" 
						title="最多选择3张图片"
					></uni-file-picker>
					<image 
						v-show="pointFormData.pictureAddressArr.length != 0" 
						v-for="(pic, index) in pointFormData.pictureAddressArr"
						:key="index"
						:src="pointFormData.pictureAddressArr[index]" 
						mode=""
						style="width: 200rpx; height: 200rpx; margin-left: 15rpx;"
					>
					</image>
				</uni-forms-item>
				<button @click="subForm" style="background-color: #043e71; color: #fff;">提交表单</button>
			</uni-forms>
		</view>
		<u-loading-page :loading="showLoading" color="#000" loading-text="提交表单中,请稍后..."></u-loading-page>
	</view>
</template>

<script>
	import { publicPath } from '../../public.js'
	export default {
		data() {
			return {
				yourName: uni.getStorageSync('name'),
				pointFormData: {
					userId: uni.getStorageSync('id'),
					getId: '',
					rewartId: '',
					typeId: '',
					pictureAddressArr: []
				},
				realPicArr: [],
				rules: {
					userId: {
						rules: [
							{
								required: true,
								errorMessage: '请选择发起人！'
							}
						]
					},
					getId: {
						rules: [
							{
								required: true,
								errorMessage: '请选择受益人！'
							}
						]
					},
					rewartId: {
						rules: [
							{
								required: true,
								errorMessage: '请选择被奖/惩人！'
							}
						]
					},
					typeId: {
						rules: [
							{
								required: true,
								errorMessage: '请选择奖惩类型！'
							}
						]
					},
					pictureAddressArr: {
						rules: [
							{
								required: true,
								errorMessage: '请上传照片！'
							}
						]
					}
				},
				fqrBtn: '打开发起人名单',
				syrBtn: '打开受益人名单',
				bjrBtn: '打开被奖/惩人名单',
				peopleRange: [],
				awardPunishRange: [],
				photoStatus: 0,
				showLoading: false
			}
		},
		methods: {
			subForm () {
				let that = this
				that.$refs.pointForm.validate().then(formData => {
					console.log(formData, that.realPicArr);
					// that.showLoading = true
					uni.request({
						url: publicPath + '/backstage/appshoping/rewardSave',
						method: 'POST',
						header: {
							'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
						},
						data: {
							userId: Number(formData.userId),
							getId: Number(formData.getId),
							rewartId: Number(formData.rewartId),
							pictureAddressArr: that.realPicArr,
							typeId: formData.typeId
						},
						success: (res) => {
							console.log(res);
							if (res.data.code == 200) {
								uni.showToast({
									icon: 'none',
									title: '表单提交成功！',
									success: () => {
										uni.reLaunch({
											url: '/pages/index/index'
										})
									}
								})
							}
						}
					})
				})
			},
			showTree1 () {
				this.$refs.pengTree1._show();
			},
			showTree2 () {
				this.$refs.pengTree2._show();
			},
			showTree3 () {
				this.$refs.pengTree3._show();
			},
			tree1Confirm (e) {
				console.log(e);
				let that = this
				that.pointFormData.fqr = []
				if (e.length != 0) {
					that.fqrBtn = ''
					// for (let i = 0; i < e.length; i++) {
					// 	that.pointFormData.fqr.push(e[i].id)
					// 	that.fqrBtn += e[i].name + '  '
					// }
					that.pointFormData.fqr = e[0].id
					that.fqrBtn = e[0].name
				} else {
					that.fqrBtn = '打开发起人名单'
				}
			},
			tree2Confirm (e) {
				console.log(e);
				let that = this
				that.pointFormData.getId = []
				if (e.length != 0) {
					that.syrBtn = ''
					// for (let i = 0; i < e.length; i++) {
					// 	that.pointFormData.syr.push(e[i].id)
					// 	that.syrBtn += e[i].name + '  '
					// }
					that.pointFormData.getId = e[0].id
					that.syrBtn = e[0].name
				} else {
					that.syrBtn = '打开受益人名单'
				}
			},
			tree3Confirm (e) {
				console.log(e);
				let that = this
				that.pointFormData.rewartId = []
				if (e.length != 0) {
					that.bjrBtn = ''
					/* for (let i = 0; i < e.length; i++) {
						that.pointFormData.bjr.push(e[i].id)
						that.bjrBtn += e[i].name + '  '
					} */
					that.pointFormData.rewartId = e[0].id
					that.bjrBtn = e[0].name
				} else {
					that.bjrBtn = '打开被奖/惩人名单'
				}
			},
			veri (data) {
				let that = this
				if (!data || data.length <= 0) {
					return null;
				}
				return data.map(x => {
					let model
					if (x.id.includes('u')) {
						model = {
							name: x.name,
							id: x.userId,
						};
					} else {
						model = {
							name: x.name,
							id: x.id
						};
					}
				    
				    const children = that.veri(x.child);
						
				    if (children) { 
					    model.children = children;
				    }
					
					return model;
				});
			},
			blobToBase (blob) {
				return new Promise((resolve, reject) => {
					const fr = new FileReader()
					fr.onload = (e) => {
						resolve(e.target.result)
					}
					fr.readAsDataURL(blob)
					fr.onerror = () => {
						reject(new Error('error'))
					}
				})
			},
			uploadPhoto (e) {
				let that = this
				// that.infoFormData.pictureAddressArr = []
				console.log(e);
				this.blobToBase(e.tempFiles[0].file).then(res => {
					console.log(res);
					that.pointFormData.pictureAddressArr.push(res)
				})
				setTimeout(() => {
					uni.request({
						url: publicPath + '/backstage/app/uploadPhoto',
						method: 'POST',
						header: {
							'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
						},
						data: {
							base: that.pointFormData.pictureAddressArr[that.pointFormData.pictureAddressArr.length - 1]
						},
						success: (res) => {
							console.log(res);
							that.realPicArr.push(res.data[0])
						}
					})
				}, 100)
				/* uni.request({
					url: publicPath + '/backstage/app/uploadPhoto',
					method: 'POST'
				}) */
			},
			awardChange (e) {
				console.log(e);
			}
		},
		onShow() {
			let that = this
			that.peopleRange = []
			that.awardPunishRange = []
			// 获取参会人员树状数据
			uni.request({
				url: publicPath + '/backstage/app/getMeetingPersonTree',
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
				},
				data: {},
				success: (res) => {
					console.log(res);
					if (res.data.code == 200) {
						let list = res.data.data
						that.peopleRange = that.veri(list)
						console.log(that.peopleRange);
					}
				}
			})
			// 获取积分设置规则
			uni.request({
				url: publicPath + '/backstage/appshoping/pointRule',
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
				},
				data: {},
				success: (res) => {
					console.log(res);
					for (let i = 0; i < res.data.length; i++) {
						if (res.data[i].ifGrade == '1') {
							res.data[i].grade = '+' + res.data[i].grade
						}
					}
					that.awardPunishRange = res.data.map((item) => {
						return {
							value: item['id'],
							text: `(${item['grade']}分)` + ' ' + item['operName']
						}
					})
					console.log(that.awardPunishRange);
				}
			})
		}
	}
</script>

<style lang="scss">
	.nav-bar{
		width: 100%;
		height: var(--status-bar-height);
		padding-top: var(--status-bar-height);
	}
	.form-cont{
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		.uni-select__selector-item[data-v-6b64008e]{
			text-align: left;
		}
		.uni-select__input-box[data-v-6b64008e]{
			overflow: hidden;
		}
	}
</style>
