<template>
  <div>
    <div class="box">

      <el-card class="mt20 mb20" :body-style="{'padding':'0'}">
        <div class="lineHead">
          <h3>全部通知公告</h3>
        </div>
<!--        <el-tabs v-model="activeName" @tab-change="changeTab" @tab-click="clickTab">-->
<!--          <el-tab-pane v-for="(tab,index) in list" :key="index" :label="tab.name" :name="index" />-->
<!--        </el-tabs>-->
        <div class="pd20">
        <el-row class="mb20">
          <el-col :lg="24" :xs="24">
            <div v-for="(n,index) in newsList?.slice(0,1)" v-show="index<1" :key="index" class="firstItem" @click="goDetail(n)">
              <div class="date">
                <p>{{ n.belongTime }}</p>
              </div>
              <div class="item-body">
                <h3 class="esp_2"><span class="istop">置顶</span>{{n.name}}</h3>
              </div>
              <a class="go">查看详情 ⇀</a>
            </div>
          </el-col>
<!--          <el-col :lg="8" :xs="24" class="forPc">-->
<!--            <div class="searchPark">-->
<!--              <h3>通知搜索</h3>-->
<!--              <el-form>-->
<!--                <el-form-item>-->
<!--                  <div class="flexformItem">-->
<!--                    <el-date-picker-->
<!--                      v-model="query.year"-->
<!--                      class="mr10"-->
<!--                      type="year" value-format="YYYY"-->
<!--                      placeholder="选择年份" @change="getList"-->
<!--                    />-->
<!--                    <el-date-picker-->
<!--                      v-model="query.month"-->
<!--                      format="MM" value-format="MM"-->
<!--                      type="month"-->
<!--                      placeholder="选择月份" @change="getList"-->
<!--                    />-->
<!--                  </div>-->

<!--                </el-form-item>-->
<!--                <el-form-item>-->
<!--                  <el-input-->
<!--                    v-model="query.name"-->
<!--                    placeholder="输入关键字"-->
<!--                    :suffix-icon="Search" @change="getList"-->
<!--                  />-->
<!--                </el-form-item>-->
<!--              </el-form>-->
<!--            </div>-->
<!--          </el-col>-->
        </el-row>

        <div class="newsLine">


          <div v-for="(n,index) in newsList" v-show="index>0" :key="index" 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 class="item-body">
              <h3 v-html="n.name" />
            </div>
            <a class="go" />
          </div>
        </div>
        <div v-if="total>8" class="pc-page-box">
          <PaginationPc v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="total" @pagination="getList" />
        </div>
        <el-empty v-if="newsList.length == 0" description="暂无数据" />
        </div>
      </el-card>

    </div>
  </div>
</template>
<script setup>
import { ArrowRight, Search } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { getNewsListById, getNoticeSorts } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'
const router = useRouter()
const activeName = ref(0)
const list = ref([])
const newsList = ref([])
const nowTab = ref({})
const total = ref(0)
const query = ref({
  pageSize: 10,
  pageNum: 1,
  sortId:20000000
})
onMounted(() => {
  getList()
})

const getList = () => {
  getNewsListById(query.value).then(res => {
    newsList.value = res.rows
    total.value = res.total
    if (query.value.name) {
      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.name.replace(pattern, `<span class="highlight">$&</span>`)
      }
    }
  })
}
const clickTab = (pane, ev) => {
  console.log(pane, ev)
}
const goDetail = (n) => {
  if (n.isOut == '1') {
    window.open(n.jumpUrl)
  } else {
    router.push({
      path: `/news/detail/${n.noteId}`
    })
  }
}

</script>
<style lang="scss" scoped>

.infoPart{padding: 20px;  flex: 1;
  &>h3{
    font-size: 24px;
    color: var(--el-color-primary);}
}
.firstItem{cursor: pointer;
  background: #F8F4FF;height: 100%;padding: 10px 20px;
  .date{font-weight: bold;transform: scaleX(0.7);transform-origin: left;
    font-size: 18px;
    color: var(--el-color-primary);}
  h3{margin: 10px 0;
    font-size: 22px;}
  .go{color: var(--el-color-primary);
    font-size: 14px;padding: 0 0 5px;}
}


.newsLine{
  .item{display: flex;position: relative;width: 100%;height: 90px;
    align-items: center;cursor: pointer;border-bottom: 1px dashed #EEEEEE;
    .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;}
    }
    .item-body{width: 60%;
      h3{padding: 0 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 18px;color: #000000;}
    }
    .go{background: url("@/assets/v1/about/go.png") no-repeat center;background-size: contain;
      position: absolute;width: 30px;height: 30px;right: 10px;
      filter:grayscale(1);
    }
  }
  .item:hover{background: #F8F4FF;
    .date{
      background: var(--el-color-primary);
      .day{color: #fff;}
      p{color: #fff;}
    }
    .item-body{
      h3{color: var(--el-color-primary);}
    }
  }
}

@media (max-width: 500px) {
  .box{width: 100%}
  .forWei {
    display: block;
  }
  .forPc{display: none}
  :deep(.el-tabs__nav-scroll){overflow: auto;}
  :deep(.el-card__body){padding: 10px;}
  .flexBody{display: block;background: transparent;}
  .infoPart{background: #fff;padding: 10px;margin:0 15px}
  .firstItem{padding: 10px 20px;
    .date{
      font-size: 14px;}
    h3{margin: 10px 0;
      font-size: 14px;}
    .go{font-size: 12px;}
  }
  .newsLine{
    .item{height: 50px;
      .date{height: 34px;width: 44px;margin: 0;
        .day{font-size: 16px;}
        p{font-size: 12px;}
      }
      .item-body{width: 80%;
        h3{font-size: 14px;}
      }
    }
    .go{display: none;}

  }
}
</style>