<template>
  <div
    class="surveyPrizeDivAllC"
    ref="surveyPrize"
    @click="styleClick('click', 'surveyPrize')"
    @mousemove="styleClick('mousemove', 'surveyPrize')"
    @mouseout="styleClick('mouseout')"
    :style="styleData.surveyPrizeDivAllC"
  >
    <div
      class="titleDiv"
      :style="styleData.titleDiv"
      v-if="templateId == 'aa680d37-47e2-48ce-af14-0670fd'"
    >
      {{ surveyMainData.questionnaireDesc }}
    </div>
    <div v-if="dzType" class="titleDiv" :style="styleData.titleDz" style="padding:0 10px;margin-bottom:.3rem;color:#fff;font-size:.3rem;word-wrap: break-word;text-align:left">
      <<{{ surveyMainData.questionnaireDesc }}>>
    </div>
    <div v-else class="titleDiv" :style="styleData.titleDiv" v-else>
      <<{{ surveyMainData.questionnaireDesc }}>>
    </div>
    <div class="prizeDivAll" :style="styleData.prizeDivAll">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        :show-indicators="false"
      >
        <van-swipe-item
          class="prizeItemDiv"
          v-for="(item, index) in prizeList"
          :key="index"
          :style="styleData.prizeItemDiv"
        >
          <div class="showImgDiv" :style="styleData.showImgDiv">
            <img :src="item.showImg" />
            <div
              class="backName"
              v-if="templateId != 'aa680d37-47e2-48ce-af14-0670fd'"
            ></div>
            <div
              class="backName"
              v-if="
                item.prizeType == '1' &&
                  templateId != 'aa680d37-47e2-48ce-af14-0670fd'
              "
            >
              京豆
            </div>
            <div
              class="backName"
              v-if="
                item.prizeType == '2' &&
                  templateId != 'aa680d37-47e2-48ce-af14-0670fd'
              "
            >
              优惠券
            </div>
            <div
              class="backName"
              v-if="
                item.prizeType == '3' &&
                  templateId != 'aa680d37-47e2-48ce-af14-0670fd'
              "
            >
              实物
            </div>
            <div
              class="backName"
              v-if="
                item.prizeType == '4' &&
                  templateId != 'aa680d37-47e2-48ce-af14-0670fd'
              "
            >
              积分
            </div>
            <div
              class="backName"
              v-if="
                item.prizeType == '5' &&
                  templateId != 'aa680d37-47e2-48ce-af14-0670fd'
              "
            >
              专享价
            </div>
            <div
              class="backName"
              v-if="
                item.prizeType == '6' &&
                  templateId != 'aa680d37-47e2-48ce-af14-0670fd'
              "
            >
              红包
            </div>
            <div
              class="backName"
              v-if="
                item.prizeType == '7' &&
                  templateId != 'aa680d37-47e2-48ce-af14-0670fd'
              "
            >
              礼品卡
            </div>
            <div
              class="backName"
              v-if="
                item.prizeType == '8' &&
                  templateId != 'aa680d37-47e2-48ce-af14-0670fd'
              "
            >
              京东E卡
            </div>
            <div
              class="backName"
              v-if="
                item.prizeType == '9' &&
                  templateId != 'aa680d37-47e2-48ce-af14-0670fd'
              "
            >
              plus会员卡
            </div>
            <div
              class="backName"
              v-if="
                item.prizeType == '10' &&
                  templateId != 'aa680d37-47e2-48ce-af14-0670fd'
              "
            >
              爱奇艺会员卡
            </div>
            <div
              class="backName"
              v-if="
                item.prizeType == '11' &&
                  templateId != 'aa680d37-47e2-48ce-af14-0670fd'
              "
            >
              积分
            </div>
            <div
              class="backName"
              v-if="
                item.prizeType == '12' &&
                  templateId != 'aa680d37-47e2-48ce-af14-0670fd'
              "
            >
              福禄奖品
            </div>
          </div>

          <div class="prizeNameDiv" :style="styleData.prizeNameDiv">
            <div class="prizeNameBox" :style="styleData.prizeNameBox">
              <!-- <div class="prizeNameNum">{{ item.beanNum }}</div> -->
              <div class="prizeName" :style="styleData.prizeName">
                {{ item.prizeName }}
              </div>
            </div>
            <div class="leftNum" :style="styleData.leftNum">
              剩余:{{ item.stock }}份
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>

      <!-- v-if="surveyMainData.questionnaireStatus == 0" -->
      <div
        class="startQuestionDiv"
        v-if="surveyMainData.questionnaireStatus == 0"
        :style="styleData.startQuestionDiv"
        @click="startQuestionClick(questionnaireStatus)"
      ></div>
      <div
        class="startQuestionDiv"
        v-else
        :style="styleData.startQuestionDivGray"
        @click="startQuestionClick(1)"
      ></div>

      <div class="lookDiv" @click="lookCondition()" :style="styleData.lookDiv">
        查看获奖条件>
      </div>
    </div>
  </div>
</template>

<script>
import "swiper/swiper-bundle.min.css";
import apis1 from "../../../util/apis1.js";
let { questionnaireMain } = apis1;
import { conditionPopService2 } from "../../../util/hdzxtcomCreate.js";
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";
import { AddBuyErrDialogService } from "../../../util/comCreate.js";
import store from "../../../store/store.js"; //砍价客态
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  props: [
    "datas",
    "styleData",
    "keyData",
    "isTemplate",
    "templateData",
    "isWebClick",
    "modifyContent"
  ],
  data() {
    return {
      surveyMainData: {
        questionnaireDesc: "问题说明", //文案说明
        questionnaireStatus: 0 // 0-可以答题，1-不可以:
      }, //主接口数据
      prizeList: [],
      questionnaireStatus: 0,
      swiperss: "",
      isOPenShare: false,
      templateId: "",
      dzType:false
    };
  },

  // watch: {
  //   $route(to, from) {
  //     window.location.reload(); //监测到路由发生跳转时刷新一次页面
  //   }
  // },

  created() {
    this.initData();
    this.templateId = this.$route.query.templateId;
    this.shopId = store.state.shopId ? store.state.shopId : "734259";
    if(this.shopId == 734259 || this.shopId == 14225663){
      this.dzType = true
    }
  },

  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() {
      console.log("zxczx1aaaaaaaaaa");
      if (this.isTemplate) {
        if (this.templateData) {
          console.log(this.templateData, "this.templateData");
          this.surveyMainData.questionnaireDesc = this.templateData.questionnaire.questionnaireDesc;
          this.prizeList[0] = this.templateData.questionnaire.draw.prizeList[0];
          if (this.templateData.shareCourtesy.draw) {
            this.prizeList[1] = this.templateData.shareCourtesy.draw.prizeList[0];
          }
          this.prizeList.forEach(item => {
            item.stock = item.totalPrizeNum;
          });
          console.log(this.prizeList, "prizeListprizeList");
        } else {
          this.prizeList = [
            {
              showImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/158835/9/878/32528/5fed6feeE1dea01a1/492a92753717c9c8.png",
              statueImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/197485/37/18150/7911/619cec62Ee06d907f/e5f5555bc7d0bfb3.png",
              prizeName: "50京豆",
              stock: 0, //已领取奖品数量
              allNum: 100, //奖品总数量
              days: 3,
              canReceive: false,
              status: 2,
              prizeType: "1"
            },
            {
              showImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/158835/9/878/32528/5fed6feeE1dea01a1/492a92753717c9c8.png",
              statueImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/197485/37/18150/7911/619cec62Ee06d907f/e5f5555bc7d0bfb3.png",
              prizeName: "10积分",
              stock: 10,
              allNum: 100,
              days: 3,
              canReceive: false,
              status: 2,
              prizeType: "4"
            }
          ];
        }
      } else {
        questionnaireMain(callBackData => {
          console.log(callBackData, "callBackData");
          this.surveyMainData = callBackData.data;
          this.prizeList = callBackData.data.questionnairePrizeVoList;
          this.questionnaireStatus = callBackData.data.questionnaireStatus;
          this.isOPenShare = callBackData.data.isOpen == 0 ? false : true;
          if (this.surveyMainData.success == 1) {
            this.$toast("您已助力成功!");
          }
        });
      }
    },
    //开始答题 0-可以答题，1-不可以:
    startQuestionClick(questionnaireStatus) {
      // console.log('开始答题');
      if (this.isWebClick) {
        return;
      }
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      }
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (this.prizeList[0].stock <= 0) {
        let obj = {
          canSend: 5
        };
        AddBuyErrDialogService.create({}, obj, submit => {
          AddBuyErrDialogService.close();
        });
        return;
      }

      if (questionnaireStatus == 0) {
        // this.$router.push({path: ’ 路由 ', query: {key: value}})
        // this.$emit('questionEmitBack',true)

        if (this.templateId == "aa680d37-47e2-48ce-af14-0670fd") {
          this.$router.push({
            path: "StartQuestion1",
            query: {
              styleData: this.styleData,
              isTemplate: this.isTemplate,
              activityType: sessionStorage.getItem("giftType"),
              templateId: sessionStorage.getItem("templateId"),
              activityId: sessionStorage.getItem("activityId"),
              nodeId: sessionStorage.getItem("nodeId"),
              shareUserId: sessionStorage.getItem("shareUserId"),
              prd: sessionStorage.getItem("prd"),
              gameDraw: sessionStorage.getItem("gameDraw")
            }
          });
        } else {
          this.$router.push({
            path: "startQuestion",
            query: {
              styleData: this.styleData,
              isTemplate: this.isTemplate,
              activityType: sessionStorage.getItem("giftType"),
              templateId: sessionStorage.getItem("templateId"),
              activityId: sessionStorage.getItem("activityId"),
              nodeId: sessionStorage.getItem("nodeId"),
              shareUserId: sessionStorage.getItem("shareUserId"),
              prd: sessionStorage.getItem("prd"),
              gameDraw: sessionStorage.getItem("gameDraw")
            }
          });
        }
      } else {
        this.$toast("您已完成此答卷~");
      }
    },
    //查看获奖条件
    lookCondition() {
      // datasAll, isTemplate, styleDataNew
      // console.log('zzzzzzzzzzzzzzzzzz');
      if (this.isWebClick) {
        return;
      }
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      this.stopScroll();
      conditionPopService2.create(
        this.surveyMainData,
        this.isTemplate,
        this.styleData,
        this.isOPenShare,
        submit => {
          conditionPopService2.close();
          this.canScroll();
        }
      );
    }
  }
};
</script>

<style lang="scss">
.surveyPrizeDivAllC {
  .showImgDiv {
    background: #ffffff;
    height: 2rem;
    width: 2rem;
    border-radius: 0.2rem;
    border: 2px solid rgb(255, 54, 51);
    position: relative;
    margin-left: 0.2rem;
    overflow: hidden;
    .backName {
      width: calc(2rem - 4px);
      height: 0.7rem;
      background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/138524/9/21064/8976/619cdd47E1819f3a9/140f4a58e373a32d.png);
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      bottom: -0.05rem;
      left: 0;
      text-align: center;
      padding-top: 0.32rem;
      font-size: 0.24rem;
      color: rgb(255, 255, 255);
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .prizeDivAll {
    .prizeListDiv {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      // flex-wrap: wrap;
      width: 6.51rem;
      height: 2.26rem;
      overflow: hidden;
    }
    .prizeNameDiv {
      // width: 3.21rem;
      margin-left: 0.31rem;
      // height: .83rem;
      // background: #2a93ec;
      // border-radius: 0 0 0.1rem 0.1rem;
      // padding: 0 0.27rem;
      // box-sizing: border-box;
      .prizeNameBox {
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
      }
      .prizeName {
        font-size: 0.3rem;
        font-family: SourceHanSansCN;
        font-weight: 500;
        color: #262626;
        line-height: 0.3rem;
        padding-top: 0.18rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        margin-bottom: 0.2rem;
      }
      .prizeNameNum {
        font-size: 0.6rem;
        font-family: SourceHanSansCN;
        font-weight: 500;
        line-height: 0.6rem;
        color: #f2270c;
        text-align: left;
        margin-bottom: 0.2rem;
        margin-right: 0.03rem;
      }
      .leftNum {
        font-size: 0.2rem;
        font-family: SourceHanSansCN;
        font-weight: 500;
        color: #8c8c8c;
        line-height: 0.27rem;
        text-align: left;
        padding-top: 0.05rem;
      }
    }
    .prizeItemDiv {
      width: 6.51rem;
      height: 2.26rem;
      background: #ffffff;
      border-radius: 0.1rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .startQuestionDiv {
      background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/187974/5/28905/4295/6327c6b8Eeda22058/e44ad0d8c97ede51.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 5.11rem;
      height: 0.9rem;
      margin-left: calc(50% - 5.11rem / 2);
      margin-top: 0.26rem;
    }
    .lookDiv {
      font-size: 0.3rem;
      font-family: SourceHanSansCN;
      font-weight: bold;
      color: #1a44ed;
      line-height: 0.27rem;
      margin-top: 0.18rem;
    }
  }
}
</style>
