<template>
	<view class="page">
		<u-form :model="form" ref="uForm" :label-width="120">
			<view class="form-box">
				<u-form-item label="发布端口" prop="publishPort" borderBottom>
					<u-input v-model="form.publishPort" type="select" @click="fabuShow = true"
						placeholder='请选择类型' />
				</u-form-item>
			</view>
			<view class="form-box">
				<u-form-item label="问卷类型" prop="questionnaireType" borderBottom>
					<u-input v-model="form.questionnaireType" type="select" @click="typeShow = true"
						placeholder='请选择类型' />
				</u-form-item>
			</view>
			<view class="form-box">
				<u-form-item label="问卷开始时间" prop="startDate" borderBottom>
					<u-input v-model="form.startDate" type="select" @click="TimeStratshow = true"
						placeholder="请选择" />
					<u-picker mode="time" v-model="TimeStratshow" :params="params1"
						@confirm="TimeStratshowChange"></u-picker>
				</u-form-item>
			</view>
			<view class="form-box">
				<u-form-item label="问卷结束时间" prop="endDate" borderBottom>
					<u-input v-model="form.endDate" type="select" @click="TimeEndshow = true"
						placeholder="请选择" />
					<u-picker mode="time" v-model="TimeEndshow" :params="params1"
						@confirm="TimeEndshowChange"></u-picker>
				</u-form-item>
			</view>
			
			<view class="form-box">
				<u-form-item label="预计填写时长" prop="estimatedTime" borderBottom>
					<u-input v-model="form.estimatedTime"></u-input>
				</u-form-item>
				
			</view>
			<view class="form-box">
				<u-form-item label="问卷封面" prop="coverImage" borderBottom labelPosition="top">
					<u-upload :action="$upload" :auto-upload="true" ref="coverImage" :max-count="1"></u-upload>
				</u-form-item>
				
			</view>
			
			
		</u-form>
		<u-select v-model="typeShow" :list="questionnaireType" @confirm="typeChange"></u-select>
		<u-select v-model="fabuShow" :list="fabuDuan" @confirm="fabuChange"></u-select>
		<view class="page-footer">
			<u-button type="success" @click="tijiao">确定</u-button>
			<u-button type="success" @click="fanhui">返回</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					startDate: '',
					endDate: '',
					publishPort: '',
					questionnaireType: '',
					estimatedTime: null,
					remarks: '',
					filler: '公众',
					fillingConditions: '可重复填写',
					coverImage: '',
					rewardForParticipation: '不设置奖励',
					responseStatus: '',
					reviewStatus: '1',
					needName: '必填',
					needPhone: '必填',
					needGender: '必填',
					needOpinion: '必填',
				},
				fabuShow:false,
				TimeStratshow: false,
				TimeEndshow:false,
				typeShow: false,
				params1: {
					year: true,
					month: true,
					day: true,
					
				},
				questionnaireType: [{
						value: 1,
						label: '物业问卷'
					},
					{
						value: 2,
						label: '招商问卷'
					},{
						value: 3,
						label: '满意度问卷'
					},
					{
						value: 4,
						label: '社会调查问卷'
					}
				],
				fabuDuan: [{
						value: 1,
						label: 'H5端'
					}],
				value:0,
				ules:''
			}
		},
		methods:{
			go(urls){
				uni.navigateTo({
					url:`${urls}`
				})
			},
			typeChange(e) {
				this.form.questionnaireType = e[0].label;
			},
			fabuChange(e) {
				this.form.publishPort = e[0].label;
			},
			
			TimeStratshowChange(val){
				this.form.startDate = this.timeChange(val)
				this.form.endDate = ''
			},
			TimeEndshowChange(val){
					const time = this.timeChange(val)
					if (new Date(time).getTime() > new Date(this.form.startDate).getTime()) {
						this.form.endDate = time
					} else {
						this.$refs.uToast.show({
							title: '结束时间不能小于开始时间',
							type: 'error',
						})
					}
			},
			timeChange(val) {
				const {
					year,
					month,
					day
				} = val;
				return `${year}-${month}-${day}`;
			},
			tijiao(){
					let files = []
					files = this.$refs.coverImage.lists.filter(val => {
						return val.progress == 100;
					})
					files.map(item => {
						this.form.coverImage = item.response.data.url
					})
					let data = JSON.stringify(this.form)
					uni.navigateTo({
						url:`/pages/createQuestionnaire/createQuestionnaire?data=${data}`
					})
			},
			fanhui(){
				uni.navigateTo({
					url:`/pages/createQuestionnaire/createQuestionnaire`
				})
			},
		}
	}
</script>

<style  scoped lang="scss">
	.page{
		padding: 0 20rpx 20rpx;
		background-color: #f6f6f6;
		font-size: 24rpx;
		font-weight: 500;
		position: relative;
		.form-box {
			padding: 0 4%;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 20rpx;
			width: 100%;
			
		}
		::v-deep .u-form-item--left{
			width:20%;
			flex:none;
		}
		.select-item {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 20rpx;
			width: 100%;
			.top {
				padding: 22rpx 4%;
				.title {
					font-size: 30rpx;
					margin-bottom: 20rpx;
				}
				.radio-box {
					font-size: 24rpx;
					color: #7c7c7c;
				}
			}
			.bottom {
				padding: 20rpx 4%;
				display: flex;
				background-color: #EDFFF5;
				border: #0FBB59  solid 1rpx;
				border-radius: 0 0 20rpx 20rpx;
				.u-btn {
					width: 18%;
				}
				:first-child {
					margin-left: 0;
				}
				:last-child {
					margin-right: 0;
				}
			}
		}
		.page-footer{
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 120rpx;
			background-color: #FFFFFF;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.u-btn {
				width: 30%;
			}
			.u-icon {
				margin-right: 10rpx;
			}
		}
	}
</style>