<template>
	<view class="app">
		<view class="body">

			<u-form :model="formxcjyListadd" ref="uForm" :label-width='200' :rules="rules">
				<view class="" v-if="type==1">
					<u-form-item label="有无文件" prop="isFile">
						<u-radio-group v-model="formxcjyListadd.isFile">
							<u-radio shape="circle" name="有" @change="FileChange">有</u-radio>
							<u-radio shape="circle" name="无" @change="FilefalseChange">无</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="劳动者上岗前培训" labelWidth="250" prop="gqpx" v-if="showisFile">
						<lsj-upload ref="lsjUpload" childId="upload1" :option="option" :size="size" :formats="formats"
							:debug="debug" :instantly="instantly" @uploadEnd="onuploadEndtrain"
							@progress="onprogretrain" @change="changetrain">
							<u-button type="primary" size="medium" class="up">文件上传</u-button>
							<u-icon name="checkbox-mark" v-if="formxcjyListadd.gqpx" class="icon"></u-icon>
						</lsj-upload>
					</u-form-item>
					<view class="" @tap="showdays()">
						<u-form-item label="报告时间" labelWidth="140" prop="gqpxTime">
							<view class="button" v-if="button">请选择报告时间</view>
							<u-calendar v-model="showday" :mode="mode" @change="changegqpxTime">
							</u-calendar>
							{{formxcjyListadd.gqpxTime | formatDate('-')}}
						</u-form-item>
					</view>
				</view>
				<view class="" v-if="type==2">
					<u-form-item label="在岗期间定期培训" labelWidth="250" prop="dqpx">
						<lsj-upload ref="lsjUpload" childId="upload1" :option="option" :size="size" :formats="formats"
							:debug="debug" :instantly="instantly" @uploadEnd="onuploadEnd" @progress="onprogre"
							@change="change">
							<u-button type="primary" size="medium" class="up">文件上传</u-button>
							<u-icon name="checkbox-mark" v-if="formxcjyListadd.dqpx" class="icon"></u-icon>
						</lsj-upload>



					</u-form-item>
					<view class="" @tap="showdays()">
						<u-form-item label="报告时间" labelWidth="140" prop="dqpxTime">
							<view class="button" v-if="button">请选择报告时间</view>
							<u-calendar v-model="showday" :mode="mode" @change="dqpxTimechange">
							</u-calendar>
							{{formxcjyListadd.dqpxTime | formatDate('-')}}
						</u-form-item>
					</view>
					<u-form-item label="下次培训时间" prop="reportPeriod">
						<u-radio-group v-model="formxcjyListadd.reportPeriod">
							<u-radio shape="circle" name="一年" @change="oneChange">一年</u-radio>
							<view class="time" v-if="formxcjyListadd.dqpxNextTime">
								{{ formxcjyListadd.dqpxNextTime }}
							</view>
						</u-radio-group>
					</u-form-item>
				</view>
				<view class="" v-if="type==3">
					<u-form-item label="用人单位主要负责人、职业卫生管理人员培训" labelWidth="250" prop="gxrpx">
						<lsj-upload ref="lsjUpload" childId="upload1" :option="option" :size="size" :formats="formats"
							:debug="debug" :instantly="instantly" @uploadEnd="onuploadEndReport"
							@progress="onprogreReport" @change="changeReport">
							<u-button type="primary" size="medium" class="up">文件上传</u-button>
							<u-icon name="checkbox-mark" v-if="formxcjyListadd.gxrpx" class="icon"></u-icon>
						</lsj-upload>
					</u-form-item>
					<view class="" @tap="showdays()">
						<u-form-item label="报告时间" labelWidth="140" prop="glrpxTime">
							<view class="button" v-if="button">请选择报告时间</view>
							<u-calendar v-model="showday" :mode="mode" @change="glrpxTimechange">

							</u-calendar>
							{{formxcjyListadd.glrpxTime | formatDate('-')}}
						</u-form-item>
					</view>
					<u-form-item label="下次培训时间" prop="reportPeriod1">
						<u-radio-group v-model="formxcjyListadd.reportPeriodgl">
							<u-radio shape="circle" name="一年" @change="oneChange">一年</u-radio>
							<view class="time" v-if="formxcjyListadd.glrpxNextTime">
								{{ formxcjyListadd.glrpxNextTime }}
							</view>
						</u-radio-group>
					</u-form-item>
				</view>
			</u-form>
			<view class="but">
				<view class="sub">
					<u-button type="primary" text="确定" @tap="submit()">提交</u-button>
				</view>
				<view class="res">
					<u-button type="primary" text="确定" @tap="reset()">重置</u-button>

				</view>
			</view>
			<u-toast ref="uToast" />


		</view>
	</view>
</template>

<script>
	import {
		insertQyxcjyda
	} from "@/api/cultivate/cultivate.js";
	import baseUrl from '@/api/baseurl.js'

	import moment from 'moment'
	export default {
		data() {
			return {
				formxcjyListadd: {
					id: '',
					enterpriseid: '',
					enterprisename: '',
					gqpx: '',
					dqpx: '',
					gxrpx: '',
					gqpxTime: '',
					dqpxTime: '',
					glrpxTime: '',
					dqpxNextTime: '',
					glrpxNextTime: '',
					reportPeriod: '一年',
					reportPeriodgl: '一年',
					isFile: '有'
				},
				type: '',
				showday: false, //报告时间
				showitem: false,
				showisFile: true,
				mode: 'date',
				value: '',
				token: '',
				tadytime: '',
				jiansheadd: [],
				testname: [],
				button: true,
				rules: {
					gqpx: [{
						required: true,
						message: "请上传文件",
						trigger: "blur"
					}, ],
					gqpxTime: [{
						required: true,
						message: "请选择报告时间",
						trigger: "blur"
					}, ],


					dqpx: [{
						required: true,
						message: "请上传文件",
						trigger: "blur"
					}, ],

					dqpxTime: [{
						required: true,
						message: "请选择报告时间",
						trigger: "blur"
					}, ],


					gxrpx: [{
						required: true,
						message: "请上传文件",
						trigger: "blur"
					}, ],
					glrpxTime: [{
						required: true,
						message: "请选择报告时间",
						trigger: "blur"
					}, ],
				},

				/////////////////////////////////////////////////////////////
				// 上传接口参数
				option: {
					// 上传服务器地址，需要替换为你的接口地址
					url: baseUrl + `/dzzyb/a/zyb/ar/uploadFile`, // 该地址非真实路径，需替换为你项目自己的接口地址
					// 上传附件的key
					name: 'file',
					// 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
					header: {
						// 示例参数可删除
						token: '',
					},
					// 根据你接口需求自定义body参数
					formData: {
						// 'orderId': 1000
					}
				},
				// 选择文件后是否立即自动上传，true=选择后立即上传
				instantly: true,
				// 必传宽高且宽高应与slot宽高保持一致
				// width: '300rpx',
				// height: '120rpx',
				// 限制允许上传的格式，空串=不限制，默认为空
				formats: '',
				// 文件上传大小限制
				size: 30,
				// 文件数量限制
				count: 1,
				// 文件回显列表
				files: new Map(),
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				wxFiles: [],
				// 是否打印日志
				debug: true,
				// 演示用
				tabIndex: 0,
				list: [],



			}
		},
		created() {
			this.token = uni.getStorageSync("token")

		},
		onLoad(options) {

			console.log(options.type)
			this.type = options.type
			// if (options.exampleObject ) {
			//   this.exampleObject = JSON.parse(decodeURIComponent(options.exampleObject));
			// }
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '/') {
				if (value) {
					value = value
					let data = new Date(value);
					let year = data.getFullYear();
					let month = data.getMonth() + 1;
					let day = data.getDate();
					// let h = data.getHours();
					// let mm = data.getMinutes();
					// let s = data.getSeconds();
					month = month >= 10 ? month : "0" + month;
					day = day >= 10 ? day : "0" + day;
					// h = h >= 10 ? h : "0" + h;
					// mm = mm >= 10 ? mm : "0" + mm;
					// s = s >= 10 ? s : "0" + s;
					return `${year}${spe}${month}${spe}${day}`;
				}
			}
		},
		//如果是封装的组件需要在mounted调用，不然校验有时会不生效
		//不是的话在onReady调用也可
		// mounted() {
		// 	this.$refs.uForm.setRules(this.rules)
		// },
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {

			/**
			 * 某文件上传结束回调(成功失败都回调)
			 * @param {Object} item 当前上传完成的文件
			 */

			// 劳动者上岗前培训
			onuploadEndtrain(item) {
				// 更新当前窗口状态变化的文件
				this.files.set(item.name, item);
				if (item['responseText']) {
					// console.log('演示服务器返回的字符串JSON转Object对象');
					this.files.get(item.name).responseText = JSON.parse(item.responseText);
					this.formxcjyListadd.gqpx = this.files.get(item.name).responseText.data.src
					this.$refs.uToast.show({
						title: '上传成功',
						type: 'success',
						duration: 1500
					})
					uni.hideLoading();

				}
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
				// 强制更新视图
				this.$forceUpdate();

			},
			/**
			 * 上传进度回调
			 * 如果网页上md文档没有渲染出事件名称onprogre，请复制代码的小伙伴自行添加上哈，没有哪个事件是只(item)的
			 * @param {Object} item 当前正在上传的文件
			 */
			onprogretrain(item) {
				// 更新当前状态变化的文件
				this.files.set(item.name, item);
				// console.log('打印对象', JSON.parse(JSON.stringify(this.files.get(item.name))));
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
				// 强制更新视图
				this.$forceUpdate();
			},
			/**
			 * 文件选择回调
			 * @param {Object} files 已选择的所有文件Map集合
			 */
			changetrain(files) {
				// console.log('当前选择的文件列表：', JSON.stringify([...files.values()]));
				// 更新选择的文件 
				this.files = files;
				// 强制更新视图
				this.$forceUpdate();
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif

			},


			/**
			 * 某文件上传结束回调(成功失败都回调)
			 * @param {Object} item 当前上传完成的文件
			 */

			// 在岗期间定期培训
			onuploadEnd(item) {
				// 更新当前窗口状态变化的文件
				this.files.set(item.name, item);
				if (item['responseText']) {
					// console.log('演示服务器返回的字符串JSON转Object对象');
					this.files.get(item.name).responseText = JSON.parse(item.responseText);
					this.formxcjyListadd.dqpx = this.files.get(item.name).responseText.data.src
					this.$refs.uToast.show({
						title: '上传成功',
						type: 'success',
						duration: 1500
					})
				}
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
				// 强制更新视图
				this.$forceUpdate();

			},
			/**
			 * 上传进度回调
			 * 如果网页上md文档没有渲染出事件名称onprogre，请复制代码的小伙伴自行添加上哈，没有哪个事件是只(item)的
			 * @param {Object} item 当前正在上传的文件
			 */
			onprogre(item) {
				// uni.showLoading({
				// 	title: '文件上传中'
				// });
				// 更新当前状态变化的文件
				this.files.set(item.name, item);
				// console.log('打印对象', JSON.parse(JSON.stringify(this.files.get(item.name))));
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
				// 强制更新视图
				this.$forceUpdate();
			},
			/**
			 * 文件选择回调
			 * @param {Object} files 已选择的所有文件Map集合
			 */
			change(files) {
				// console.log('当前选择的文件列表：', JSON.stringify([...files.values()]));
				// 更新选择的文件 
				this.files = files;
				// 强制更新视图
				this.$forceUpdate();
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif

			},
			// 用人单位主要负责人、职业卫生管理人员培训
			onuploadEndReport(item) {
				// 更新当前窗口状态变化的文件
				this.files.set(item.name, item);
				if (item['responseText']) {
					// console.log('演示服务器返回的字符串JSON转Object对象');
					this.files.get(item.name).responseText = JSON.parse(item.responseText);
					this.formxcjyListadd.gxrpx = this.files.get(item.name).responseText.data.src
					this.$refs.uToast.show({
						title: '上传成功',
						type: 'success',
						duration: 1500
					})
					uni.hideLoading();

				}
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
				// 强制更新视图
				this.$forceUpdate();

			},
			onprogreReport(item) {
				// uni.showLoading({
				// 	title: '文件上传中'
				// });
				// 更新当前状态变化的文件
				this.files.set(item.name, item);
				// console.log('打印对象', JSON.parse(JSON.stringify(this.files.get(item.name))));
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
				// 强制更新视图
				this.$forceUpdate();

			},
			changeReport(files) {
				// console.log('当前选择的文件列表：', JSON.stringify([...files.values()]));
				// 更新选择的文件 
				this.files = files;
				// 强制更新视图
				this.$forceUpdate();
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif

			},
			// 有无文件
			FilefalseChange() {
				this.showisFile = false;
			},
			FileChange() {
				this.showisFile = true;
			},




			// 报告时间
			showdays() {
				this.showday = true;
			},
			// 劳动者上岗前培训报告时间
			changegqpxTime(e) {
				// console.log(e)
				this.formxcjyListadd.gqpxTime = e.result
				this.button = false
				let newdate = moment(this.formxcjyListadd.gqpxTime).subtract(-1, 'year').format('YYYY-MM-DD') // 一年
				// this.formxcjyListadd.glrpxNextTime = newdate
			},
			// 在岗期间定期培训告时间
			dqpxTimechange(e) {
				this.formxcjyListadd.dqpxTime = e.result
				this.button = false
				// 获取当前时间
				let newdate = moment(this.formxcjyListadd.dqpxTime).subtract(-1, 'year').format('YYYY-MM-DD') // 一年
				this.formxcjyListadd.dqpxNextTime = newdate

			},
			// 用人单位主要负责人、职业卫生管理人员培训报告时间
			glrpxTimechange(e) {
				this.formxcjyListadd.glrpxTime = e.result
				this.button = false
				let newdate = moment(this.formxcjyListadd.glrpxTime).subtract(-1, 'year').format('YYYY-MM-DD') // 半年
				this.formxcjyListadd.glrpxNextTime = newdate

			},
			halfChange(e) {
				console.log(e)
				this.formxcjyListadd.reportPeriod = e
				if (this.formxcjyListadd.bgtime) {
					let newdate = moment(this.formxcjyListadd.bgtime).subtract(-0.5, 'year').format('YYYY-MM-DD')
					this.formxcjyListadd.nextjctime = newdate
				}
			},
			// 一年
			oneChange(e) {
				this.formxcjyListadd.reportPeriod = e
				if (this.formxcjyListadd.bgtime) {
					let newdate = moment(this.formxcjyListadd.bgtime).subtract(-1, 'year').format('YYYY-MM-DD')
					this.formxcjyListadd.nextjctime = newdate
				}

			},
			// 两年
			twoChange(e) {
				this.formxcjyListadd.reportPeriod = e
				if (this.formxcjyListadd.bgtime) {
					let newdate = moment(this.formxcjyListadd.bgtime).subtract(-2, 'year').format('YYYY-MM-DD')
					this.formxcjyListadd.nextjctime = newdate
				}
			},
			// 三年
			threeChange(e) {
				this.formxcjyListadd.reportPeriod = e
				if (this.formxcjyListadd.bgtime) {
					let newdate = moment(this.formxcjyListadd.bgtime).subtract(-3, 'year').format('YYYY-MM-DD')
					this.formxcjyListadd.nextjctime = newdate
				}
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);

			},
			// 重置
			reset() {
				// this.value='',
				this.button = true
				this.showisFile = true
				this.formxcjyListadd.reportPeriod = ''
				this.formxcjyListadd = {
					id: '',
					enterpriseid: '',
					enterprisename: '',
					gqpx: '',
					dqpx: '',
					gxrpx: '',
					gqpxTime: '',
					dqpxTime: '',
					glrpxTime: '',
					dqpxNextTime: '',
					glrpxNextTime: '',
					reportPeriod: '一年',
					reportPeriodgl: '一年',
					isFile: '有',

				}

			},

			// 提交
			submit() {
				console.log(this.formxcjyListadd)

				this.$refs.uForm.validate(valid => {
					if (valid) {
						insertQyxcjyda(this.formxcjyListadd).then(response => {
							if (response.code == '1') {
								this.$refs.uToast.show({
									title: response.mess,
									type: 'error',
									duration: 1500
								})

							} else {
								this.$refs.uToast.show({
									title: '新增成功',
									type: 'success',
									duration: 1500
								})
								 uni.$emit('update', '1')
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/homepage/homepage'
									});

								}, 2000);
							}
						});
					}

				});
			}

		},


	}
</script>
<style lang="scss">
	//css函数 声明函数
	@function tovmin($rpx) {
		//$rpx为需要转换的字号
		@return #{$rpx * 100 / 750}vmin;
	}

	::v-deep .u-form-item {
		padding-left: tovmin(50) !important;
	}

	// ::v-deep .u-iconfont {
	// 	margin-right: tovmin(30);

	// }
	::v-deep .u-icon__icon uicon-checkbox-mark u-iconfont {
		left: 8px
	}

	.app {
		color: #C3C1C1;
		font-weight: 400;
		height: 100vh;

		.body {
			margin-top: tovmin(30);



			.but {
				display: flex;
				justify-content: space-around;
				margin-top: tovmin(50);

				.res {
					width: tovmin(170);
					height: tovmin(70);
					line-height: tovmin(70);
					text-align: center;
					color: #fff;
					background-color: #3C9CFF;
					border-radius: tovmin(10);
				}

				.sub {
					width: tovmin(170);
					height: tovmin(70);
					line-height: tovmin(70);
					text-align: center;
					color: #fff;
					background-color: #3C9CFF;
					border-radius: tovmin(10);
				}
			}
		}

		.up {
			// background-color: red;
			position: absolute;
			// right: tovmin(120);
		}

		.icon {
			position: absolute;
			right: tovmin(60);
			top: tovmin(10);

		}

		.button {
			color: #C0C4CC;

		}
	}
</style>