<template>
	<view class="pageInfo">
		<view>
			<u-form :model="form" ref="uForm">
				<u-form-item label="任务名称" label-width="160rpx" prop="name"><u-input v-model="form.name" maxlength="30" /></u-form-item>
				<u-form-item label="任务周期" v-model="form.cycleType" label-width="160rpx" prop="cycleType">
					<v-select ref="cycleType" code="BUSINESS_EXPERIRENCE_CONTENT_CLS" placeholder="请选择任务周期" v-model="form.cycleType"></v-select>
				</u-form-item>
				<u-form-item label="执行日期" label-width="160rpx" prop="buildTime">
					<view style="width: 100%;" @tap="choosePartMark">
						<input v-show="markArr && markArr.length == 0" disabled placeholder-class="form-input-placeholder" placeholder="请选择执行日期" />
						<u-tag
							v-show="markArr && markArr.length != 0"
							v-for="(item, index) in markArr"
							:key="item.id"
							:text="item.name"
							size="mini"
							style="margin: 6upx 0 6upx 6upx;"
						/>
					</view>
					<!-- <view @click="onShowPickerBegin('date')" style="color: rgb(192,196,204);">{{date ? date : '请选择执行日期'}}</view>
					<mx-date-picker class="beginTime" :show="showPickerBegin" :type="type" :value="form.beginTime" :show-tips="true"  @confirm="onSelectedBegin" @cancel="onSelectedBegin"/> -->
				</u-form-item>
				<u-form-item label="执行时间" label-width="160rpx" prop="zxTime">
					<view @click="onShowPickerTime('time')" style="color: rgb(192,196,204);">{{ time ? time : '请选择执行时间' }}</view>
					<mx-date-picker
						class="beginTime"
						:show="showPickerTime"
						type="time"
						:value="form.zxTime"
						:show-tips="true"
						@confirm="onSelectedTime"
						@cancel="onSelectedTime"
					/>
				</u-form-item>
				<u-form-item label="开始日期" label-width="160rpx" prop="startDate">
					<view @click="onShowPickerBegin('date')" style="color: rgb(192,196,204);">{{ form.startDate ? form.startDate : '请选择开始日期' }}</view>
					<mx-date-picker
						class="beginTime"
						:show="showPickerBegin"
						:type="type"
						:value="form.startDate"
						:show-tips="true"
						@confirm="onSelectedBegin"
						@cancel="onSelectedBegin"
					/>
				</u-form-item>
				<u-form-item label="结束日期" label-width="160rpx" prop="endDate">
					<view @click="onShowPickerEnd('date')" style="color: rgb(192,196,204);">{{ form.endDate ? form.endDate : '请选择结束日期' }}</view>
					<mx-date-picker class="beginTime" :show="showPickerEnd" :type="type" :value="form.endDate" :show-tips="true" @confirm="onSelectedEnd" @cancel="onSelectedEnd" />
				</u-form-item>
				<u-form-item label="执行类型" label-width="160rpx" prop="zxType">
					<v-select ref="contentCls" v-model="form.zxType" code="BUSINESS_EXPERIRENCE_CONTENT_CLS" placeholder="请选择执行类型"></v-select>
				</u-form-item>
				<u-form-item label="考评指标" label-width="160rpx" prop="assessList">
					<view style="color:rgb(192,196,204); width: 100%;" @click="openZBpage">{{ form.assessList ? form.assessList.length + '项指标' : '请选择考评指标' }}</view>
					<u-icon name="icon-xian-11" custom-prefix="xd-icon" size="28" color="#888888" @click="openZBpage"></u-icon>
				</u-form-item>
				<u-form-item label="考评门店" label-width="160rpx" prop="storeList">
					<view style="color:rgb(192,196,204); width: 100%;" @click="openMDpage">{{ form.storeList ? form.storeList : '请选择考评门店' }}</view>
					<u-icon name="icon-xian-11" custom-prefix="xd-icon" size="28" color="#888888" @click="openMDpage"></u-icon>
				</u-form-item>
				<u-form-item label="任务有效天数" label-width="180rpx" prop="effectiveDay"><u-input v-model="form.effectiveDay" placeholder="请输入任务有效天数" /></u-form-item>
				<!-- <u-form-item label="执行时间" label-width="160rpx" prop="zxTime">
					<view @click="onShowPickerTime('time')" style="color: rgb(192,196,204);">{{time ? time : '请选择执行时间'}}</view>
					<mx-date-picker class="beginTime" :show="showPickerTime" type="time" :value="form.zxTime" :show-tips="true"  @confirm="onSelectedTime" @cancel="onSelectedTime"/>
				</u-form-item> -->
			</u-form>
			<view class="btns">
				<u-button class="confirmBtn" type="primary" size="medium" @click="submit">提交</u-button>
				<u-button class="cancelBtn" size="medium" @click="cancel">取消</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import vSelect from '@/components/select/v-select.vue';
import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
import { clzConfirm } from '@/libs/tools.js';
export default {
	components: {
		vSelect,
		MxDatePicker
	},
	data() {
		// const currentDate = this.getDate({
		// 	format: true
		// })
		return {
			showPickerBegin: false, // 默认是否显示开始日期的日期组件
			showPickerEnd: false, // 默认是否显示结束日期的日期组件
			showPickerTime: false, // 默认是否显示时间的时间组件
			date: '',
			time: '',
			type: 'date',
			form: {
				name: '', // 任务名称
				cycleType: '', // 周期类型
				buildTime: '', // 执行日期
				zxTime: '', // 执行时间
				zxType: '', // 执行类型
				startDate: '', // 开始日期
				endDate: '', // 结束日期
				assessList: '', // 考评指标
				storeList: '', // 考评门店
				effectiveDay: '' // 任务有效天数
			},
			markList: [], //  配件标签数据列表
			markArr: [], //  配件标签  已选 数据
			isPartMark: false,
			rules: {
				name: [{ required: true, message: '请输入名称30个字以内', trigger: 'blur' }],
				cycleType: [{ required: true, message: '请选择任务周期', trigger: 'blur' }],
				buildTime: [{ required: true, message: '请选择执行日期', trigger: 'blur' }],
				zxTime: [{ required: true, message: '请选择执行时间', trigger: 'blur' }],
				zxType: [{ required: true, message: '请选择执行类型', trigger: 'blur' }],
				startDate: [{ required: true, message: '请选择开始日期', trigger: 'blur' }],
				endDate: [{ required: true, message: '请选择结束日期', trigger: 'blur' }],
				assessList: [{ required: true, message: '请选择考评指标', trigger: 'blur' }],
				storeList: [{ required: true, message: '请选择考评门店', trigger: 'blur' }],
				effectiveDay: [{ required: true, message: '请输入任务有效天数', trigger: 'blur' }]
			}
			// // date: currentDate,
			// dateMode: 'date',
			// dateShow: false,
		};
	},
	// computed: {
	//         startDate() {
	//             return this.getDate('start');
	//         },
	//         endDate() {
	//             return this.getDate('end');
	//         }
	//     },
	onReady() {
		this.$refs.uForm.setRules(this.rules);
		// 检测选择的考评指标
		uni.$on('selKpItem', (data) => {
			this.form.assessList = data.msg;
		});
	},
	onUnload() {
		uni.$off('selKpItem')
	},
	methods: {
		//  显示开始日期选择
		onShowPickerBegin(type) {
			this.type = type;
			this.showPickerBegin = true;
			this.form.startDate = this[type];
		},
		//  日期选择
		onSelectedBegin(e) {
			console.log(e);
			this.showPickerBegin = false;
			if (e) {
				this[this.type] = e.value;
				// this[this.form.startDate] = e.value
				console.log(this[this.form.startDate], '------------日期', this[this.type]);
			}
		},
		//  显示结束日期选择
		onShowPickerEnd(type) {
			this.type = type;
			this.showPickerEnd = true;
			this.form.endDate = this[type];
		},
		//  日期选择
		onSelectedEnd(e) {
			this.showPickerEnd = false;
			if (e) {
				this[this.type] = e.value;
				console.log('------------日期', this[this.type]);
			}
		},
		// 执行时间选择
		onShowPickerTime(type) {
			this.type = type;
			this.showPickerTime = true;
			this.form.zxTime = this[type];
		},
		//  日期选择
		onSelectedTime(e) {
			this.showPickerTime = false;
			if (e) {
				this[this.type] = e.value;
			}
		},
		// 		dateChange(e){
		// 			this.form.entryDate = e.result
		// 		},
		// 		confirm(e){
		// 			console.log(e)
		// 		},
		// 		openSeleteType(){
		// 			this.show=true
		// 		},
		// 		bindDateChange: function(e) {
		// 			this.date = e.target.value
		// 		},
		// 		getDate(type) {
		// 			const date = new Date();
		// 			let year = date.getFullYear();
		// 			let month = date.getMonth() + 1;
		// 			let day = date.getDate();

		// 			if (type === 'start') {
		// 				year = year - 60;
		// 			} else if (type === 'end') {
		// 				year = year + 2;
		// 			}
		// 			month = month > 9 ? month : '0' + month;;
		// 			day = day > 9 ? day : '0' + day;
		// 			return `${year}-${month}-${day}`;
		// 		},
		//  选择配件标签
		choosePartMark() {
			this.isPartMark = false;
			this.$nextTick(function() {
				this.isPartMark = true;
			});
		},
		// 确认
		markConfirm(arr) {
			this.markArr = arr;
			let arrId = [];
			arr.map(item => {
				arrId.push({ id: item.id });
			});
			this.formData.labels = arrId;
			this.isPartMark = false;
		},
		//  取消  配件标签
		markCancel() {
			this.isPartMark = false;
		},
		openZBpage() {
			uni.navigateTo({
				url: '/pages/spotCheckConfigure/evaluateItem?item='+encodeURIComponent(JSON.stringify(this.form.assessList))
			});
		},
		openMDpage() {
			uni.navigateTo({
				url: '/pages/spotCheckConfigure/evaluateStore'
			});
		},
		// 提交
		submit() {
			console.log(this.form);
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
				} else {
					console.log('验证失败');
				}
			});
		},
		// 取消
		cancel() {
			this.$refs.uForm.resetFields(this.rules);
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}
.pageInfo {
	padding: 0 40upx;
	.form-input-placeholder {
		font-size: 28upx;
		color: rgb(192, 196, 204);
	}
	// .beginTime{
	// 	z-index:999;
	// }
	.beginTime {
		z-index: 999999 !important;
	}
	.btns {
		text-align: center;
		padding: 50upx 0;
		.confirmBtn {
			margin-right: 20upx;
		}
		.cancelBtn {
			margin-left: 20upx;
		}
	}
}
</style>
