<template>
	<view>
		<touch-popup ref="popup" :backShow="true">
			<view class="bck">
				<view style="width: 100%;height: 15px;"></view>
				<scroll-view scroll-y>
					<view class="title center">
						联系我们
					</view>
					<view class="item">
						<view class="item-title">
							类型
						</view>
						<view class="item-input">
							商务合作
							<!-- <select :value="typeStr">
							    <option value="1">商务合作</option>
							    <option value="2">广告洽谈</option>
							</select> -->
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							联系人
						</view>
						<view class="item-input">
							<input type="text" v-model="lianxiren" placeholder="请输入联系人" />
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							联系方式
						</view>
						<view class="item-input">
							<input type="text" v-model="phone" placeholder="请输入联系方式" />
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							详细信息
						</view>
						<view class="item-input2">
							<textarea placeholder="请输入详细信息" name="details" maxlength="500" v-model="details"></textarea>
						</view>
					</view>
					<view class="button">
						<view class="submit" @click="submit">
							<text>{{isSave ? '当前内容已提交' : '提交信息'}}</text>
						</view>
					</view>
				</scroll-view>
				
			</view>
		</touch-popup>
	</view>
</template>
<script setup>
	const app = getApp()
	import { ref, defineExpose, computed } from 'vue'
	import touchPopup from '@/components/touch-popup/touch-popup'
	const popup = ref() // ref组件

	const isSave = ref(false)
	
	const typeStr = ref(1)
	const lianxiren = ref('') // 联系人
	const phone = ref('') // 联系方式
	const details = ref('') // 详细信息
	
	const submit = (e) => {
		let toast = ''
		if (!lianxiren.value) {
			toast = '请输入联系人'
		}
		if (!phone.value) {
			toast = '请输入联系方式'
		}
		if (toast != '') {
			uni.showToast({
				title: toast,
				icon: 'none'
			})
			return
		}
		if (isSave.value) {
			uni.showToast({
				title: '您的内容已提交，可以重新打开窗口再次提交新内容！',
				icon: 'none'
			})
			return
		}
		uni.showLoading()
		uni.request({
			url: app.globalData.requestUrl + '/api/contact/save',
			data: {
				type: typeStr.value,
				name: lianxiren.value,
				mobile: phone.value,
				content: details.value
			},
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			method: 'POST',
			success: (res) => {
				if (res.data.code === 200) {
					uni.showToast({
						title: '提交成功！',
						icon: 'none'
					})
					isSave.value = true
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			},
			complete() {
				uni.hideLoading()
			}
		})
		
	}
	
	const open = () => {
		isSave.value = false
		popup.value.open()
	}
	defineExpose({
		open
	}) // 暴露方法
</script>

<style scoped>
	.submit text {
		background: linear-gradient(180deg, #C2FF9A 0%, #41FEB6 116.67%);
		color: transparent;
		-webkit-background-clip: text;
	}
	.submit {
		font-size: 14px;
		display: flex;
		justify-content: center;
		padding: 0 15px;
		height: 44px;
		border-radius: 22px;
		align-items: center;
		background-color: #000;
		width: 260px;
	}
	.button {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 20px;
		
	}
	textarea {
		font-size: 14px;
		height: 100px;
		width: 100%;
	}
	.item-input2 {
		border-radius: 15px;
		border: 1px solid rgba(0,0,0,0.5);
		background: #FFFFFF;
		padding: 5px 15px;
		display: flex;
		align-items: center;
		
	}
	select {
		border: none;
		width: 100%;
	}
	input {
		font-size: 14px;
		width: 100%;
	}
	.item-input {
		height: 35px;
		border-radius: 30px;
		border: 1px solid rgba(0,0,0,0.5);
		background: #FFFFFF;
		padding: 5px 15px;
		display: flex;
		align-items: center;
	}
	.item-title {
		padding: 5px;
	}
	.item {
		display: flex;
		flex-direction: column;
		padding: 10px 30px;
	}
	scroll-view {
		height: calc(100% - 15px);
	}
	.title {
		padding: 15px;
	}
	.bck {
		height: 100%;
		background: linear-gradient(180deg, #FEF0A7 0%, #FFFFFF 68.42%);
	}
</style>