<template>
  <div :style="lightWishLamp" v-if="isShow">
    <component
      ref="dataRef1"
      v-for="(value, key, index) in componentsData"
      :key="index"
      :is="key"
      :isTemplate="isTemplate"
      :styleData="value.styleData"
      :datas="value.datas"
      :keyData="value.keyData"
    ></component>
    <div :style="allWishLight">
      <div :style="oneLamp" v-for="(item, index) in lampList" :key="index" @click="lightLmp(item, index)">
        <div :style="oneLampImg1" v-if="item.lightType == 1">
          <div :style="status">
            <img src="//img10.360buyimg.com/imgzone/jfs/t1/158399/25/17803/359/607021e6Ecd0f42fe/4a4ff3f838a611ff.png" :style="statusImg" />
            <span :style="lampStatus1">已解锁</span>
          </div>
        </div>
        <div :style="oneLampImg0" v-if="item.lightType == 0">
          <div :style="status">
            <img src="//img10.360buyimg.com/imgzone/jfs/t1/169655/25/17270/370/607021eeEd2c793ac/95e1d999ea12d00a.png" :style="statusImg" />
            <span :style="lampStatus0">未解锁</span>
          </div>
        </div>
        <div :style="oneLampImg1" v-if="item.lightType == 2">
          <div :style="status">
            <img src="//img10.360buyimg.com/imgzone/jfs/t1/158399/25/17803/359/607021e6Ecd0f42fe/4a4ff3f838a611ff.png" :style="statusImg" />
            <span :style="lampStatus1">已点亮</span>
          </div>
        </div>
        <span :style="lamp">许愿灯{{ index + 1 }}</span>
        <span :style="lightUp">全网已点亮{{ item.allCount }}次</span>
      </div>
    </div>
  </div>
</template>
<script>
import countDown from '../countdown/countdown1.vue'; //倒计时
import shopName from '../shopName/shopName.vue';

import { swWishLampService, wishLampService, winnerRecordComService, winPrizeService, notWinPrizeService } from '../../../util/comCreate.js';
import apis from '../../../util/apis1.js';
let { lightWishLamp } = apis;
export default {
  props: ['isTemplate', 'datas', 'keyData', 'styleData', 'templateData'],
  name: 'lightWishLamp',
  components: { countDown, shopName },
  data() {
    return {
      lampList: [], //许愿灯列表
      allLampData: '', //首页所有数据
      isShow: true, //组件显示 暂没用 可以删除
      componentsData: {
        countDown: {
          styleData: {
          },
          datas: {},
          keyData: {
            startTime: 'startTime', //倒计时时间
            endTime: 'endTime', //活动结束倒计时
            activityStatus: 'activityStatus' //活动状态 1 活动未开始 2 活动已结束 3 活动正常状态
          }
        },
        shopName: {
          styleData: {},
          datas: {},
          keyData: {
            shopNameStyle: 'shopNameStyle',
            shopName: 'shopName',
            shopLogo: 'shopLogo'
          }
        }
      }
    };
  },
  created() {
    this.lightWishLamp = this.styleData.lightWishLamp;
    this.allWishLight = this.styleData.lightWishLamp.allWishLight;
    this.oneLamp = this.styleData.lightWishLamp.oneLamp;
    // this.oneLampImg = this.styleData.lightWishLamp.oneLampImg;
    this.lamp = this.styleData.lightWishLamp.lamp;
    this.lightUp = this.styleData.lightWishLamp.lightUp;

    this.oneLampImg1 = this.styleData.lightWishLamp.oneLampImg1;
    this.status = this.styleData.lightWishLamp.oneLampImg1.status;
    this.statusImg = this.styleData.lightWishLamp.oneLampImg1.statusImg;
    this.lampStatus1 = this.styleData.lightWishLamp.oneLampImg1.lampStatus1;
    // this.lampStatus0 = this.styleData.lightWishLamp.oneLampImg1.lampStatus0;

    this.oneLampImg0 = this.styleData.lightWishLamp.oneLampImg0;
    this.status = this.styleData.lightWishLamp.oneLampImg0.status;
    this.statusImg = this.styleData.lightWishLamp.oneLampImg0.statusImg;
    this.lampStatus0 = this.styleData.lightWishLamp.oneLampImg0.lampStatus0;

    this.componentsData.countDown.styleData = this.styleData.countDownStyle;
    this.componentsData.countDown.keyData = Object.assign(this.componentsData.countDown.keyData, this.keyData);
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      //模板
      let that = this;
      //自动刷新(公示时间)
      this.nowDate = new Date().getTime();
      if (this.isTemplate == true) {
        var dataAll = this.templateData;
        if (dataAll) {
          this.allLampData = {
            showStartTime: dataAll.wish.showStartTime,
            activeStartTime: dataAll.wish.activeStartTime,
            drawPrizeTime: dataAll.wish.drawPrizeTime
          };

          //自动刷新(公示时间)
          this.nowDate = new Date().getTime();
          var timeDiff = parseInt(this.allLampData.showStartTime - this.nowDate) + ''; //公示开始时间和现在时间差

          var timeDiff2 = parseInt(this.allLampData.activeStartTime - this.nowDate) + ''; //活动开始时间和现在时间差
          var timeDiff3 = parseInt(this.allLampData.drawPrizeTime - this.nowDate) + ''; //开奖时间与现在时间差

          if (timeDiff >= 0) {
            //如果没有到公示时间
            if (timeDiff.length >= 9) {
              var timeDiff11 = 24 * 60 * 60 * 1000;
            } else {
              var timeDiff11 = timeDiff;
            }
          }

          if (timeDiff3 >= 0) {
            //没有到开将期
            if (timeDiff3.length >= 9) {
              //许愿期未结束
              var timeDiff11 = 24 * 60 * 60 * 1000;
            } else {
              var timeDiff11 = timeDiff3;
            }
          }

          //自动刷新(开奖时间)
          //20s
          if (timeDiff2 >= 0) {
            //许愿期未结束
            if (timeDiff2.length >= 9) {
              //许愿期未结束
              var timeDiff11 = 24 * 60 * 60 * 1000;
            } else {
              var timeDiff11 = timeDiff2;
            }
          }

          if (timeDiff >= 0 || timeDiff2 >= 0 || timeDiff3 >= 0) {
            //自动刷新(开奖时间)
            console.log('自动刷新开奖时间');
            var a = setInterval(() => {
              //重新请求
              this.initData();
              clearInterval(a);
            }, parseInt(timeDiff11));
          }

          if (this.nowDate < this.allLampData.activeStartTime || this.nowDate > this.allLampData.drawPrizeTime) {
            this.publicData.$emit('drawCountDown', false);
          }

          if (this.nowDate >= this.allLampData.activeStartTime && this.nowDate <= this.allLampData.drawPrizeTime) {
            this.publicData.$emit('drawCountDown', true);
          }
          if (timeDiff2 > 0) {
            let index = 0;
            for (let i in this.componentsData) {
              var keyData = this.componentsData[i].keyData;
              if (i == 'countDown') {
                this.componentsData[i].datas.startTime = this.allLampData.drawPrizeTime;
                this.componentsData[i].datas.activityStatus = 4; //活动状态 1 活动未开始 2 活动已结束 3 活动正常状态 4开奖倒计时
              }
              that.$refs.dataRef1[index].initData(this.componentsData[i].datas);
              index = index + 1;
            }
          }

          if (this.nowDate >= this.allLampData.showStartTime) {
            // this.isShow = false;
            var datas = {
              isShowRecord: true,
              titleImage: '//img10.360buyimg.com/imgzone/jfs/t1/130131/8/19972/15487/5fd5ce53Ec3a33253/a55942a3e63818c0.png',
              closeImg: '//img10.360buyimg.com/imgzone/jfs/t1/147497/24/18681/266/5fd996feEeda3d39e/c7382b0b3580717e.png'
            };
            var styleData = {
              winRecordStyle: {
                maskStyle: {
                  position: 'fixed',
                  width: '100%',
                  height: '100%',
                  background: 'rgba(0,0,0,0.7)',
                  top: '0',
                  bottom: '0',
                  'z-index': '200'
                },
                mainStyleDiv: {
                  background: 'url(//img10.360buyimg.com/imgzone/jfs/t1/155452/19/10122/293363/5fd996ffE7f216b9c/90a7e13086f5cfb4.png) no-repeat',
                  'background-size': '100% 100%',
                  width: '6rem',
                  height: '7.60rem',
                  'text-align': 'center',
                  margin: '1.1rem auto',
                  position: 'absolute',
                  top: '2.56rem',
                  'margin-left': 'calc(50% - 6.00rem / 2)'
                },
                closeImgStyle: {
                  width: '0.28rem',
                  height: '0.28rem',
                  position: 'absolute',
                  top: '0.2rem',
                  right: '0.2rem'
                },
                winRecordImg: {
                  width: '4.42rem',
                  height: '1.26rem',
                  // 'margin-top': '-0.74rem',
                  position: 'absolute',
                  top: '-0.74rem',
                  'margin-left': 'calc(50% - 4.42rem / 2)',
                  display: 'flex'
                },
                recordListDiv: {
                  'margin-top': '0.2rem',
                  height: '5.80rem',
                  'overflow-y': 'scroll',
                  width: '5.6rem',
                  background: '#fff',
                  'border-radius': '0.1rem',
                  margin: '0.8rem auto auto auto'
                },
                recordItemDiv: {
                  margin: '0 0.42rem 0.10rem 0.42rem',
                  'border-radius': '0.16rem',
                  padding: '0.10rem 0.16rem',
                  // background: '#fd1f25',
                  display: 'flex',
                  'justify-content': 'space-between'
                },
                recordItemLeft: {
                  display: 'flex',
                  'align-items': 'center',
                  color: '#fe8632',
                  'font-size': '0.22rem'
                },
                avatarImg: {
                  width: '0.72rem',
                  height: '0.72rem',
                  'border-radius': '50%',
                  background: '#2C3E50',
                  'margin-right': '0.10rem'
                },
                recordItemRight: {
                  color: '#fe8632',
                  display: 'flex',
                  'font-size': '0.24rem',
                  'align-items': 'center'
                }
              }
            };
            var keyData = {
              userImg: 'userImg',
              nickName: 'nickName',
              prizeName: 'prizeName'
            };
            winnerRecordComService.create(datas, styleData, keyData, this.isTemplate, submit => {
              winnerRecordComService.close();
            });
          } else {
            this.isShow = true;
            this.publicData.$emit('isNotyFiceWinnerReorrd', false, this.isTemplate);
          }

          //根据奖项个数显示许愿灯数量
          for (var i = 0; i < dataAll.wish.prizeInfos.length; i++) {
            var lampObj = {
              allCount: null,
              lightType: null
            };
            lampObj.allCount = 1;
            lampObj.lightType = 0;
            this.lampList = this.lampList.concat(lampObj);
          }
          console.log(this.lampList);
        } else {
          this.lampList = [
            {
              allCount: 12, //全网点亮次数
              lightType: 0
            },
            {
              allCount: 23, //全网点亮次数
              lightType: 1
            },
            {
              allCount: 12, //全网点亮次数
              lightType: 1
            },
            {
              allCount: 6, //全网点亮次数
              lightType: 1
            },
            {
              allCount: 644, //全网点亮次数
              lightType: 0
            },
            {
              allCount: 1, //全网点亮次数
              lightType: 1
            },
            {
              allCount: 1, //全网点亮次数
              lightType: 0
            },
            {
              allCount: 1, //全网点亮次数
              lightType: 1
            }
          ];
        }
      } else {
        lightWishLamp(wishLampData => {
          console.log(wishLampData);
          this.allLampData = wishLampData.data;
          this.lampList = wishLampData.data.lightInfo;
          //活动以及结束
          if (this.nowDate > this.allLampData.activeEndTime) {
            console.log('活动已经结束');
          } else {
            var timeDiff = parseInt(this.allLampData.showStartTime - this.nowDate) + ''; //公示开始时间和现在时间差

            var timeDiff2 = parseInt(this.allLampData.activeStartTime - this.nowDate) + ''; //活动开始时间和现在时间差
            var timeDiff3 = parseInt(this.allLampData.drawPrizeTime - this.nowDate) + ''; //开奖时间与现在时间差
            var timeDiff4 = parseInt(this.allLampData.wishStartTime - this.nowDate) + ''; //许愿开始时间与现在时间差
            var timeDiff5 = parseInt(this.allLampData.wishEndTime - this.nowDate) + ''; //许愿结束时间与现在时间差

            if (timeDiff >= 0) {
              //如果没有到公示时间
              if (timeDiff.length >= 9) {
                var timeDiff11 = 24 * 60 * 60 * 1000;
              } else {
                var timeDiff11 = timeDiff;
              }
            }

            if (timeDiff3 >= 0) {
              //没有到开将期
              if (timeDiff3.length >= 9) {
                //许愿期未结束
                var timeDiff11 = 24 * 60 * 60 * 1000;
              } else {
                var timeDiff11 = timeDiff3;
              }
            }

            //自动刷新(开奖时间)
            //20s
            if (timeDiff2 >= 0) {
              //许愿期未结束
              if (timeDiff2.length >= 9) {
                //许愿期未结束
                var timeDiff11 = 24 * 60 * 60 * 1000;
              } else {
                var timeDiff11 = timeDiff2;
              }
            }

            //自动刷新(许愿开始时间)
            if (timeDiff4 >= 0) {
              if (timeDiff4.length >= 9) {
                var timeDiff11 = 24 * 60 * 60 * 1000;
              } else {
                var timeDiff11 = timeDiff4;
              }
            }
            //自动刷新(许愿结束时间)
            if (timeDiff5 >= 0) {
              if (timeDiff5.length >= 9) {
                var timeDiff11 = 24 * 60 * 60 * 1000;
              } else {
                var timeDiff11 = timeDiff5;
              }
            }

            if (timeDiff >= 0 || timeDiff2 >= 0 || timeDiff3 >= 0 || timeDiff4 >= 0 || timeDiff5 >= 0) {
              //自动刷新(开奖时间)
              console.log('自动刷新开奖时间');
              var a = setInterval(() => {
                //重新请求
                this.initData();
                clearInterval(a);
              }, parseInt(timeDiff11));
            }

            if (timeDiff2 < 0) {
              let index = 0;
              for (let i in this.componentsData) {
                var keyData = this.componentsData[i].keyData;
                if (i == 'countDown') {
                  this.componentsData[i].datas.startTime = this.allLampData.drawPrizeTime;
                  this.componentsData[i].datas.activityStatus = 4; //活动状态 1 活动未开始 2 活动已结束 3 活动正常状态 4开奖倒计时
                }
                that.$refs.dataRef1[index].initData(this.componentsData[i].datas);
                index = index + 1;
              }
            }

            if (this.nowDate >= this.allLampData.showStartTime) {
              // this.isShow = false;
              var datas = {
                isShowRecord: true,
                titleImage: '//img10.360buyimg.com/imgzone/jfs/t1/130131/8/19972/15487/5fd5ce53Ec3a33253/a55942a3e63818c0.png',
                closeImg: '//img10.360buyimg.com/imgzone/jfs/t1/147497/24/18681/266/5fd996feEeda3d39e/c7382b0b3580717e.png'
              };
              var styleData = {
                winRecordStyle: {
                  maskStyle: {
                    position: 'fixed',
                    width: '100%',
                    height: '100%',
                    background: 'rgba(0,0,0,0.7)',
                    top: '0',
                    bottom: '0',
                    'z-index': '200'
                  },
                  mainStyleDiv: {
                    background: 'url(//img10.360buyimg.com/imgzone/jfs/t1/155452/19/10122/293363/5fd996ffE7f216b9c/90a7e13086f5cfb4.png) no-repeat',
                    'background-size': '100% 100%',
                    width: '6rem',
                    height: '7.60rem',
                    'text-align': 'center',
                    margin: '1.1rem auto',
                    position: 'absolute',
                    top: '2.56rem',
                    'margin-left': 'calc(50% - 6.00rem / 2)'
                  },
                  closeImgStyle: {
                    width: '0.28rem',
                    height: '0.28rem',
                    position: 'absolute',
                    top: '0.2rem',
                    right: '0.2rem'
                  },
                  winRecordImg: {
                    width: '4.42rem',
                    height: '1.26rem',
                    // 'margin-top': '-0.74rem',
                    position: 'absolute',
                    top: '-0.74rem',
                    'margin-left': 'calc(50% - 4.42rem / 2)',
                    display: 'flex'
                  },
                  recordListDiv: {
                    'margin-top': '0.2rem',
                    height: '5.80rem',
                    'overflow-y': 'scroll',
                    width: '5.6rem',
                    background: '#fff',
                    'border-radius': '0.1rem',
                    margin: '0.8rem auto auto auto'
                  },
                  recordItemDiv: {
                    margin: '0 0.42rem 0.10rem 0.42rem',
                    'border-radius': '0.16rem',
                    padding: '0.10rem 0.16rem',
                    // background: '#fd1f25',
                    display: 'flex',
                    'justify-content': 'space-between'
                  },
                  recordItemLeft: {
                    display: 'flex',
                    'align-items': 'center',
                    color: '#fe8632',
                    'font-size': '0.22rem'
                  },
                  avatarImg: {
                    width: '0.72rem',
                    height: '0.72rem',
                    'border-radius': '50%',
                    background: '#2C3E50',
                    'margin-right': '0.10rem'
                  },
                  recordItemRight: {
                    color: '#fe8632',
                    display: 'flex',
                    'font-size': '0.24rem',
                    'align-items': 'center'
                  }
                }
              };
              var keyData = {
                userImg: 'userImg',
                nickName: 'nickName',
                prizeName: 'prizeName'
              };
              winnerRecordComService.create(datas, styleData, keyData, this.isTemplate, submit => {
                winnerRecordComService.close();
              });
            } else {
              this.isShow = true;
              this.publicData.$emit('isNotyFiceWinnerReorrd', false, this.isTemplate);
            }
          }
        });
      }
    },
    //点亮许愿灯
    lightLmp(item, index) {
      console.log(item);
      if (this.isTemplate) {
        this.$toast('活动预览，仅供查看');
        return;
      }
      if (this.nowDate > this.allLampData.activeEndTime) {
        this.$toast('活动已结束');
        return;
      }
      //判断许愿期是否开始或者结束

      if (this.nowDate < this.allLampData.wishStartTime) {
        this.$toast('许愿期尚未开始');
      } else if (this.nowDate >= this.allLampData.wishEndTime && this.nowDate < this.allLampData.drawPrizeTime) {
        this.$toast('许愿期已经结束，请等待开奖');
      } else if (this.nowDate >= this.allLampData.drawPrizeTime && this.nowDate < this.allLampData.showStartTime) {
        this.$toast('许愿期已经结束');
      } else if (this.nowDate > this.allLampData.showStartTime) {
        this.$toast('许愿期已经结束');
      } else {
        var styleData = {
          floor: {
            width: '5.6rem',
            height: '6.6rem',
            'background-color': '#fff',
            'border-radius': '0.1rem',
            position: 'fixed',
            margin: 'auto',
            left: '0',
            right: '0',
            top: '3.2rem',
            text11: {
              'font-size': '0.3rem',
              color: '#fe8632',
              display: 'block',
              'text-align': 'center',
              'margin-top': '0.5rem',
              'margin-bottom': '0.35rem'
            },
            text12: {
              'font-size': '0.3rem',
              color: '#fe8632',
              display: 'block',
              'text-align': 'center',
              'margin-top': '0.5rem',
              'margin-bottom': '0.2rem'
            },
            text13: {
              'font-size': '0.3rem',
              color: '#fe8632',
              display: 'block',
              'text-align': 'center',
              'margin-top': '0.1rem',
              'margin-bottom': '0.15rem'
            },
            text21: {
              'font-size': '0.37rem',
              color: '#e2231a',
              display: 'block',
              'text-align': 'center'
            },
            text22: {
              'font-size': '0.3rem',
              color: '#fe8632',
              display: 'block',
              'text-align': 'center'
            },
            text23: {
              'font-size': '0.3rem',
              color: '#fe8632',
              display: 'block',
              'text-align': 'center'
            },
            text3: {
              color: '#e2231a',
              'font-size': '0.35rem',
              display: 'block',
              'text-align': 'center',
              'margin-top': '0.3rem'
            },
            text33: {
              color: '#fe8632',
              'font-size': '0.35rem',
              display: 'block',
              'text-align': 'center',
              'margin-top': '0.15re'
            },
            text4: {
              color: '#e2231a',
              'font-size': '0.4rem',
              display: 'block',
              'text-align': 'center',
              'margin-top': '0.15rem'
            },
            prizeImg: {
              width: '2.8rem',
              height: '2.8rem',
              margin: '0.2rem auto',
              img: {
                width: '2.8rem',
                height: '2.8rem'
              }
            },
            backBtn: {
              width: '4.8rem',
              height: '0.9rem',
              'background-color': 'red',
              'border-radius': '0.1rem',
              'margin-left': '0.4rem',
              'font-size': '0.3rem',
              color: '#fff',
              position: 'fixed',
              top: ' 8.7rem'
            },
            lightLamp: {
              width: '4.8rem',
              height: '0.9rem',
              'background-color': 'red',
              'border-radius': '0.1rem',
              'margin-left': '0.4rem',
              'font-size': '0.4rem',
              color: '#fff',
              position: 'fixed',
              top: ' 8.7rem'
            },
            goToShop: {
              width: '4.8rem',
              height: '0.9rem',
              'background-color': 'red',
              'border-radius': '0.1rem',
              'margin-left': '0.4rem',
              'font-size': '0.4rem',
              color: '#fff',
              position: 'fixed',
              top: ' 8.7rem'
            }
          }
        };
        if (item.lightType == 2) {
          //已点亮
          wishLampService.create(styleData, item, index, this.allLampData.drawPrizeTime, this.allLampData.wishStartTime, submit => {
            console.log(submit, 'submit');
            wishLampService.close();
            if (submit == true) {
              this.initData();
            }
          });
        } else if (item.lightType == 1) {
          //已解锁
          if (item.prizeType == 3) {
            swWishLampService.create(item, index, this.allLampData.drawPrizeTime, this.allLampData.wishStartTime, submit => {
              console.log(submit, 'submit');
              swWishLampService.close();
              if (submit == true) {
                this.initData();
              }
            });
          } else {
            wishLampService.create(styleData, item, index, this.allLampData.drawPrizeTime, this.allLampData.wishStartTime, submit => {
              console.log(submit, 'submit');
              wishLampService.close();
              if (submit == true) {
                this.initData();
              }
            });
          }
        } else {
          wishLampService.create(styleData, item, index, this.allLampData.drawPrizeTime, this.allLampData.wishStartTime, submit => {
            console.log(submit, 'submit');
            wishLampService.close();
            if (submit == true) {
              this.initData();
            }
          });
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped></style>
