<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="one">
          <el-image class="image" :src="news" fit="fill" />
        </el-col>
        <el-col :span="24" class="two">
          <div class="w_1200" v-for="(item, index) in list" :key="index">
            <el-col :span="24" class="two_1" v-if="(index + 1) % 2 == 0">
              <el-col :span="12" class="ileft">
                <el-image class="image" :src="item.url" fit="fill" />
              </el-col>
              <el-col :span="12" class="right">
                <el-col :span="23" class="title">
                  <el-col
                    :span="24"
                    class="list"
                    v-for="(item, index) in trends"
                    :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>
            <el-col :span="24" class="two_2" v-else>
              <el-col :span="12" class="left">
                <el-col :span="23" class="title">
                  <el-col
                    :span="24"
                    class="list"
                    v-for="(item, index) in trends"
                    :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="12" class="iright">
                <el-image class="image" :src="item.url" fit="fill" />
              </el-col>
            </el-col>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
// 基础
import moment from 'moment'
// 接口
import { NewsStore } from '@/store/api/platform/news'
const store = NewsStore()
// 路由
const router = useRouter()
// 图片引入
import news from '/images/news.png'
import new_1 from '/images/new_1.png'
import new_2 from '/images/new_2.png'
import new_3 from '/images/new_3.png'
import new_4 from '/images/new_4.png'
import new_5 from '/images/new_5.png'
// 加载中
const loading = ref(false)
const list = ref([
  {
    title: '改善民生',
    brief: '推动政策落地，让每一分投入都发挥最大效益，让每一步行动都引领未来发展。',
    url: new_1
  },
  {
    title: '改革开放',
    brief: '我们向您献上最诚挚的敬意，希望我们能一起开拓更广阔的合作领域。',
    url: new_2
  },
  { title: '现代化建设', brief: '科技点亮希望,创新改变世界。', url: new_3 },
  {
    title: '扩大内需',
    brief: '通过不懈的努力，我们成功地完成了项目目标，取得了显著的成果。',
    url: new_4
  },
  {
    title: '加大政策力度',
    brief: ' 孵化器也指一个集中的空间，能够在企业创办初期举步维艰时，提供资金、管理等多种便利。',
    url: new_5
  }
])
const trends = ref([])
// 请求
onMounted(async () => {
  loading.value = true
  search()
  loading.value = false
})
const search = async () => {
  const info = { skip: 0, limit: 4, type: '0', status: '1', is_use: '0' }
  const res = await store.query(info)
  if (res.errcode == '0') trends.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 {
  background: rgb(248, 248, 248);

  .one {
    .image {
      width: 100%;
      height: 200px;
    }
  }

  .two {
    margin: 10px 0;

    .two_1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;
      border: 1px solid rgba(5, 5, 5, 0.06);
      border-radius: 10px;
      background: #fff;

      .ileft {
        display: flex;
        justify-content: center;

        .image {
          width: 90%;
          height: 350px;
        }
      }

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

            .left {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              font-family: PingFangSC-Regular;
              font-size: 12px;
              line-height: 12px;
              width: 95px;
              height: 75px;
              background: #2374ff;
              color: #fff;
              margin-right: 15px;

              .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);
          }
        }
      }
    }

    .two_2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid rgba(5, 5, 5, 0.06);
      border-radius: 10px;
      margin: 10px 0;
      background: #fff;

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

            .left {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              font-family: PingFangSC-Regular;
              font-size: 12px;
              line-height: 12px;
              width: 95px;
              height: 75px;
              background: #2374ff;
              color: #fff;
              margin-right: 15px;

              .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;
          }
        }
      }

      .iright {
        display: flex;
        justify-content: center;

        .image {
          width: 90%;
          height: 350px;
        }
      }
    }
  }
}
</style>
