<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col :span="24" class="home">
          <el-image class="image" :src="home" fit="fill" />
        </el-col>
        <div class="w_1200" v-loading="loading">
          <el-col :span="24" class="one">
            <el-col :span="24" class="one_1">
              <el-col :span="12" class="left">政策信息</el-col>
              <el-col :span="12" class="right" @click="selectMenu('brain')">查看政策信息</el-col>
            </el-col>
            <el-col :span="24" class="one_2">
              <el-col
                :span="12"
                class="list"
                v-for="(item, index) in newsList"
                :key="index"
                @click="toView(item)"
              >
                <el-col :span="4" class="left">
                  <div class="year" v-if="item.time">{{ moment(item.time).format('YYYY') }}</div>
                  <div class="date" v-if="item.time">{{ moment(item.time).format('MM-DD') }}</div>
                </el-col>
                <el-col :span="20" class="right">
                  <el-col :span="24" class="name textOver">
                    <el-tooltip effect="dark" :content="item.title" placement="top">
                      {{ item.title || '暂无标题' }}
                    </el-tooltip>
                  </el-col>
                  <el-col :span="24" class="content">
                    <div v-html="removeHtmlStyle(item.content)"></div>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="one">
            <el-col :span="24" class="one_1">
              <el-col :span="12" class="left">新闻通知</el-col>
              <el-col :span="12" class="right" @click="selectMenu('brain')">查看新闻通知</el-col>
            </el-col>
            <el-col :span="24" class="one_2">
              <el-col
                :span="12"
                class="list"
                v-for="(item, index) in newsList"
                :key="index"
                @click="toView(item)"
              >
                <el-col :span="4" class="left">
                  <div class="year" v-if="item.time">{{ moment(item.time).format('YYYY') }}</div>
                  <div class="date" v-if="item.time">{{ moment(item.time).format('MM-DD') }}</div>
                </el-col>
                <el-col :span="20" class="right">
                  <el-col :span="24" class="name textOver">
                    <el-tooltip effect="dark" :content="item.title" placement="top">
                      {{ item.title || '暂无标题' }}
                    </el-tooltip>
                  </el-col>
                  <el-col :span="24" class="content">
                    <div v-html="removeHtmlStyle(item.content)"></div>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="one">
            <el-col :span="24" class="one_1">
              <el-col :span="12" class="left">工作动态</el-col>
              <el-col :span="12" class="right" @click="selectMenu('brain')">查看工作动态</el-col>
            </el-col>
            <el-col :span="24" class="one_2">
              <el-col
                :span="12"
                class="list"
                v-for="(item, index) in newsList"
                :key="index"
                @click="toView(item)"
              >
                <el-col :span="4" class="left">
                  <div class="year" v-if="item.time">{{ moment(item.time).format('YYYY') }}</div>
                  <div class="date" v-if="item.time">{{ moment(item.time).format('MM-DD') }}</div>
                </el-col>
                <el-col :span="20" class="right">
                  <el-col :span="24" class="name textOver">
                    <el-tooltip effect="dark" :content="item.title" placement="top">
                      {{ item.title || '暂无标题' }}
                    </el-tooltip>
                  </el-col>
                  <el-col :span="24" class="content">
                    <div v-html="removeHtmlStyle(item.content)"></div>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import moment from 'moment'
const selectMenu = inject('selectMenu')
// 图片引入
import home from '/images/home.jpg'
// 接口
import { NewsStore } from '@/store/api/platform/news'
const newsStore = NewsStore()
// 路由
const router = useRouter()
// 加载中
const loading = ref(false)
// 新闻
const newsList = ref([])
// 请求
onMounted(async () => {
  loading.value = true
  await searchNews()
  loading.value = false
})
const searchNews = async () => {
  const info = {
    skip: 0,
    limit: 6,
    is_use: '0',
    status: '1'
  }
  const res = await newsStore.query(info)
  if (res.errcode == '0') newsList.value = res.data
}

// 查看详情
const toView = (item) => {
  router.push({ path: '/news/detail', query: { id: item.id || item._id } })
}
const removeHtmlStyle = (html) => {
  let relStyle = /style\s*?=\s*?([‘"])[\s\S]*?\1/g //去除样式
  let relTag = /<.+?>/g //去除标签
  let relClass = /class\s*?=\s*?([‘"])[\s\S]*?\1/g // 清除类名
  let newHtml = ''
  if (html) {
    newHtml = html.replace(relStyle, '')
    newHtml = newHtml.replace(relTag, '')
    newHtml = newHtml.replace(relClass, '')
  }
  return newHtml
}
</script>
<style scoped lang="scss">
.main {
  .home {
    position: relative;

    .image {
      width: 100%;
      height: 200px;
    }
  }
  .one {
    padding: 25px 0;
    .one_1 {
      display: flex;
      justify-content: space-between;
      margin: 0 0 10px 0;
      .left {
        font-size: 24px;
        font-family:
          PingFangSC-Semibold,
          PingFang SC;
        font-weight: 600;
        color: #111;
        line-height: 33px;
      }
      .right {
        text-align: right;
        font-size: 14px;
        font-family:
          PingFangSC-Regular,
          PingFang SC;
        font-weight: 400;
        color: #2280ff;
        line-height: 14px;
        display: block;
        margin-top: 13px;
        margin-right: 34px;
      }
      .right:hover {
        cursor: pointer;
      }
    }

    .one_2 {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        transition: all 0.3s;

        .left {
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #2374ff;
          line-height: 12px;

          .year {
            margin-bottom: 2px;
          }

          .date {
            font-size: 22px;
            line-height: 22px;
            margin-bottom: 10px;
          }
        }

        .right {
          .name {
            font-family: PingFangSC-Medium;
            font-size: 16px;
            color: #121834;
            line-height: 16px;
            font-weight: 700;
            margin-bottom: 8px;
          }

          .content {
            font-size: 12px;
            color: #525a68;
            line-height: 19px;
            font-weight: 400;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 8px;
          }
        }
      }

      .list:hover {
        background: #f0f7ff;
        box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
        cursor: pointer;
      }
    }
  }
}
</style>
