<template>
	<div>
		<el-row class="top">
			<el-col :span="6" class="col">个人信息</el-col>
			<el-col :span="6" class="col-exit" @click="userStore_.logoutUser">注销账号</el-col>
		</el-row>
		<el-row class="body">
			<el-image class="user-img" src="/user.png"></el-image>
			<el-text class="phone">{{ userInfo.loginId }}</el-text>
			<el-form label-width="auto" style="max-width: 600px;">
				<el-form-item label="性别">
					<el-select v-model="userInfo.sex" placeholder="男">
						<el-option>
							<el-radio-group v-model="userInfo.sex">
								<el-radio value="男" size="large">男</el-radio>
								<el-radio value="女" size="large">女</el-radio>
							</el-radio-group>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="生日">
					<el-date-picker v-model="userInfo.brithday" type="date" placeholder="Pick a day"
						format="YYYY-MM-DD" />
				</el-form-item>
				<el-form-item label="地区">
					<el-input v-model="userInfo.region"></el-input>
				</el-form-item>
				<el-form-item label="绑定手机">
					<el-input v-model="userInfo.number"></el-input>
				</el-form-item>
				<el-button class="btn" type="primary" @click="updateUserInfo">确定</el-button>
			</el-form>
		</el-row>
	</div>
</template>

<script setup>
import { userStore } from '../../store';
import { reactive } from 'vue';
const userStore_ = userStore()
const userInfo = reactive({ ...userStore_.getUserInfo })
function updateUserInfo() {
	console.log(userInfo)
	//确认修改信息
	userStore_.updateUserInfo(userInfo)
}

</script>

<style>
.top {
	background-color: white;
	height: 50px;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	border-radius: 10px;
}

.col {
	font-size: 20px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	padding-left: 20px;
}

.col-exit {
	font-size: 12px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	padding-left: 20px;
}

.body {
	background-color: white;
	margin-top: 20px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: 0px;
}

.user-img {
	width: 100px;
	height: 100px;

}

.phone {
	margin-top: 20px;
	font-size: 14px;
	margin-bottom: 20px;
}
</style>