<template>
  <div class="mainView">
    <!-- <div class="news">
      <img src="../../assets/logo/headline.png" alt="" />
      <el-carousel direction="vertical" :autoplay="true" style="height: 100px">
        <el-carousel-item v-for="item in list1" :key="item">
          <h2 text="xl" justify="center">{{ item }}</h2>
        </el-carousel-item>
      </el-carousel>
    </div> -->
    <div class="top_center">
      <div class="left">
        <el-carousel
          trigger="click"
          :interval="2000"
          :autoplay="true"
          v-if="carouselLoaded"
          class="lun_bo_tu"
        >
          <el-carousel-item v-for="item in HOMElistDEl" :key="item">
            <img
              style="width: 100%; height: 100%"
              :src="item[0]"
              @click="
                openNewWindowArticleDetails(item.id, '/News/imges', item.id)
              "
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="tong_zhi_gong_gao">
        <div class="title">
          <p
            @mouseenter="mouseenterIactives(1)"
            :class="{ actives: isHovered == 1 ? true : false }"
            @click="openNewWindowinform('message')"
          >
            通知公告
          </p>
          <p
            @mouseenter="mouseenterIactives(2)"
            :class="{ actives: isHovered == 2 ? true : false }"
          >
            <!--     @click="openNewWindowinform('messageJC')" -->
            市场监测
          </p>
        </div>
        <ul class="lou_ceng">
          <li
            class="list_const"
            v-for="item in newsList"
            :key="item.id"
            @click="
              openNewWindowArticleDetails(item.code, '/News/article', item.id)
            "
          >
            <div class="svg_del">
              <img src="../../assets/logo/rigth.svg" alt="" />
            </div>
            <div class="list_txt" v-html="item.title"></div>
            <div class="list_time">
              {{ getDateDEl(item.publishTime) }}
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="bottom">
      <div class="b_1">
        <p class="b_1_back">
          <span class="span1">国务院信息</span>
          <span class="span2" @click="openNewWindowinform('gwy')"
            >更多<img src="../../assets/logo/rigth.svg" alt=""
          /></span>
        </p>
        <ul>
          <li
            v-for="item in GWYLIST"
            :key="item.id"
            @click="openNewWindow(item.redirectUrl)"
          >
            <div class="svg_del">
              <img src="../../assets/logo/rigth.svg" alt="" />
            </div>
            <div class="text1">
              {{ item.title }}
            </div>
            <div class="text_time">{{ getDateDEl(item.publishDate) }}</div>
          </li>
        </ul>
      </div>
      <!--  -->
      <div class="b_1">
        <p class="b_1_back">
          <span class="span1">青海要闻</span>
          <span class="span2" @click="openNewWindowinform('qhyw')"
            >更多<img src="../../assets/logo/rigth.svg" alt=""
          /></span>
        </p>
        <ul>
          <li
            v-for="item in QIHlistDEl"
            :key="item.id"
            @click="openNewWindow(item.redirectUrl)"
          >
            <div class="svg_del">
              <img src="../../assets/logo/rigth.svg" alt="" />
            </div>
            <div class="text1">
              {{ item.title }}
            </div>
            <div class="text_time">{{ getDateDEl(item.publishDate) }}</div>
          </li>
        </ul>
      </div>
      <!--  -->
      <div class="b_1">
        <p class="b_1_back">
          <span class="span1">粮食局信息</span>
          <span class="span2" @click="openNewWindowinform('lsj')"
            >更多<img src="../../assets/logo/rigth.svg" alt=""
          /></span>
        </p>
        <ul>
          <li
            v-for="item in LSJUlistDEl"
            :key="item.id"
            @click="openNewWindowArticleDetails(1, '/News/Bureau', item.id)"
          >
            <div class="svg_del">
              <img src="../../assets/logo/rigth.svg" alt="" />
            </div>
            <div class="text1">
              {{ item.title }}
            </div>
            <div class="text_time">{{ getDateDEl(item.publishDate) }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import {
  getlist,
  GWYlist,
  QIHlist,
  LSJUlist,
  HOMElist,
} from '@/api/Important.js'
import uils from '@/utils/utils'

const image = [
  'http://fgw.qinghai.gov.cn/xwzx/tpxw/202405/W020240521292028040228.jpg',
  'http://fgw.qinghai.gov.cn/xwzx/tpxw/202405/W020240522288952018363.png',
  'http://fgw.qinghai.gov.cn/xwzx/tpxw/202404/W020240430360807536242.jpg',
  'http://fgw.qinghai.gov.cn/xwzx/tpxw/202405/W020240521292028040228.jpg',
]
function openNewWindowArticleDetails(data, path, v) {
  if (!data) return
  let href = router.resolve({
    path: path,
    query: { code: data, id: v },
  }).href
  window.open(href, '_blank')
}
function openNewWindow(data) {
  window.open(data, '_blank')
}
function openNewWindowinform(path, data) {
  let href = router.resolve({
    path: '/News/' + path,
    query: { key: data },
  }).href
  window.open(href, '_blank')
}

const tpe1 = ref([])

const tpe2 = ref([
  {
    announcementContent: '没数据呀',
    updateTime: '123',
    title: 'title',
  },
])

onMounted(() => {
  del()
  GWYlistpage()
  QIHlistpage()
  QIHlistpage()
  LSJUlistpage()
  HOMElistpage()
})
const newsList = ref([])
const isHovered = ref(1)
const router = useRouter()
const mouseenterIactives = (v) => {
  isHovered.value = v
  newsList.value = []
  if (v == 1) {
    newsList.value = tpe1.value
  } else {
    newsList.value = tpe2.value
  }
}
//公告
const del = async () => {
  const { data } = await getlist({ size: 8, current: 1, status: 2 })
  tpe1.value = []
  newsList.value = []
  tpe1.value = data.records.map((v) => {
    return {
      code: 3,
      ...v,
    }
  })
  newsList.value = tpe1.value
}
const getDateDEl = (v) => {
  const formattedDate = uils.getDate('YYYY-MM-DD', v)
  return formattedDate
}

//国务院
const GWYLIST = ref([])
const GWYlistpage = async () => {
  const { data } = await GWYlist({ size: 10, current: 1, status: 2 })
  GWYLIST.value = data.records
  // title redirectUrl createTime
}
//青海要闻
// QIHlist
const QIHlistDEl = ref([])
const QIHlistpage = async () => {
  const { data } = await QIHlist({ size: 10, current: 1, status: 2 })
  QIHlistDEl.value = data.records
  // title redirectUrl createTime
}
// LSJUlist 粮食局
const LSJUlistDEl = ref([])
const LSJUlistpage = async () => {
  const { data } = await LSJUlist({ size: 10, current: 1, status: 2 })
  LSJUlistDEl.value = data.records
  // title redirectUrl createTime
}
// 首页轮播
const carouselLoaded = ref(false)
const HOMElistDEl = ref([])
const HOMElistpage = async () => {
  HOMElistDEl.value = []
  const { data } = await HOMElist({ size: 10, current: 1, status: 2 })
  HOMElistDEl.value = data.records.map((item) => {
    return {
      id: item.id,
      ...(item.newsImages || '').split(',').filter((v) => v),
    }
  })
  nextTick(() => {
    carouselLoaded.value = true
  })
  // console.log('data', HOMElistDEl.value)
}
</script>

<style lang="less" scoped>
.mainView {
  .news {
    width: 100%;
    margin: auto;
    height: 100px;
    background-color: rgb(247, 247, 246);
    margin-top: 10px;

    img {
      float: left;
      margin: 20px 0 10px 20px;
    }

    h2 {
      font-size: 30px;
      width: 80%;
      text-align: center;
      margin: auto;
      line-height: 100px;
      color: crimson;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .top_center {
    margin: 0 20px;
    margin-top: 20px !important;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    .left {
      width: 580px;
      height: 400px;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .tong_zhi_gong_gao {
      width: 580px;
      height: 380px;
      margin-left: 10px;
      overflow: hidden;

      .title {
        // margin-top: 10px;
        display: flex;
        cursor: pointer;
        justify-content: space-evenly;
        line-height: 40px;

        .actives {
          background-color: #3274c3;
          color: #ffffff;
        }

        p {
          cursor: pointer;
          border-radius: 10px;
          width: 260px;
          text-align: center;
          background-color: #ffffff;
          border: 1px solid #d1d9ed;
        }
      }

      .title :hover {
        background-color: #3274c3;
      }

      .lou_ceng {
        margin-left: 20px;
        height: 320px;

        // background: #3274C3;
        .list_const {
          margin: 10px 0;
          display: flex;
          height: 30px;
          cursor: pointer;

          .svg_del {
            margin-right: 10px;

            img {
              width: 10px;
              height: 10px;
            }
          }

          .list_txt {
            width: 386px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: 50px;
          }
        }

        .list_const:hover {
          color: #4b9ae9;

          .list_time {
            color: #4b9ae9 !important;
          }
        }
      }
    }
  }

  .bottom {
    display: flex;
    margin: 0 20px;
    justify-content: space-between;

    .b_1 {
      width: 360px;
      height: 450px;
      border: 1px solid #d1d9ed;
    }

    .b_1 {
      .b_1_back {
        display: flex;
        justify-content: space-between;
        height: 50px;
        background: #f9fcff;
        line-height: 50px;
        border-bottom: 1px #d1d9ed solid;

        .span1 {
          padding-left: 20px;
          padding-right: 20px;
          font-weight: 500;
          font-size: 18px;
          color: #3274c3;
          border-bottom: 1px solid #3274c3;
          padding-bottom: 1px;
        }

        .span2 {
          // background: url('../../assets/logo/text.svg');
          // background-size: 58px 51px !important;
          // background-repeat: no-repeat;
          cursor: pointer;
          font-size: 16px;
          display: flex;
          align-items: center;
          color: #3274c3;

          img {
            width: 15px;
            margin-left: 5px;
            margin-right: 5px;
          }
        }
      }

      ul {
        margin-top: 10px;
        margin: 0 10px;

        li {
          cursor: pointer;

          .svg_del {
            margin-right: 10px;

            img {
              width: 10px;
              height: 10px;
            }
          }

          display: flex;
          margin-top: 10px;
          height: 30px;
          justify-content: space-between;
        }

        li:hover {
          color: #4b9ae9;
        }

        .text1 {
          width: 220px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .b_2 {
      p {
        display: flex;
        justify-content: space-between;
        line-height: 30px;
        border-bottom: 1px solid;
      }

      ul {
        margin-top: 10px;
      }
    }

    .b_3 {
      p {
        display: flex;
        justify-content: space-between;
        line-height: 30px;
        border-bottom: 1px solid;
      }

      ul {
        margin-top: 10px;
      }
    }
  }
}

.lun_bo_tu ::v-deep(.el-carousel__container) {
  height: 380px !important;
}
</style>
