<template>
  <Layout>
    <div class="layout-container" v-for="(goods,index) in goodsList " v-if="index<1"
         :key="index" style="width: 100%">
      <img :src="goods.imageUrl1" style="height: 25%;width: 100% ">

    </div>


    <div class="section" style="width: 80%;padding-top: 30px;padding-bottom: 20px"
         v-for="(goods,index) in goodsList" v-if="index>=1"
         :key="index"
    >

      <div class="section--header" >
        <el-row :span="24" type="flex" justify="center" align="middle">
          <h2 class="section--title"><strong>{{ goods.title }}</strong></h2>
        </el-row>
        <el-row :span="24" type="flex" justify="center" align="middle">
          <p class="section--description">
            {{ goods.introduction }}
          </p>
        </el-row>
      </div>

      <img :src="goods.imageUrl1" v-if="goods.imageUrl1!=''" style="width: 100%;height: 100%;margin-top: 20px" alt="">
      <img :src="goods.imageUrl2" v-if="goods.imageUrl2!=''" style="width: 100%;height: 100%" alt="">
      <img :src="goods.imageUrl3" v-if="goods.imageUrl3!=''" style="width: 100%;height: 100%" alt="">

    </div>

  </Layout>
</template>

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

export default {
  name: "ProductView",
  components: {Layout},
  data() {
    return {
      tabList: [],
      list: [],
      tabIndex: 0,
      goodsList: [],
      goods: {}
    }
  },
  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) {

      let params = {}
      params.typeId = typeId

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

<style scoped>

</style>
