<template>
	<div class="page">
		<div class="container">
			<a-card class="content-card">
				<div class="card-box">
					<div class="card-left">
						<a-avatar v-if="userStore.avatar" :size="100" :src="userStore.avatar" />
						<UserOutlined v-else />
						<div class="account-name">
							<h3 class="hello">您好!</h3>
							<h4 class="name">{{ user.userName }}</h4>
							<span class="account">账号：{{ user.userAccount || '暂无设置' }}</span>
						</div>
					</div>
					<div class="line"></div>
					<div class="card-right">
						<div class="email-box">
							<span class="sex"
								>性别：<b>{{ gender }}</b></span
							>
							<span class="email"
								>邮箱：<b>{{ userInfo.email || '暂无设置' }}</b></span
							>
							<span class="wx"
								>微信：<b>{{ userInfo.wechat || '暂无设置' }}</b></span
							>
						</div>
						<div class="phone-id">
							<span class="phone"
								>手机号：<b>{{ userInfo.phone || '暂无设置' }}</b></span
							>
							<span class="id"
								>身份证：<b>{{ userInfo.idCard || '暂无设置' }}</b></span
							>
							<span class="post"
								>职&nbsp;&nbsp;&nbsp;&nbsp;务：
								<b>
									{{ userInfo.rfPositionDictName || '暂无设置' }}
								</b>
							</span>
						</div>
					</div>
				</div>
				<div class="main-button">
					<a-button type="primary" @click="toUpdate()">修改信息</a-button>
				</div>
			</a-card>
			<div>
				<a-divider orientation="left">登录日志</a-divider>
			</div>
			<BaseTable ref="baseTable" :action="action" :columns="columns" />
		</div>
	</div>
</template>

<script setup lang="ts">
import BaseTable from '../../../components/table'
import columns from './columns'
import requestMethod from '../../../api/account/information'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { computed } from 'vue'
import { useUserStore } from '../../../store/user'
import { UserOutlined } from '@ant-design/icons-vue'
import { AccountUser, AccountUserInfo } from '../../../entity/account/account-user'

const action = ref(requestMethod.page)

// 获取用户缓存信息
const userStore = useUserStore()
const user = computed<AccountUser | undefined>(() => userStore.user)
const userInfo = computed<AccountUserInfo | undefined>(() => userStore.info)
const gender = computed<string>(() => ['保密', '男', '女'][userInfo?.value?.sex || 0])

const router = useRouter()

const toUpdate = () => {
	router.push('/account/information/detail')
}
</script>
<style lang="scss" scoped>
.page {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;

	.container {
		background: rgba(255, 255, 255, 1);
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		box-shadow: 0 6px 7px 0 rgba(32, 32, 32, 0.09);
		border-radius: 8px;
		padding: 2rem 2rem;

		.content-card {
			width: 100%;
			padding: 3.2px;
			position: relative;

			.card-box {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.card-left {
					height: 100%;
					display: flex;
					justify-content: space-evenly;
					align-items: flex-start;

					img {
						width: 100%;
						height: auto;
					}

					.account-name {
						width: calc(100% - 110px);
						height: 100%;
						display: flex;
						margin-left: 15px;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-start;

						.hello {
							font-size: 1rem;
							color: #0197ff;
						}

						.name {
							font-size: 1rem;
							font-weight: 600;
							color: #000000;
						}

						.account {
							min-width: 120px;
							color: #333333;
						}
					}
				}

				.line {
					height: 100px;
					color: #000000;
					border-left: #e3e3e5 1px solid;
					margin-left: 1.25rem;
				}

				.card-right {
					width: 100%;
					height: 100px;
					display: flex;
					justify-content: space-around;

					.email-box {
						color: #000000;
						height: 100%;
						padding-left: 1.09rem;
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						flex-direction: column;

						.email {
							min-width: 190px;
						}
					}

					.phone-id {
						color: #000000;
						height: 100%;
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						flex-direction: column;

						.id {
							min-width: 210px;
						}
					}
				}
			}
		}

		.main-button {
			display: flex;
			justify-content: flex-end;
		}
	}
}
</style>
