<template>
  <div class="commodityListDialog" v-if="show">
    <div class="bgImg">
      <img src="//img10.360buyimg.com/imgzone/jfs/t1/181612/8/1499/3388/608a6b51Ee3ad1338/26d6b0714db47378.png" class="purchaseAll" v-if="isShow" @click="purchaseAllGodds" v-lz-click="'9'"/>
      <div class="list">
        <div class="listItem" v-for="(item, index) in commodityList" :key="index">
          <img :src="item.skuImg" />
          <div class="purchaseBtn" @click="toPurchase(item)" v-lz-click="'9'"></div>
        </div>
      </div>
    </div>
    <div class="closeBtn" @click="close"><img src="//img10.360buyimg.com/imgzone/jfs/t1/183214/18/1438/3096/608a4fcdEb1e7afd9/39899878753483c3.png" /></div>
  </div>
</template>
<script>
import apis1 from '../../../util/apis1.js';
let { fissionTask } = apis1;
import { goToShopPage,goToSkuPage } from '../../../util/tools.js';
import store from '../../../store/store';
export default {
  name: 'commodityListDialog',
  data() {
    return {
      commodityList: [], //商品信息
      isShow: false //是否显示一键加购
    };
  },
  created() {
    if (this.type == '1') {
      this.commodityList = this.data.data.addWares.skuInfoVO;
    } else {
      this.commodityList = this.data.data.browe.skuInfoVO;
    }
    if (this.type == 1) {
      this.isShow = true;
    } else {
      this.isShow = false;
    }

  },
  methods: {
    close() {
      this.submit(null);
    },
    //立即购买（浏览商品）
    toPurchase(item) {
      //type 1  加购 不需要调接口  2浏览  调接口toDo
      if(this.type == 2){
        if (item.status == '0') {
        fissionTask(this.data.data.browe.taskId, item.skuId, data => {
          goToSkuPage(item.skuId);
        });
      } else {
        goToSkuPage(item.skuId);
      }
      }else{
        goToSkuPage(item.skuId);
      }
    },
    //一键加购
    purchaseAllGodds() {
      if (this.taskStatus == 1) {
        this.$toast('您已完成该任务');
        return;
      }
      //重新请求主接口
      fissionTask(this.data.data.addWares.taskId, '', data => {
       
        if (data.data.status == 1) {
          this.$toast('你已经成功加购所有商品');
        } else if (data.data.status == '2') {
          this.$toast('你已经加购过所有商品了');
        }
        var a = setTimeout(() => {
          this.publicData.$emit('follow', true);
          clearTimeout(a);
          this.$toast.clear()
        }, 1500);
        
      });
    }
  }
};
</script>
<style scoped>
.commodityListDialog {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 200;
}
.bgImg {
  height: 8.9rem;
  width: 6.15rem;
  background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/183270/22/1451/37216/608a4fcdE8b82d9da/f9151f8ee6e67746.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  top: 1rem;
  position: fixed;
  right: 0;
  left: 0.65rem;
}
.closeBtn {
  width: 0.8rem;
  height: 0.8rem;
  top: 10.5rem;
  position: fixed;
  right: 0;
  left: 3.35rem;
}
.list {
  height: 7.5rem;
  width: 5.2rem;
  /* border: red 1px solid; */
  margin-top: 1rem;
  margin-left: 0.6rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: scroll;
}
.listItem {
  width: 2.4rem;
  height: 3.7rem;
  margin-right: 0.2rem;
  margin-top: 0.03rem;
  z-index: 220;
}
.listItem img {
  height: 2.9rem;
  width: 2.3rem;
}
.purchaseBtn {
  width: 2.1rem;
  height: 0.8rem;
  background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/183435/31/1432/15517/608a4fcdE653af647/fb91a85d0590a99f.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-top: -0.2rem;
  margin-left: 0.15rem;
}
.purchaseAll {
  width: 2.1rem;
  height: 0.7rem;
  position: fixed;
  right: 1rem;
  top: 1.15rem;
}
</style>
