<template>
  <div class="notice-list">
    <div class="notice-list-body">
      <h2>公告</h2>
      <ul class="notice-list-ul">
        <li class="notice-list-li flex li-th">
          <div class="notice-list-left font-w-700">公告标题</div>
          <div class="notice-list-right font-w-700">公告时间</div>
        </li>
        <template v-for="(item, index) in noticeList">
          <li :key="index + 'notice'" class="notice-list-li notice-list-cell flex" @click="toDetail(item)">
            <div class="notice-list-left">
              <span>【{{ item.groupName }}】</span><span class="p-l-10">{{ item.title }}</span>
            </div>
            <div class="notice-list-right">{{ item.effectiveTime | timeStampToLineYmd }}</div>
          </li>
        </template>
      </ul>
      <div class="el-table__empty-block" v-if="!total">
        <div class="el-table__empty-text">
          <p class="font-14 color-909399">暂无数据</p>
        </div>
      </div>

      <div class="page-wrap" v-if="total">
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="pageNumber" @current-change="handleCurrentChange"> </el-pagination><span class="p-l-48">共 {{ totalPage }} 页 {{ total }} 条</span>
      </div>
    </div>
  </div>
</template>
<script>
import vueOpenHeader from '@/components/vue-open-header.vue';
import vueOpenFooter from '@/components/vue-open-footer.vue';
import { getNoticeList } from '@/api/notice';
import errMsg from '@/assets/js/error';
export default {
  components: {
    vueOpenHeader,
    vueOpenFooter
  },
  data() {
    return {
      noticeList: [],
      pageNumber: 1,
      pageSize: 10,
      total: 0,
      totalPage: 0
    };
  },
  methods: {
    toDetail(item) {
      const that = this;
      that.$router.push(`/noticeDetail?noticeId=${item.noticeId}`);
    },
    // 分页
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.getNoticeData();
    },
    getNoticeData() {
      const that = this;
      let para = {
        pageNumber: that.pageNumber,
        pageSize: that.pageSize
      };
      getNoticeList(para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            that.noticeList = resData.result.result || [];
            that.total = resData.result.totalCount;
            that.totalPage = resData.result.totalPage;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  mounted() {
    const that = this;
    that.getNoticeData();
  }
};
</script>
<style lang="less" scoped>
.p-l-48 {
  padding-left: 48px;
}
.notice-list {
  margin: 126px 0 20px 0;
  .notice-list-body {
    width: 1160px;
    margin: 0 auto;
    h2 {
      font-weight: 700;
      font-size: 24px;
      color: #0a1633;
    }
    .notice-list-ul {
      li {
        height: 80px;
        line-height: 80px;
        font-size: 14px;
        color: #0a1633;
        cursor: pointer;
        &:hover {
          .notice-list-left {
            color: #4c70e8;
          }
        }

        &:nth-child(2n + 1) {
          background: #f6f7fa;
        }
        &.li-th {
          font-weight: 700;
          background: #fff;
          border-bottom: 1px solid #eaecf6;
          cursor: unset;
          .notice-list-left {
            padding: 0;
          }
          &:hover {
            .notice-list-left {
              color: #0a1633;
            }
          }
        }
        .notice-list-left {
          width: 928px;
          max-width: 928px;
          // padding-left: 20px;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
        .notice-list-right {
          width: 172px;
          max-width: 172px;
        }
      }
    }
    .page-wrap {
      margin-top: 100px;
      text-align: center;
      .el-pagination {
        display: inline-block;
        vertical-align: middle;
      }
      .p-l-48 {
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        color: #0a1633;
      }
    }
  }
}
.el-table__empty-block {
  height: 256px;
  .el-table__empty-text {
    width: auto;
    margin-bottom: 80px;

    &::before {
      content: ' ';
      display: block;
      width: 60px;
      height: 60px;
      background: url(../../assets/no-data_icon.png) no-repeat center;
      margin: 0px auto 22px auto;
    }
  }
}
</style>
