<template>
  <div
    class="lookDrawConditionWindow"
    id="luckDrawPop"
    :style="styleData.lookDrawConditionWindow"
    ref="luckDrawPop"
    v-if="isShow"
    @click="styleClick('click', 'luckDrawPop')"
    @mousemove.stop="styleClick('mousemove', 'luckDrawPop')"
    @mouseout="styleClick('mouseout')"
  >
    <div class="win-modal-mask"></div>
    <div class="lookDrawConditionWindow-bg">
      <div class="banner">
        <div :style="styleData.bannerImg" alt=""></div>
      </div>
      <div
        class="lookDrawConditionWindow-text"
        style="padding: 0.3rem 0.5rem 0.5rem"
      >
        <div
          style="
            background-color: rgb(255, 255, 255);
            padding: 0.3rem 0.3rem 0px;
          "
        >
          <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"
          >
            <div
              v-for="(item, index) in evaluationStar"
              :key="index"
              class="star"
            >
              {{ item + "星" }}
            </div>
          </div>
          <div class="lookDrawConditionWindow-text-title">评价字数范围：</div>
          <div
            class="lookDrawConditionWindow-text-content"
            style="height: 0.4rem"
          >
            {{
              list.evaluationNumFlag == 0
                ? "不限制字数"
                : "评论内容最少是" + list.evaluationNum + "个字"
            }}
          </div>
          <div class="lookDrawConditionWindow-text-title">评价图片数量：</div>
          <div
            class="lookDrawConditionWindow-text-content"
            style="height: 0.4rem"
          >
            {{
              list.evaluationPicFlag == 0
                ? "不限评论图片"
                : "评论图片最少是" + list.evaluationPic + "张"
            }}
          </div>
          <div class="lookDrawConditionWindow-text-title">评价视频数量：</div>
          <div
            class="lookDrawConditionWindow-text-content"
            style="height: 0.4rem"
          >
            {{
              list.evaluationVidFlag == 0
                ? "不限评论视频"
                : "评论视频最少是" + 1 + "个"
            }}
          </div>
          <div class="lookDrawConditionWindow-text-title">其他过滤条件：</div>
          <div class="lookDrawConditionWindow-text-content">
            {{ list.negativeWords }}
          </div>
        </div>
        <div v-if="isWebClick"
          :style="styleData.lookDrawConditionWindowCancel"
        >
          回到主页抽奖
        </div>
         <div v-else
          :style="styleData.lookDrawConditionWindowCancel"
          v-lz-click="'23'"
          @click="goBack()"
        >
          回到主页抽奖
        </div>


        <span v-if="isWebClick"
          :style="styleData.goToShopBtn"
          >进入店铺逛逛 &gt;</span>

           <span v-else
          :style="styleData.goToShopBtn"
          v-lz-click="'4'"
          @click="enterstore"
          >进入店铺逛逛 &gt;</span>
        <div class="product-list">
          <img
            src="https://img10.360buyimg.com/imgzone/jfs/t1/149254/11/1671/2546/5ef98c11E03a88ab7/2f446cb2a54017cd.png"
            alt=""
            class="title"
            v-if="isshow"
          />
          <ul>
            <li
              v-for="(item, index) in exposureList"
              :key="index"
              v-lz-click="'9'"
              @click="goToBuy(item)"
            >
              <img :src="item.skuImg" alt="" />
              <span class="name text-hide2">{{ item.skuName }}</span>
              <span class="prize">
                <span
                  style="display: inline-block; width: auto; font-size: 0.26rem"
                  >￥</span
                >{{ item.skuPrice }}</span
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
  </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";
let { selRuleRequest,storeGoodsPoint } = apis;
export default {
  props: ["styleData", "isTemplate", "isWebClick", "modifyContent"],
  name: "Index",

  data() {
    return {
      isShow: 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 = 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() {
      if(this.isWebClick){
        return
      }{
      this.isShow = false;
      this.publicData.$emit("backRotrat", true);
      }
      
    },

    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 .win-modal-mask {
  background-color: #f2f2f2;
  position: absolute;
  width: 7.5rem;
  height: 100%;
  padding-bottom: 1rem;
}

.win-modal-mask {
  position: absolute;
  width: 7.5rem;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.85);
  height: 100%;
  z-index: 100;
}
.lookDrawConditionWindow-bg {
  width: 7.5rem;
  background-size: 100%;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.lookDrawConditionWindow .banner {
  font-size: 0;
  background-color: #ffb093;
}
.lookDrawConditionWindow .banner img {
  width: 100%;
}
img {
  border: 0;
  max-width: 100%;
}
.lookDrawConditionWindow-text {
  width: 7.5rem;
  margin: 0 auto 0;
  padding: 0 !important;
}
.lookDrawConditionWindow .lookDrawConditionWindow-text-title {
  font-size: 0.3rem;
  font-weight: bold;
}

.lookDrawConditionWindow-text-title {
  font-size: 0.24rem;
  color: #333;
  text-align: center;
}
.lookDrawConditionWindow-text-content {
  font-size: 0.24rem;
  color: #999;
  height: 0.62rem !important;
  margin: 0.1rem auto 0.2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  display: flex;
  -webkit-display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}
.star {
  float: left;
}
.goodClass {
  // background: #22863a;
  text-align: center;
  .goodTitle {
    width: 7.5rem img {
      width: 100%;
      height: 0.28rem;
    }
  }
}
.product-list {
  text-align: center;
  background: #fff;
}
.product-list li {
  width: calc(50% - 0.2rem);
  display: inline-block;
  background-color: #ffffff;
  margin-bottom: 0.2rem;
  margin: 0 0.1rem 0.2rem;
}
.product-list .title {
  width: 2.61rem;
  margin: 0 auto 0.5rem;
}
.product-list ul {
  width: 6.9rem;
  margin: 0 auto;
  text-align: left;
}
.product-list li img {
  // margin: 0.3rem auto 0;
}
.product-list span.name {
  font-size: 0.3rem;
  height: 0.8rem;
}
.product-list span {
  display: -webkit-box;
  width: 80%;
  margin: 0 auto;
}
.product-list span.prize {
  font-size: 0.36rem;
  color: #f23c3c;
  margin: 0.2rem auto;
}
.product-list span {
  display: -webkit-box;
  width: 80%;
  margin: 0 auto;
}
</style>
