<template>
	<el-main>
		<el-row :gutter="20">
			<el-col :lg="8" :xs="24" :sm="24" :md="24">
				<el-card shadow="never" class="pi-left">
					<div class="head">
						<el-avatar :src="userInfo.avatar" :size="64">{{ nicknameF }}</el-avatar>
						<p style="font-size: 24px;font-weight: bold;margin: 8px;">
							{{ userInfo.nickname || userInfo.username }}</p>
						<p style="font-size: 14px; color: #888888;">{{ userInfo.bio }}</p>
					</div>
					<div class="down">
						<div class="item">
							<!--邮箱-->
							<el-icon size="16">
								<el-icon-message/>
							</el-icon>
							<el-text>{{ userInfo.email || "保密" }}</el-text>
						</div>
						<div class="item">
							<!--电话-->
							<el-icon size="16">
								<el-icon-iphone/>
							</el-icon>
							<el-text>{{ userInfo.phone || "保密" }}</el-text>
						</div>
						<div class="item">
							<!--岗位-->
							<el-icon size="15">
								<pi-icon-post/>
							</el-icon>
							<el-text>{{ userInfo.posts.map(item => item.post_name)?.join(" && ") }}</el-text>
						</div>
						<div class="item">
							<!--生日-->
							<el-icon size="16">
								<component :is="'pi-icon-birthday'"/>
							</el-icon>
							<el-text>{{ userInfo.birthday || "保密" }}</el-text>
						</div>
						<div class="item">
							<!--性别-->
							<el-icon size="16">
								<component :is="'pi-icon-sex'"/>
							</el-icon>
							<el-text>{{ sex }}</el-text>
						</div>
						<div class="item">
							<!--部门-->
							<el-icon size="16">
								<component :is="'pi-icon-dept'"/>
							</el-icon>
							<el-text>{{ userInfo.dept?.join(" - ") }}</el-text>
						</div>
						<el-divider></el-divider>
						<!--标签-->
						<div class="tags">
							<el-tag v-for="tag in tags" :key="tag" closable @close="removeTag(tag)">{{ tag }}</el-tag>
							<el-input
								v-if="tagVisible"
								v-model="tagInput"
								ref="tagRef"
								size="small"
								@keyup.enter="saveTag"
								@blur="saveTag"
								style="width: 120px; margin-bottom: 10px;"
							/>
							<el-button type="primary" plain v-else size="small" @click="tagShow"
									   icon="el-icon-plus" style="margin-bottom: 10px;"></el-button>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :lg="16" :xs="24" :sm="24" :md="24">
				<el-card shadow="never" class="pi-right">
					<el-tabs>
						<el-tab-pane label="基本信息" name="0">
							<el-form ref="infoRef" :model="form" style="max-width: 500px;" label-width="120px">
								<el-form-item label="头像" prop="avatar">
									<pi-upload v-model="form.avatar" title="头像" :cropper="true" :compress="1"
											   :aspectRatio="1/1"></pi-upload>
								</el-form-item>
								<el-form-item label="昵称" prop="nickname">
									<el-input v-model="form.nickname"></el-input>
								</el-form-item>
								<el-form-item label="邮箱" prop="email">
									<el-input v-model="form.email"></el-input>
								</el-form-item>
								<el-form-item label="电话" prop="phone">
									<el-input v-model="form.phone"></el-input>
								</el-form-item>
								<el-form-item label="性别" prop="sex">
									<el-select v-model="form.sex">
										<el-option label="保密" :value="0" disabled/>
										<el-option label="男" :value="1"/>
										<el-option label="女" :value="2"/>
									</el-select>
								</el-form-item>
								<el-form-item label="生日" prop="birthday">
									<el-date-picker v-model="form.birthday" type="date" style="width: 100%;"
													value-format="YYYY-MM-DD"/>
								</el-form-item>
								<el-form-item label="介绍" prop="bio">
									<el-input v-model="form.bio" type="textarea"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" :loading="isSaveing" @click="saveInfo">保 存</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>
						<el-tab-pane label="修改密码" name="1">
							<el-alert title="密码更新成功后，您将被重定向到登录页面，您可以使用新密码重新登录。"
									  type="info" show-icon style="margin-bottom: 15px;"/>
							<el-form ref="passRef" :model="form2" :rules="rules" label-width="120px"
									 style="max-width: 500px;">
								<el-form-item label="当前密码" prop="old_password">
									<el-input v-model="form2.old_password" type="password" show-password
											  placeholder="请输入当前密码"></el-input>
									<div class="el-form-item-msg">必须提供当前登录用户密码才能进行更改</div>
								</el-form-item>
								<el-form-item label="新密码" prop="new_password">
									<el-input v-model="form2.new_password" type="password" show-password
											  placeholder="请输入新密码"></el-input>
									<pi-password-strength v-model="form2.new_password"></pi-password-strength>
									<div class="el-form-item-msg">请输入包含英文、数字的6位以上密码</div>
								</el-form-item>
								<el-form-item label="确认新密码" prop="confirm_password">
									<el-input v-model="form2.confirm_password" type="password" show-password
											  placeholder="请再次输入新密码"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button :loading="isSaveing" type="primary" @click="savePass">保存密码
									</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>
						<el-tab-pane label="登录日志" name="2">
							<pi-table :api="api.auth.loginLog" stripe hide-act :page-size="10">
								<el-table-column label="#" type="index" width="50"></el-table-column>
								<el-table-column label="操作" prop="title"></el-table-column>
								<el-table-column label="状态" prop="code">
									<template #default="scope">
										{{ scope.row.code == 0 ? '成功' : '失败' }}
									</template>
								</el-table-column>
								<el-table-column label="IP" prop="ip"></el-table-column>
								<el-table-column label="UA" prop="ua">
									<template #default="scope">
										{{ tools.getBrowser(scope.row.ua) }}
									</template>
								</el-table-column>
								<el-table-column label="时间" prop="create_time"></el-table-column>
							</pi-table>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script setup>
import tools from "@/utils/tools"
import api from "@/api/index";
import {ref, onMounted, nextTick, getCurrentInstance, computed} from "vue";
import piPasswordStrength from '@/components/piPasswordStrength'

defineOptions({
	name: "systemUser"
})

const {proxy} = getCurrentInstance()
let userInfo = ref(tools.data.get("USER_INFO"));
const passRef = ref(null)

let nickname = userInfo.value.nickname || userInfo.value.username;
let nicknameF = nickname.substring(0, 1);
let tagVisible = ref(false)
let tagInput = ref("")
let tags = ref()
const tagRef = ref(null)
const form = ref({})
const isSaveing = ref(false)
const form2 = ref({
	old_password: "",
	new_password: "",
	confirm_password: ""
})
const rules = ref({
	old_password: [
		{required: true, message: '请输入当前密码'}
	],
	new_password: [
		{required: true, message: '请输入新密码'},
		{min: 6, max: 30, message: '密码长度在6-30位之间'},
		{
			validator: (rule, value, callback) => {
				if (value === form2.value.old_password) {
					callback(new Error('新旧密码不能一致'));
				} else {
					callback();
				}
			}
		}
	],
	confirm_password: [
		{required: true, message: '请再次输入新密码'},
		{min: 6, max: 30, message: '密码长度在6-30位之间'},
		{
			validator: (rule, value, callback) => {
				if (value !== form2.value.new_password) {
					callback(new Error('两次输入密码不一致'));
				} else {
					callback();
				}
			}
		}
	]
})

onMounted(() => {
	loadUser()
})

const sex = computed(() => {
	if (userInfo.value.sex == 1) {
		return '男'
	} else if (userInfo.value.sex == 2) {
		return '女'
	} else {
		return '保密'
	}
})

async function loadUser() {
	const res = await api.auth.info()
	userInfo.value = res.data
	tags.value = userInfo.value.tags ? userInfo.value.tags?.split(",") : []
	Object.assign(form.value, res.data)
}

async function saveTag() {
	tagVisible.value = false
	if (tagInput.value) {
		tags.value.push(tagInput.value)
		tagInput.value = ""
		await saveTags()
	}
}

async function removeTag(tag) {
	tags.value.splice(tags.value.indexOf(tag), 1)
	await saveTags()
}

function tagShow() {
	tagVisible.value = true
	nextTick(() => {
		tagRef.value.input?.focus()
	})
}

async function saveTags() {
	const res = await api.auth.saveTag({tags: tags.value?.toString()})
	proxy.$message.success(res.msg)
}

async function saveInfo() {
	isSaveing.value = true
	const res = await api.auth.saveInfo(form.value)
	proxy.$message.success(res.msg)
	Object.assign(userInfo.value, form.value)
	tools.data.set("USER_INFO", userInfo.value)
	isSaveing.value = false
}

async function savePass() {
	const validate = await passRef.value.validate().catch(() => {
	});
	if (!validate) {
		return false
	}
	const res = await api.auth.savePass(form2.value)
	proxy.$message.success(res.msg)
}
</script>

<style lang="scss" scoped>
.pi-left {
	padding: 30px 60px;
}

.pi-left .head {
	text-align: center;
}

.pi-left .down {
	margin: 30px 0
}

.pi-left .down .item {
	margin-top: 10px;
	display: flex;
	align-items: center
}

.pi-left .down .item .el-icon {
	margin-right: 10px;
}

.pi-left .down .tags .el-tag {
	margin-bottom: 10px;
}

.pi-left .down .tags .el-tag + .el-tag {
	margin-right: 10px;
	margin-left: 0;
}

.pi-left .down .tags span:first-of-type {
	margin-right: 10px;
}

.pi-left .down .tags span:last-of-type {
	margin-right: 10px;
}
</style>
