<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import DownloadKLNPortal from './components/DownloadKLNPortal.vue'
import ChangePasswordDialog from './components/ChangePasswordDialog.vue'
import LogoutDialog from './components/LogoutDialog.vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const input1 = ref('')

const downloadKLNPortalRef = ref()
const handleDownload = () => {
  downloadKLNPortalRef.value.openDialog()
}

const changePasswordDialogRef = ref()
const handleChangePassword = () => {
  changePasswordDialogRef.value.openDialog()
}

const logoutDialogRef = ref()

const handleLogout = () => {
  logoutDialogRef.value.openDialog()
}

const handleLogin = () => {
  router.push('/login')
}

const test = () => {
  if (localStorage.getItem('token')) {
    localStorage.removeItem('token')
  } else {
    localStorage.setItem('token', '123')
  }
}
</script>

<template>
  <div class="layout-toolbar">
    <VBreadcrumd></VBreadcrumd>
    <div class="right-info">
      <el-input
        v-model="input1"
        size="large"
        placeholder="Search a reference number to see shipment details"
        :prefix-icon="Search"
      />
      <!-- <span class="font_family icon-icon_notice_b" style="font-size: 18px"></span>
      <span class="font_family icon-icon_language_b" style="font-size: 16px"></span> -->

      <el-button @click="test">测试</el-button>
      <el-popover
        placement="bottom-end"
        :width="256"
        trigger="click"
        popper-class="user-config-popover"
        content="this is content, this is content, this is content"
      >
        <div class="title">
          <el-avatar
            :size="48"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
          <span class="name">John Doe</span>
        </div>
        <div class="options">
          <div class="item" @click="handleChangePassword">
            <span class="font_family icon-icon_password_b"></span>
            Change Password
          </div>
          <div class="item" @click="handleLogout">
            <span class="font_family icon-icon_export_b"></span>
            Logout
          </div>
        </div>
        <template #reference>
          <el-avatar
            :size="24"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
        </template>
      </el-popover>
      <el-button class="el-button--main" style="padding: 8px 10px" plain @click="handleDownload">
        <span class="font_family icon-icon_download_b" style="margin-right: 4px"></span>
        Download KLN Portal
      </el-button>
      <el-button class="el-button--main" style="margin-left: -10px" @click="handleLogin"
        >Log in</el-button
      >
    </div>
    <DownloadKLNPortal ref="downloadKLNPortalRef"></DownloadKLNPortal>
    <ChangePasswordDialog ref="changePasswordDialogRef"></ChangePasswordDialog>
    <LogoutDialog ref="logoutDialogRef"></LogoutDialog>
  </div>
</template>

<style lang="scss" scoped>
.layout-toolbar {
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.right-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 100%;

  .el-input {
    height: 32px;
    width: 400px;
    :deep(.el-input__wrapper) {
      padding-left: 8px;
      border-radius: 15px;
      color: var(--color-border);
      background-color: var(--color-table-header-bg);
      .el-input__icon {
        font-size: 16px;
        font-weight: 600;
        color: var(--color-neutral-1);
      }
    }
    :deep(.el-input__inner) {
      height: 32px;
    }
  }
}
</style>
<style lang="scss">
div.el-popover.el-popper.user-config-popover {
  padding: 8px;
  width: 240px;
  border-radius: 12px;
  .title {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 70px;
    border-bottom: 1px solid #eeeeed;
  }
  .options {
    .item {
      display: flex;
      align-items: center;
      padding-left: 8px;
      gap: 8px;
      height: 40px;
      line-height: 40px;
      &:hover {
        background-color: var(--color-mune-active-bg);
        border-radius: 6px;
        cursor: pointer;
      }
    }
  }
}
</style>
