<script setup>
import { Menu, Grid, UserFilled, Help } from "@element-plus/icons-vue";
import { ref, inject } from "vue";
import { useRouter } from "vue-router";
import { useSettingStore } from "@/store/setting";

const props = defineProps({
  collapse: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["toggleClospe"]);

const router = useRouter();

const settingStore = useSettingStore();

const lang = {
  tw: "繁體",
  cn: "簡體",
  en: "EN",
};

const reload = inject("reload");

const toggleCollapse = () => {
  emit("toggleClospe");
};


const setLocale = (locale) => {
  settingStore.setLang(locale);
  reload();
};


const handleLogout = () => {
  sessionStorage.removeItem("token");
  router.push("/login");
};

const handleClick = () => {
  alert('button click')
}

</script>

<template>
  <div class="admin-header">
    <ul class="header-nav header-layout-left">
      <li class="header-nav-item header-flexible">
        <el-icon
          :size="20"
          :color="'#666'"
          @click="toggleCollapse"
          v-if="collapse"
        >
          <Grid />
        </el-icon>
        <el-icon :size="20" :color="'#666'" @click="toggleCollapse" v-else>
          <Menu />
        </el-icon>
      </li>
    </ul>
    <ul class="header-nav">
      <li class="header-nav-item header-flexible" style="cursor: pointer">
        <!-- <el-dropdown @click="handleClick">
          <div class="header-avatar" :style="{marginRight:'5px'}">
            <el-icon :size="13" :style="{marginRight:'5px'}">
              <Help />
            </el-icon>
              {{ lang[settingStore.lang] }} - 語言切換
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="setLocale('tw')">繁體</el-dropdown-item>
              <el-dropdown-item @click="setLocale('cn')">簡體</el-dropdown-item>
              <el-dropdown-item @click="setLocale('en')">EN</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown> -->
        <el-dropdown :hide-on-click="false">
          <div class="header-avatar" >
            <el-icon :size="13" :style="{marginRight:'5px'}">
              <UserFilled />
            </el-icon>
              Admin
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>資料修改</el-dropdown-item>
              <el-dropdown-item @click.stop="handleLogout">登出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
    </ul>
  </div>
</template>

<style lang="less" scpoed>
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 5px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);
  .el-icon {
    cursor: pointer;
  }

  .header-nav {
    background: 0 0;
    .header-nav-item {
      margin: 0 10px;
    }
  }
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.header-avatar {
  display: inline-flex;
  padding: 5px 10px;
  color: #ddd;
  // background-color: #ff7e4f;
  border:1px #ff7e4f solid;
  border-radius: 20px;
  .avatar,
  .name {
    align-self: center;
  }
  .avatar {
    margin-right: 8px;
  }
  .name {
    font-weight: 500;
  }
}
</style>
