<script setup lang="ts">
import { getArticlePage, report, cateFileList, newDataList } from '@/api/daikin/base'
import { message } from '@/utils/message'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Navigation, Pagination, A11y } from 'swiper'
import { isNotOneWeekAgo } from '@/utils'
import dayjs from 'dayjs'
import { NPopover } from 'naive-ui'
// import { NCarousel } from 'naive-ui'

const route = useRoute()
const { push } = useRouter()
const listData = ref<any[]>([])
const curTab = ref(0)
const firstItem = ref<any>('')
const newsData = ref<any>({})
async function getPageList() {
  // const { code } = report({ moduleCode: 'App_Article' })
  const { rows } = await getArticlePage({
    pageNum: 1,
    pageSize: 10,
    position: 'relate'
  } as any)
  // console.log(rows)
  // for (let index = 0; index < 50; index++) {
  listData.value = rows
  // }
  console.log(listData.value.length)
}

const fetchNewDataList = async () => {
  const res = await newDataList({ pageNum: 1, pageSize: 8 })
  // const data = groupDatesByWeek(res.rows || [])
  const data = res.rows || []
  newsData.value = data
  firstItem.value = Object.keys(data)[0]
}

// 将日期按照周分组
function groupDatesByWeek(dates = [], weekStartDay = 1) {
  return dates.reduce((acc: any, item: any) => {
    const weekStart = dayjs(item.createTime)
      .startOf('week')
      .add(weekStartDay, 'day')
      .format('MM月DD日')
    const weekEnd = dayjs(item.createTime).endOf('week').add(weekStartDay, 'day').format('MM月DD日')
    const key = `${weekStart} - ${weekEnd}`
    acc[key] = acc[key] || []
    acc[key].push(item)
    return acc
  }, {})
}

onMounted(getPageList)

// console.log(listData)

// const toDetail2 =(n: { id: any; })=>{
//   // console.log(route,route.path,n.id)
//   if(n.id===0) return
//   if(n.isSelect===1){
//     push(`${route.path.replace('/Home','')}/intelligence/within/${n.id}`)
//   }
//   else{
//     message.info("您没有权限查看！")
//   }
// }

const codePath: any = {
  App_Article: {
    path: '/intelligence/outside/',
    modulePath: '/Home/intelligence'
  },
  App_Market: {
    path: '/Home/market/',
    modulePath: '/Home/market'
  },
  App_data_platform: {
    path: '/Home/cd/',
    modulePath: '/Home/cd'
  },
  App_BCP: {
    path: '/Home/bcp/',
    modulePath: '/Home/bcp/'
  },
  // '碳中和模块',
  App_CSR: {
    path: '/Home/csr/',
    modulePath: '/Home/csr/'
  },
  //  '品质模块',
  App_Quality: {
    path: '/Home/quality/',
    modulePath: '/Home/quality/'
  },
  //  'Lab模块',
  App_Lab: {
    path: '/Home/diffspace/',
    modulePath: '/Home/diffspace'
  },
  //  'DatabBase模块'
  App_Database: {
    path: '/DataBase?id=',
    modulePath: '/DataBase'
  }
}
const toDetail2 = (n: any) => {
  console.log(n)
  if (n.id === 0) return
  if (n.isSelect === 1) {
    if (n.moduleCode === 'App_Database') {
      return push('/DataBase?id=' + n.cateId)
    }
    if (n.moduleCode === 'App_Article') {
      return push('/Home/intelligence/')
    }
    const { moduleCode, id, cateId } = n
    const { modulePath, path } = codePath[moduleCode]
    push(modulePath)

    // push(`/intelligence/${n.type == 2 ? 'within' : 'outside'}/` + n.id)
  } else {
    message.info('您没有权限查看!')
  }
}

const downloads = (data: any = {}) => {
  const { fileCommon, filePath } = data
  if ((fileCommon?.fileSize || 0) > 25 * 1024 * 1024) {
    message.info('正在下载中，请稍等～')
    downloadFile(filePath)
    return
  }
  if (filePath) {
    window.open(filePath, '_blank')
  } else {
    message.info('没有可预览文件！')
  }
}
function downloadFile(url: any) {
  fetch(url)
    .then((response) => response.blob())
    .then((blob) => {
      const downloadUrl = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = downloadUrl
      link.download = getFileNameFromUrl(url)
      link.click()
    })
}
function getFileNameFromUrl(url: string) {
  const lastSlashIndex = url.lastIndexOf('/')
  if (lastSlashIndex !== -1) {
    return url.substring(lastSlashIndex + 1)
  } else {
    return 'Invalid URL'
  }
}
const modules = [Autoplay, Pagination, Navigation, A11y]

const files = ref<any>({})
const cateId = 201
const getFile = async () => {
  const { rows }: any = await cateFileList({
    // cateId: 201,
    cateId,
    pageNum: 1,
    pageSize: 1
  })
  files.value = rows?.[0] || {}
  const t = files.value.createTime
  if (t) {
    const arr = t.split('-')
    // files.value.time = arr[0] + '年' + (+arr[1] - 1) + '月'
    files.value.time = arr[1] - 1
  }
}

getFile()
fetchNewDataList()
</script>
<template>
  <div class="card news relative">
    <div class="news-left absolute z-10 transition-all" v-show="curTab == 1"></div>
    <div class="news-right absolute z-10 transition-all" v-show="curTab == 0"></div>
    <div class="absolute top-0 left-0 right-0 flex items-center z-11">
      <div
        class="text-black p-20px text-28px w-1/3 transition-all"
        :class="[{ 'text-#fff': curTab == 1 }]"
        @click="curTab = 0"
      >
        最近更新
      </div>
      <div class="card_title !pt-10px !pl-30px flex-1 !pb-10px" @click="curTab = 1">
        <div class="flex justify-between items-center">
          <p
            class="text-22px cursor-pointer hover:underline transition-all"
            :class="[{ 'text-#fff': curTab == 0 }]"
            @click.stop="push({ name: 'Intelligence' })"
          >
            外部情报
          </p>
          <div
            class="flex text-#fff tetx-16px items-end txt-bg px-8px py-6px rounded-10px text-#fff mr-10px"
          >
            <div
              @click.stop="push({ name: 'DataBase', query: { id: cateId } })"
              class="text-16px text-#fff flex align-middle items-center cursor-pointer hover:underline transition-all"
            >
              <div>{{ files.time || `1` }}月月报</div>
              <img class="h-14px pl-4px" src="@/assets/images/yjtt@2x.png" alt="" />
            </div>
            <!-- <span class="text-14px mt2px"> 作成日：{{ files.time || `2024年1月` }} </span> -->
          </div>
        </div>
        <div class="!px-0 !text-12px mt-4px" :class="[{ 'text-#fff': curTab == 0 }]">
          责任者：开发调达部 研究企画T
        </div>
      </div>
      <!-- <div class="card_sub-title">责任者：调达研究院 研究企画T</div> -->
    </div>
    <!-- <div
        class="flex text-#fff tetx-16px items-end txt-bg px-10px py-8px rounded-10px text-#fff mt-[10px] mr-16px"
      >
        <p
          class="text-16px text-#fff flex flex-col flex-start"
          @click="push({ name: 'DataBase', query: { id: cateId } })"
        >
          <span class="flex align-middle items-center cursor-pointer hover:underline mb-4px"
            >调达本部月报
            <img class="h-14px pl-4px" src="@/assets/images/yjtt@2x.png" alt="" />
          </span>
          <span class="text-14px mt2px"> 作成日：{{ files.time || `2024年1月` }} </span>
        </p>
      </div> -->
    <div
      class="card_content px-20px pb-0 mt-0px absolute left-0 right-0 z-100 top-70px"
      v-if="curTab == 0"
    >
      <!-- <div class="font-16px !h-310px overflow-y-scroll"> -->
      <!-- <swiper
          id="swiperList2"
          v-if="listData"
          :slides-per-view="4"
          :autoplay="false && { delay: 1000, disableOnInteraction: false }"
          :speed="500"
          :space-between="10"
          :direction="'vertical'"
          :scrollbar="{ draggable: false }"
          :loop="true"
          :modules="modules"
          style="height: 280px"
        >
          <swiper-slide v-for="(i, index) of newsData" :key="index"> -->
      <div height="310px" class="h-310px overflow-hidden">
        <!-- <div
          class="absolute flex flex-col w-full h-full z-200 top-0 left-0 text-center bg-red justify-center items-center"
          style="background-color: rgba(255, 255, 255, 0.8)"
        >
          <img src="@/assets/images/chah.png" />
          <br />
          <div class="text-#5683DB text-36px">【做成中,敬请期待】</div>
        </div> -->
        <!-- <div class="text-black mb-10px" v-for="(item, index) of newsData" :key="index"> -->
        <div class="text-black mb-10px" v-for="(i, index) in newsData" :key="index">
          <div class="flex justify-between items-center mb4px" v-if="index === 0">
            <span class="text-18px mb-10px mt-0px opacity-0">{{ index }}</span>
            <span
              class="text-16px text-#4D7EE8 cursor-pointer hover:underline"
              @click="push({ name: 'Latest' })"
              >更多</span
            >
          </div>
          <!-- <template v-for="(i, k) in item" :key="k"> -->
          <div class="flex items-baseline flex-1">
            <n-popover trigger="hover" placement="top-start">
              <template #trigger>
                <div
                  @click="toDetail2(i)"
                  class="text-#142142 truncate text-18px font-bold w-95% no-underline text-#142142 cursor-pointer hover:underline h-16px leading-16px"
                >
                  <img
                    v-if="isNotOneWeekAgo(i.createTime)"
                    class="h-20px"
                    src="@/assets/images/NEW.gif"
                    alt=""
                  />
                  <span>{{ i.title || '' }}</span>
                </div>
              </template>
              <div class="text-#142142 text-18px font-bold no-underline h-16px leading-16px">
                <span>{{ i.title || '' }}</span>
              </div>
            </n-popover>
            <div class="text-#808696 ml20px text-14px flex items-center justify-between mb-10px">
              <span class="whitespace-nowrap block w-100px"> {{ i.departName }}</span>
              <!-- <span class="w-[36%]"> {{ i.userName }}</span> -->
              <span class="whitespace-nowrap block w86px"> {{ i.createTime?.slice(0, 10) }}</span>
            </div>
          </div>
          <!-- </template> -->
        </div>
      </div>
      <!-- </swiper-slide>
        </swiper> -->
      <!-- </div> -->
    </div>
    <div
      class="card_content px-20px pt-20px pb-0 mt-0px absolute left-0 right-0 top-70px z-[-1]"
      :class="[{ 'z-100': curTab == 1 }]"
    >
      <div
        v-if="false"
        class="news_card w-437px flex items-end gap-12px text-#fff/80 !absolute right--20% top--38% scale-50"
      >
        <img
          src="@/assets/images/bg-card6-text.svg"
          class="h26px absolute left-16px top-16px animate__animated animate__zoomIn animate__delay-2s animate__slower animate__repeat-2"
        />
        <div class="news_card_item i1 flex-1 w0 h100px p10px pt56px flex flex-col justify-around">
          <img
            src="@/assets/images/WATCHING@2x.png"
            class="w41px h47px absolute left-40px top-25px animate__animated animate__infinite animate__heartBeat"
          />
          <img src="@/assets/images/WATCHING2@2x.png" class="w80px left-10px top-10px" />
          <!-- <p class="truncate" v-if="listData && Array.isArray(listData) && listData.length > 0"  v-for="i in listData.slice(0,2)" :key="i" @click="toDetail2(i)">{{ i.title }}</p> -->
        </div>
        <div class="news_card_item i2 flex-1 w0 h120px p10px pt56px flex flex-col justify-around">
          <img
            src="@/assets/images/ALARM@2x.png"
            class="w61px h63px absolute left-28px top-30px animate__animated animate__infinite animate__fadeIn"
          />
          <img src="@/assets/images/ALARM2@2x.png" class="w70px left-15px top-14px" />
          <!-- <p class="truncate" v-if="listData && Array.isArray(listData) && listData.length > 2"  v-for="i in listData.slice(2,4)" :key="i" @click="toDetail2(i)">{{ i.title }}</p> -->
        </div>
        <div class="news_card_item i3 w140px h160px p10px pt70px flex flex-col justify-around">
          <img
            src="@/assets/images/WARNING@2x.png"
            class="w82px h66px absolute left-30px top-45px animate__animated animate__infinite animate__flipOutY"
          />
          <img src="@/assets/images//WARNING2@2x.png" class="w100px left-8px top-20px" />
          <!-- <p class="truncate"  v-if="listData && Array.isArray(listData) && listData.length > 4"  v-for="i in listData.slice(4,7)" :key="i" @click="toDetail2(i)">{{ i.title }}</p> -->
        </div>
      </div>
      <div
        class="card_title !pl0 !pt0 cursor-pointer hover:underline"
        @click="push({ name: 'News' })"
      >
        最新News
      </div>
      <div class="font-16px !h-240px overflow-y-auto mt10px">
        <!-- <n-carousel direction="vertical" dot-placement="right" style="width: 100%; height: 100px" autoplay :interval="1200"
         :slides-per-view="2" :space-between="0" :loop="false" mousewheel>
          <div class="mt-10px" v-if="listData && Array.isArray(listData) && listData.length > 0" v-for="i in listData"
            :key="i">
            <div class="text-#142142 truncate text-16px"> <a :href="i.url" class="no-underline text-#142142">{{ i.title
            }}</a></div>
            <div class="text-#808696 mt-8px text-14px"><span>来源于: {{ i.source }}</span> &nbsp;&nbsp;&nbsp;<span>{{
              i.publishTime }}</span></div>
          </div>
        </n-carousel> -->

        <swiper
          id="swiperList2"
          v-if="listData"
          :slides-per-view="4"
          :autoplay="{ delay: 1000, disableOnInteraction: false }"
          :speed="500"
          :space-between="10"
          :direction="'vertical'"
          :scrollbar="{ draggable: false }"
          :loop="true"
          :modules="modules"
          style="height: 230px"
        >
          <swiper-slide v-for="(i, index) in listData" :key="index">
            <div class="mt-10px">
              <div class="text-#142142 truncate text-16px">
                <a
                  @click="toDetail2(i)"
                  :href="i.url"
                  class="no-underline text-#142142 cursor-pointer hover:underline"
                  >{{ i.title }}</a
                >
              </div>
              <div class="text-#808696 mt-8px text-14px">
                <span>来源于: {{ i.source }}</span> &nbsp;&nbsp;&nbsp;<span>{{
                  i.publishTime
                }}</span>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.news-left {
  background: url('@/assets/images/news-left.jpg') no-repeat;
  width: 100%;
  height: 100%;
  top: -2px;
  left: 0px;
}
.news-right {
  width: 100%;
  height: 100%;
  top: -2px;
  right: 0px;
  background: url('@/assets/images/news-right.jpg') no-repeat;
}
::-webkit-scrollbar {
  width: 1px;
}
.txt-bg {
  background: linear-gradient(to right, #4aa7d9, #60d1c7);
}
.card {
  // width: 480px;
  // height: 428px;
  width: 480px;
  height: 395px;
  border-radius: 18px;
  overflow: hidden;

  background-color: #fff;
  // border: 1px solid #e7ebf5;
  box-shadow: 1px 2px 12px rgba(14, 86, 221, 0.32);
  position: relative;
  display: flex;
  flex-direction: column;
  position: relative;

  &::after {
    content: ' ';
    background-image: url('@/assets/images/bg-card.svg');
    pointer-events: none;
    display: block;
    width: 100%;
    height: 127px;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
  }

  .card_title {
    flex-shrink: 0;
    font-size: 28px;
    color: #142142;
    padding: 20px;
    padding-right: 8px;
    padding-bottom: 0;
  }

  .card_sub-title {
    color: rgba(128, 134, 150, 0.8);
    font-size: 16px;
    padding: 0 20px;
    padding-bottom: 0;
    margin-top: 10px;
  }
}

.topics {
  .item {
    border-radius: 8px;
    width: 210px;
    height: 155px;
    box-shadow: inset 1.4px 1.4px 0px 0px rgba(255, 255, 255, 0.004);
    overflow: hidden;

    background-image: url('@/assets/images/bg-card4.svg');
    background-position: -2px -2px;
    background-repeat: no-repeat;
    background-size: 215px 165px;
    position: relative;

    .item_title {
      padding-left: 16px;
      padding-top: 22px;
      color: #002fa7;
      position: relative;
      // z-index: 9;
    }

    .item_sub-title {
      color: rgba(128, 134, 150, 0.8);
      font-size: 12px;
      font-weight: normal;
      padding: 0 16px;
      padding-right: 8px;
      padding-bottom: 0;
      margin-top: 10px;
      z-index: 9;
    }

    .item_img {
      position: absolute;
      bottom: -10px;
      right: 0;
      // z-index: 5;
      transition: transform 0.3s;

      &:hover {
        transform: scale(1.2);
      }
    }
  }
}

.news {
  .card_content {
    // padding: 20px;
    // padding-top: 0;
  }

  .news_card {
    // width: 442px;
    height: 180px;
    padding: 16px;
    font-size: 14px;

    // background-image: url('./images/bg-card6.png');
    background-repeat: no-repeat;
    // background-position: 0 0;
    // background-size: cover;
    background-size: 100% 100%;

    // border: 0px solid;
    // // padding: 0;
    // border-width: 4px;
    // border-image-outset: 4px;
    // // box-sizing: content-box;

    // border-image-source: url('@/assets/images/bg-card6.svg');
    // border-image-slice: 4 4 4 4;
    // border-image-repeat: round repeat;

    position: relative;
  }

  .news_card_item {
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    border-radius: 10px;
    background-position: 0 4px;

    &.i1 {
      background-image: url('@/assets/images/bg-card6-11.svg');
    }

    &.i2 {
      background-image: url('@/assets/images/bg-card6-21.svg');
    }

    &.i3 {
      background-image: url('@/assets/images/bg-card6-31.svg');
      background-position: 0 10px;
    }
  }
}
</style>
