<template>
  <div
    class="home-header"
    :class="[
      select !== 'home' || scrollTop > 500 ? 'white' : '',
      props.showView === 'algorithm-details' ? '' : '',
    ]"
  >
    <div class="name" @click="goToHome">
      <div class="name-bg" v-if="!itShowXiHaiAn"></div>
      <div class="name-bg-xihaian" v-else></div>
      <div class="name-content">
        <p>城市云脑通用能力服务平台</p>
        <p>(United Capacity System)</p>
      </div>
    </div>
    <div
      v-for="item in navList"
      :key="item.key"
      @click="jumpPage(item)"
      class="nav"
      :class="item.key == select ? 'select' : ''"
    >
      {{ item.name }}
    </div>
    <!-- 购物车 -->
    <a-badge :count="sgcNum">
      <svg
        t="1650455446850"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2069"
        width="0.4rem"
        height="0.4rem"
        @click="goToSgc"
      >
        <path
          d="M384 832v85.333333h-85.333333v-85.333333h85.333333z m405.333333 0v85.333333h-85.333333v-85.333333h85.333333zM240.32 185.002667l24.149333 140.928h633.173334L835.285333 746.666667h-563.626666l-85.333334-497.685334H94.485333v-64h145.834667z m583.104 204.928H275.434667L325.632 682.666667h454.464l43.328-292.736z"
          :fill="props.showView === 'algorithm-details' ? '#1296db' : '#1296db'"
          p-id="2070"
        ></path>
      </svg>
    </a-badge>
    <a-badge :count="mynoticeNum" style="margin-left: 0.2rem">
      <!-- 消息提醒 -->
      <svg
        t="1654051054113"
        class="icon2"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2187"
        width="0.35rem"
        height="0.35rem"
      >
        <path
          d="M544 161.536a330.666667 330.666667 0 0 1 298.666667 329.130667h-0.341334c0.213333 1.493333 0.341333 2.986667 0.341334 4.565333v219.434667h39.68a32 32 0 0 1 0 64h-212.053334a160 160 0 0 1-316.586666 0H141.909333a32 32 0 1 1 0-64h39.424v-219.434667c0-1.578667 0.128-3.072 0.341334-4.565333H181.333333a330.666667 330.666667 0 0 1 298.666667-329.130667V128a32 32 0 1 1 64 0v33.536z m-298.666667 553.130667h533.333334v-219.434667c0-1.578667 0.128-3.072 0.341333-4.565333h-0.341333a266.666667 266.666667 0 1 0-533.333334 0h-0.341333c0.213333 1.493333 0.341333 2.986667 0.341333 4.565333v219.434667z m359.765334 64H418.901333a96 96 0 0 0 186.197334 0z"
          :fill="props.showView === 'algorithm-details' ? '#1296db' : '#1296db'"
          p-id="2188"
        ></path>
      </svg>
      <!-- <a-avatar shape="square" size="large" /> -->
    </a-badge>
    <div class="mynotice" v-show="mynoticeFlag">
      <a-list item-layout="horizontal" :data-source="mynoticeData">
        <template #renderItem="{ item }">
          <a-tooltip placement="left">
            <template #title>
              <span>{{ item.content }}</span>
            </template>
            <a-list-item>
              <a-list-item-meta :description="item.senderDate">
                <template #title>
                  <a>{{ item.content }}</a>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </a-tooltip>
        </template>
      </a-list>
      <div class="bottom" @click="goToView()">查看更多</div>
    </div>
    <div class="info">
      <i class="img"></i>
      <a-tooltip placement="bottom">
        <template #title>
          <span>{{ user.realName }}</span>
        </template>
        <span
          class="name"
          @click="jumpPage({ name: '个人中心', key: 'personalCenter' })"
        >
          {{ user.realName }}
        </span>
      </a-tooltip>
      <span @click="logout" class="out">退出</span>
      <i
        @click="jumpPage({ name: '后台管理', key: 'houtaiguanli' })"
        class="iconTo"
        v-show="backFlag"
      ></i>
      <!-- <i class="img1" @click="jumpWaibu"></i> -->
    </div>
    <div class="info1">
      <i class="img1" @click="jumpWaibu"></i>
    </div>
  </div>
</template>
<script setup>
  import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue'
  import { getUserInfo, getRole } from '@/api/user'
  import { recordRoute } from '@/config'
  import { useRoute, useRouter } from 'vue-router'
  import { mynotice } from '@/api/home'
  import { useStore } from 'vuex'
  import { getSgcTotal } from '@/api/home'
  import Cookies from 'js-cookie'
  import mybus from '@/myplugins/mybus'
  import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
  import { message } from 'ant-design-vue'

  const store = useStore()
  const router = useRouter()
  const route = useRoute()
  const itShowXiHaiAn = ref(whoShow.itShowXiHaiAn)

  // 用户信息
  const user = ref({
    username: store.getters['user/username'],
    realName: store.getters['user/realName'],
  })
  const select = ref(router.currentRoute.value.name)
  const mynoticeFlag = ref(false)
  const mynoticeData = ref([])
  const navList = ref(navListManagement.navList)
  const backFlag = ref(false)
  getUserInfo().then((res) => {
    res.data.data.roleIdList.map((val) => {
      getRole(val).then((role) => {
        if (role.data.data.name === '后台管理员') {
          backFlag.value = true
        }
      })
    })
  })
  console.log('navList------------>', navList)

  const props = defineProps({
    showView: { type: String, default: '' },
  })

  // 退出登录
  const logout = async () => {
    await store.dispatch('user/logout')
    window.sessionStorage.setItem('visits', JSON.stringify([]))
    // 西海岸不返回登录页
    if (!itShowXiHaiAn.value) {
      if (recordRoute) {
        const fullPath = route.fullPath
        router.push(`/login?redirect=${fullPath}`)
      } else {
        router.push('/login')
      }
    }
  }
  // 返回首页
  const goToHome = () => {
    // 西海岸
    if (itShowXiHaiAn.value) {
      if (!xhaHasPermissionUser.list.includes(user.value.username)) {
        return message.warn('暂无权限')
      }
    }
    router.push({
      path: '/home',
    })
  }
  const jumpWaibu = () => {
    window.open('http://15.72.177.175:18460/analystrunner/tonglan', '_blank')
  }
  // 跳转页面
  const jumpPage = (item) => {
    // 西海岸
    if (itShowXiHaiAn.value) {
      let _arr = ['共享门户', '能力云图', '能力统计', '需求中心', '赋能案例']
      if (
        _arr.includes(item.name) &&
        !xhaHasPermissionUser.list.includes(user.value.username)
      ) {
        return message.warn('暂无权限')
      }
    }
    select.value = item.key
    switch (item.name) {
      case '个人中心':
        window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
        router.push({
          path: '/personalCenter',
        })
        break
      case '能力统计':
        router.push({
          path: '/abilityStatistics',
        })
        break
      case '能力集市':
        router.push({
          path: '/DetailsPageconetent',
          query: {
            select: DETAIL_PAGE_CONTENT_DEFAULT_TAB,
          },
        })
        break
      case '能力云图':
        router.push({
          path: '/capabilityCloud',
        })
        break
      // case '技术文档':
      //   router.push({
      //     path: '/developmentGuide',
      //   })
      //   break
      case '新手指南':
        router.push({
          path: '/instructionManual',
        })
        break
      case '需求中心':
        router.push({
          path: '/demandCenter',
        })
        break
      case '区市站点':
        router.push({
          path: '/mapTest',
        })
        break
      case '后台管理':
        Cookies.remove('JSESSIONID')
        window.open(window.SITE_CONFIG.backUrl + '/#/workBench-workBench')
        // window.reload('http://15.2.21.238:9797')
        break
      case '赋能案例':
        router.push({
          path: '/assignCase',
        })
        break
      case '典型赋能案例':
        router.push({
          path: '/assignCase',
        })
        break
      case '融合服务':
        router.push({
          path: '/integrationServices',
        })
        break
      case 'CIM专区':
        router.push({
          path: '/cimSpecialArea',
        })
        break
      default:
        router.push('/home')
        break
    }
  }
  const scrollTop = ref(0)
  window.onscroll = function () {
    //为了保证兼容性，这里取两个值，哪个有值取哪一个
    //scrollTop就是触发滚轮事件时滚轮的高度
    scrollTop.value =
      document.documentElement.scrollTop || document.body.scrollTop
    // console.log('滚动距离' + scrollTop.value)
  }
  mybus.on('getSgcNum', () => {
    getSgcTotal().then((res) => {
      sgcNum.value = res.data.data.count
      // console.log('申购车总数========================>', res.data.data.count)
    })
  })

  const sgcNum = ref(0)
  const goToSgc = () => {
    window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
    router.push('/personalCenter')
  }
  const mynoticeNum = ref(0)
  // 我的消息
  const getMynotice = () => {
    mynotice({ page: 1, limit: 3, readStatus: 0 }).then((res) => {
      // console.log('我的消息', res.data.data)
      mynoticeNum.value = res.data.data.total
      mynoticeData.value = res.data.data.list
    })
  }
  const goToView = () => {
    router.push({
      path: '/mynoticeView',
    })
  }
  // const read = (item) => {
  //   mynoticeRead(item.id).then((res) => {
  //     console.log('已读', res)
  //     getMynotice()
  //   })
  // }
  // 建立链接 -- 携带cookie参数

  onMounted(() => {
    getSgcTotal().then((res) => {
      // console.log('初始化========================>', res.data.data.count)
      sgcNum.value = res.data.data.count
    })
    getMynotice()
    // 解决
    const mynoticeDom = document.querySelector('.icon2')
    const mynotice = document.querySelector('.mynotice')
    if (mynoticeDom) {
      mynoticeDom.addEventListener('mouseover', () => {
        mynoticeFlag.value = true
      })
      mynoticeDom.addEventListener('mouseout', () => {
        mynoticeFlag.value = false
      })
    }
    if (mynotice) {
      mynotice.addEventListener('mouseover', () => {
        mynoticeFlag.value = true
      })
      mynotice.addEventListener('mouseout', () => {
        mynoticeFlag.value = false
      })
    }
    mybus.on('getSgcNum', () => {
      getSgcTotal().then((res) => {
        sgcNum.value = res.data.data.count
        // console.log('申购车总数========================>', res.data.data.count)
      })
    })
    mybus.on('getMynotice', () => {
      getMynotice()
    })
  })
  onBeforeUnmount(() => {
    mybus.off('getSgcNum')
    mybus.off('getMynotice')
  })
</script>
<style lang="less" scoped>
  @font-face {
    font-family: 'header-typeface';
    src: url('~@/assets/newHome/font/header-typeface.ttf');
  }

  .home-header {
    height: 0.64rem;
    width: 100%;
    max-width: 1920px;
    display: flex;
    justify-content: center;
    align-items: center;
    // padding: 0 1rem;
    background-color: rgba(0, 0, 25, 0.7);
    position: fixed;
    z-index: 1000;
    top: 0;

    div {
      color: #fff;
      font-size: 0.16rem;
    }

    .name {
      cursor: pointer;
      font-size: 0.22rem;
      font-family: header-typeface;
      margin-right: 0.2rem;
      display: flex;
      align-items: center;

      .name-bg {
        height: 0.6rem;
        width: 0.6rem;
        background: url('~@/assets/newHome/ucs-2.png') no-repeat;
        background-size: 100%;
        margin-right: 0.15rem;
      }

      .name-bg-xihaian {
        height: 0.6rem;
        width: 0.6rem;
        background: url('~@/assets/newHome/newHome-title-bg-xihaian.png')
          no-repeat;
        background-size: 100%;
        margin-right: 0.15rem;
      }

      .name-content {
        padding-top: 0.14rem;

        p {
          font-size: 0.2rem;
          margin-bottom: 0;

          &:nth-of-type(2) {
            font-size: 0.12rem;
          }
        }
      }
    }

    .nav {
      width: 1.2rem;
      height: 0.64rem;
      line-height: 0.64rem;
      text-align: center;
    }

    .nav:hover {
      background: #0058e1;
      color: #fff;
      cursor: pointer;
    }

    .select {
      background: #0058e1;
      color: #fff !important;
    }
    .info1 {
      margin-left: 0.1rem;
      display: flex;
      .img1 {
        height: 0.3rem;
        width: 1.4rem;
        margin-left: 0.1rem;
        background: url('~@/assets/newHome/yiwang.png') no-repeat;
      }
    }

    .info {
      // width: 2rem;
      margin-left: 0.2rem;
      display: flex;
      justify-content: center;

      .img {
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 0.1rem;
        background: url('~@/assets/newHome/user.png') no-repeat;
        background-size: 100%;
      }
      .img1 {
        margin-left: 0.08rem;
        height: 0.3rem;
        width: 0.8rem;
        border-radius: 0.1rem;
        background: url('~@/assets/newHome/yiwang.png') no-repeat;
        background-size: 100%;
      }

      span {
        height: 0.3rem;
        line-height: 0.3rem;
        margin-left: 0.08rem;
        margin-right: 0.06rem;
        font-size: 0.16rem;
      }

      .name {
        max-width: 2.3rem;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-all;
      }

      .out {
        cursor: pointer;
        // padding: 0 0.16rem;
        padding: 0 0.04rem 0 0.1rem;
        border-left: 0.01rem solid #666;
      }

      .icon {
        cursor: pointer;
      }
    }
  }

  .white {
    background-color: #fff;
    box-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.1);

    .name {
      color: #0058e1;

      .name-bg {
        height: 0.6rem;
        width: 0.6rem;
        background: url('~@/assets/newHome/ucs-1.png') no-repeat;
        background-size: 100%;
        margin-right: 0.15rem;
      }

      p {
        color: #0058e1;
      }
    }

    .icon {
      cursor: pointer;
    }

    .nav {
      color: #000;
    }

    .info {
      span {
        color: #000;
      }
    }
  }

  .blue {
    position: absolute;
    background: linear-gradient(
      to right,
      rgba(15, 90, 253, 0.8),
      rgba(36, 25, 248, 0.8)
    );

    .name {
      color: #fff;
    }

    .nav {
      color: #fff;
    }

    .nav:hover {
      background: #fff;
      color: #0058e1;
    }

    .info {
      span {
        color: #fff;
      }
    }
  }

  .mynotice {
    width: 4rem;
    height: 3rem;
    background: #eee;
    border-radius: 0.05rem;
    position: absolute;
    top: 0.45rem;
    right: 2.4rem;
    overflow-y: scroll;

    .bottom {
      cursor: pointer;
      width: 100%;
      text-align: center;
      color: #000;
      font-size: 0.16rem;
    }
  }

  .mynotice::-webkit-scrollbar {
    display: none;
  }

  :deep(.ant-list-item) {
    border-bottom: 0.01rem solid #ccc;
    padding: 0.1rem;
  }

  :deep(.ant-list-item-meta-title) {
    // display: flex;
    // justify-content: space-around;
    // align-items: center;
    // padding: 0 0.05rem;
    a {
      width: 3.8rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      word-break: break-all;
      -webkit-box-orient: vertical;
    }

    button {
      width: 0.7rem;
      height: 0.25rem;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        font-size: 0.1rem;
      }
    }
  }

  .iconTo {
    display: block;
    width: 0.35rem;
    height: 0.35rem;
    background: url('~@/assets/newHome/iconTo.png') no-repeat;
    cursor: pointer;
  }
</style>
<style>
  html::-webkit-scrollbar {
    display: none;
  }
</style>
