<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>-->

      <el-card class="mt20 mb20">
        <div class="infoPart" style="min-height: 65vh">
          <div class="newsBlock">
            <div v-for="n in newsList" class="item" @click="goDetail(n)">
              <div class="date">
                <div class="day">30</div>
                <p>2023/07</p>
              </div>
              <div v-if="n.picUrl" class="imgbox">
                <img :src="fillImgUrl_webSite(n.picUrl)">
              </div>
              <div class="item-body">
                <h3 v-html="n.name"></h3>
                <label v-if="n.sortName">{{ n.sortName }}</label>
                <p v-html="n.subName"></p>
                <a class="go"/>
              </div>
            </div>
            <el-empty v-if="newsList.length == 0" />

          </div>


        </div>
        <div class="pc-page-box">
          <PaginationPc v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="total" @pagination="getList"/>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { getNewsListById } from '@/apiPc/webSite'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const total = ref(0)
const query = ref({
  pageSize: 10,
  pageNum: 1
})
const newsList = ref([])
onMounted(() => {
  query.value.name = route.query.name
  getList()
})
watch(() => route.query.name, (val) => {
  query.value.name = route.query.name
  getList()
})
const getList = () => {
  getNewsListById(query.value).then(res => {
    newsList.value = res.rows
    total.value = res.total
    const pattern = new RegExp(query.value.name, 'gi')
    for (var n of newsList.value) {
      n.name = n.name.replace(pattern, `<span class="highlight">$&</span>`)
      n.subName = n.subName.replace(pattern, `<span class="highlight">$&</span>`)
    }
  })
}

const goDetail = (n) => {
  if (n.isOut == '1') {
    window.open(n.jumpUrl)
  } else {
    router.push({
      path: `/news/detail/${n.noteId}`
    })
  }
}
</script>

<style scoped lang="scss">
.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 {
      width: calc(100% - 360px);

      label {
        background: linear-gradient(-90deg, #FCD258 0%, #D3AA5A 0%, #E4C889 99%);
        border-radius: 12px 12px 12px 0px;
        padding: 2px 10px;
        color: #FFFFFF;
        margin: 10px 10px 0;
        display: inline-block;
        font-size: 14px;
      }

      h3 {
        padding: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        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>