<template>
  <div
    class="lookDrawConditionWindow"
    id="luckDrawPop"
    ref="luckDrawPop"
    v-if="show"
    @click="styleClick('click', 'luckDrawPop')"
    @mousemove.stop="styleClick('mousemove', 'luckDrawPop')"
    @mouseout="styleClick('mouseout')"
  >
    <basicPopNew title="规则须知" @closeClick="goBack()">
      <div class="lookDrawConditionWindow-bg">
        <div>
          <div class="lookDrawConditionWindow-text-title">评价商品范围：</div>
          <div class="lookDrawConditionWindow-text-content">
            {{ list.goodsFlag == 0 ? "全店商品" : "指定商品" }}
          </div>
          <div class="lookDrawConditionWindow-text-title">评价时间范围：</div>
          <div class="lookDrawConditionWindow-text-content">
            {{ list.startTime }}至{{ list.endTime }}
          </div>
          <div class="lookDrawConditionWindow-text-title">评价评星范围：</div>
          <div
            class="lookDrawConditionWindow-text-content"
            style="height: 0.4rem"
          >
            <span
              v-for="(item, index) in evaluationStar"
              :key="index"
              class="star"
            >
              {{ item + "星" }}
            </span>
          </div>
          <div class="lookDrawConditionWindow-text-title">评价字数范围：</div>
          <div class="lookDrawConditionWindow-text-content">
            {{
              list.evaluationNumFlag == 0
                ? "不限制字数"
                : "评论内容最少是" + list.evaluationNum + "个字"
            }}
          </div>
          <div class="lookDrawConditionWindow-text-title">评价图片数量：</div>
          <div class="lookDrawConditionWindow-text-content">
            {{
              list.evaluationPicFlag == 0
                ? "不限评论图片"
                : "评论图片最少是" + list.evaluationPic + "张"
            }}
          </div>
          <div class="lookDrawConditionWindow-text-title">评价视频数量：</div>
          <div class="lookDrawConditionWindow-text-content">
            {{
              list.evaluationVidFlag == 0
                ? "不限评论视频"
                : "评论视频最少是" + 1 + "个"
            }}
          </div>
          <div class="lookDrawConditionWindow-text-title">其他过滤条件：</div>
          <div class="lookDrawConditionWindow-text-content">
            {{ list.negativeWords }}
          </div>
        </div>

        <div class="product-list" v-if="isshow">
          <img
            src="//img10.360buyimg.com/imgzone/jfs/t1/158968/5/21391/6566/61a62710E8d10e709/556ded468e6fb71e.png"
            class="title"
          />
          <div class="productListCont">
            <div
              v-for="(item, index) in exposureList"
              :key="index"
              v-lz-click="'5'"
              v-lz-skuid="item.skuId"
              @click="goToBuy(item)"
              class="productListMei"
            >
              <img :src="item.skuImg" alt="" />
              <div class="text-hide2">{{ item.skuName }}</div>
              <div class="prize">
                <span
                  style="display: inline-block; width: auto; font-size: 0.26rem"
                  >￥</span
                >{{ item.skuPrice }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </basicPopNew>
  </div>
</template>

<script>
import apis from "../../../util/apis1.js";
import store from "../../../store/store";
import { goToShopPage } from "../../../util/tools.js";
import { newToSkuPage } from "../../../util/tools.js";
import basicPopNew from "./basicPopNew.vue";
let { selRuleRequest,storeGoodsPoint } = apis;
export default {
  props: ["styleData", "isTemplate", "isWebClick", "modifyContent"],
  name: "Index",
  components: {
    basicPopNew,
  },

  data() {
    return {
      isShow: false,
      show: false,
      styleDataOld: {},
      isCustomSwitching: "", //有tab切换时
      exposureList: [],
      isshow: false,
      list: {
        //商品
        goodsFlag: null,
        //评价开始时间
        startTime: "",
        //评价结束时间
        endTime: "",
        //评价字数限制
        evaluationNum: null,
        //0不限制字数 1限制字数
        evaluationNumFlag: null,
        //评价图片限制
        evaluationPic: null,
        //0不限制图片 1限制图片
        evaluationPicFlag: null,
        //评价视频限制
        evaluationVid: null,
        //0不限制视频 1限制视频
        evaluationVidFlag: null,
        //关注限制
        exposureFlag: 0,
        //曝光商品限制
        followGoodsFlag: 0,
        //差评关键字
        negativeWords: "",
      },
      //评星范围
      evaluationStar: [],
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = this.styleData&&JSON.parse(JSON.stringify(this.styleData));

    this.publicData.$on(
      "pingjiaPopSwitchValue",
      (isCustomSwitching, refName) => {
        this.isCustomSwitching = isCustomSwitching;
        if (isCustomSwitching == "1") {
          this.isShow = false;
        } else if (isCustomSwitching == "2") {
          // debugger
          this.isShow = true;
        }
      }
    );
  },
  mounted() {
    this.initData();
    this.publicData.$on("pingjiaPopFn", (pingjiaPopShow) => {
      this.isShow = pingjiaPopShow;
      this.gotop();
    });
  },
  methods: {
    gotop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    async initData() {
      if (this.isWebClick) {
        return;
      } else {
        if (this.isTemplate == true) {
          return;
        }
        await selRuleRequest((mainDatas) => {
          console.log(mainDatas.data.evaluationStar + "mainDatas");
          mainDatas.data.startTime = this.format(mainDatas.data.startTime);
          mainDatas.data.endTime = this.format(mainDatas.data.endTime);
          this.list = mainDatas.data;
          var param = mainDatas.data.evaluationStar.slice(1, -1);
          this.evaluationStar = param.split(",");
          console.log(this.evaluationStar);
          this.exposureList = mainDatas.data.skuInfos;
          if (this.exposureList) {
            this.isshow = true;
          }
          if (this.list.negativeWords) {
            this.list.negativeWords =
              "评价内容包含：" + this.list.negativeWords + "，不赠送抽奖机会";
          } else {
            this.list.negativeWords = "无";
          }
          console.log(this.list.negativeWords + "list.exposureFlag");
        });
      }
    },

    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          isCustomSwitching: this.isCustomSwitching, //有tab切换时
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    format(shijianchuo) {
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        "-" +
        this.add0(m) +
        "-" +
        this.add0(d) +
        " " +
        this.add0(h) +
        ":" +
        this.add0(mm) +
        ":" +
        this.add0(s)
      );
    },
    goBack() {
      document.querySelector("body").removeAttribute("style");
      this.submit();
      // this.$emit('closeClick');
    },

    goToBuy(sku) {
      console.log(sku);
      storeGoodsPoint(5)
      newToSkuPage(sku);
    },
    enterstore() {
      document.querySelector("body").removeAttribute("style");
      console.log("进入商店");
      let shopId = store.state.shopId;
      storeGoodsPoint(4)
      goToShopPage(shopId);
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.lookDrawConditionWindow-bg {
  margin-top: 0.3rem;
  padding: 0 0.3rem 0.3rem;
  max-height: 11.4rem;
  overflow-y: auto;
}
.lookDrawConditionWindow-text-title {
  font-size: 0.24rem;
  color: #8c8c8c;
  margin-bottom: 0.08rem;
}
.lookDrawConditionWindow-text-content {
  font-size: 0.24rem;
  color: #262626;
  margin-bottom: 0.32rem;
}
.productListCont {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.title {
  width: 3.52rem;
  height: 0.4rem;
  display: block;
  margin: 0.53rem auto 0.3rem;
}
.productListMei {
  background: #fff;
  border-radius: 0.2rem;
  overflow: hidden;
  width: 3.4rem;
  margin-bottom: 0.1rem;
  img {
    width: 100%;
  }
  .text-hide2 {
    font-size: 0.3rem;
    color: #333;
    margin: 0 0.2rem;
  }
  .prize {
    font-size: 0.3rem;
    margin: 0.2rem;
    color: #F2270C;
  }
}
</style>
