<template>
  <Layout>
    <!--<div class="product-background"></div>-->

    <div class="layout-container" style="width: 100%">

      <img src="@/assets/images/product/bg.jpg" style="height: 25%;width: 100% ">

    </div>

    <div style="width: 80%;margin:20px 20px 20px 40px"
         v-for="(goods,index) in goodsList"
         :key="index"
    >
      <img :src="goods.imageUrl1" style="width: 100%;height: 100%" alt="">

    </div>


    <!--
        <div class="section">


          <div class="container" style="max-width: 1160px">

            <div class="solution-container" style=" margin-top: -80px">
              <div data-am-widget="tabs" class="am-tabs ">

              <ul class="am-tabs-nav am-cf">

                  <li v-for="(tab,index) in tabList"
                           :key="index"
                           @click.prevent="changeTab(index,tab.id)"
                           :class="tabIndex === index ? 'am-active':''">

                  <a href="#">{{tab.typeName}}</a>
                </li>
                </ul>
    &lt;!&ndash;            <div class="layout-container" style="width: 100%">

                  <img src="@/assets/images/product/bg.jpg" style="height: 25%;width: 100% " >

                </div>&ndash;&gt;

              </div>
            </div>
          </div>
        </div>
    -->

  </Layout>
</template>

<script>
import Layout from "@/components/common/Layout";

export default {
  name: "ProductView",
  components: {Layout},
  data() {
    return {
      tabList: [],
      list: [],
      tabIndex: 0,
      goodsList: [],
    }
  },
  mounted() {
    this.getTabList()
    this.getGoodsList(3)
  },
  watch: {
    '$route.query': { // $route可以用引号，也可以不用引号  监听的对象
      handler(newval) {
        console.log('路由变化了')
        console.log('当前页面路由：', newval);

        // this.changeTab(index,tab.id);

        this.getGoodsList(newval.id)

      },
      deep: true, // 深度观察监听 设置为 true
      immediate: true, // 第一次初始化渲染就可以监听到
    }
  },
  methods: {
    getTabList() {
      //获取所有种类
      let params = {}
      params.page = 1
      params.size = -1
      this.$post("/type/interlist", params)
          .then((res) => {
            if (res.code == 1) {
              console.log(res)
              this.tabList = res.data.data;
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
    },
    changeTab(index, typeId) {
      this.tabIndex = index
      console.log("typeId" + typeId)
      this.getGoodsList(typeId)
    },
    getGoodsList(typeId) {

      this.$post("/type/details/interlist", {"typeId": typeId})
          .then((res) => {
            if (res.code == 1) {
              console.log(res)
              this.goodsList = res.data.data;
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
    },
    handleDetails(productId) {
      console.log("productId:" + productId)
      this.$router.push({path: `/product/productId/${productId}`})
    }
  }
}
</script>

<style scoped>

</style>
