<template>
  <div class="head_content">
    <div class="head_content_left">
      <img :src="defaultIcon" alt="">
      <span class="big_head">智能教学评价系统</span>
      <!-- <div class="small_head">大数据精准教学平台</div> -->
    </div>

    <ul class="horizontal_nav" v-if="horizontalNavList?.length > 0">
      <li v-for="navItm in horizontalNavList" @click="router.push(navItm.route)" 
          :class="{active:route.path == navItm.route || navItm.childrenRoute?.includes(route.path)}" >
        {{ navItm.title }}
      </li>
    </ul>


    <div v-if="showLogoutMenu" class="head_content_right">
      <el-dropdown trigger="click" @command="UserCommand" placement="bottom-end">
        <span class="userName">
          {{userInfo?.schoolName}}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <!-- <el-dropdown-item command="setPassWord">修改密码</el-dropdown-item> -->
            <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>

  <div class="page_dialog">
    <el-dialog v-model="dialogShow" title="修改密码" width="450px">
      <el-form
        :model="editPassWordData"
        label-width="auto"
        :rules="editPassWordDataRules"
        ref="editPassWordForm"
      >
        <el-form-item label="原密码:" prop="passWord">
          <el-input v-model="editPassWordData.passWord" type="password" show-password placeholder="请输入原密码" />
        </el-form-item>
        <el-form-item label="新密码:" prop="newPassWord">
          <el-input v-model="editPassWordData.newPassWord" type="password" show-password placeholder="请输入新密码" />
        </el-form-item>
        <el-form-item label="确认密码:" prop="confirmNewPassWord">
          <el-input v-model="editPassWordData.confirmNewPassWord" type="password" show-password placeholder="请输入确认新密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button class="button_border_gray cancel" @click="dialogShow = false">取 消</el-button>
        <el-button class="button_background" :loading="submitLoading" @click="confirmPassWord(editPassWordForm)">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Header'
}
</script>
<script lang="ts" setup>
import router from '@/router'
import { useRoute } from 'vue-router'
import { ArrowDown } from '@element-plus/icons-vue'
import { ref, reactive, computed } from 'vue'
import {loginOut} from '@/api/login.ts'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import defaultIcon from '@/assets/school/default_logo.svg'

const route = useRoute()


interface NavItm {
  title:String,
  route:String,
  childrenRoute?:Array<NavItm>
}

const props = defineProps({
  horizontalNavList:{
    type:Array<NavItm>,
    default:()=>[]
  }
})

// 跳转登录页
const GoToLogin = ()=>{
  // router.push('/login')
  window.location.href = '/'
}

const userInfo = computed(() => {
  const user = localStorage.getItem('userInfo')
  if (user) {
    return JSON.parse(user)
  }
  return null
})

// 是否展示 退出按钮
const showLogoutMenu = computed(()=>{
  return !(route.path == '/main' || route.path == '/main')
})

const dialogShow = ref(false)
interface EditPassWordData {
  passWord: string
  newPassWord: string
  confirmNewPassWord: string
}
const editPassWordData = reactive<EditPassWordData>({
  passWord: '',
  newPassWord: '',
  confirmNewPassWord: ''
}) // 修改密码弹窗数据

const editPassWordForm = ref<FormInstance>()
const editPassWordDataRules = reactive<FormRules<EditPassWordData>>({
  passWord: [
    { required: true, message: '请输入旧密码', trigger: 'blur' }
  ],
  newPassWord: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
  ],
  confirmNewPassWord: [
    { required: true, message: '请输入确认新密码', trigger: 'blur' }
  ]
})
const UserCommand = (command: string) => {
  console.log(command)
  if(command == 'setPassWord') {
    setPassWord()
  }else if(command == 'loginOut') {
    loginOutFn()
  }
}
// 打开修改密码弹窗
const setPassWord = () => {
  dialogShow.value = true
}
// 退出登录
const loginOutFn = async () => {
  console.log(userInfo.value.username)
  const res = await loginOut(userInfo.value.userid)
  if(res?.code == 200) {
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    GoToLogin()
  }else {
    ElMessage.error(res?.msg)
  }
}
const submitLoading = ref(false)
// 修改密码提交
const confirmPassWord = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async(valid) => {
    if (valid) {
      submitLoading.value = true
      try {
        const res = await changePassWord({
          oldPassword: editPassWordData.passWord,
          newPassword: editPassWordData.newPassWord,
          confirmNewPassword: editPassWordData.confirmNewPassWord,
        })
        if(res.code == 200) {
          ElMessage.success(res.msg)
          dialogShow.value = false
          // 清除本地存储信息
          localStorage.removeItem('token')
          localStorage.removeItem('userInfo')
          // 跳转登录页面
          GoToLogin()
        }else {
          ElMessage.error(res.msg)
        }
      }catch {}finally {
        submitLoading.value = false
      }
    }
  })
}
</script>
 
<style lang="scss" scoped>
.head_content {
  flex-shrink: 0;
  height: 60px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2E64FA;

  &_left{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:10px;
  }
}
.big_head {
  font-size: 26px;
  color: #fff;
  line-height: 1;
}
.small_head {
  font-size: 14px;
  color: #fff;
}
.head_content_right {
  display: flex;
  justify-content: center;
  align-items: center;
  .schoolName{
    color: white;
    font-size: 14px;
    letter-spacing: 0.5px;
  }
  .userName {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    cursor: pointer;
    .el-icon svg {
      margin-top: 2px;
    }
  }
}

.horizontal_nav{
  height: 100%;
  display: flex;
  align-items: center;
  flex: 1 1;
  margin-left: max(calc(((100% - 448px) / 2) - 266px - 20px ), 20px);
  margin-right: 20px;
  li{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    padding:0 20px;
    font-size: 18px;
    color: #FFFFFF;
    cursor: pointer;
    &.active{
      background-color: #2550C8;
    }
  }

}
</style>