<template>
	<div class="page">
		<div class="container">
			<div class="head">
				<div class="head-left">
					<a-avatar v-if="userStore.avatar" :size="100" :src="userStore.avatar" />
					<UserOutlined v-else />
					<BaseUpload
						:showUploadList="false"
						action="/api/logFile/upload"
						btn-text="更改头像"
						btn-type="primary"
						class="BaseUpload"
						text-color="#fff"
						upload-list-type="text"
						@upload-success="handleUpload"
					/>
				</div>
				<div class="head-right">
					<h3 class="username">{{ user.userName }}</h3>
					<div class="account">账号：{{ user.userAccount || '暂无' }}</div>
					<div class="end-time">注册时间：{{ user.createTime || '暂无' }}</div>
					<div class="login-time">最后登录：{{ user.lastLoginTime || '暂无' }}</div>
				</div>
			</div>
			<div class="content">
				<a-form :label-col="{ span: 7 }" :model="formState" :rules="rules" autocomplete="off" name="basic" @finish="onFinish">
					<a-form-item class="form-item" label="职务">暂无</a-form-item>
					<a-form-item class="form-item" label="所属角色">暂无</a-form-item>
					<a-form-item class="form-item" label="邮箱" name="email">
						<a-input v-model:value="formState.email" class="item" />
					</a-form-item>
					<a-form-item class="form-item" label="微信号" name="wechat">
						<a-input v-model:value="formState.wechat" class="item" />
					</a-form-item>
					<a-form-item class="form-item" label="QQ号" name="qq">
						<a-input v-model:value="formState.qq" class="item" />
					</a-form-item>
					<a-form-item class="form-item" label="手机号" name="phone">
						<a-input v-model:value="formState.phone" class="item" />
					</a-form-item>
					<a-form-item class="form-item" label="身份证" name="idCard">
						<a-input v-model:value="formState.idCard" class="item" />
					</a-form-item>
					<a-form-item class="form-item" label="性别" name="sex">
						<a-radio-group v-model:value="formState.sex">
							<a-radio :value="0">保密</a-radio>
							<a-radio :value="1">男</a-radio>
							<a-radio :value="2">女</a-radio>
						</a-radio-group>
					</a-form-item>
					<a-form-item class="form-item" label="密码" name="oldPass">
						******
						<a-button class="uploadButton" ghost type="primary" @click="useManageMethod.handleUpdate"> 修改 </a-button>
					</a-form-item>
					<a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="form-item">
						<a-button html-type="submit" type="primary">立即提交</a-button>
						<a-button style="margin-left: 1.25rem" type="primary" @click="toInfo()">返回</a-button>
					</a-form-item>
				</a-form>
			</div>
		</div>
		<a-drawer
			:closable="true"
			:maskClosable="false"
			:title="update.title"
			:visible="update.visible"
			destroyOnClose
			placement="right"
			width="40%"
			@close="update.visible = false"
		>
			<Upload @cancel="update.visible = false" @refresh="useManageMethod.refresh()" />
		</a-drawer>
	</div>
</template>

<script lang="ts" setup>
import { messageMethod } from '../../../utils/message-util'
import BaseUpload from '../../../components/BaseUpload.vue'
import { computed, defineAsyncComponent, onMounted, reactive } from 'vue'
import { manageMethod } from '../../../components/form/method'
import requestMethod from '../../../api/account/information'
import { QueryObjectType } from '../../../http/request-model'
import { useRouter } from 'vue-router'
import { BaseUtil } from '../../../utils/base-util'
import { useUserStore } from '../../../store/user'
import { AccountUser, AccountUserInfo } from '../../../entity/account/account-user'
import { UploadData } from '../../../entity/system/upload'
import { ResultModel } from '../../../http/result-model'
import { UserOutlined } from '@ant-design/icons-vue'
import { isIdCard, isPhone } from '../../../utils/verification-util'

// 获取用户缓存信息
const userStore = useUserStore()
const user = computed<AccountUser | undefined>(() => userStore.user)

// 引入修改组件
const Upload = defineAsyncComponent(() => import('./UpdatePassword.vue'))

const router = useRouter()
// 页面跳转
const toInfo = () => {
	router.push('/account/information')
}

const rules = {
	email: [{ required: true, message: '请输入正确的邮箱' }],
	phone: [
		{
			validator: (rule: string, value: string) => {
				if (isPhone(value)) {
					return Promise.reject(new Error('手机号格式错误'))
				} else {
					return Promise.resolve()
				}
			},
			required: true
		}
	],
	idCard: [
		{
			validator: (rule: string, value: string) => {
				if (isIdCard(value)) {
					return Promise.reject(new Error('身份证格式错误'))
				} else {
					return Promise.resolve()
				}
			},
			required: true
		}
	]
}

// 实例化表单
const formState = reactive<Partial<AccountUserInfo>>({
	userAccount: '',
	userName: ''
})

// 实例化
const useManageMethod = manageMethod<AccountUser>()
const update = useManageMethod.update

// 上传成功的回调
const handleUpload = (file: ResultModel<UploadData>) => {
	formState.headPath = BaseUtil.getUploadPath(file.data.uploadPath)
	formState.fkHeadId = file.data.id
	userStore.setAvatar(file.data.uploadPath)
	messageMethod.success('上传成功')
}

// 获取用户信息
onMounted(async () => {
	const { data } = await requestMethod.getMyUser()
	Object.assign(formState, data)
})

// 提交表单请求
const onFinish = async (params: AccountUserInfo) => {
	params.id = formState.id ?? ''

	if (formState.headPath) {
		params.headPath = formState.headPath
	}
	const data = {
		...(params as unknown as QueryObjectType),
		version: formState.version || 0
	}
	const resultModel = await requestMethod.updateUser({ ...data })
	messageMethod.success(resultModel.message)
}
</script>

<style lang="scss" scoped>
.page {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;

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

		.head {
			flex: 0 0 20%;
			width: 100%;
			display: flex;
			justify-content: center;

			.head-left {
				flex: 0 0 35%;
				display: flex;
				flex-direction: column;
				align-items: center;

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

				.BaseUpload {
					padding: 0.625rem 0 0 0;
				}
			}

			.head-right {
				flex: 0 0 40%;
				display: flex;
				flex-direction: column;

				.username {
					font-weight: 600;
					margin-bottom: 1.25rem;
				}

				.account {
					font-size: 0.75rem;
				}

				.end-time {
					font-size: 0.75rem;
				}

				.login-time {
					font-size: 0.75rem;
				}
			}
		}

		.content {
			flex: 0 0 80%;
			width: 100%;
			padding: 1rem 0 0 0;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.form-item {
				margin: 0;
				padding: 0 0 1.5rem 0;

				.item {
					width: 33.75rem;
				}
			}

			.uploadButton {
				margin-left: 1.25rem;
			}
		}
	}
}
</style>
