<template>
	<cs-page title="编辑个人信息">
		<view class="container">
			<!-- 我的头像 -->
			<view class="section wd-flex wd-flex-row wd-justify-between wd-items-center">
				<text class="wd-font-800">我的头像</text>
				<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px">
					<u-avatar src="/static/images/avatar.jpg"></u-avatar>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- 真实姓名 -->
			<view class="section wd-flex wd-flex-row wd-justify-between wd-items-center">
				<text class="wd-font-800">真实姓名</text>
				<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px">
					<input class="wd-text-right" type="text" placeholder-class="txt" placeholder="请输入" v-model="form.realName" />
					<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon>
				</view>
			</view>
			<!-- 用户性别 -->
			<view class="section wd-flex wd-flex-row wd-justify-between wd-items-center">
				<text class="wd-font-800">用户性别</text>
				<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px">
					<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon>
				</view>
			</view>
			<!-- 手机号码 -->
			<view class="section wd-flex wd-flex-row wd-justify-between wd-items-center">
				<text class="wd-font-800">手机号码</text>
				<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px">
					<input class="wd-text-right" type="number" placeholder-class="txt" placeholder="请输入" v-model="form.mobile" />
					<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon>
				</view>
			</view>
			<!-- 所属部门 -->
			<view class="section wd-flex wd-flex-row wd-justify-between wd-items-center">
				<text class="wd-font-800">所属部门</text>
				<view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px">
					<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon>
				</view>
			</view>
			<button class="button">提交</button>
		</view>
	</cs-page>
</template>

<script>
export default {
	data() {
		return {
			form: {
				avatar: undefined,
				realName: undefined,
				mobile: undefined,
				department: undefined
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	padding: 10px;
	position: relative;
	.section {
		border-radius: $cs-border-radius;
		background: #fff;
		box-shadow: 0 0 4px 2px $cs-shadow-color;
		margin-bottom: $cs-gap;
		padding: 24px;
	}
	.button {
		background-color: $uni-color-primary;
		color: #fff;
		border-radius: 30px;
		position: fixed;
		bottom: 30px;
		right: 10px;
		left: 10px;
		height: 40px;
		line-height: 40px;
		box-sizing: border-box;
	}
}
</style>
