<template>
	<view class="scene-timing-wrap">
		<view class="container-wrap">
			<view class="form-wrap">
				<u--form :model="form" ref="form" :rules="rules" errorType="toast" labelPosition="left" labelWidth="80">
					<view class="form-item-wrap">
						<u-form-item prop="time" :label="$tt('sceneTiming.time')" @click="isTimer = true">
							<u--input v-model="form.time" border="none" inputAlign="right" :placeholder="$tt('sceneTiming.selectTime')"
								disabledColor="#fff" disabled :customStyle="{ marginRight: '20rpx' }" />
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item prop="repeat" :label="$tt('sceneTiming.again')" @click="isRepeat = true">
							<u--input v-model="form.repeat" border="none" inputAlign="right" :placeholder="$tt('sceneTiming.selectWeek')"
								disabledColor="#fff" disabled :customStyle="{ marginRight: '20rpx' }" />
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item label="CRON">
							<template slot="right">
								<u-radio-group v-model="form.isAdvance">
									<u-radio :customStyle="{marginRight: '30rpx'}" :label="$tt('sceneTiming.default')" :name="0"></u-radio>
									<u-radio :customStyle="{marginRight: '10rpx'}" :label="$tt('sceneTiming.auto')" :name="1"
										disabled></u-radio>
								</u-radio-group>
							</template>
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item>
							<!-- #ifndef APP-NVUE -->
							<u-input v-model="form.cronExpression" :placeholder="$tt('sceneTiming.inputCRON')" disabled>
							<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<u--input v-model="form.cronExpression" :placeholder="$tt('sceneTiming.inputCRON')" disabled>
								<!-- #endif -->
									<template slot="suffix">
										<u-button :text="$tt('sceneTiming.expression')" icon="calendar" type="primary" size="mini"
											disabled></u-button>
									</template>
							<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</u-form-item>
					</view>
				</u--form>
			</view>
			<view class="btn-wrap">
				<u-button :customStyle="{ height: '96rpx' }" size="normal" :plain="true" :text="$tt('common.save')"
					@click="handleSave"></u-button>
			</view>
		</view>
		<view class="other">
			<!-- 选择时间 -->
			<u-datetime-picker :show="isTimer" v-model="form.time" mode="time" @cancel="isTimer=false"
				@close="isTimer=false" @confirm="handleDatetimeConfirm"></u-datetime-picker>

			<!-- 星期 -->
			<u-popup :show="isRepeat" :round="5" mode="bottom" bgColor="#eef3f7" :closeOnClickOverlay="true"
				@close="isRepeat = false">
				<view class="repeat-popup-wrap">
					<view class="nav">
						<text @click="isRepeat = false">{{$tt('common.cancel')}}</text>
						<text @click="handleRepeatConfirm">{{$tt('common.confirm')}}</text>
					</view>
					<view class="radio-group-wrap">
						<u-checkbox-group v-model="repeatValue" :borderBottom="false" placement="column"
							iconPlacement="right">
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.monday')" :name="1" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.tuesday')" :name="2" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.wednesday')" :name="3" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.thursday')" :name="4" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.friday')" :name="5" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.saturday')" :name="6" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.sunday')" :name="7" iconSize="16"></u-checkbox>
							</view>
						</u-checkbox-group>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import { navigateBackTo } from '@/utils/common.js';

	export default {
		data () {
			return {
				type: 'trigger',
				editIndex: null, // null 代表新增
				isTimer: false, // 时间
				isRepeat: false, // 星期
				form: {
					time: uni.$u.timeFormat(new Date(), 'hh:MM'),
					repeat: this.$tt('sceneTiming.everyDay'),
					isAdvance: 0,
					cronExpression: `0 ${uni.$u.timeFormat(new Date(),'MM')} ${uni.$u.timeFormat(new Date(),'hh')} ? * 1,2,3,4,5,6,7`,
				},
				rules: {
					time: {
						type: 'string',
						required: true,
						message: this.$tt('sceneTiming.selectTime'),
						trigger: ['blur', 'change']
					},
					repeat: {
						type: 'string',
						required: true,
						message: this.$tt('sceneTiming.selectWeek'),
						trigger: ['blur', 'change']
					},
				},
				repeatValue: [1, 2, 3, 4, 5, 6, 7],
			};
		},
		onLoad (option) {
			const { type, editIndex } = option;
			this.type = type;
			this.editIndex = Number(editIndex);
			if (!Number.isNaN(this.editIndex) && this.editIndex !== null) {
				const { cronExpression } = uni.getStorageSync('trigger');
				const time = cronExpression.substring(5, 7) + ':' + cronExpression.substring(2, 4);
				const repeatValue = cronExpression.substring(12).split(',').map(Number);
				const repeat = this.getRepeatName(repeatValue)
				this.form = { ...this.form, time, repeat, cronExpression };
				this.repeatValue = repeatValue;
			}
		},
		methods: {
			// 时间选择
			handleDatetimeConfirm () {
				this.$nextTick(() => {
					this.gentCronExpression();
				})
				this.isTimer = false;
			},
			// 星期选择
			handleRepeatConfirm () {
				const repeat = this.getRepeatName(this.repeatValue);
				this.form.repeat = repeat;
				this.gentCronExpression();
				this.isRepeat = false;
			},
			// 获取repeat名称
			getRepeatName (repeatValue) {
				const list = repeatValue.map(item => {
					if (item === 1) {
						return this.$tt('sceneTiming.monday')
					} else if (item === 2) {
						return this.$tt('sceneTiming.tuesday')
					} else if (item === 3) {
						return this.$tt('sceneTiming.wednesday')
					} else if (item === 4) {
						return this.$tt('sceneTiming.thursday')
					} else if (item === 5) {
						return this.$tt('sceneTiming.friday')
					} else if (item === 6) {
						return this.$tt('sceneTiming.saturday')
					} else if (item === 7) {
						return this.$tt('sceneTiming.sunday')
					}
				})
				if (list.length === 7) {
					return this.$tt('sceneTiming.everyDay');
				} else {
					return list.join(',');
				}
			},
			// 生成cron表达式
			gentCronExpression () {
				let hour = '00';
				let minute = '00';
				if (this.form.time) {
					hour = this.form.time.substring(0, 2);
					minute = this.form.time.substring(3);
				}
				let week = '*';
				if (this.repeatValue.length > 0) {
					week = this.repeatValue.sort();
				}
				this.form.cronExpression = '0 ' + minute + ' ' + hour + ' ? * ' + week;
			},
			// 保存
			handleSave () {
				this.$refs.form.validate().then(respon => {
					let action = uni.getStorageSync(this.type);
					const { cronExpression } = this.form;
					action = { ...action, cronExpression };
					uni.setStorageSync(this.type, action);
					// 更新或者插入新的触发或者执行
					let { triggers, actions, ...res } = uni.getStorageSync('sceneData');
					if (Number.isNaN(this.editIndex) || this.editIndex === null) {
						if (this.type === 'trigger') {
							triggers.push(action);
						} else {
							actions.push(action);
						}
						uni.setStorageSync('sceneData', { triggers, actions, ...res });
					} else {
						if (this.type === 'trigger') {
							let list = triggers.map((item, i) => {
								if (i == this.editIndex) {
									return action
								} else {
									return item
								}
							});
							uni.setStorageSync('sceneData', { triggers: [...list], actions, ...res });
						} else {
							let list = actions.map((item, i) => {
								if (i == this.editIndex) {
									return action
								} else {
									return item
								}
							});
							uni.setStorageSync('sceneData', { triggers, actions: [...list], ...res });
						}
					}
					uni.setStorageSync('callback', true);
					navigateBackTo('/pagesA/scene/detail');
				})
			}
		}
	};
</script>

<style>
	page {
		height: 100%;
		background: #eef3f7;
	}
</style>
<style lang="scss" scoped>
	.scene-timing-wrap {

		.container-wrap {
			.form-wrap {
				background: #fff;
				margin: 30rpx;

				.form-item-wrap {
					padding: 4rpx 20rpx;
				}
			}

			.btn-wrap {
				margin: 30rpx 26rpx;
			}
		}

		.other {
			.repeat-popup-wrap {
				padding: 30rpx;

				.nav {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					font-size: 32rpx;
					margin-bottom: 34rpx;
				}

				.radio-group-wrap {
					background-color: #fff;
					border-radius: 10rpx;

					.radio-wrap {
						padding: 40rpx;

						&:not(:last-child) {
							border-bottom: 1rpx solid #F1F2F5;
						}
					}
				}
			}
		}
	}
</style>