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

<script>
import ProductsTabsItem from "@/components/ProductsTabsItem";
import PicturesBox from "@/components/PicturesBox";
import {getArticleList} from "@/api";
export default {
  name: "index",
  components: {ProductsTabsItem,PicturesBox},
  data() {
    return {
      showNull:false,
      imageDisplayTabs: [
        {
          title: '资质荣誉',
          name: 'first'
        },
        {
          title: '工程案例',
          name: 'second'
        }
      ],
      imageAndWord: [],
    }
  },
  mounted() {
    this.getArticleList(2)
  },
  methods: {
    //获取新闻列表
    getArticleList(classId,page,limit){
      getArticleList({
        classid: classId,
        page: this.page,
        limit: this.limit
      }).then(res => {
        this.imageAndWord = res.data.list;
        if(res.data.list.length==0){
          this.showNull=true
        }
      });
    },
    handleClick(tab) {
      if(tab.index==0){
        this.getArticleList(2)
      }else if(tab.index==1){
        this.getArticleList(8)
      }
    }
  }
}
</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>
