<!-- goodsList.vue -->
<template>
    <div id="goodsList">
        <div class="goodsListContainer">
            <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite"  :loading-text="loadingText" >
                <div class="gootdsListMainss">
                    <div class="indexManuFactureListInfo" v-for="item in data"  v-if="data.length!=0" @click="enterGoodDetail(item.id)">
                        <div class="indexManuFactureListInfoImg">
                          <img :src="url+item.imagePath" alt="">
                        </div>
                        <div class="indexManuFactureListInfoTitle">
                          {{item.name  | ellipsis(25)}}
                        </div>
                        <div class="indexManuFactureListInfoSmallTitle">
                          {{item.subhead | ellipsis(10)}}
                        </div>
                        <div class="indexManuFactureListInfoTitlePrice">
                          {{item.price}}
                        </div>
                    </div>
                    <div class="noGoods"  v-if="data.length==0">
                        <img src="../../static/img/noGoods.png" alt="">
                    </div>
                </div>
            </v-scroll>
        </div>
    </div>
</template>
<script>
    import Scroll from "./scrollMore.vue";
    export default{
        name:"goodsList",
        components : {
        "v-scroll": Scroll
        },
        data(){
            return{
                classifyId:"",
                counter:1,
                num : 10,
                data:"",
                url:this.GLOBAL.urlPath,
                targetId:"",
                loadingText:"",
                pageStart : 0, // 
                  pageEnd : 0, // 
                  listdata: [], // 
                  downdata: [],  // 
                  datas:[1,2,3,4,5]
            }
        },
        mounted(){
            $(".commonfooter").css("display","none");
            if (this.$route.query.classifyId) {
                this.classifyId = this.$route.query.classifyId;
                this.targetId = this.classifyId;
                this.actionId = "5";
                var data = {
                    n:"GoodsList",
                    s:"",
                    k:localStorage.getItem("userKey"),
                    q:{
                      a:this.actionId,
                      id:this.targetId,
                      pa:this.counter,
                      li:this.num,
                    }
                  };
                  var that = this;
                  $.ajax({
                    type : "POST",
                    url : that.GLOBAL.url,
                    data:{json:JSON.stringify(data)},
                    datatype:"json",
                    success:function(data){
                      var data  = JSON.parse(data);
                      console.log(data)
                      if (data.q.s=="0") {
                        that.data = data.q.goodses;
                      }else{
                        alert(data.q.d)
                      }
                    }
                  })
            }
            if (this.$route.query.targetId) {
                this.targetId = this.$route.query.targetId;
                this.actionId = "2";
                var data = {
                    n:"GoodsList",
                    s:"",
                    k:localStorage.getItem("userKey"),
                    q:{
                      a:this.actionId,
                      id:this.targetId,
                      pa:this.counter,
                      li:this.num,
                    }
                  };
                  var that = this;
                  $.ajax({
                    type : "POST",
                    url : that.GLOBAL.url,
                    data:{json:JSON.stringify(data)},
                    datatype:"json",
                    success:function(data){
                      var data  = JSON.parse(data);
                      console.log(data)
                      if (data.q.s=="0") {
                        that.data = data.q.goodses;
                      }else{
                        alert(data.q.d)
                      }
                    }
                  })
            }
            $(".gootdsListMain").find("div:even").addClass("gootdsListMainOdd");
            $(".yo-scroll").css("top","0");
            $(".load-more").css("position","static")
            $(".load-more").css("bottom","0")
            this.$nextTick(()=>{
            // jquery
            $(function(){
                $(".gootdsListMain").css("overflow-y","scroll");
                })
            })
        },
        methods:{
            getList(){
                var data = {
                    n:"GoodsList",
                    s:"",
                    k:localStorage.getItem("userKey"),
                    q:{
                      a:this.actionId,
                      id:this.targetId,
                      pa:this.counter,
                      li:this.num,
                    }
                  };
                  var that = this;
                  $.ajax({
                    type : "POST",
                    url : that.GLOBAL.url,
                    data:{json:JSON.stringify(data)},
                    datatype:"json",
                    success:function(data){
                      var data  = JSON.parse(data);
                      console.log(data)
                      if (data.q.s=="0") {
                        that.data = data.q.goodses;
                      }else{
                        alert(data.q.d)
                      }
                    }
                  })
            },
            // getClassify(){
            //       var data = {
            //         n:"GoodsList",
            //         s:"",
            //         k:localStorage.getItem("userKey"),
            //         q:{
            //           a:this.actionId,
            //           id:this.targetId,
            //           pa:this.counter,
            //           li:this.num,
            //         }
            //       };
            //       var that = this;
            //       $.ajax({
            //         type : "POST",
            //         url : that.GLOBAL.url,
            //         data:{json:JSON.stringify(data)},
            //         datatype:"json",
            //         success:function(data){
            //           var data  = JSON.parse(data);
            //           console.log(data)
            //           if (data.q.s=="0") {
            //             that.data = data.q.goodses;
            //           }else{
            //             alert(data.q.d)
            //           }
            //         }
            //       })
            // },
            enterGoodDetail(id){
                localStorage.setItem("goodsId",id)
                this.$router.push({path:"productDetails", query:{goodsId:id}});
                 // this.$router.push({name:"productDetails", params:{goodsId:id}})

            },
            onRefresh(done){
                this.counter = 1;
                this.getList();
                done();
            },
            onInfinite(done){
                if (this.data.length<this.num) {
                    return false;
                }
                this.counterPP;
                var data = {
                    n:"GoodsList",
                    s:"",
                    k:localStorage.getItem("userKey"),
                    q:{
                      a:this.actionId,
                      id:this.targetId,
                      pa:this.counter,
                      li:this.num,
                    }
                }
                var that = this;
                $.ajax({
                    type : "POST",
                    url : that.GLOBAL.url,
                    data:{json:JSON.stringify(data)},
                    datatype:"json",
                    success:function(data){
                        var data  = JSON.parse(data);
                        if (data.q.s=="0") {
                            that.data = that.data.concat(data.q.goodses);
                            if (data.q.goodses.length<that.num) {
                                console.log("1")
                                that.loadingText="";
                                return;
                            }
                            done()
                        }
                        // this.items=this.items.concat([6,6,6,6,6,6,6,6,6,6,6])
                    }
                })
            }
        }
    }
</script>
<style rel="stylesheet/scss" scoped lang="scss">
    html,body,-sharpapp,-sharpgoodsList,.goodsListContainer{
        width: 100%;
        height: 100%;
    }
    .goodsListContainer{
        display:-webkit-box;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
    }
    .gootdsListMainss{
        width: 90%;
        margin: 0 auto;
        -webkit-box-flex:1;
        // overflow-y:scroll;
    }
    .indexManuFactureListInfo{
        float: left;
        width: 49%;
        min-height:30.7*0.085rem;
    }
    .indexManuFactureListInfoImg{
      width: 100%;
      height: 16.2*0.085rem;
      background: -sharpf2f3fb;
    }
    .indexManuFactureListInfoImg img{
      height: 100%;
      width: 100%;
      //margin: 1.8*0.085rem auto;
    }
    .indexManuFactureListInfoTitle{
      font-family:PingFangSC-Regular;
      font-size:1.4*0.085rem;
      color:-sharp343434;
      /* text-align:left; */
      margin-top: 1.6*0.085rem;
      line-height: 2*0.085rem;
      height: 3.8*0.085rem;
      width:100%;
    }
    .indexManuFactureListInfoSmallTitle{
      margin-top: 1*0.085rem;
      font-size:1*0.085rem;
      color:-sharp929292; 
      width:100%;
      height: 4.6*0.085rem;
    }
    .indexManuFactureListInfoTitlePrice{
      /* margin-top: 3.2*0.085rem; */
      font-size:1.4*0.085rem;
      color:-sharp525252;
    }
    .noGoods{
        width:50%;
        height:100%;
        margin:30% auto;
    }
    .noGoods img{
        width:100%;
        height:auto;
    }
    .indexManuFactureListInfo:nth-child(odd)
    {
        margin-right: 2%;
    }
    .commonfooter{
        display: none;
    }

</style>