<template>
  <el-container>
    <el-header class="top-header">
      <div class="header-left">
        <div class="logo">邺城博物馆</div>
      </div>
      <div class="header-center">
        <el-menu
          mode="horizontal"
          :default-active="$route.path"
          class="nav-menu"
          :router="true"
          background-color="#717171"
        >
          <template v-for="menu in touristMenuList" :key="menu.route">
            <el-menu-item :index="menu.route" :route="menu.route">{{ menu.label }}</el-menu-item>
          </template>
        </el-menu>
      </div>
      <div class="header-right">
        <div class="user" v-if="isLogged">
          <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="handleMyReverse">我的预约</el-dropdown-item>
                  <el-dropdown-item @click="handleMyCollection">我的收藏</el-dropdown-item>
                  <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>
        <div class="login-btn" v-else>
          <el-button type="text" @click="goLogin">登录</el-button>
        </div>
      </div>
    </el-header>
    <el-main>
      <RouterView />
    </el-main>
    <el-footer class="site-footer">
      <div class="footer-text">© {{ year }} 邺城博物馆 • 欢迎参观</div>
    </el-footer>
  </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, watch } from 'vue'
import { RouterView } from 'vue-router'
import { removeToken } from '@/utils/token'
import { updatePwd } from '@/api/sysUser';
import Cookies from 'js-cookie';
import { House, Collection, Calendar, Message, Star, User } from '@element-plus/icons-vue'

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

const { proxy } = getCurrentInstance()
const getFilePrefix = proxy.getFilePrefix
const year = new Date().getFullYear()
const isLogged = ref(!!Cookies.get('role'))

const touristMenuList = ref([
  { label: '首页', route: '/tourist/home', icon: House },
  { label: '藏品', route: '/tourist/relic', icon: Collection },
  { label: '预约', route: '/tourist/reservation', icon: Calendar },
  { label: '公告', route: '/tourist/announcement', icon: Message },
  // { label: '关于', route: '/tourist/userInfo', icon: User }
])

// 自定义确认密码校验规则
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 handleMyReverse() {
  proxy.$router.push('/tourist/myReservation')
}

/** 我的收藏操作 */
function handleMyCollection() {
  proxy.$router.push('/tourist/myRelicCollection')
}


/** 修改密码操作 */
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('/tourist/userInfo')
}

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

    // 清除本地token
    removeToken()
    Cookies.remove('role')
    Cookies.remove('avatar')
    Cookies.remove('username')
    Cookies.remove('nickname')
    isLogged.value = false
    avatar.value = ''
    // 跳转到登录页
    proxy.$router.push('/login')
  })
  .catch(() => {
    console.log('取消退出')
  })
}

function goLogin() {
  proxy.$router.push('/login')
}

watch(() => proxy.$route.fullPath, () => {
  isLogged.value = !!Cookies.get('role')
})

</script>

<style scoped>
.top-header {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #1f1f1f;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
.header-left { flex: 0 0 120px; }
.logo { font-size: 18px; font-weight: 700; letter-spacing: 2px; }
.header-center { flex: 1 1 70%; display: flex; justify-content: center; }
.header-right { flex: 0 0 80px; display: flex; align-items: center; justify-content: flex-end; }
.nav-menu { background: transparent; border-bottom: none; }
:deep(.nav-menu .el-menu-item) { color: #eaeaea; }
:deep(.nav-menu .el-menu-item.is-active) { color: #ffd04b; }
:deep(.nav-menu .el-menu-item:hover) { background: transparent; color: #ffffff; }

:deep(.nav-menu) { width: 100%; justify-content: center; }
:deep(.nav-menu .el-menu-item) { padding: 0 14px; min-width: auto; }
:deep(.nav-menu .el-menu-item:last-child) { display: inline-flex !important; }

:deep(.nav-menu .el-menu-item) { width: 150px; }

.top-header .user .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;
}

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

.el-main {
  background: #f2f2f2;
  min-height: calc(100vh - 54px);
  padding: 0;
  margin-top: 60px;
}

.site-footer {
  height: 54px;
  background: #1a1a1a;
  color: #cfcfcf;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #2a2a2a;
}
.footer-text { font-size: 13px; letter-spacing: 1px; }
</style>
