<template>
	<view class="graybg">
		<view v-if="formData.type=='0'">
			<view v-html="formData.content" class="richContent"></view>
		</view>
		<view v-if="formData.type=='1'" class="formBox">	
			<view @click="clickImg">
				<image style="width: 100%;height: 50vw;" mode="aspectFit" v-for="p in formData.picArr" :src="p"/>
			</view>
			
			<view v-if="formData.content2" v-html="formData.content2" class="richContent2"></view>
			
			<uni-forms ref="baseForm" :modelValue="baseFormData">
				<uni-forms-item label="姓名" required v-if="formData.fields.indexOf('0')>-1">
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="手机号" required v-if="formData.fields.indexOf('1')>-1">
					<uni-easyinput v-model="baseFormData.telno" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="需求描述" required v-if="formData.fields.indexOf('2')>-1">
					<uni-easyinput type="textarea" v-model="baseFormData.requirement" placeholder="请输入需求描述" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit">提交</button>
		</view>
	</view>
	
	<uni-popup ref="alertPayOk" type="dialog">
		<uni-popup-dialog type="success" confirmText="返回主页" content="提交成功" @confirm="goIndex">
		</uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
	import {
		ref,getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onShow,onReady
	} from '@dcloudio/uni-app';
	import * as api from '@/common/api.js';
	const { proxy } = getCurrentInstance()	
	const app = getApp();
	const telNo = ref('');
	const alertPayOk = ref(null);
	const isActive = ref(null);
	const formData = ref({})
	const baseFormData = ref({})
	const rules= ref({
		name: {rules: [{required: true,errorMessage: '请输入姓名'}]},
		telno: {rules: [{required: true,errorMessage: '请输入手机号'}]},
		requirement: {rules: [{required: true,errorMessage: '请输入需求描述'}]},
	})

	onReady(()=>{
		// 修改页头标题
		uni.setNavigationBarTitle({
			title: formData.value.name
		});
	})
	onShow(() => {
		formData.value = JSON.parse(app.globalData.venue.miniappCustConfig)
		formData.value.picArr = formData.value.pics.split(',')
	});

	function goIndex() {
		uni.redirectTo({
			url: `/pages/index/index`
		})
	}
	function submit(){
		// 姓名
		if((formData.value.fields.indexOf('0')>-1) && baseFormData.value.name==undefined){
			uni.showToast({
				title: '请输入姓名',
				icon: 'none',
				duration: 2000
			});
			return
		}
		// 手机号
		if(formData.value.fields.indexOf('1')>-1&&baseFormData.value.telno==undefined){
			uni.showToast({
				title: '请输入手机号',
				icon: 'none',
				duration: 2000
			});
			return
		}
		// 需求描述
		if(formData.value.fields.indexOf('2')>-1&&baseFormData.value.requirement==undefined){
			uni.showToast({
				title: '请输入需求描述',
				icon: 'none',
				duration: 2000
			});
			return
		}
		
			
			
			api.miniappData(baseFormData.value).then((res)=>{
				baseFormData.value = []
				alertPayOk.value.open()
			})
		
	}
	function clickImg() {
		uni.previewImage({
			urls: formData.value.picArr,
			// current: 0,
			success: function(res) {
				console.log('success', res)
			},
			fail: function(res) {
				console.log('fail', res)
			},
			complete: function(res) {
				console.log('complete', res)
			}
		})
	}
</script>

<style scoped>
	button{    font-size: 32rpx;    background: linear-gradient(90deg, #00C176, #3ed89b);}
	.richContent{padding: 40rpx 40rpx 100rpx;
    line-height: 1.6;
    background: #fff;}
	.richContent2{padding: 0 0 40rpx;
    line-height: 1.6;
    background: #fff;}
	
	.graybg {
		background: #f7f8fa;
		height: 100vh;
		padding: 0 0 100rpx;
		width: 100vw;
		overflow: auto;
	}

	.whitebg {
		background: #fff;
		margin-top: 15rpx;
		border-radius: 20rpx;
		margin-bottom: 90rpx;
	}

	.payBtn {
		width: 750rpx;
		line-height: 90rpx;
		height: 120rpx;
		text-align: center;
		background: #ff8124;
		color: #ffffff;
		font-size: 36rpx;
		border-radius: 20rpx 20rpx 0px 0px;
		position: fixed;
		bottom: 0;
	}

	.uni-list-cell::after {
		display: none;
	}
	.formBox{    background: #fff;
    padding: 50rpx 40rpx;
    margin: 0 30rpx;
    border-radius: 20rpx;}
</style>