<!--
 * @Description: 新闻中心
 * @Author: 空白格
 * @Date: 2022-08-22 10:20:21
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-30 10:59:27
 * @FilePath: \veterans_client_web\src\views\NewsCenter\NewsCenterIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="app-main">
    <div class="BannerBreadcrumb-wrap">
      <BannerBreadcrumb title="新闻中心" :breadcrumb="true" />
      <div class="tabs">
        <span
          v-for="(item, index) in tabList"
          @click="changeTab(index)"
          :class="{ active: tabsActive == index }"
          :key="index"
        >
          {{ item }}
        </span>
      </div>
    </div>

    <section class="app-main-box">
      <div class="app-main-box-content">
        <div class="title" v-if="tabsActive == 0">
          {{ tabList[tabsActive] }}
        </div>
        <div v-if="tabsActive == 0" class="news-list" v-loading="loading">
          <el-row :gutter="16">
            <el-col
              class="data-item"
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="24"
              v-for="(item, index) in dataList"
              :key="index"
            >
              <div
                @click="goNewsDetails(item.artId)"
                class="u-flex u-row-between"
                v-if="tabsActive == 0"
              >
                <div class="artTitle u-line-1">{{ item.artTitle }}</div>
                <div class="time">
                  {{ parseTime(item.updateTime, "{y}-{m}-{d}") }}
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <el-tabs
          v-if="tabsActive == 1"
          v-model="noticeActiveName"
          @tab-click="noticeClick"
        >
          <el-tab-pane
            v-for="(item, index) in noticeTypeList"
            :key="index"
            :label="item.label"
            :name="item.name"
          >
            <el-row :gutter="16">
              <el-col
                class="data-item"
                :xs="24"
                :sm="24"
                :md="24"
                :lg="24"
                :xl="24"
                v-for="(item, index) in dataList"
                :key="index"
              >
                <div
                  @click="goNoticeDetails(item.id)"
                  class="u-flex u-row-between"
                  v-if="tabsActive == 1"
                >
                  <div class="artTitle u-line-1">{{ item.name }}</div>
                  <div class="time">
                    {{ parseTime(item.releasTime, "{y}-{m}-{d}") }}
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
        <el-empty v-if="dataList < 1" description="暂无数据"></el-empty>
        <div class="pagination" v-if="total > queryParams.pageSize">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="queryParams.pageSize"
            :total="total"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import BannerBreadcrumb from "@/components/BannerBreadcrumb";
import { getNewsList } from "@/api/Home";
import { getNoticeList } from "@/api/NewsCenter";
import { parseTime } from "@/utils/utils";
export default {
  name: "NewsCenterIndex",
  components: {
    BannerBreadcrumb,
  },
  data() {
    return {
      parseTime: parseTime,
      tabsActive: 0,
      tabList: ["新闻动态", "通知公告"],
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      dataList: [],
      total: 0,
      noticeTypeList: [
        { label: "系统通知", name: "0" },
        { label: "培训通知", name: "2" },
        { label: "就业通知", name: "3" },
      ],
      noticeActiveName: "0",
    };
  },
  created() {
    this.handleClick();
  },
  methods: {
    changeTab(index) {
      this.queryParams.pageNum = 1;
      this.tabsActive = index;
      this.handleClick();
    },
    /**
     * 获取新闻
     * @date 2022-08-10
     * @returns {any}
     */
    getNews() {
      getNewsList(Object.assign({ artCategoryId: 2 }, this.queryParams)).then(
        (res) => {
          this.dataList = res?.rows ?? [];
          this.total = Number(res.total);
        }
      );
    },
    /**
     * 获取公告
     * @date 2022-08-10
     * @returns {any}
     */
    getNotice() {
      let param = Object.assign(
        { name: this.noticeActiveName },
        this.queryParams
      );
      getNoticeList(param).then((res) => {
        this.dataList = res?.rows ?? [];
        this.total = Number(res.total);
      });
    },
    /**
     * tab点击事件
     * @date 2022-08-10
     * @param {any} tab
     * @returns {any}
     */
    handleClick() {
      switch (this.tabsActive) {
        case 0:
          this.getNews();
          break;
        case 1:
          this.getNotice();
          break;
      }
    },
    /**
     * 分页切换
     * @date 2022-08-11
     * @param {any} page
     * @returns {any}
     */
    currentChange(page) {
      this.queryParams.pageNum = page;
      this.handleClick();
    },
    noticeClick(tab, event) {
      this.getNotice();
    },
    goNewsDetails(id) {
      this.$router.push({
        path: "newsdetails",
        query: { id: id, type: "news" },
      });
    },
    goNoticeDetails(id) {
      this.$router.push({ path: "noticedetails", query: { id: id } });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-main-box-content {
  min-height: calc(100vh - 73px - 104px - 64px - 23px - 100px - 40px);
}
.BannerBreadcrumb-wrap {
  position: relative;
  .tabs {
    position: absolute;
    right: 15%;
    bottom: 18px;
    span {
      cursor: pointer;
      font-size: 20px;
      margin-left: 20px;
      color: #7e7e7e;
      &.active {
        color: #f00;
      }
    }
  }
}
.title {
  padding-bottom: 15px;
  margin-bottom: 15px;
  font-weight: 400;
  font-size: 20px;
  color: #000;
  letter-spacing: 1.34px;
  border-bottom: 1px solid #d5d5d5;
}
.app-main-box-content {
  // margin-bottom: 24px;
  .data-item {
    margin-bottom: 12px;
    cursor: pointer;
    &:hover {
      .artTitle {
        color: #ff3939;
      }
    }
    .artTitle {
      font-weight: 400;
      font-size: 16px;
      color: #373737;
      letter-spacing: 0.83px;
      max-width: 600px;
      line-height: 22px;
    }
  }
}
.pagination {
  text-align: center;
  :deep(.el-pager .active) {
    background-color: #ff3939;
  }
  :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
    background-color: #ff3939;
  }
}

// 修改tabs样式
:deep(.el-tabs__item) {
  font-size: 20px;
  font-weight: 500;
  color: #000000;
}
:deep(.el-tabs__item:hover) {
  color: #163da5;
}
:deep(.el-tabs__item.is-active) {
  color: #163da5;
}
:deep(.el-tabs__active-bar) {
  background-color: #163da5;
}
</style>
