<template>
	<view class="page">
		<u-form :model="form" ref="uForm" label-position="left" :label-width="150">
			<view class="add-list" style="padding-bottom: 0;">
				<u-form-item label="封面图片" borderBottom labelPosition="top">
					<u-upload :active="active" :file-list="form.fileList" :max-count="1"></u-upload>
				</u-form-item>
			</view>
			<view class="add-list" style="padding-bottom: 0;">
				<u-form-item label="活动名称" borderBottom>
					<u-input v-model="form.name" />
				</u-form-item>
				<u-form-item label="开始时间" borderBottom>
					<u-input v-model="form.startTime" type="select" @click="startShow = true" placeholder="请选择"/>
					<u-picker mode="time" v-model="startShow" :params="params" @confirm="startTimeChange"></u-picker>
				</u-form-item>
				<u-form-item label="结束时间" borderBottom>
					<u-input v-model="form.endTime" type="select" @click="endShow = true" placeholder="请选择"/>
					<u-picker mode="time" v-model="endShow" :params="params" @confirm="endTimeChange"></u-picker>
				</u-form-item>
				<u-form-item label="活动类型" borderBottom>
					<u-input v-model="form.type" type="select" @click="typeShow = true" placeholder="请选择"/>
					<u-select v-model="typeShow" :list="typeList" @confirm="typeChange"></u-select>
				</u-form-item>
				<u-form-item label="可参与人数" borderBottom>
					<u-number-box v-model="form.num" :input-width="'100%'" :min="0"></u-number-box>
				</u-form-item>
				<u-form-item label="举办区域" borderBottom>
					<u-input v-model="form.name" />
				</u-form-item>
			</view>
			<!-- <view class="add-list" style="padding-bottom: 0;">
				<u-form-item label="活动内容" borderBottom labelPosition="top">
				</u-form-item>
			</view> -->
		</u-form>
		<u-toast ref="uToast" />
		<!-- 保存按钮 -->
		<view style="height: 120rpx;"></view>
		<view class="page-footer">
			<u-button type="success">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					fileList: [],
					name: '',
					type: '',
					num: 0,
					startTime: '',
					endTime: '',
				},
				active: '', // 文件上传地址
				startShow: false,
				endShow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				typeShow: false,
				typeList: [{ value: '1', label: '类型1' }, { value: '2', label: '类型2' }],
				readOnly: false,
				formats: {}
			};
		},
		methods:{
			startTimeChange(val) {
				this.form.startTime = this.timeChange(val);
				this.form.endTime = '';
			},
			endTimeChange(val) {
				const time = this.timeChange(val);
				if(new Date(time).getTime() > new Date(this.form.startTime).getTime()) {
					this.form.endTime = time
				} else {
					this.$refs.uToast.show({
						title: '结束时间不能小于开始时间',
						type: 'error',
					})
				}
			},
			timeChange(val) {
				const { year, month, day, hour, minute, second } = val;
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
			typeChange(val) {
				this.form.type = val[0].name;
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'activityAdd.scss';
</style>
