<template>
  <el-container class="main-container">
    <!-- 内部容器使用水平排列 -->
    <el-container class="horizontal-container">
      <!-- 左侧菜单栏 -->
      <el-aside width="200px" class="sidebar">
        <div class="title">
          <h4>邺城博物馆管理系统</h4>
        </div>
        <el-menu
          active-text-color="#0B7285"
          class="el-menu-vertical-demo"
          :default-active="$route.path"
          :unique-opened="true"
          text-color="#585858"
          :router="true"
          style="height: calc(100vh - 60px);"
        >
          <template v-for="menu in adminMenuList" :key="menu.label">
            <el-sub-menu v-if="menu.children && menu.children.length" :index="menu.label">
              <template #title>
                <el-icon><component :is="menu.icon" /></el-icon>
                <span>{{ menu.label }}</span>
              </template>
              <el-menu-item
                v-for="child in menu.children"
                :key="child.route"
                :index="child.route"
                :route="child.route"
              >
                <span>{{ child.label }}</span>
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item v-else :index="menu.route" :route="menu.route">
              <el-icon><component :is="menu.icon" /></el-icon>
              <span>{{ menu.label }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>

      <!-- 右侧内容区域 - 包含header和main -->
      <el-container class="right-content">
        <!-- 顶部header - 放在右侧内容区域的顶部 -->
        <el-header class="header">
          <div class="user">
            <div class="avator">
              <el-dropdown trigger="click">
                <div class="img">
                  <img style="width: 100%; height: 100%;" :src="getFilePrefix + avatar" alt="" />
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="handleUpdatePwd">修改密码</el-dropdown-item>
                    <el-dropdown-item @click="handleUserInfo">个人信息</el-dropdown-item>
                    <el-dropdown-item @click="handleLogout">
                      <span style="color: brown;">退出登录</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-header>

        <!-- 主内容区域 -->
        <el-main class="main-content">
          <el-card class="content-card">
            <RouterView />
          </el-card>
        </el-main>
      </el-container>
    </el-container>

    <!-- 个人中心对话框 -->
    <el-dialog title="修改密码" v-model="updatePwdOpen" width="400px" append-to-body>
      <el-form ref="updatePwdRef" :model="updatePwdForm" :rules="updatePwdRules" label-width="80px">
        <el-form-item label="旧密码" prop="oldPwd">
          <el-input type="password" v-model="updatePwdForm.oldPwd" placeholder="请输入旧密码" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input type="password" v-model="updatePwdForm.newPwd" placeholder="请输入新密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPwd">
          <el-input type="password" v-model="updatePwdForm.confirmPwd" placeholder="请输入确认密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitUpdatePwd">确 定</el-button>
          <el-button @click="handleCancelUpdatePwd">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>

<script setup>
import { ref, reactive, toRefs, getCurrentInstance } from 'vue'
import { DataAnalysis, Collection, Calendar, Message, Picture, User, School } from '@element-plus/icons-vue'
import { RouterView } from 'vue-router'
import { removeToken } from '@/utils/token'
import { updatePwd } from '@/api/sysUser';
import Cookies from 'js-cookie';

const avatar = ref(Cookies.get('avatar'))

const { proxy } = getCurrentInstance()

const adminMenuList = ref([
  { label: '数据统计', route: '/admin/statisticalAnalysis', icon: DataAnalysis },
  { label: '藏品管理', icon: Collection, children: [
    { label: '藏品', route: '/admin/relic' },
    { label: '藏品分类', route: '/admin/itemCategory' }
  ] },
  { label: '预约管理', icon: Calendar, children: [
    { label: '预约时段', route: '/admin/reservationTimeSlot' },
    { label: '预约明细', route: '/admin/reservation' }
  ] },
  { label: '公告管理', route: '/admin/announcement', icon: Message },
  { label: '轮播图管理', route: '/admin/carousel', icon: Picture },
  { label: '用户管理', route: '/admin/user', icon: User },
  { label: '博物馆信息管理', route: '/admin/museumIntro', icon: School }
])
// 自定义确认密码校验规则
const confirmPwdRule = (rule, value, callback) => {
  if (!value) {  // 如果确认密码为空
    callback(new Error('请输入确认密码'))
  } else if (updatePwdForm.value.newPwd !== value) {  // 如果新密码与确认密码不一致
    callback(new Error('两次输入的密码不一致'))
  } else {  // 校验通过
    callback()
  }
}

const updatePwdOpen = ref(false)
const data = reactive({
  updatePwdForm: {
    oldPwd: '',
    newPwd: '',
    confirmPwd: ''
  },
  updatePwdRules: {
    oldPwd: [
      { required: true, message: '请输入旧密码', trigger: 'blur' }
    ],
    newPwd: [
      { required: true, message: '请输入新密码', trigger: 'blur' }
    ],
    confirmPwd: [
      { required: true, validator: confirmPwdRule, trigger: 'blur' }
    ]
  }
})

const { updatePwdForm, updatePwdRules } = toRefs(data)

/** 修改密码操作 */
function handleUpdatePwd() {
  updatePwdOpen.value = true
}

/** 提交修改密码 */
function submitUpdatePwd() {
  proxy.$refs.updatePwdRef.validate((valid) => {
    if (valid) {
      updatePwd(updatePwdForm.value).then(res => {
        if (res.code == 200) {
          proxy.$message.success(res.msg)
          proxy.$refs.updatePwdRef.resetFields()
          updatePwdOpen.value = false
        } else {
          proxy.$message.error(res.msg)
        }
      })
    }
  })
}

/** 取消修改密码 */
function handleCancelUpdatePwd() {
  proxy.$refs.updatePwdRef.resetFields()
  updatePwdOpen.value = false
}

/** 个人信息操作 */
function handleUserInfo() {
  proxy.$router.push('/admin/userInfo')
}

/** 退出登录操作 */
function handleLogout() {
  console.log('退出登录')
  proxy.$confirm('确定要退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      console.log('确定退出')
      // 请求后端logout接口

      // 清除本地token
      removeToken()
      // 跳转到登录页
      proxy.$router.push('/login')
    })
    .catch(() => {
      console.log('取消退出')
    })
}

</script>

<style scoped>
/* 主容器设置为全屏高度 */
.main-container {
  height: 100vh;
  display: flex;
}

/* 水平容器 - 让侧边栏和右侧内容水平排列 */
.horizontal-container {
  display: flex;
  flex: 1;
  flex-direction: row;
}

/* 左侧导航栏样式 */
.sidebar {
  background-color: #fff;
  height: 100vh;
  flex-shrink: 0;
  border-right: 1px solid #ebebeb;
}

/* 标题样式 */
.title {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  padding-top: 20px;
  text-align: center;
}

.title span {
}

/* 菜单自适应高度 */
.sidebar .el-menu {
  height: 100%;
  border-right: none;
}

/* 右侧内容区域 - 包含header和main */
.right-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

/* 顶部header样式 */
.header {
  line-height: 60px;
  color: #000;
  font-size: 18px;
  height: 60px;
  flex-shrink: 0;
}

.header .user {
  float: right;
  margin-right: 10px;
}

.img {
  width: 40px;
  height: 40px;
  margin-top: 10px;
  background-color: #ffffff;
  border: 1px solid #b2b2b2;
  box-sizing: border-box;
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.3s;
}

.img:hover {
  cursor: pointer;
  box-shadow: 0px 0px 20px #ffffff;
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  background: #f2f2f2;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

.content-card {
  min-height: calc(100vh - 120px);
  height: auto; /* 固定高度，减去header和padding的高度 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 卡片内容区域样式 */
.content-card .el-card__body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

</style>
