<template>
  <div v-if="isHelper == false" :style="styleData.bargainGoodDivAll"
   ref="bargainGood"
    @click="styleClick('click', 'bargainGood')"
    @mousemove="styleClick('mousemove', 'bargainGood')"
    @mouseout="styleClick('mouseout')">
    <div :style="styleData.price">
      <div :style="styleData.tu"><img :src="skuImg" alt="" style="width: 1.6rem; height: 1.6rem" /></div>
      <div :style="styleData.skuName">{{ skuName }}</div>
      
      <div v-if="templateId == '20201228083300yqrhkj02'" :style="discount ? styleData.skuPrice : styleData.skuPrice1">
          京东价:
        <span :style="styleData.skuSpan" >￥95元</span>
      </div>

      <div v-else :style="discount ? styleData.skuPrice : styleData.skuPrice1">
        京东价:
        <span :style="styleData.skuSpan" >￥{{ skuPrice }}元</span>
      </div>
      <div v-if="discount" :style="styleData.lastPrice">
        券后价:
        <!-- <span style="color: #c22e26">￥{{ discountPrice }}元</span> -->
        <span :style="styleData.skuSpan" >￥{{ discountPrice }}元</span>
      </div>
      <div v-if="isWebClick" :style="styleData.button"></div>
      <div v-else :style="styleData.button" v-lz-click="'5'" @click="goToSku(skuId)"></div>
      <div :style="styleData.num">{{ juanPrice }}</div>
    </div>

    <div class="34535" :style="styleData.biao">
      <ul :style="styleData.changeUl">
        <li :style="styleData.go"><div :style="styleData.goSpan">开始</div></li>
        <li :style="styleData.changeLi" v-for="(item, index) in prizesList" :key="index">
          <div :style="item.status == 0 ? styleData.changeXian : styleData.changeXian1"></div>
          <div :style="item.status == 1 ? styleData.changeJuan : styleData.changeJuan1">
            <div :style="styleData.juanSpan1" style="marginTop: 0.45rem">{{ item.name }}元</div>
            <div :style="styleData.juanSpan1">优惠券</div>
          </div>
          <span :style="styleData.changePeople">{{ item.needPeople }}人</span>
          <div v-if="item.status == 2" :style="styleData.changeType"></div>
          <div v-if="item.status == 1" :style="styleData.changeType1"></div>
          <div v-if="item.status == 0" :style="styleData.changeType2">
            <div :style="styleData.changeTypetest">剩余:{{ item.leftNum }}</div>
          </div>
        </li>
      </ul>
    </div>


  </div>
</template>

<script>
import apis1 from '../../../util/apis1.js';
let { bargain } = apis1;
import { goToSkuPage } from '../../../util/tools';
import store from '../../../store/store.js'
export default {
  props: ['isTemplate', 'keyData', 'styleData', 'datas', "isWebClick", "modifyContent"],
  data() {
    return {
      isHelper:false,//是否是助力者进入
      skuId: '', //商品id
      skuName: '', //商品名字
      skuPrice: '', //商品价格
      skuImg: '', //商品图片
      discountPrice: 0,
      discount: false, //是否有折扣
      juanPrice: '', //优惠卷
      prizesList: [], //优惠卷列表
      isCustomSwitching: 1,
      styleDataOld: {},
      templateId:0

    };
  },
  created() {
    
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.isHelper = store.state.shareUserId ?　true : false;
    this.publicData.$on("kanSwitchValue", (isCustomSwitching, refName) => {
      this.isCustomSwitching = isCustomSwitching;
      if(isCustomSwitching == '1') {
        this.isHelper = false;
      }else if(isCustomSwitching == "2"){
        this.isHelper = true;
      }else if(isCustomSwitching == "3"){
        this.isHelper = true;
      }
    });
    if(this.isHelper == false){
      if (this.isTemplate == true) {
          console.log(this.temPlateDataAll, 'datatemPlateDataAll');
          this.temPlateDataAll = this.datas.temPlateDataAll;
          if (this.temPlateDataAll) {
            this.skuName = this.temPlateDataAll.bargain.skuInfo.name;
            this.skuImg = this.temPlateDataAll.bargain.skuInfo.imagePath;
            this.skuPrice = this.temPlateDataAll.bargain.skuInfo.price;
            for (var i = 0; i < this.temPlateDataAll.draw.prizeList.length; i++) {
              this.temPlateDataAll.draw.prizeList[i].leftNum = 10;
              this.temPlateDataAll.draw.prizeList[i].needPeople = this.temPlateDataAll.draw.prizeList[i].cotinueSignDay;
              this.temPlateDataAll.draw.prizeList[i].status = 0;
              this.temPlateDataAll.draw.prizeList[i].name = this.temPlateDataAll.draw.prizeList[i].prizeName;
            }
            this.prizesList = this.temPlateDataAll.draw.prizeList;
          } else {
            this.skuName = '测试商品';
            this.skuImg = 'http://img12.360buyimg.com/n0/jfs/t1/192711/9/15879/183242/6103e4ccEd571223b/ce8e7085f83f0822.jpg';
            this.skuPrice = 10;
            this.prizesList = [
              {
                leftNum: 10,
                needPeople: 1,
                status: 0,
                name: '3'
              },
              {
                leftNum: 10,
                needPeople: 5,
                status: 0,
                name: '10'
              },
              {
                leftNum: 10,
                needPeople: 10,
                status: 0,
                name: '15'
              }
            ];
          }
          var bb = false;
          for (var i = 0; i < this.prizesList.length; i++) {
            var aa = this.prizesList[i];
            if (aa.status == 1) {
              this.juanPrice = aa.name;
              this.discount = true;
              this.discountPrice = (this.skuPrice - this.juanPrice).toFixed(2);
              if (this.discountPrice <= 0) {
                this.discountPrice = 0;
              }
              bb = true;
            }
          }
          if (!bb) {
            this.juanPrice = '?';
            this.discount = false;
          }
        } else {
          bargain(data => {
            this.skuImg = data.data.skuInfo.skuImg;
            this.skuName = data.data.skuInfo.skuName;
            this.skuPrice = data.data.skuInfo.skuPrice;
            this.prizesList = data.data.prizes;
            this.prizesstatus = data.data.prizes.status;
            this.skuId = data.data.skuInfo.skuId;

            var bb = false;
            for (var i = 0; i < this.prizesList.length; i++) {
              var aa = this.prizesList[i];
              if (aa.status == 1) {
                this.juanPrice = aa.name;
                this.discount = true;
                this.discountPrice = (this.skuPrice - this.juanPrice).toFixed(2);
                if (this.discountPrice <= 0) {
                  this.discountPrice = 0;
                }
                bb = true;
              }
            }
            if (!bb) {
              this.juanPrice = '?';
              this.discount = false;
            }
          });
        }

    }
  },
  mounted(){
    this.templateId = window.sessionStorage.getItem('templateId')
  },
  methods: {
     styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          isCustomSwitching: this.isCustomSwitching,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    goToSku(skuid) {
      if (this.isTemplate == true) {
        this.$toast('活动预览，仅供查看');
      } else {
        goToSkuPage(skuid);
      }
    }
  }
};
</script>

<style scoped>

ul {
  /*组合选择器*/
  list-style: none; /*清除列表默认样式*/
  padding: 0; /*清除padding*/
  margin: 0;
}
li {
  float: left;
}
</style>
