<template>
	<view>
		<view class="nav-bar"></view>
		<view class="form-area">
			<uni-forms ref="infoForm" :rules="rules" :modelValue="infoFormData" label-position="top">
				<uni-forms-item style="display: none;" name="meetintTime">
					<uni-easyinput style="display: none;" v-model="infoFormData.meetintTime"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="unitName" label="单位名称" label-width="150">
					<!-- <uni-easyinput placeholder="请输入" v-model="infoFormData.unitName"></uni-easyinput> -->
					<uni-data-select
					  v-model="infoFormData.unitName"
					  :localdata="unitRange"
					></uni-data-select>
				</uni-forms-item>
				<uni-forms-item required name="projectName" label="项目名称" label-width="150">
					<uni-easyinput placeholder="请输入" v-model="infoFormData.projectName"></uni-easyinput>
				</uni-forms-item>
				<!-- <uni-forms-item name="meetingLocat" label="会议地点" label-width="150">
					<uni-easyinput :disabled="true" :placeholder="currentLocation" v-model="infoFormData.meetingLocat"></uni-easyinput>
				</uni-forms-item> -->
				<uni-forms-item required name="meetingTheme" label="例会主题" label-width="150">
					<uni-easyinput placeholder="请输入" v-model="infoFormData.meetingTheme"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="emcee" label="会议主持人" label-width="150">
					<uni-easyinput placeholder="请输入" v-model="infoFormData.emcee"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="noteTaker" label="会议记录人" label-width="150">
					<uni-easyinput placeholder="请输入" v-model="infoFormData.noteTaker"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="startTime" label="例会开始时间" label-width="150">
					<uni-datetime-picker type="datetime" :start="timeStart" v-model="infoFormData.startTime"/>
				</uni-forms-item>
				<uni-forms-item required name="endTime" label="例会结束时间" label-width="150">
					<uni-datetime-picker type="datetime" :start="timeStart" v-model="infoFormData.endTime"/>
				</uni-forms-item>
				<uni-forms-item required name="meetingContent" label="例会内容" label-width="150">
					<uni-easyinput type="textarea" maxlength="1000" v-model="infoFormData.meetingContent" placeholder="请输入"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="meetingRecord" label="会议记录" label-width="150">
					<uni-easyinput type="textarea" maxlength="1000" v-model="infoFormData.meetingRecord" placeholder="请输入"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="userArr" label="参会人员(注:部门无下属人员时无需选择)" label-width="150">
					<button @click="showTree1">{{ attendBtn }}</button>
					<peng-tree
						v-model="infoFormData.userArr"
						ref="pengTree1"
						:range="attendRange"
						:multiple="true"
						@confirm="tree1Confirm"
						:cascade="true"
						:selectParent="false"
					></peng-tree>
				</uni-forms-item>
				<uni-forms-item label="参会人数" label-width="150">
					<uni-easyinput :placeholder="countBtn" :disabled="true"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="absentUserArr" label="缺席人员(注:部门无下属人员时无需选择)" label-width="150">
					<button @click="showTree2">{{ absentBtn }}</button>
					<peng-tree
						v-model="infoFormData.absentUserArr"
						ref="pengTree2"
						:range="attendRange"
						:multiple="true"
						@confirm="tree2Confirm"
						:cascade="true"
						:selectParent="false"
					></peng-tree>
				</uni-forms-item>
				<uni-forms-item required name="pictureAddressArr" label="现场照片" label-width="150">
					<uni-file-picker v-show="photoStatus == 0" v-model="infoFormData.pictureAddressArr" @select="uploadPhoto" :sourceType="sourceType" limit="1" title="最多选择1张图片"></uni-file-picker>
					<image 
						v-show="infoFormData.pictureAddressArr.length != 0" 
						v-for="(pic, index) in infoFormData.pictureAddressArr"
						:key="index"
						:src="infoFormData.pictureAddressArr[index]" mode=""
						style="width: 200rpx; height: 200rpx; margin-left: 15rpx;"
					>
					</image>
				</uni-forms-item>
				<uni-forms-item required name="meetingType" label="例会类型" label-width="150">
					<uni-data-checkbox v-model="infoFormData.meetingType" :localdata="typeRange"></uni-data-checkbox>
				</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 { pathToBase64, base64ToPath } from '../../js_sdk/mmmm-image-tools/index.js'
	import { publicPath } from '../../public.js'
	export default {
		data() {
			return {
				showLoading: false,
				currentLocation: '',
				sourceType: ['camera'],
				timeStart: new Date().getTime(),
				photoStatus: 0,
				/* penColor: 'black',
				penSize: 8,
				openSmooth: true, */
				infoFormData: {
					unitName: '',
					projectName: '',
					// meetingLocat: '',
					meetingTheme: '',
					emcee: '',
					noteTaker: '',
					picArr: [],
					pictureAddressArr: [],
					startTime: '',
					endTime: '',
					meetingContent: '',
					meetingRecord: '',
					userArr: [],
					absentUserArr: [],
					meetingType: '',
					meetintTime: '',
					// signUrl: '',
					truePicArr: []
				},
				rules: {
					unitName: {
						rules: [
							{
								required: true,
								errorMessage: '请输入单位名称！'
							}
						]
					},
					projectName: {
						rules: [
							{
								required: true,
								errorMessage: '请输入项目名称！'
							}
						]
					},
					meetingTheme: {
						rules: [
							{
								required: true,
								errorMessage: '请输入例会主题！'
							}
						]
					},
					emcee: {
						rules: [
							{
								required: true,
								errorMessage: '请输入会议主持人！'
							}
						]
					},
					noteTaker: {
						rules: [
							{
								required: true,
								errorMessage: '请输入会议记录人！'
							}
						]
					},
					pictureAddressArr: {
						rules: [
							{
								required: true,
								errorMessage: '请选择照片！'
							}
						]
					},
					startTime: {
						rules: [
							{
								required: true,
								errorMessage: '请选择例会开始时间！'
							}
						]
					},
					endTime: {
						rules: [
							{
								required: true,
								errorMessage: '请选择例会结束时间！'
							}
						]
					},
					meetingContent: {
						rules: [
							{
								required: true,
								errorMessage: '请输入例会内容！'
							}
						]
					},
					meetingRecord: {
						rules: [
							{
								required: true,
								errorMessage: '请输入会议记录！'
							}
						]
					},
					userArr: {
						rules: [
							{
								required: true,
								errorMessage: '请选择参会人员！'
							}
						]
					},
					meetingType: {
						rules: [
							{
								required: true,
								errorMessage: '请选择例会类型！'
							}
						]
					}
					/* signUrl: {
						rules: [
							{
								required: true,
								errorMessage: '请输入电子签名！'
							}
						]
					} */
				},
				attendRange: [],
				unitRange: [],
				attendBtn: '打开参会人员名单',
				absentBtn: '打开缺席人员名单',
				countBtn: '根据参会人员自动计算',
				typeRange: [
					{ value: 1, text: '月例会' },
					{ value: 2, text: '周例会' },
					{ value: 3, text: '安全例会' }
				],
				subStatus: 0,
				picList: []
			}
		},
		methods: {
			showTree1 () {
				this.$refs.pengTree1._show();
			},
			showTree2 () {
				this.$refs.pengTree2._show();
			},
			tree1Confirm (e) {
				console.log(e);
				let that = this
				that.infoFormData.userArr = []
				if (e.length != 0) {
					that.attendBtn = ''
					for (let i = 0; i < e.length; i++) {
						that.infoFormData.userArr.push(e[i].id)
						that.attendBtn += e[i].name + '  '
					}
				} else {
					that.attendBtn = '打开参会人员名单'
				}
				that.countBtn = String(that.infoFormData.userArr.length) 
			},
			tree2Confirm (e) {
				console.log(e);
				let that = this
				that.infoFormData.absentUserArr = []
				if (e.length != 0) {
					that.absentBtn = ''
					for (let i = 0; i < e.length; i++) {
						that.infoFormData.absentUserArr.push(e[i].id)
						that.absentBtn += e[i].name + '  '
					}
				} else {
					that.absentBtn = '打开缺席人员名单'
				}
			},
			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;
				});
			},
			choosePic () {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success: (res) => {
						console.log(res);
					}
				})
			},
			// blobToUrl (blob) {
			// 	return URL.createObjectURL(blob)
			// },
			subForm () {
				let that = this
				console.log(that.infoFormData);
				that.infoFormData.picArr = []
				this.$refs.infoForm.validate().then(formData => {
					formData.createUserId = uni.getStorageSync('id')
					console.log(formData);
					if (new Date(formData.startTime).getTime() > new Date(formData.endTime).getTime()) {
						uni.showToast({
							icon: 'none',
							title: '例会开始时间不得大于结束时间！'
						})
					} else {
						that.showLoading = true
						that.photoStatus = 1
						// that.infoFormData.pictureAddressArr[0] = that.infoFormData.pictureAddressArr[0].split(',')[1]
						// 上传图片
						uni.request({
							url: publicPath + '/backstage/app/uploadPhoto',
							method: 'POST',
							header: {
								'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
							},
							data: {
								base: that.infoFormData.pictureAddressArr[0]
							},
							success: (picRes) => {
								console.log(picRes);
								if (picRes.statusCode == 200) {
									formData.pictureAddressArr = []
									formData.pictureAddressArr.push(picRes.data[0])
									console.log(formData);
									uni.request({
										url: publicPath + '/backstage/app/addMeeting',
										method: 'POST',
										header: {
											'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
										},
										data: formData,
										success: (res) => {
											console.log(res);
											if (res.data.code == 200) {
												that.showLoading = false
												uni.showToast({
													icon: 'none',
													title: '新增例会成功！',
													success: () => {
														uni.reLaunch({
															url: '/pages/index/index'
														})
													}
												})
											} else {
												uni.showToast({
													icon: 'none',
													title: '新增例会失败!',
													success: () => {
														that.showLoading = false
														that.photoStatus = 0
													}
												})
											}
										}
									})
								}
							}
						})
					}
				})
			},
			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.tempFiles[0].file);
				this.blobToBase(e.tempFiles[0].file).then(res => {
					that.infoFormData.pictureAddressArr.push(res)
				}) 
			},
			transTime (value) {
				if (typeof (value) == 'undefined') {
				    return ''
				} else {
				    let date = new Date(parseInt(value))
				    let y = date.getFullYear()
				    let MM = date.getMonth() + 1
				    MM = MM < 10 ? ('0' + MM) : MM
				    let d = date.getDate()
				    d = d < 10 ? ('0' + d) : d
				    let h = date.getHours()
				    h = h < 10 ? ('0' + h) : h
				    let m = date.getMinutes()
				    m = m < 10 ? ('0' + m) : m
				    let s = date.getSeconds()
				    s = s < 10 ? ('0' + s) : s
				    return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
				}
			}
		},
		onShow() {
			this.infoFormData.meetintTime = this.transTime(new Date().getTime())
			let that = this
			that.attendRange = []
			// 获取参会人员树状数据
			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.attendRange = that.veri(list)
					}
					console.log(that.attendRange);
				}
			})
			// 获取单位列表
			uni.request({
				url: publicPath + '/backstage/app/getAllDept',
				method: 'POST',
				header: {
					'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
				},
				data: {},
				success: (res) => {
					console.log(res);
					if (res.statusCode == 200) {
						that.unitRange = res.data.obj.map(item => {
							return {
								value: item['id'],
								text: item['name']
							}
						})
					}
				}
			})
		},
		onLoad(params) {
			
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar{
		width: 100%;
		height: var(--status-bar-height);
		padding-top: var(--status-bar-height);
	}
	.form-area{
		width: 90%;
		margin: 20rpx auto;
	}
</style>
