<template>
	<s-layout title="紧急联系人设置" class="contact-page">
		<view class="list-wrap">
			<view class="list-item">
				<text class="item-label">紧急联系人姓名</text>
				<!-- <text class="item-value">紧急联系人姓名</text> -->
				<view style="width:280rpx;">
					<up-input border="0" inputAlign="right" v-model="displayName" placeholder="紧急联系人" />
				</view>
			</view>

			<view class="list-item">
				<text class="item-label">联系电话</text>
				<view style="width:280rpx;">
					<up-input border="0" inputAlign="right" type="number" v-model="displayPhone" placeholder="联系电话" />
				</view>
			</view>
		</view>

		<su-fixed bottom placeholder bg="none">
			<view class="footer-box ss-p-20">
				<up-button type="primary" block @click="onSave">保存</up-button>
			</view>
		</su-fixed>
	</s-layout>
</template>

<script setup>
import { computed } from 'vue';
import sheep from '@/sheep';
import UserApi from '@/sheep/api/member/user';

const userInfo = computed(() => sheep.$store('user').userInfo || {});

const displayName = computed(() => {
	return userInfo.value.emergencyContactName || userInfo.value.emergencyContact?.name || '';
});

const displayPhone = computed(() => {
	return userInfo.value.emergencyContactPhone || userInfo.value.emergencyContact?.phone || '';
});

async function onSave() {
	// 直接刷新本地用户信息并返回（如果需要，可在此处额外校验或请求后端）
	await sheep.$store('user').updateUserData();
	sheep.$helper && sheep.$helper.toast && sheep.$helper.toast('保存成功');
	uni.navigateBack();
}
</script>

<style scoped>
.list-wrap {
	background: #fff;
	margin-top: 10rpx;
}
.list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 28rpx 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}
.item-label {
	color: #333;
	font-size: 28rpx;
}
.item-value {
	color: #999;
	font-size: 28rpx;
}
.footer-box {
	background: transparent;
}
</style>
