<template>
  <div class="Attract_join">
    <!-- 顶部图片 -->
    <div class="Attract_join_bg">
      <img src="../../assets/join.jpg" alt=""/>
    </div>
    <!--标签栏 -->
    <ProductsTabsItem :tab-list="joinTab" :fatherMethod="handleClick" ref="ProductsTabsItem"/>
    <!-- 支持策略 -->
    <el-row type="flex">
      <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
      <el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
        <div style="padding: 20px 0" v-html="supportList"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ProductsTabsItem from "@/components/ProductsTabsItem";
import {getArticleInfo} from "@/api";

export default {
  name: "index",
  metaInfo() {
    return {
      title: '招商加盟 | ' + localStorage.getItem('corporate_name')
    };
  },
  components: {ProductsTabsItem},
  data() {
    return {
      classid: 4,
      joinTab: [],
      supportList: []
    };
  },
  watch: {
    $route(to) {
      for (let i = 0; i < this.joinTab.length; i++) {
        if (this.joinTab[i].id == to.query.menu) {
          this.$refs.ProductsTabsItem.activeName = i + "";
        }
      }
      this.getInfo(to.query.menu)
    }
  },
  beforeUpdate() {
    for (let i = 0; i < this.joinTab.length; i++) {
      if (this.joinTab[i].id == this.$route.query.menu) {
        this.$refs.ProductsTabsItem.activeName = i + "";
      }
    }
  },
  mounted() {
    if (this.$route.query.menu) {
      //获取招商加盟的数据
      this.getInfo(this.$route.query.menu)
    } else {
      this.getInfo(4)
    }
  },
  methods: {
    //获取数据
    getInfo(classId) {
      getArticleInfo(classId).then(res => {
        this.joinTab = res.data.articlelist;
        this.supportList = res.data.articleinfo.content;
      });
    },
    handleClick(tab) {
      for (let i = 0; i < this.joinTab.length; i++) {
        if (this.joinTab[i].title === tab._props.label) {
          this.getInfo(this.joinTab[i].id)
        }
      }
    }
  }
};
</script>

<style scoped lang="scss">
.Attract_join {
  min-width: 1300px;

  .Attract_join_bg {
    height: 360px;

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

  .support {
    padding: 70px 0;

    .support_title {
      color: #333;
      display: inline;
      width: 100%;
      float: left;
      margin: 0 0 35px 0;
      font-size: 26px;
      text-align: center;
      letter-spacing: -1px;
    }
  }
}
</style>
