<template>
	<view class="contact-container">
		

		<!-- 编辑表单 -->
		<view class="edit-card">
			<view class="card-header">
				<u-icon name="edit-pen" size="20" color="#faad14"></u-icon>
				<text class="card-title">修改联系方式</text>
			</view>
			<view class="form-content">
				<view class="form-group">
					<text class="form-label">联系人姓名</text>
					<input class="form-input" v-model="kefuInfo.name" placeholder="请输入联系人姓名" type="text" />
				</view>
				<view class="form-group">
					<text class="form-label">联系电话</text>
					<input class="form-input" v-model="kefuInfo.phone" placeholder="请输入联系电话" type="number"
						maxlength="11" />
				</view>
				<button class="save-btn" @click="saveContact">保存修改</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { Service } from '@/Service/Service'
	import { userService } from '@/Service/swimming/userService'
	import { onLoad } from '@dcloudio/uni-app'

	let kefuInfo = ref<any>({})

	onLoad(() => {
		getData()
	})

	const getData = () => {
		userService.GetKefuInfo().then(res => {
			if (res.code == 0) {
				kefuInfo.value = res.data.kefuInfo
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	const saveContact = () => {
		if (!kefuInfo.value.name.trim()) {
			Service.Msg('请输入联系人姓名')
			return
		}
		if (!kefuInfo.value.phone.trim()) {
			Service.Msg('请输入联系电话')
			return
		}
		const phoneReg = /^1[3-9]\d{9}$|^400-\d{3}-\d{4}$|^\d{3,4}-\d{7,8}$/
		if (!phoneReg.test(kefuInfo.value.phone)) {
			Service.Msg('请输入有效的联系电话')
			return
		}
		userService.UpdateKefu(kefuInfo.value.phone, kefuInfo.value.name).then(res => {
			if (res.code == 0) {
				Service.Msg('修改成功!')
				getData()
			} else {
				Service.Msg(res.msg)
			}
		})

	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.contact-container {
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: 40rpx;
	}

	.contact-card,
	.edit-card {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 28rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	}

	.card-header {
		display: flex;
		align-items: center;
		gap: 10rpx;
		margin-bottom: 20rpx;

		.card-title {
			font-size: 32rpx;
			font-weight: 700;
			color: #333;
		}
	}

	.contact-info {
		background-color: #f8f9fa;
		border-radius: 16rpx;
		padding: 24rpx;

		.info-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 16rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.info-label {
				font-size: 28rpx;
				color: #666;
			}

			.info-value {
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
			}
		}
	}

	.form-content {
		.form-group {
			margin-bottom: 24rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.form-label {
				display: block;
				font-size: 28rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 12rpx;
			}

			.form-input {
				width: 100%;
				height: 88rpx;
				background-color: #f5f5f5;
				border-radius: 16rpx;
				padding: 0 24rpx;
				font-size: 28rpx;
				color: #333;
				transition: all 0.2s ease;

				&:focus {
					background-color: #fff;
					box-shadow: 0 0 0 4rpx rgba(24, 144, 255, 0.15);
				}
			}
		}

		.save-btn {
			width: 100%;
			height: 96rpx;
			background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
			border-radius: 20rpx;
			border: none;
			font-size: 32rpx;
			color: #fff;
			font-weight: 700;
			box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.4);
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.97);
				box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
			}
		}
	}
</style>