<template>
	<view>
		<touch-popup ref="popup" @close="close" background="linear-gradient(180deg, #FEF0A7 0%, #FFFFFF 68.42%)" :backShow="true">
			<view class="top">
				<view @click="closeCurPage" hover-class="disable" :hover-start-time="0" :hover-stay-time="50">
					取消
				</view>
				<view style="font-size: 18px;font-weight: bold;text-align: center;">
					修改名称
				</view>
				<view @click="save" :class="{'disable': !inputVerify}" hover-class="disable" :hover-start-time="0" :hover-stay-time="50">
					保存
				</view>
			</view>
			<view class="item">
				<view class="item-title">
					三天内可修改一次名字
				</view>
				<view class="item-input">
					<!-- #ifdef H5 -->
					<input type="text" v-model="input" @input="inputEvent" maxlength="12" placeholder-class="input-class" placeholder="请输入联系人" />
					<view class="">
						{{input.length}}/12
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<input type="nickname" v-model="input" @change="inputEvent2" @input="inputEvent" maxlength="12" placeholder-class="input-class" placeholder="请输入联系人" />
					<view class="">
						{{input.length}}/12
					</view>
					<!-- #endif -->
				</view>
				<view class="item-title" style="color: #00000080;" :class="{'hint': !inputVerify}">
					请输入2-12个字符
				</view>
			</view>
			
		</touch-popup>
	</view>
</template>

<script setup>
	const app = getApp()
	import { ref, getCurrentInstance, defineExpose } from 'vue'
	const {proxy} = getCurrentInstance()
	const popup = ref() // ref组件
	
	const input = ref('')
	const inputVerify = ref(true)
	const isSave = ref(false)
	
	const save = () => {
		if (!inputVerify.value) return
		if (input.value.length < 2) {
			inputVerify.value = false
			return
		}
		uni.request({
			url: app.globalData.requestUrl + '/api/user/save/nickname',
			data: {
				nickname: input.value
			},
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			method: 'POST',
			success(res) {
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				})
				if (res.data.code === 200) {
					isSave.value = true
				}
			}
		})
	}
	// #ifdef MP-WEIXIN
	const inputEvent2 = (e) => {
		input.value = e.detail.value;
	}
	// #endif
	const inputEvent = () => {
		if (input.value.length >= 2 && !inputVerify.value) {
			inputVerify.value = true
		}
	}
	const closeCurPage = () => {
		popup.value.close()
	}
	const close = () => {
		proxy.$emit('closeEdit', isSave.value)
	}
	const open = () => {
		isSave.value = false
		popup.value.open()
	}
	defineExpose({
		open
	}) // 暴露方法
</script>

<style scoped>
	.hint {
		color: #EE3A3A !important;
	}
	.top view {
			flex: 1;
		}
	.top view:first-child {
		font-family: Noto Sans S Chinese;
		font-size: 16px;
		font-weight: 500;
		line-height: 24px;
		color: #3C3C3C;
	}
	.top view:last-child {
		display: flex;
		justify-content: flex-end;
		color: #EE3A3A;
	}
	.disable {
		opacity: .5;
		}
	.top {
		display: flex;
		padding: 30px 15px 15px 15px;
		
	}
	.item-input select {
			border: none;
			width: 100%;
		}
	.item-input input {
			width: calc(100% - 60px - 30px);
		}
	.item-input view {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			color: #00000080;
		}
	.item-input {
		height: 38px;
		border-radius: 12px;
		border: 1px solid rgba(0,0,0,0.5);
		background: #FFFFFF;
		padding: 5px 15px;
		display: flex;
		align-items: center;
		font-family: Noto Sans S Chinese;
		font-size: 14px;
		font-weight: 400;
		line-height: 21px;
	}
	.input-class {
		font-family: Noto Sans S Chinese;
		font-size: 14px;
		font-weight: 400;
		line-height: 21px;
		color: #00000080;
	}
	.item-title {
		padding: 5px;
		font-family: Noto Sans S Chinese;
		font-size: 12px;
		font-weight: 400;
		line-height: 18px;
	}
	.item {
		display: flex;
		flex-direction: column;
		padding: 15px;
	}
</style>