<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>
      <!-- <svg
        t="1655286092324"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2160"
        width="20"
        height="20"
        style="margin-top: 0.05rem"
        @click="jumpPage({ name: '后台管理', key: 'houtaiguanli' })"
      >
        <path
          d="M1016.832 606.208q2.048 12.288-1.024 29.696t-10.24 35.328-17.408 32.256-22.528 20.48-21.504 6.144-20.48-4.096q-10.24-3.072-25.6-5.632t-31.232-1.024-31.744 6.656-27.136 17.408q-24.576 25.6-28.672 58.368t9.216 62.464q10.24 20.48-3.072 40.96-6.144 8.192-19.456 16.896t-29.184 15.872-33.28 11.264-30.72 4.096q-9.216 0-17.408-7.168t-11.264-15.36l-1.024 0q-11.264-31.744-38.4-54.784t-62.976-23.04q-34.816 0-62.976 23.04t-39.424 53.76q-5.12 12.288-15.36 17.92t-22.528 5.632q-14.336 0-32.256-5.12t-35.84-12.8-32.256-17.92-21.504-20.48q-5.12-7.168-5.632-16.896t7.68-27.136q11.264-23.552 8.704-53.76t-26.112-55.808q-14.336-15.36-34.816-19.968t-38.912-3.584q-21.504 1.024-44.032 8.192-14.336 4.096-28.672-2.048-11.264-4.096-20.992-18.944t-17.408-32.768-11.776-36.864-2.048-31.232q3.072-22.528 20.48-28.672 30.72-12.288 55.296-40.448t24.576-62.976q0-35.84-24.576-62.464t-55.296-38.912q-9.216-3.072-15.36-14.848t-6.144-24.064q0-13.312 4.096-29.696t10.752-31.744 15.36-28.16 18.944-18.944q8.192-5.12 15.872-4.096t16.896 4.096q30.72 12.288 64 7.68t58.88-29.184q12.288-12.288 17.92-30.208t7.168-35.328 0-31.744-2.56-20.48q-2.048-6.144-3.584-14.336t1.536-14.336q6.144-14.336 22.016-25.088t34.304-17.92 35.84-10.752 27.648-3.584q13.312 0 20.992 8.704t10.752 17.92q11.264 27.648 36.864 48.64t60.416 20.992q35.84 0 63.488-19.968t38.912-50.688q4.096-8.192 12.8-16.896t17.92-8.704q14.336 0 31.232 4.096t33.28 11.264 30.208 18.432 22.016 24.576q5.12 8.192 3.072 17.92t-4.096 13.824q-13.312 29.696-8.192 62.464t29.696 57.344 60.416 27.136 66.56-11.776q8.192-5.12 19.968-4.096t19.968 9.216q15.36 14.336 27.136 43.52t15.872 58.88q2.048 17.408-5.632 27.136t-15.872 12.8q-31.744 11.264-54.272 39.424t-22.528 64q0 34.816 18.944 60.928t49.664 37.376q7.168 4.096 12.288 8.192 11.264 9.216 15.36 23.552zM540.672 698.368q46.08 0 87.04-17.408t71.168-48.128 47.616-71.168 17.408-86.528-17.408-86.528-47.616-70.656-71.168-47.616-87.04-17.408-86.528 17.408-70.656 47.616-47.616 70.656-17.408 86.528 17.408 86.528 47.616 71.168 70.656 48.128 86.528 17.408z"
          p-id="2161"
          fill="#bfbfbf"
        ></path>
      </svg> -->
      <i @click="jumpPage({ name: '后台管理', key: 'houtaiguanli' })" class="iconTo"></i>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue'
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)
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 = () => {
  router.push({
    path: '/home',
  })
}
// 跳转页面
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;
  }

  .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%;
    }

    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>