<script setup lang="ts">
import { NDropdown, NPopover } from 'naive-ui'
import { getAllNoticeList } from '@/api/daikin/base'
import { useUserStore } from '@/stores/modules/user'

// 全屏
const { toggle } = inject<any>('fullscreen')
const { push } = useRouter()
const store = useUserStore()
const route = useRoute()
const noticeData = ref()
const flgs = ref(false)
const userCode = ref(false)
async function getNoticeList() {
  const { data } = await getAllNoticeList()
  noticeData.value = data
}
onMounted(() => {
  getNoticeList()

  // console.log( flgs.value,flg)
})
watchEffect(() => {
  // console.log( flgs.value,store.user.type, 'tech_service')
  flgs.value = [1, 2, 3, 4].includes(store.user.type)
  userCode.value = ['admin', 'tech_service', 'footprint_dandang'].some((item) =>
    store.user.roleCode?.includes(item)
  )
})
const options = [
  { label: '个人中心', key: 'ucenter' },
  ,
  {
    label: '修改密码',
    key: 'ChangePWD',
    props: {
      onclick: () => {
        console.log(route.path)
        const pth = route.path === '/external' ? 'modify' : 'modifys'
        push({ name: pth })
      }
    }
  },
  {
    key: 'logout',
    label: '退出登录',
    props: {
      style: { width: '150px' },
      onClick: () => {
        store.LogOut()
      }
    }
  }
]
const noticeShow = ref(false)
let showIs = false
//模块id，1-情报 2-市况汇率 3-数据平台 4-BCP管理 5-碳中和 6-品质 7-差别化LAB
const goModeuls = (obj) => {
  const { moduleId, type } = obj
  if (!moduleId) return
  switch (moduleId) {
    case 1:
      if ((store.user.isReview === 1 || store.user.isPublish === 1) && type == 2) {
        push('/Home/Process')
      } else {
        push('/Home/intelligence')
      }
      break
    case 2:
      push({ name: 'Market' })
      break
    case 3:
      push({ name: 'CD' })
      break
    case 4:
      push({ name: 'BCP' })
      break
    case 5:
      push({ name: 'CSR' })
      break
    case 6:
      push({ name: 'Quality' })
      break
    case 7:
      push({ name: 'Diffspace' })
      break
    case 9:
      push({ name: type === 2 ? 'DataBaseReview' : 'DataBase' })
      break
    default:
      push('/Home/intelligence')
      break
  }
}
const noticeShows = () => {
  if (noticeData.value && noticeData.value.length > 0) {
    // console.log(noticeData.value)
    noticeShow.value = !noticeShow.value
  }
}
const toFootPrint = () => {
  console.log(111)
  push('/Home/footprint')
}
</script>

<template>
  <div class="inline-flex items-center relative">
    <!-- 足迹 -->
    <!-- <div class="cursor-pointer w-40px h-40px z-200"> -->
    <el-icon size="35" v-if="userCode" @click="toFootPrint"><Platform /></el-icon>
    <!-- </div> -->

    <!-- 全屏小图标 -->
    <div
      size="40"
      color="#ccc"
      style="font-size: 20px; width: 30px; margin: 10px"
      @click="toggle"
      class="cursor-pointer"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 20 20"
      >
        <g fill="none">
          <path
            d="M3.75 3a.75.75 0 0 0-.75.75v3.5a.75.75 0 0 0 1.5 0V5.56l2.22 2.22a.75.75 0 0 0 1.06-1.06L5.56 4.5h1.69a.75.75 0 0 0 0-1.5h-3.5zm0 14a.75.75 0 0 1-.75-.75v-3.5a.75.75 0 0 1 1.5 0v1.69l2.22-2.22a.75.75 0 0 1 1.06 1.06L5.56 15.5h1.69a.75.75 0 0 1 0 1.5h-3.5zM17 3.75a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69l-2.22 2.22a.75.75 0 0 0 1.06 1.06l2.22-2.22v1.69a.75.75 0 0 0 1.5 0v-3.5zM16.25 17a.75.75 0 0 0 .75-.75v-3.5a.75.75 0 0 0-1.5 0v1.69l-2.22-2.22a.75.75 0 1 0-1.06 1.06l2.22 2.22h-1.69a.75.75 0 0 0 0 1.5h3.5z"
            fill="currentColor"
          ></path>
        </g>
      </svg>
    </div>
    <div
      v-if="flgs"
      class="bg-#fff/20 b-1px b-solid b-#fff rd-12px flex items-center h-52px px12px cursor-pointer"
    >
      <div size="small" @click="noticeShows">
        <img src="../assets/images/tongzhi@2x.png" class="w20px mr5px mt--5px" />新着通知<span
          class="ml8px pl5px pr5px rounded-20px bg-#002FA7"
          >{{ store.user.reviewCount ?? 0 }}</span
        >
      </div>
      <!-- 跳转到碳中和页面的 -->
      <div class="notice" v-if="noticeShow">
        <div
          v-for="ite in noticeData"
          class="p10px box flex justify-between items-center"
          v-if="noticeData"
          @click="goModeuls(ite)"
        >
          <template v-if="ite.type == 1">
            <div>{{ ite.moduleName }}</div>
            <span class="min-w-70px">未读{{ ite.moduleCount }}</span>
          </template>
          <template v-if="ite.type == 2">
            <div>{{ ite.moduleName }}</div>
            <span class="min-w-70px">待审批{{ ite.moduleCount }}</span>
          </template>
        </div>
      </div>

      <!-- 跳转到审批页面 -->
      <!-- <div size="small">
        新着通知
        <span class="ml8px pl5px pr5px rounded-20px bg-#002FA7">{{
          store.user.reviewCount ?? 0
        }}</span>
      </div>
      <n-popover :overlap="false" placement="bottom-start" trigger="click">
        <template #trigger>
          <div size="small">
            新着通知
            <span class="ml8px pl5px pr5px rounded-20px bg-#002FA7">{{
              store.user.reviewCount ?? 0
            }}</span>
          </div>
        </template>
        <div class="inline-flex items-center p10px cursor-pointer" v-if="store.user.isReview === 1">
          待审核信息{{ store.user.reviewCount ?? 0 }}条
          <n-button
            class="text-#fff bg-#0058E4 rounded-5px p5px pt2px pb2px ml 8px"
            @click="push({ path: '/Home/Process' })"
            >去审核</n-button
          >
        </div>
        <div
          class="inline-flex items-center p10px cursor-pointer"
          v-else-if="store.user.isPublish === 1"
        >
          待查看信息{{ store.user.reviewCount ?? 0 }}条
          <n-button
            v-if="1"
            class="text-#fff bg-#0058E4 rounded-5px p5px pt2px pb2px ml 8px"
            @click="push({ path: '/Home/Process' })"
            >我的发布</n-button
          >
        </div>
        <div class="inline-flex items-center p10px cursor-pointer" v-else>
          待查看信息{{ store.user.reviewCount ?? 0 }}条
          <n-button
            v-if="store.user.reviewCount > 0"
            class="text-#fff bg-#0058E4 rounded-5px p5px pt2px pb2px ml 8px"
            @click="push({ path: '/Home/intelligence' })"
            >去查看</n-button
          >
        </div>
      </n-popover> -->
    </div>
    <!-- 当前登录用户信息 -->
    <NDropdown show-arrow placement="bottom-end" size="huge" :options="options">
      <div class="cursor-pointer inline-flex items-center">
        <img src="@/assets/images/icon-user.svg" class="ml40px mr16px w60px h60px" />
        <!--  @click="toggle" -->
        <span>{{ store.user.nikeName ?? '游客' }}</span>
        <img src="@/assets/images/icon-more.svg" class="ml30px w13px" />
      </div>
    </NDropdown>
  </div>
</template>

<style scoped lang="less">
.notice {
  position: absolute;
  top: 52px;
  left: -3px;
  min-width: 240px;
  background: rgb(255, 255, 255);
  max-height: 520px;
  z-index: 500;
  font-size: 18px;
  border-radius: 15px;
  padding: 10px;
  color: rgb(26, 25, 25);
  box-shadow: 1px 1px 5px 1px #d9d5d5;
  .box:hover {
    background: #e5e5e5;
    border-radius: 5px;
    color: #1836c3;

    span {
      color: #ffffff;
      background: red;
    }
  }

  span {
    color: #1836c3;
    padding: 2px 7px;
    border-radius: 50px;
  }
}

.popover-grid {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-gap: 12px;
  justify-content: center;
  align-items: center;
}
</style>
