<template>
	<view class="pageInfo">
		<view>
			<u-form :model="form" ref="uForm" :error-type="['toast']">
				<u-form-item label="任务名称" label-width="160rpx" prop="name">
					<u-input v-model="form.name" input-align="right" placeholder="请输入任务名称(最多30个字符)" :maxlength="30" />
				</u-form-item>
				<u-form-item label="任务周期" v-model="form.cycleType" label-width="160rpx" prop="cycleType">
					<v-select ref="cycleType" inputAlign="right" code="TASK_CONFIG_CYCLE_TYPE" placeholder="请选择任务周期" v-model="form.cycleType"></v-select>
				</u-form-item>
				<u-form-item label="执行日期" v-if="form.cycleType == 'DAY'" label-width="160rpx" prop="buildDateDay">
					<u-input v-model="form.buildDateDay" @click="showBuildDateDay = true" input-align="right" placeholder="请选择执行时间" type="select" />
					<u-picker v-model="showBuildDateDay" @confirm="confirmBuildDateDay" mode="time" :default-time="form.buildDateDay"></u-picker>
				</u-form-item>
				<u-form-item label="执行日期" v-if="form.cycleType == 'WEEK'" label-width="160rpx" prop="buildDateWeekList">
					<v-select ref="buildDateWeekList" v-show="false" code="WEEK"></v-select>
					<view v-if="form.buildDateWeekList.length" style="width: 100%;text-align: right;" @click="openWeekSel">{{buildDateWeekNamesList.join(",")}}</view>
					<view v-else style="color:rgb(192,196,204); width: 100%;text-align: right;" @click="openWeekSel">请选择</view>
					<u-icon name="icon-xian-11" custom-prefix="xd-icon" size="28" color="#888888" @click="openWeekSel"></u-icon>
				</u-form-item>
				<u-form-item label="执行时间" label-width="160rpx" prop="buildTime">
					<u-input v-model="form.buildTime" @click="showBuildTime = true" input-align="right" placeholder="请选择执行时间" type="select" />
					<u-picker v-model="showBuildTime" title="请选择执行时间" @confirm="confirmZxTime" mode="time" :params="ZxTimeParams" :default-time="form.buildTime"></u-picker>
				</u-form-item>
				<u-form-item label="开始日期" label-width="160rpx" prop="startDate">
					<u-input v-model="form.startDate" :disabled="form.cycleType == 'DAY'" @click="openStartDate" input-align="right" placeholder="请选择开始日期" :type="form.cycleType == 'DAY'?'text':'select'" />
					<u-picker v-model="showPickerBegin" title="请选择开始日期" @confirm="confirmStartDate" mode="time" :default-time="form.startDate"></u-picker>
				</u-form-item>
				<u-form-item label="结束日期" label-width="160rpx" prop="endDate">
					<u-input v-model="form.endDate" :disabled="form.cycleType == 'DAY'" @click="openEndDate" input-align="right" placeholder="请选择结束日期" :type="form.cycleType == 'DAY'?'text':'select'" />
					<u-picker v-model="showPickerEnd"  title="请选择结束日期" @confirm="confirmEndDate" mode="time" :default-time="form.endDate"></u-picker>
				</u-form-item>
				<u-form-item label="考评指标" label-width="160rpx" prop="assessList">
					<view v-if="form.assessList.length" style="width: 100%;text-align: right;" @click="openZBpage">{{form.assessList.length + '项指标'}}</view>
					<view v-else style="color:rgb(192,196,204); width: 100%;text-align: right;" @click="openZBpage">请选择考评指标</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 v-if="form.storeList.length" style="width: 100%;text-align: right;" @click="openMDpage">{{form.storeList.length + '个门店'}}</view>
					<view v-else style="color:rgb(192,196,204); width: 100%;text-align: right;" @click="openMDpage">请选择考评门店</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="160rpx" prop="effectiveDay">
					<u-input v-model="form.effectiveDay" type="number" input-align="right" placeholder="请输入任务有效天数" />
				</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>
			<!-- 周几 -->
			<uni-multiple-picker
			:show="showWeekSel"
			:dataList="weekList"
			@confirm="weekConfirm"
			@cancel="showWeekSel=false">
			</uni-multiple-picker>
		</view>
	</view>
</template>

<script>
import vSelect from '@/components/select/v-select.vue';
import { clzConfirm } from '@/libs/tools.js';
import { saveBackLog } from '@/api/checkTaskConfig.js'
import moment from 'moment';
export default {
	components: {
		vSelect,
	},
	data() {
		return {
			showBuildDateDay: false, // 执行日期
			showPickerBegin: false, // 默认是否显示开始日期的日期组件
			showPickerEnd: false, // 默认是否显示结束日期的日期组件
			showBuildTime: false, // 默认是否显示执行时间的时间组件
			showWeekSel: false, // 显示选择周几
			weekList: [], // 周列表
			buildDateWeekNamesList: [], // 已选周名称列表
			ZxTimeParams: {
				year: false,
				month: false,
				day: false,
				hour: true,
				minute: true,
				second: true
			},
			form: {
				name: '', // 任务名称
				cycleType: '', // 周期类型
				buildDateDay: '', // 执行日期
				buildDateWeekList: [], // 周几
				buildTime: '', // 执行时间
				startDate: '', // 开始日期
				endDate: '', // 结束日期
				assessList: '', // 考评指标
				storeList: '', // 考评门店
				effectiveDay: '' // 任务有效天数
			},
			rules: {
				name: [{ required: true, message: '请输入名称30个字以内', trigger: 'blur' }],
				cycleType: [{ required: true, message: '请选择任务周期', trigger: 'blur' }],
				buildDateDay: [{ required: true, message: '请选择执行日期', trigger: 'blur' }],
				buildTime: [{ required: true, message: '请选择执行时间', trigger: 'blur' }],
				startDate: [{ required: true, message: '请选择开始日期', trigger: 'blur' }],
				endDate: [{ required: true, message: '请选择结束日期', trigger: 'blur' }],
				effectiveDay: [{ required: true, message: '请输入任务有效天数', trigger: 'blur' }]
			}
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
		// 检测选择的考评指标
		uni.$on('selKpItem', data => {
			data.map(item=>{
				item.assessTargetId = item.id
				delete item.id
			})
			this.form.assessList = data;
		});
		// 监听选择的考评门店
		uni.$on('selKpStores', data => {
			data.map(item=>{
				item.storeId = item.id
				delete item.id
			})
			this.form.storeList = data;
		});
	},
	onUnload() {
		uni.$off('selKpItem');
		uni.$off('selKpStores');
	},
	methods: {
		// 天类型的执行日期
		confirmBuildDateDay(val) {
			this.form.buildDateDay = val.year + '-' + val.month + '-' + val.day;
			this.form.startDate = this.form.buildDateDay
			this.form.endDate = this.form.buildDateDay
		},
		openStartDate(){
			this.showPickerBegin = this.form.cycleType=='WEEK'
		},
		// 开始日期
		confirmStartDate(val) {
			let d = val.year + '-' + val.month + '-' + val.day;
			let a = this.form.startDate;
			if (a == '' || moment(d).isBefore(a)) {
				this.form.startDate = d;
			} else {
				uni.showToast({
					icon: 'none',
					title: '开始日期应小于结束日期'
				});
			}
		},
		openEndDate(){
			this.showPickerEnd = this.form.cycleType=='WEEK'
		},
		// 结束日期
		confirmEndDate(val) {
			let d = val.year + '-' + val.month + '-' + val.day;
			let a = this.form.startDate;
			if (a == '' || moment(d).isAfter(a)) {
				this.form.endDate = d;
			} else {
				uni.showToast({
					icon: 'none',
					title: '结束日期应大于开始日期'
				});
			}
		},
		// 打开选择周
		openWeekSel(){
			if(this.weekList.length==0){
				let arr = this.$refs.buildDateWeekList.getDataList()
				arr.map(item=>{
					this.weekList.push({
						id: item.code,
						name: item.dispName,
						checked: true
					})
				})
			}
			
			this.showWeekSel = true
		},
		//  已选择角色确定
		weekConfirm(arr){
			console.log(arr)
			let list = []
			let weekNames = []
			arr.map(item=>{
				list.push(item.id)
				weekNames.push(item.name)
			})
			this.form.buildDateWeekList = list
			this.buildDateWeekNamesList = weekNames
			this.showWeekSel = false
		},
		// 执行时间
		confirmZxTime(val) {
			this.form.buildTime = val.hour + ':' + val.minute + ':' + val.second;
		},
		// 考评指标选择
		openZBpage() {
			uni.navigateTo({
				url: '/pages/spotCheckConfigure/evaluateItem?item=' + encodeURIComponent(JSON.stringify(this.form.assessList))
			});
		},
		// 考评门店选择
		openMDpage() {
			uni.navigateTo({
				url: '/pages/spotCheckConfigure/evaluateStore?item=' + encodeURIComponent(JSON.stringify(this.form.storeList))
			});
		},
		// 提交
		submit() {
			console.log(this.form);
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if(this.form.assessList.length==0){
						uni.showToast({
							icon: 'none',
							title: '请选择任务指标'
						})
					}
					else if(this.form.storeList.length==0){
						uni.showToast({
							icon: 'none',
							title: '请选择任务门店'
						})
					}else{
						console.log('验证通过');
						this.submitForm()
					}
				}
			});
		},
		submitForm(){
			saveBackLog(this.form).then(res => {
				console.log(res)
				if(res.status == 200){
					uni.navigateBack()
					uni.$emit('updateCheckTaskConfigList')
				}
				uni.showToast({
					icon: 'none',
					title: res.message
				})
			})
		},
		// 取消
		cancel() {
			uni.navigateBack()
		}
	}
};
</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>
