<template>
  <div
    :style="styleData[keyData.prizeContainer]"
    ref="fissionPrizeList1"
    @click="styleClick('click', 'fissionPrizeList1')"
    @mousemove="styleClick('mousemove', 'fissionPrizeList1')"
    @mouseout="styleClick('mouseout')"
  >
    <div :style="styleData[keyData.prizeContainerTitle]">
      <div :style="styleData[keyData.prizeContainerShu]"></div>
      <div>奖品早知道</div>
    </div>
    <div :style="styleData[keyData.prizeSwiper]">
      <div :style="styleData[keyData.prizeSwiperDiv]">
        <div
          :style="styleData[keyData.prizeSwiperPrize]"
          v-for="(item, index) in fissionPrizeList"
          :key="index"
        >
          <div>
            <img :src="item.showImg" />
            <span :style="styleData[keyData.prizeName]">{{
              item.prizeName
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import apis1 from "../../../util/apis1.js";
let { drawPrize } = apis1;
export default {
  props: [
    "isTemplate",
    "datas",
    "keyData",
    "styleData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  name: "fissionPrizeList1",
  data() {
    return {
      fissionPrizeList: [], //裂变抽奖奖品列表
      showList: true,
      styleDataOld: {},
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
  },
  methods: {
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
      var datasAll = this.templateData;

      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        if (datasAll) {
          this.fissionPrizeList = datasAll.draw.prizeList;
        } else {
          //没有模板的数据
          this.fissionPrizeList = [
            {
              beanNum: 1,
              id: "1425695746035818497",
              planId: "1432201",
              position: 1,
              prizeName: "1",
              prizeType: 1,
              productUrl: "",
              showImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
            },
            {
              beanNum: 2,
              id: "1425695750053961730",
              planId: "1430300",
              position: 2,
              prizeName: "2",
              prizeType: 1,
              productUrl: "",
              showImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
            },
            {
              beanNum: 3,
              id: "1425695754051133442",
              planId: "1429131",
              position: 3,
              prizeName: "3",
              prizeType: 1,
              productUrl: "",
              showImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
            },
          ];
        }
      } else {
        drawPrize((datas) => {
          this.fissionPrizeList = datas.data.prizeInfo;
        });
      }
    },
  },
};
</script>
<style scoped>
</style>
