<template>
  <div>
    <div class="box">
      <el-breadcrumb class="mt20" :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">
          <el-icon>
            <HomeFilled/>
          </el-icon>
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item>党的建设</el-breadcrumb-item>
        <el-breadcrumb-item>祖国在我心中</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="mt20 mb20" :body-style="{ padding: '0px' }">

        <div class="infoPart">
          <div class="newsBlock">
            <div v-for="n in list" class="item" @click="goDetail(n)">
              <div class="date">
                <div class="day">{{ n.belongTime?.substring(8, 10) }}</div>
                <p>{{ n.belongTime?.substring(0, 7).replace(/-/g, '/') }}</p>
              </div>
              <div v-if="n.url" class="imgbox">
                <img :src="fillImgUrl_webSite(n.url)">
              </div>
              <div class="item-body">
                <h3>{{ n.name }}</h3>
                <p>{{ n.subName }}</p>
                <a class="go"/>
              </div>
            </div>
          </div>
        </div>
        <div class="pc-page-box mb20" v-if="total>9">
          <PaginationPc v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="total" @pagination="getList"/>
        </div>
        <el-empty v-if="list?.length == 0" description="暂无数据"/>
      </el-card>

    </div>
  </div>
</template>
<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { getNewsListById } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'
const router = useRouter()

const list = ref([])
const total = ref(0)
const query = ref({
  pageSize: 10,
  pageNum: 1,
  sortId: '1704682259578433537',
  code: '100000020002'
})

onMounted(() => {
  getList()
})
const getList = () => {
  getNewsListById(query.value).then(res => {
    list.value = res.rows
    total.value = res.total
  })
}
const goDetail = (n) => {
  if (n.isOut == '1') {
    window.open(n.jumpUrl)
  } else {
    router.push({
      path: `/news/detail/${n.noteId}`
    })
  }
}
</script>
<style lang="scss" scoped>
.flexBody {
  display: flex
}

.infoPart {
  padding: 20px;

  & > h3 {
    font-size: 24px;
    color: var(--el-color-primary);
  }
}

.newsBlock {
  .item {
    display: flex;
    position: relative;
    width: 100%;
    cursor: pointer;
    border-bottom: 1px dashed #EEEEEE;
    padding: 30px 0;

    .date {
      width: 60px;
      height: 60px;
      text-align: center;
      background: #FAFAFA;
      margin: 0 10px;

      .day {
        color: var(--el-color-primary);
        transform: scaleX(0.7);
        font-weight: bold;
        font-size: 24px;
      }

      p {
        font-size: 14px;
        margin: 0;
        transform: scaleX(0.7);
        font-weight: bold;
        color: #7B7F83;
      }
    }

    .imgbox {width: 280px;margin-right: 10px;    height: 157.5px;overflow: hidden;
      flex: 0 0 auto;
      img{width: 100%;height: 100%;object-fit: cover;object-position: top;}
    }

    .item-body { flex: 1 1 auto;
      h3 {
        padding: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        width: 60vw;
        text-overflow: ellipsis;
        font-size: 18px;
        color: #000000;
        margin: 0
      }

      p {
        padding: 0 10px;
        text-align: justify;
        line-height: 24px;
        height: 48px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #7B7F83;
        font-size: 14px;
      }
    }

    .go {
      background: url("@/assets/v1/about/more.png") no-repeat center;
      background-size: contain;
      width: 22px;
      height: 8px;
      display: block;
      filter: grayscale(1);
      margin: 0 10px;
    }
  }

  .item:hover {
    background: #F8F4FF;

    .date {
      background: var(--el-color-primary);

      .day {
        color: #fff;
      }

      p {
        color: #fff;
      }
    }

    .item-body {
      h3 {
        color: var(--el-color-primary);
      }
    }

    a {
      filter: none
    }
  }
}
</style>