<template>
  <div class="main">
    <div class="user-info">
      <div class="logo">
        <img :src="getPng() ? userImg : logo_public" class="imgicon" />
        <!-- {{
          userinfo?.userinfo?.orgList[0]?.name ? userinfo.userinfo.orgList[0].name : '宿迁市教育局'
        }} -->
        <a-divider
          type="vertical"
          style="height: 27px; border-color: #eeeeee; width: 2px; margin: 0 24px"
        />
        <span>数字化图书馆系统</span>
      </div>

      <div class="info" v-if="userinfo?.userinfo?.name">
        <a-dropdown>
          <a class="ant-dropdown-link" style="margin-left: 10px" @click.prevent>
            {{ userinfo?.userinfo?.name ? userinfo.userinfo.name : '' }}
            <img :src="avatar" />
            <DownOutlined :style="{ color: '#1677ff' }" />
          </a>
          <template #overlay>
            <a-menu class="header-dropdown">
              <a-menu-item>
                <a href="javascript:;" @click="quite">退出</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>

        <!-- <span class="user_info_title"
          >{{ userinfo?.userinfo?.name ? userinfo.userinfo.name : '' }}
        </span> -->
        <!-- <a @click="toAccount">后台管理</a> -->
        <!-- <a @click="quite">退出</a> -->
      </div>
    </div>
    <!-- <div class="title-bg">
      <div class="title">
        <span>全国中小学图书采购平台</span>
        <a-button type="primary">
          <template #icon><img :src="orderImg"/></template>
          我的订单
        </a-button>
      </div>
    </div>
    <div class="bottom-bg">
        <div class="bottom" @click="goToPage('/packageManage','套餐采购')">
          图书商城
        </div>
      </div> -->
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { SessionStorageService, LocalStorageService } from '@/utils/storage';
import { ref, onMounted, computed, watch } from 'vue';
import userImg from '@/assets/images/backgroundicon.png';
import logo_public from '@/assets/images/logo_public.png';
import avatar from '@/assets/images/avatar.png'
import orderImg from '@/assets/images/order.svg';
import { removeToken } from '@/utils/cookie';
import store from '@/store';

const router = useRouter();
console.log('mounted');

const isLog = import.meta.env.VITE_APP_PATH;
const getPng = () => {
  console.log(1);
  if (isLog == 'production' || isLog == 'development') {
    return true;
  } else {
    console.log(2);
    return false;
  }
};

function goToPage(path) {
  router.replace({
    path: path,
  });
}
goToPage('/bookList');
const quite = () => {
  removeToken();
  LocalStorageService.clearAll();
  window.location.href = 'http://www.sqjyy.cn/cas/logout?service=http://www.sqjyy.cn';
  //store.dispatch('user/LogOut');
  //window.location.href = import.meta.env.VITE_APP_BOOK_STORE_URL as string;
};
const toAccount = () => {
  window.location.href = import.meta.env.VITE_APP_BOOK_STORE_URL as string;
};
console.log(store.state.user.userInfo, 'store.state.user.userInfo');
const userinfo = ref(LocalStorageService.get('userInfo'));

watch(
  () => store.state.user.userInfo,
  (val, old) => {
    userinfo.value = val;
  }
);
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  position: fixed;
  background: white;
  z-index: 2;
  top: 0;
  .user-info {
    width: 1160px;
    min-width: 1160px;
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    .logo,
    img {
      width: auto;
      height: 48px;
      cursor: pointer;
    }
    .info {
      img {
        width: 24px;
        height: 24px;
        /*margin: 0 10px;*/
        margin-right: 4px;
      }
      .ant-dropdown-link {
        color: #333333;
        font-size: 14px;
      }
    }
  }
  .logo {
    display: flex;
    align-items: center;
    span {
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    // .imgicon {
    //   height: 28px;
    //   width: 285px;
    // }
    a {
      margin-left: 64px;
      color: @primary-color;
    }
  }

  .user_info_title {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }
}
@media screen and (max-width: 1024px) {
  .main {
    width: 100% !important;
  }
  .user-info {
    padding: 0 20px;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}
@media screen and (max-width: 600px) {
  .user-info {
    .imgicon {
      height: 10px !important;
      width: 100px !important;
    }
  }
}
/*@media screen and (max-width: 600px) {*/
/*  .main{*/
/*    width: 100% !important;*/
/*  }*/
/*   .user-info{*/
/*     width: 100% !important;*/
/*     min-width: 100% !important;*/
/*     max-width: 100% !important;*/
/*   }*/
/*}*/
</style>
