<template>
  <div class="image_display">
    <!-- 顶部图片 -->
    <div class="imageDisplay_bg">
      <img src="../../assets/image_display.jpg" alt=""/>
    </div>
    <!--标签栏 -->
    <ProductsTabsItem :tab-list="imageDisplayTabs" :fatherMethod="handleClick" ref="ProductsTabsItem"/>
    <!--资质荣誉 22是封装图片放大的效果-->
    <PicturesBox :image-list="imageAndWord" :type="22"/>
    <!--页码-->
    <Pagination :currentPage="1" :total="total" :pageSize="limit" @pageChange="handleChangePage"/>
    <div class="nullData" v-if="showNull">
      暂时没有数据！
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import ProductsTabsItem from "@/components/ProductsTabsItem";
import PicturesBox from "@/components/PicturesBox";
import {getArticleList} from "@/api";

export default {
  name: "index",
  components: {ProductsTabsItem, PicturesBox,Pagination},
  data() {
    return {
      limit: 12,
      total: 0,
      classIndex:0,
      showNull: false,
      imageDisplayTabs: [
        {
          id: 2,
          title: "资质荣誉"
        },
        {
          id: 8,
          title: "工程案例"
        }
      ],
      imageAndWord: []
    };
  },
  watch: {
    $route(to) {
      for (let i = 0; i < this.imageDisplayTabs.length; i++) {
        if (this.imageDisplayTabs[i].id == to.query.menu) {
          this.$refs.ProductsTabsItem.activeName = i + "";
        }
      }
      this.getArticleList(to.query.menu);
    }
  },
  beforeUpdate() {
    for (let i = 0; i < this.imageDisplayTabs.length; i++) {
      if (this.imageDisplayTabs[i].id == this.$route.query.menu) {
        this.$refs.ProductsTabsItem.activeName = i + "";
      }
    }
  },
  mounted() {
    if (this.$route.query.menu) {
      this.getArticleList(this.$route.query.menu);
    } else {
      this.getArticleList(2);
    }
  },
  methods: {
    //获取新闻列表
    getArticleList(classId, page, limit) {
      getArticleList({
        classid: classId,
        page: page,
        limit: limit
      }).then(res => {
        this.imageAndWord = res.data.list;
        if (res.data.list.length == 0) {
          this.showNull = true;
        }
      });
    },
    handleClick(tab) {
      this.classIndex = parseInt(tab.index);
      if (tab.index == 0) {
        this.getArticleList(2, this.page, this.limit);
      } else if (tab.index == 1) {
        this.getArticleList(8, this.page, this.limit);
      }
    },
    //分页
    handleChangePage(value) {
      if (this.classIndex == 0) {
        this.getArticleList(2, value, this.limit);
      } else if (this.classIndex == 1) {
        this.getArticleList(8, value, this.limit);
      }
    },
  }
};
</script>

<style scoped lang="scss">
* {
  font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
}

.nullData {
  display: block;
  height: 300px;
  line-height: 300px;
  text-align: center;
}

.image_display {
  min-width: 1300px;

  .imageDisplay_bg {
    height: 360px;

    img {
      width: 100%;
      height: 360px;
      object-fit: cover;
    }
  }

  #project_list {
    display: none;
  }
}

</style>
