<template>
  <div
    class="veteSelecbox"
    :style="styleData.veteSelecbox"
    ref="voteSelect"
    @click="styleClick('click', 'voteSelect')"
    @mousemove="styleClick('mousemove', 'voteSelect')"
    @mouseout="styleClick('mouseout')"
  >
    <div
      :style="
        veteSelectData == 0 ? styleData.voteStyle : styleData.voteImgStyle
      "
      v-if="(!voteStick || voteStick.length == 0) && voteStickBtn == true"
      :key="keyee"
    >
      <div v-if="veteSelectData == 0">
        <div
          v-for="(item, index) in voteList"
          :key="index"
          :style="styleData.voteSelectStyle"
          @click="SelectButtonClick(index, item)"
        >
          <div
            :style="styleData.voteSelectButton"
            :class="
              (buttonClick && checkNow[index] == index) ||
              (buttonClick && checkNow[0] == index)
                ? 'buttonCheck'
                : ''
            "
          >
            {{
              (buttonClick && checkNow[index] == index) ||
              (buttonClick && checkNow[0] == index)
                ? "√"
                : ""
            }}
          </div>
          <div style="flex: 1; text-align: left">{{ item.votingContent }}</div>
        </div>
      </div>
      <div v-else class="veteSelectdiv">
        <div
          v-for="(item, index) in voteList"
          :key="index"
          :style="styleData.voteSelectImgStyle"
          @click="SelectButtonClick(index, item)"
        >
          <div>
            <img :src="item.imagePath || item.skuImg || item.imgPath" alt />
          </div>
          <div class="itemdiv">
            <div class="divText">
              {{
                item.remake || item.skuName || item.votingContent || item.name
              }}
            </div>
            <div
              :style="styleData.voteSelectButton"
              class="choosediv"
              :class="
                (buttonClick && checkNow[index] == index) ||
                (buttonClick && checkNow[0] == index)
                  ? 'buttonCheck'
                  : ''
              "
            >
              {{
                (buttonClick && checkNow[index] == index) ||
                (buttonClick && checkNow[0] == index)
                  ? "√"
                  : ""
              }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div
        v-for="(item, index) in voteList"
        :key="index"
        :style="styleData.voteSelectStyleEnd"
      >
        <div
          :style="
            veteSelectData == 0
              ? styleData.voteSelectName
              : styleData.voteSelectImgName
          "
        >
          <span v-if="veteSelectData != 0">
            <img
              :src="item.imgPath || item.skuImg"
              alt
              class="veteSelectimg1"
            />
          </span>
          <span :style="veteSelectData == 0 ? '' : styleData.voteSelectText">
            {{
              veteSelectData == 0
                ? item.votingContent
                : item.remake || item.skuName
            }}
            <span class="selected" v-if="selectText[index] != null"
              >( 已选 )</span
            >
          </span>
        </div>
        <div :style="styleData.Progress">
          <div :style="styleData.ProgressStyle">
            <div
              class="ProgressColor"
              :style="nowProgressNum + allNum[index] + '%;'"
            ></div>
          </div>
          <div :style="styleData.ProgressNowNum">
            <span>{{ item.count }} 票 {{ allNum[index] }}%</span>
          </div>
        </div>
      </div>
    </div>
    <div
      :style="styleData.voteButton"
      v-lz-click="'7'"
      @click="voteClick()"
      v-if="touPiaoBtn"
    >
      {{ voteText }}
    </div>
    <div :style="styleData.voteButtonDis" v-else>{{ voteText }}</div>
  </div>
</template>
<script>
import { goToShopPage } from "../../../util/tools.js";
import bus from "../../../util/bus.js";
import {
  PrizeResultPopComService,
  NoPrizeResultPopComService,
  TaskPopComService,
  SharePopComService,
  ShopPopComService,
  FollowSkuPopComService,
} from "../../../util/comCreate.js";
import apis1 from "../../../util/apis1.js";
import { Toast } from "vant";
let { startDraw, voteSavePkResult, followShop,storeGoodsPoint } = apis1;
export default {
  props: [
    "styleData",
    "keyData",
    "datas",
    "isTemplate",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      styleDataOld: {},
      voteList: [],
      voteStick: null, //是否投过票
      voteStickBtn: true, //控制页面
      buttonClick: true,
      voteText: "投票",
      shopId: 0, //商品Id
      nowProgress: [],
      nowProgressNum: "width:",
      touPiaoBtn: false,
      selectName: "",
      keyee: 0, //控制key值
      nowNum: 0, //投票总数
      checkNow: [], //选中的选项索引
      checkData: [], //选中的选项数据
      allNum: [], //所有选项的概率
      selectText: [], //选中的选项票数
      maxSelect: 0, //最大多选数量
      nowSelectNum: 0, //当前选中的选项数量
      muchJoin: 0, //当前参与的用户人数
      veteSelectData: "图片", //当前的投票方式
      involvementFlag: null, //是否关注店铺
      drawSettingType: null, //是否抽奖
      voteStickBtn: true,
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
      exposureList: [
        {
          skuImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/187416/31/4714/49523/60ab4c4cE3a8eca46/c49d115666efe94f.png",
          skuId: "1336052",
          skuName: "曝光商品1",
          skuPrice: "10",
        },
        {
          skuImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/183810/37/5745/49914/60ab4c4cE278180de/a793c8be0d03673c.png",
          skuId: "100015054036",
          skuName: "曝光商品2",
          skuPrice: "10",
        },
        {
          skuImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/190444/40/4785/42939/60ab4c4cEef774869/6c76610f0fefe403.png",
          skuId: "100009576107",
          skuName: "曝光商品3",
          skuPrice: "10",
        },
        {
          skuImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/172186/12/11435/45891/60ab4c55E10ef3f21/0e82116a42c2d58b.png",
          skuId: "曝光商品4",
          skuName: "10",
          skuPrice: "10",
        },
      ],
    };
  },
  created() {},
  mounted() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initdata();
    this.maxSelect = this.datas.maxSelect;
  },
  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;
      console.log(datasAll, "22233334444");
      if (this.isTemplate == true) {
        this.veteSelectData = 0;
        this.restDrawCount = 0;
        this.voteList = [
          {
            count: 0,
            imgPath: "",
            remake: "",
            votingContent: "短信功能",
          },
          {
            count: 0,
            imgPath: "",
            remake: "",
            votingContent: "计算器",
          },
          {
            count: 0,
            imgPath: "",
            remake: "",
            votingContent: "记事本",
          },
          {
            count: 0,
            imgPath: "",
            remake: "",
            votingContent: "指南针",
          },
        ];
        if (datasAll) {
          this.veteSelectData = datasAll.voting.votingType;
          if (datasAll.activeConditions.involvementFlag == 1) {
            this.voteText = "关注店铺并投票";
          } else {
            this.voteText = "投票";
          }
          if (this.veteSelectData == 2) {
            this.voteList = datasAll.goodsData.exposedGoods;
            console.log("a123", this.voteList);
          } else {
            this.voteList = datasAll.voting.rule;
          }
        }
      } else {
        bus.$on("shopId", (content) => {
          //将商品Id通过BUS赋值
          this.shopId = content;
        });
        bus.$on("data", (content) => {
          this.muchJoin = content.voteUserCount;
          this.veteSelectData = content.votingType;
          this.selectName = content.votingForm;
          if (content.votingType == 2) {
            this.voteList = content.skuInfos;
          } else {
            this.voteList = content.rule;
          }

          this.nowNum = content.voteSelectCount;
          this.voteStick = content.voteSelectList;
          this.involvementFlag = content.involvementFlag;
          this.drawSettingType = content.drawSettingType;
          this.maxSelect = content.choiceCount;
          console.log(this.voteStick,"this.voteStick")
          if (!this.voteStick || ( this.voteStick.length== 0 && this.involvementFlag == 0)) {
            console.log(this.voteStick,"this.voteStick1")
            this.voteText = "投票";
          } else if (!this.voteStick || (this.voteStick.length== 0 && this.involvementFlag == 1)) {
            this.voteText = "关注店铺并投票";
            console.log(this.voteStick,"this.voteStick2")
          } else {
            this.voteStickBtn = false;
            this.voteText = "您已投票 进店逛逛";
            this.touPiaoBtn = true;
          }
          this.voteList.forEach((v, i) => {
            //将所有投票数加到一起计算百分比
            this.allNum.push(v.count);
            //将所有遍历出来的选项先赋值为null来占位
            this.selectText.splice(i, 0, null);
            this.checkNow.splice(i, 0, null);
            this.checkData.splice(i, 0, null);
            if (this.voteStick) {
              this.voteStick.forEach((a, b) => {
                if (content.votingType != 2) {
                  a = a.slice(0, -1);
                }

                if (a == v.votingContent || a == v.remake || a == v.skuId) {
                  this.selectText.splice(i, 1, a);
                }
              });
            }
          });
          console.log(
            this.allNum,
            this.checkData,
            this.checkNow,
            this.selectText
          );
          if (this.voteStick) {
            this.nowNum = this.nowNum / 100;
            this.voteList.forEach((v, i) => {
              //将计算好的数值赋值
              this.allNum[i] = Math.round(this.allNum[i] / this.nowNum);
            });
          }
        });
      }
    },
    voteClick() {
      if (this.isTemplate == true) {
        Toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        this.startTime = false;
        this.keyee++;
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        this.startTime = false;
        this.keyee++;
        return;
      }
      console.log(this.checkData, "checkData");
      var cheakVote = 0;
      console.log(this.voteStickBtn, this.voteStick);
      if ((!this.voteStick ||this.voteStick.length == 0) && this.voteStickBtn) {
        //判定如果用户第一次投票
        this.muchJoin++;
        var selectCount = 0;
        this.checkData.forEach((v, i) => {
          console.log(v, "2222222222222");
          if (v == null) {
            this.checkData.splice(i, 1);
          } else {
            selectCount++;
          }
        });
        if (selectCount == 0) {
          this.$toast("请投票");
          this.startTime = false;
          this.keyee++;
          return;
        }
        this.selectText.forEach((v, i) => {
          if (v == null) {
            cheakVote++;
            if (cheakVote == this.selectText.length) {
              this.checkNow.splice(i, 1, null);
              this.checkData.splice(i, 1, null);
              this.allNum.splice(i, 1, null);
              this.$toast("请投票");
              return;
            }
          }
        });
        voteSavePkResult(this.checkData, (data) => {
          this.voteStickBtn = !this.voteStickBtn;
          this.keyee++;
          if (this.drawSettingType == 1) {
            startDraw((initDatas) => {
              console.log("中奖信息", initDatas);
              if (initDatas.resp_code == 50009) {
                this.$toast("活动已结束");
                this.isStartPlay = false;
                return;
              }
              const self = this;
              if (initDatas.data) {
                // 奖品id没有匹配上的时候
                bus.$emit("winner", initDatas.data);
                var noSelect = true;
                self.fulfillHandle(initDatas.data, initDatas.data); //执行抽奖
                // 拿到相应的角度调旋转接口
                console.log("奖品id", self.pIndex);
                this.isStartPlay = false;
                this.publicData.$emit(
                  "isNotyFiceWinnerReorrd",
                  true,
                  this.isTemplate
                );
                noSelect = false;
              } else {
                for (var i = 0; i < self.voteList.length; i++) {
                  if (!self.voteList[i].prizeType) {
                    this.prize = self.voteList[i].id - 1;
                  }
                }
                self.fulfillHandle("未中奖");
              }
              this.restDrawCount = this.restDrawCount - 1;
            });
          }
          this.voteText = "您已投票 进店逛逛";
          this.touPiaoBtn = true;
        });
        bus.$emit("muchJoin", this.muchJoin);
        if (this.involvementFlag == 1) {
          followShop((data) => {});
        }
        this.nowNum = this.nowNum / 100; //计算概率
        console.log(this.selectText);
        this.voteList.forEach((v, i) => {
          // 如果单选

          if (this.selectName == 0) {
            var selectPiao = this.checkData[0];
            if (
              selectPiao == v.votingContent + "" + i ||
              selectPiao == v.remake + "" + i ||
              selectPiao == v.skuId
            ) {
              //判定如果不是null
              v.count++; //票数加一
              console.log(this.voteList, "22222222");
              this.allNum[i] = v.count;
              if (this.veteSelectData == 0) {
                this.selectText.splice(i, 1, v.votingContent);
              } else if (this.veteSelectData == 1) {
                this.selectText.splice(i, 1, v.remake);
              } else {
                this.selectText.splice(i, 1, v.skuId);
              }
            } else {
              this.selectText.splice(i, 1, null);
            }
          } else if (this.selectText[i] != null) {
            //判定如果不是null
            v.count++; //票数加一
            console.log(this.voteList, "22222222");
            this.allNum[i] = v.count;
          } else {
            this.allNum.splice(i, 1, v.count);
          }
          if (this.nowNum == 0) {
            //如果为第一个投票
            this.allNum[i] = Math.round(this.allNum[i] * 100);
          } else {
            this.allNum[i] = Math.round(this.allNum[i] / this.nowNum);
          }
        });

        console.log(this.allNum, "allNum");
        console.log(this.voteList, this.allNum, "nnnnnnnn");
      } else {
        storeGoodsPoint(4)
        goToShopPage(this.shopId);
      }
    },
    SelectButtonClick(num, item) {
      console.log(item);
      if (this.isTemplate == true) {
        Toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        this.startTime = false;
        this.keyee++;
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        this.startTime = false;
        this.keyee++;
        return;
      }
      // 判定是单选还是多选
      if (this.selectName == 0) {
        if (this.checkNow[0] == null) {
          this.nowNum++;
        }
        if (this.checkNow[0] == num) {
          //如果未点击别的选项则只改变开关
          this.buttonClick = !this.buttonClick;
          if (this.buttonClick) {
            if (this.veteSelectData == 0) {
              this.selectText.forEach((v, i) => {
                this.selectText.splice(i, 1, null);
              });
              this.selectText.splice(0, 1, item.votingContent);
              this.checkData.splice(0, 1, item.votingContent + num);
            } else if (this.veteSelectData == 1) {
              this.selectText.forEach((v, i) => {
                this.selectText.splice(i, 1, null);
              });
              this.checkData.splice(0, 1, item.remake + num);
              this.selectText.splice(0, 1, item.remake);
            } else {
              this.selectText.forEach((v, i) => {
                this.selectText.splice(i, 1, null);
              });
              this.checkData.splice(0, 1, item.skuId);
              this.selectText.splice(0, 1, item.skuId);
            }
            this.checkNow.splice(0, 1, num);
          } else {
            this.checkNow.splice(num, 1, null);
            this.checkData.splice(num, 1, null);
            this.selectText.splice(num, 1, null);
          }
          this.touPiaoBtn = this.buttonClick;
          console.log(this.checkData, "ddddddd");
        } else {
          //如果点击别的选项且别的选项未被选中则改变开关将原来的选中状态取消
          console.log("this.checkNow[0]", this.checkNow[0]);
          if (this.checkNow[0] != num && this.buttonClick == false) {
            this.buttonClick = !this.buttonClick;
            if (this.veteSelectData == 0) {
              this.selectText.forEach((v, i) => {
                this.selectText.splice(i, 1, null);
              });
              this.selectText.splice(0, 1, item.votingContent);
              this.checkData.splice(0, 1, item.votingContent + num);
            } else if (this.veteSelectData == 1) {
              this.selectText.forEach((v, i) => {
                this.selectText.splice(i, 1, null);
              });
              this.checkData.splice(0, 1, item.remake + num);
              this.selectText.splice(0, 1, item.remake);
            } else {
              this.selectText.forEach((v, i) => {
                this.selectText.splice(i, 1, null);
              });
              this.checkData.splice(0, 1, item.skuId);
              this.selectText.splice(0, 1, item.skuId);
            }

            this.checkNow.splice(0, 1, num);
          } else {
            if (this.veteSelectData == 0) {
              this.selectText.forEach((v, i) => {
                this.selectText.splice(i, 1, null);
              });
              this.selectText.splice(0, 1, item.votingContent);
              this.checkData.splice(0, 1, item.votingContent + num);
            } else if (this.veteSelectData == 1) {
              this.selectText.forEach((v, i) => {
                this.selectText.splice(i, 1, null);
              });
              this.checkData.splice(0, 1, item.remake + num);
              this.selectText.splice(0, 1, item.remake);
            } else {
              this.selectText.forEach((v, i) => {
                this.selectText.splice(i, 1, null);
              });
              this.checkData.splice(0, 1, item.skuId);
              this.selectText.splice(0, 1, item.skuId);
            }
            this.checkNow.splice(0, 1, num);
          }
          if (this.checkData[0] != null) {
            this.touPiaoBtn = true;
          } else {
            this.touPiaoBtn = false;
          }
        }
      } else {
        this.buttonClick = true;
        if (this.checkNow[num] == num) {
          //判定如果点击已选中的选项
          this.nowSelectNum--;
          this.nowNum--;
          this.checkNow.splice(num, 1, null);
          this.checkData.splice(num, 1, null);
          this.selectText.splice(num, 1, null);
          console.log(this.checkData);
          if (this.nowSelectNum <= 0) {
            this.touPiaoBtn = false;
          }
          return;
        } else if (this.nowSelectNum >= this.maxSelect) {
          //判定如果超过了最大多选数量
          console.log("点不了了");
          return;
        }
        if (this.nowSelectNum >= 0) {
          this.touPiaoBtn = true;
        }
        //每次点击未选中的选项
        this.nowSelectNum++;
        this.checkNow.splice(num, 1, num);
        if (this.veteSelectData == 0) {
          this.nowNum++;
          this.checkData.splice(num, 1, item.votingContent + num);
          this.selectText.splice(num, 1, item.votingContent);
        } else if (this.veteSelectData == 1) {
          this.nowNum++;
          this.checkData.splice(num, 1, item.remake + num);
          this.selectText.splice(num, 1, item.remake);
        } else {
          this.nowNum++;
          this.checkData.splice(num, 1, item.skuId);
          this.selectText.splice(num, 1, item.skuId);
        }
      }

      console.log(this.checkData, this.nowNum, this.selectText);
    },
    fulfillHandle(prizeData, initDatas) {
      this.isStartPlay = false;
      var activityType = sessionStorage.getItem("activityType");
      this.isShowRotary = this.datas.isShowRotary == true ? true : false;
      console.log("self");
      if (prizeData == "未中奖") {
        NoPrizeResultPopComService.create(
          "非常遗憾，您与大奖擦肩而过~",
          "//img10.360buyimg.com/imgzone/jfs/t1/136745/32/20121/48059/5fd996feE56314a28/b952f0e6f3fe811f.png",
          (submit) => {
            NoPrizeResultPopComService.close();
          }
        );
      } else {
        //中奖
        this.prizeResultData.datas = prizeData;
        PrizeResultPopComService.create(
          this.prizeResultData,
          initDatas,
          (submit) => {
            PrizeResultPopComService.close();
          }
        );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.veteSelectimg {
  width: 160px;
  height: 160px;
}
.veteSelectimg1 {
  width: 60px;
  height: 60px;
}
.selected {
  color: rgb(240, 37, 15);
  font-size: 0.24rem;
}
.choosediv {
  position: absolute;
  right: -0.2rem;
  bottom: 0.25rem;
}
.itemdiv {
  height: 1rem;
  position: relative;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
}
.veteSelectdiv {
  display: flex;
  flex-wrap: wrap;
}
.ProgressColor {
  height: 100%;
  background-color: #f0250f;
}
.buttonCheck {
  background: red;
  text-align: center;
  margin-right: 0.2rem;
  font-size: 0.3rem;
  font-weight: bolder;
  line-height: 0.5rem;
  color: white;
}
.divText {
  width: 2.6rem;
  font-size: 0.24rem;
}
.veteSelecbox {
  position: relative;
}
</style>