<template>
	<view class="pageInfo">
		<view>
			<u-form :model="form" ref="uForm" :error-type="['toast']">
				<u-form-item label="任务名称" required  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="任务周期" required 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="执行日期" required v-show="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="执行日期" required v-show="form.cycleType == 'WEEK'" label-width="160rpx" prop="buildDateWeekList">
					<view v-if="form.buildDateWeekList.length" style="width: 100%;text-align: right;" @click="openWeekSel">
					{{weekNamesList}}
					</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="执行时间" required 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="开始日期" required 
				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="结束日期" required 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="考评指标" required 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="考评门店" required 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="有效天数" required label-width="160rpx" prop="effectiveDay">
					<u-input v-model="form.effectiveDay" maxlength="3" 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,getCheckTaskConfig } 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: [], // 周列表
			// 执行时间配置
			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' }],
				buildTime: [{ required: true, message: '请选择执行时间', trigger: 'blur' }],
				startDate: [{ required: true, message: '请选择开始日期', trigger: 'blur' }],
				endDate: [{ required: true, message: '请选择结束日期', trigger: 'blur' }],
				effectiveDay: [{ required: true, type:'number', message: '请输入任务有效天数', trigger: 'blur' }]
			}
		};
	},
	computed: {
		weekNamesList() {
			return this.getWeekNames(this.form.buildDateWeekList)
		}
	},
	watch: {
		"form.cycleType": function(newValue, oldValue) {
			console.log(newValue)
			if(oldValue&&newValue!=oldValue){
				this.form.buildDateDay = ''
				this.form.buildDateWeekList = []
				this.form.buildTime = ''
				this.form.startDate = ''
				this.form.endDate = ''
			}
		}
	},
	onLoad(opts) {
		if(opts.id){
			// 编辑
			this.getCheckTaskConfig(opts.id)
		}
	},
	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: {
		// 编辑信息
		getCheckTaskConfig(id){
			getCheckTaskConfig({id}).then(res => {
				if(res.status==200){
					let data = res.data
					data.assessTargetList.map(item=>{
						delete item.id
					})
					data.storeList.map(item=>{
						delete item.id
					})
					this.form = Object.assign(this.form,{
						id: data.id,
						name: data.name, // 任务名称
						cycleType: data.cycleType, // 周期类型
						buildDateDay: data.buildDateDay, // 执行日期
						buildDateWeekList: data.buildDateWeekList||[], // 周几
						buildTime: data.buildTime, // 执行时间
						startDate: data.startDate, // 开始日期
						endDate: data.endDate, // 结束日期
						assessList: data.assessTargetList, // 考评指标
						storeList: data.storeList, // 考评门店
						effectiveDay: Number(data.effectiveDay) // 任务有效天数
					})
					
					// 回显任务周期类型
					this.$refs.cycleType.setVal(data.cycleType)
				}
			})
		},
		// 获取周的中文名称
		getWeekNames(sel){
			let arr = this.$store.state.vuex_weeks
			let ret = []
			sel.map(item=>{
				let has = arr.find(a=>a.code == item)
				if(has){
					ret.push(has.dispName)
				}
			})
			return ret.join(',')
		},
		// 天类型的执行日期
		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.$store.state.vuex_weeks
				let sel = this.form.buildDateWeekList
				arr.map(item=>{
					let checked = sel.indexOf(item.code)
					this.weekList.push({
						id: item.code,
						name: item.dispName,
						checked: checked >= 0
					})
				})
			}
			this.showWeekSel = true
		},
		//  已选择角色确定
		weekConfirm(arr){
			let list = []
			arr.map(item=>{
				list.push(item.id)
			})
			this.form.buildDateWeekList = list
			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);
			if(this.form.buildDateDay == ''&&this.form.cycleType=="DAY"){
				uni.showToast({
					icon: 'none',
					title: '请选择执行日期'
				})
				return
			}
			if(this.form.buildDateWeekList == ''&&this.form.cycleType=="WEEK"){
				uni.showToast({
					icon: 'none',
					title: '请选择执行日期'
				})
				return
			}
			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(){
			console.log(this.form)
			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>
