<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-col
              :span="12"
              class="list"
              v-for="(item, index) in list"
              :key="index"
              @click="toView(item, '3')"
            >
              <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 :span="24" class="two">
            <el-pagination
              background
              layout="total, prev, pager, next"
              :page-sizes="[10, 20, 50, 100, 200]"
              :total="total"
              :page-size="limit"
              v-model:current-page="currentPage"
              @current-change="changePage"
              @size-change="sizeChange"
            >
            </el-pagination>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import moment from 'moment'
const list = inject('list')
const total = inject('total')
const limit = inject('limit')
const toView = inject('toView')
const currentPage = inject('currentPage')
const changePage = inject('changePage')
const sizeChange = inject('sizeChange')
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 {
  .one {
    display: flex;
    flex-wrap: wrap;
    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      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);
    }
  }
  .two {
    display: flex;
    flex-direction: row-reverse;
    padding: 20px;
  }
}
</style>
