<template>
  <section class="main0">
    <div class="container0" v-loading="loading">
      <div v-if="edtailData">
        <product-info :data="edtailData" @onChangeSku='onChangeSku'></product-info>
        <product-edtail :data="edtailData"></product-edtail>
      </div>
    </div>
  </section>
</template>

<script>

import productInfo from "@/components/common/edtail/ProductInfo";
import productEdtail from "@/components/common/edtail/ProductEdtail";
export default {
  name: "productDetails",
  data() {
    return {
      loading:false,
      skuId: "",
      spuId:'',
      edtailData: null
    };
  },
  components: {

    productInfo,
    productEdtail
  },
  mounted() {
    var skuId=this.$route.query.skuId;
    let spuId = this.$route.query.spuId;
    // if(!skuId){
    //   this.$router.go(-1);
    // }
    this.skuId = skuId;
    this.spuId = spuId;
    
    this.getEdtail();
  },
  methods: {
    onChangeSku(skuId){
      // console.log(this.$route)
      var path=this.$route.path;
      this.skuId=skuId;
      this.getEdtail();
      this.$router.push({
        path:path,
        query:{
          skuId:skuId
        }
      })
    },
    getEdtail() {
      //skuId--- 20200611182641811726646432433177
      // spuId:14664,
      this.loading=true;
      this.$axios.get("/products/productInfoDetail",{
        params:{
          spuId:this.spuId,
          skuId:this.skuId
        }
      }).then(res => {
        this.loading=false;
        if (res.data.code == 200) {
          this.edtailData = res.data.data;
        }
      });
    }
  }
};
</script>
<style scoped>
  >>> .el-loading-spinner{
    top: 50px;
  }
</style>
<style lang='scss' scoped>
 .container {
  // min-width: 1200px;
 }
</style>
