<template>
  <div id="list">
    <ul>
      <li v-for="(item, index) in newArr" :key="index">
        <div>
          <h2 class="title"> {{ item.title }}</h2>
          <div class="content">{{ item.content }}</div>
          <div class="bottom">
            <div class="bsource">来源：{{ item.source }}</div>
            <div class="btime">发布时间：{{ item.time }}</div>
          </div>
        </div>
        <!-- <div>
          <div class="type">{{ item.type }}</div>
        </div>
        <div>
          <div class="source">{{ item.source }}</div>
        </div>
        <div>
          <div class="name">{{ item.name }}</div>
        </div>
        <div>
          <div class="time">{{ item.time }}</div>
        </div>
        <div><button>查看详情</button></div> -->
      </li>
    </ul>
    <div class="list-pagination">
      <a-pagination
        show-quick-jumper
        show-size-changer
        :show-total="total => `共 ${ Math.ceil(total/params.pageSize)} 页 共 ${total} 条`"
        :page-size-options="pageSizeOptions"
        :default-current="1"
        :total="params.total"
        :page-size="params.pageSize"
        @change="onChange"
        @showSizeChange="onShowSizeChange" />
    </div>

  </div>
</template>
<script>
import '../../systemNavComponents/js'
export default {
  props: {
    dataSoure: {
      type: Array,
      default: () => {}
    }
    // params: {
    //   type: Object,
    //   default: () => {},
    // },
  },
  data () {
    return {
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      params: {
        total: 6,
        pageNum: 1,
        pageSize: 5
      },
      newArr: []
    }
  },
  mounted () {
    this.onChange(1)
  },
  methods: {
    onChange (pageNumber) {
      const startPage = this.params.pageSize * (pageNumber - 1)
      const endPage = this.params.pageSize * pageNumber
      this.newArr = this.dataSoure.slice(startPage, endPage)
    },
    onShowSizeChange (current, pageSize) {
      const startPage = pageSize * (current - 1)
      const endPage = pageSize * current
      this.newArr = this.dataSoure.slice(startPage, endPage)
      this.params.pageSize = pageSize
    }
  }
}
</script>
<style lang='less' scoped>
ol,
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#list {
  width: 100%;
  ul {
    margin-top: 0.5rem;
    li {
      display: grid;
      // grid-template-columns: 38% 12% 14% 12% 12% 12%;
      height: 15.5rem;
      border-radius: 6px;
      background: #ffffff;
      align-items: center;
      border: 1.5px solid #eee;
      margin-top: 2rem;
      &:hover {
        cursor: pointer;
        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
        .title {
          color: #2440b3;
          text-decoration: underline;
        }
      }
      div {
        font-size: 1.8rem;
        color: #000;
      }
      & > div:first-child {
        padding-right: 6rem;
        padding-left: 3rem;
      }
      & > div:last-child {
        padding-right: 3rem;
      }
      .title {
        font-weight: bold;
        font-size: 1.8rem;
        margin-top: 0.5rem;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        width: 70%;

      }
      .content {
        font-size: 1.6rem;
        color: #222;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .bottom {
        & > div {
          font-size: 1.4rem;
          color: #999;
          margin-top: 0.8rem;
          display: inline-block;
          margin-right: 3rem;
        }
      }
      .source {
        width: 12rem;
        height: 4rem;
        line-height: 4rem;
        border-radius: 2rem;
        color: #c5ac56;
        font-size: 1.8rem;
        font-weight: bold;
        text-align: center;
        background: rgba(245, 241, 225, 1);
      }
      button {
        width: 12rem;
        height: 4rem;
        line-height: 3.8rem;
        border-radius: 6px;
        color: #ffffff;
        font-size: 1.6rem;
        font-weight: bold;
        border: none;
        background: rgba(0, 159, 226, 1);
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
  .list-pagination {
    margin: 3.5rem 0;
    text-align: center;
    /deep/.ant-pagination-total-text {
      font-size: 1.6rem;
      color: #484848;
      display: inline-block;
      vertical-align: middle;
    }
  }
}
</style>
