<template>
  <div>
    <div class="box">
      <el-breadcrumb class="mt20 forPc mb20" :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="mb20">

        <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>
        <el-row class="mb20">
          <el-col :lg="16" :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" v-html="n.name" />
              </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="暂无数据" />

      </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
})
onMounted(() => {
  getKindList()
})
const getKindList = () => {
  getNoticeSorts().then(res => {
    list.value = res.data
    changeTab(0)
  })
}
const changeTab = (n) => {
  nowTab.value = list.value[n]
  query.value.sortId = list.value[n]?.sortId
  query.value.code = list.value[n]?.code
  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: #AD181F;}
}
.firstItem{cursor: pointer;
  background: #FAFAFA;height: 100%;padding: 10px 20px;
  .date{font-weight: bold;transform: scaleX(0.7);transform-origin: left;
    font-size: 18px;
    color: #AD181F;}
  h3{margin: 10px 0;
    font-size: 22px;}
  .go{color: #7B7F83;border-bottom: 1px solid #AD181F;
    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: #BD0012;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: rgba(173, 24, 31, 0.03);
    .date{
      background: #AD181F;
      .day{color: #fff;}
      p{color: #fff;}
    }
    .item-body{
      h3{color: #AD181F;}
    }
    a{filter: none}
  }
}

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