<template>
  <div class="header-box">
    <div class="title">{{ userStore.title }}</div>

    <!-- 操作按钮 -->
    <div class="operate-btn">
      <div @click="openDataCompare" class="contrast-btn"><svg-icon icon-class="compare" class="icon" />数据对比</div>
      <div @click="logout"><svg-icon icon-class="logout" class="icon" />退出登录</div>
    </div>

    <data-compare-dialog ref="dataCompareRef" />
  </div>
</template>

<script setup>
import { ElMessageBox } from "element-plus"
import useUserStore from "@/store/modules/user"
import DataCompareDialog from "../components/DataCompareDialog.vue"

const userStore = useUserStore()
function logout() {
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      userStore.logOut().then(() => {
        location.href = "/login"
      })
    })
    .catch(() => {})
}

const dataCompareRef = ref(null)
const openDataCompare = () => {
  dataCompareRef.value.show()
}
</script>

<style lang="scss" scoped>
.header-box {
  position: relative;
  width: 100%;
  height: 10.08%;
  background-image: url("../../../assets/scream/text_back.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom 22%;

  .title {
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    letter-spacing: 15px;
    color: #ffffff;
    font-weight: bold;
  }

  .operate-btn {
    position: absolute;
    top: 62%;
    right: 4%;
    cursor: pointer;
    color: #6aaaf0;
    display: flex;
    align-items: center;

    .contrast-btn {
      margin-right: 15px;
    }

    & div {
      display: flex;
      align-items: center;
    }

    .icon {
      height: 39px;
      width: 22px;
      margin-left: 0px;
      margin-right: 5px;
    }
  }
}
</style>
