<template>
  <div class="clockedPage">
    <div class="clocked" v-if="!checkLight">
      <div class="tips" style="padding-top: 138px;">
      完成至少6处扫码打卡
    </div>
    <div class="xzlp">
      <div class="list">
        <div class="item" v-for="(item, index) in list" v-show="index<codeList.length" :key="index" :class="item.class" @click="handleItem(item)">
          <img class="itemImg" :src="item.img" alt="">
        </div>
      </div>
    </div>
    </div>
    <div class="deng" v-else>
    <div class="dengList" @click="showlist = false">
      <div class="showinfo">
        <div class="dengimg">
          <!-- <div class="page">
            <div class="pageIcon" @click.stop="handleNext(true)">
              <van-icon name="arrow-left" size="48px" />
            </div>
            <div class="pageIcon" @click.stop="handleNext(false)">
              <van-icon name="arrow" size="48px" />
            </div>
          </div> -->
          <img class="hua" :src="active && active.bgimg" alt="">
          <div class="title">{{active && active.name}}</div>
        </div>
        <div class="text">{{active && active.text}}</div>
        <div class="downButtomItem" @click.stop="handleShare">分享</div>
        <div class="tips" style="font-size: 12px">您已完成祈愿，请明天再来</div>
      </div>
    </div>
    </div>
    <!-- <van-popup
      closeIconPos="bottom-right"
      v-model="showlist"
      position="center"
      round
      bgColor="transparent"
      style="background: transparent"
      @close="close"
      @open="open"
    >
    <div class="dengList" @click="showlist = false">
      <div class="showinfo" v-if="active">
        <div class="dengimg">
          <div class="page">
            <div class="pageIcon" @click.stop="handleNext(true)">
              <van-icon name="arrow-left" size="48px" />
            </div>
            <div class="pageIcon" @click.stop="handleNext(false)">
              <van-icon name="arrow" size="48px" />
            </div>
          </div>
          <img class="hua" :src="active.bgimg" alt="">
        </div>
        <div class="title">{{active.name}}</div>
        <div class="text">{{active.text}}</div>
        <div class="downButtomItem" @click.stop="handleShare">分享</div>
        <div class="tips" style="font-size: 12px">您已完成祈愿，请明天再来</div>
      </div>
    </div>
    </van-popup> -->
    <van-popup
      closeIconPos="bottom-right"
      v-model="showShare"
      position="center"
      round
      bgColor="transparent"
      style="background: transparent"
      @close="close"
      @open="open"
    >
      <div class="sharePop" ref="downDiv">
        <div class="codeData">
          <img :src="img" class="showImgbase64" alt="">
        <div class="close" @click="showShare = false">
          <img
            width="42px"
            height="42px"
            src="/static/img/icon_cancel@2x.png"
          ></img>
        </div>
        <img class="huaimg" :src="active && active.img" alt="">
        <div class="text">
          <div class="textContent">
            <div class="title">{{active && active.name}}</div>
            <div class="textlist" >{{active && active.text}}</div>
          </div>
          <div class="codeImg flex justify-end items-center">
            <div class="qrcode" ref="qrCodeUrl1"></div>
            <div class="qrcode" ref="qrCodeUrl2"></div>
          </div>
        </div>
      </div>
      <div class="codebutList">
          <div class="downText" v-if="img">
            <div class="img flex justify-center items-center">
              <!-- <div style="width: 36px; height: 36px">
                <img
                width="36px"
                height="36px"
                src="https://4dscene.4dage.com/new4dkk/deng/static/img/icon_download@2x.png"
              ></img>
              </div> -->
              <div class="pl-10px">长按保存图片</div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import QRCode from 'qrcodejs2'
import { Toast } from 'vant'
import Bus from '@/utils/bus.js'
// import QiyanQrcode from '@/components/qiyan-qrcode/qiyan-qrcode.vue'
// import uButton from "udiv-ui/components/u-button/u-button.vue";
export default {
  components: {
    // QiyanQrcode
  },
  data() {
    return {
      show: false,
      showShare: false,
      showlist: false,
      qrcode1: null,
      active: {
          class: 'item2',
          name: '中道灯',
          text: '黄色光由佛陀的皮肤放出，黄色的莲花灯代表佛教核心教义中的中道。中道教义强调远离两极对立，如有无、苦乐、生灭，主张修行者应在平衡中找到觉悟的道路。',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_yellow@2x.png',
          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_yellow@2x.png'
        },
      qrcode2: null,
      checkLight: false,
      imgobj: {
        item1: {
          class: 'item1',
          name: '清净灯',
          text: '白色光由佛陀的骨齿放出，白色的莲花灯代表清净与纯洁。清净灯寓意内心的无染与脱离烦恼，法性的纯净无染引导众生走向内在的自由与心灵的澄明，帮助修行者从轮回中得到解脱，达至清净的境界。',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flowerwhite@2x.png',
          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_white@2x.png'
        },
        item2: {
          class: 'item2',
          name: '中道灯',
          text: '黄色光由佛陀的皮肤放出，黄色的莲花灯代表佛教核心教义中的中道。中道教义强调远离两极对立，如有无、苦乐、生灭，主张修行者应在平衡中找到觉悟的道路。',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_yellow@2x.png',
          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_yellow@2x.png'
        },
        item3: {
          class: 'item3',
          name: '福德灯',
          text: '赤色光由佛陀的肌肉放出，赤色莲花灯光辉映着成就福德的力量，为修行者带来无穷的加持与福报。',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_orange@2x.png',
          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_orange@2x.png'
        },
        item4: {
          class: 'item4',
          name: '智慧灯',
          text: '橙色光由佛陀的掌、踵和唇放出，象征佛法与智慧，橙色莲花灯光寓意智慧圆满与庄严，照亮觉悟之路。',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_pink@2x.png',
          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_pink@2x.png'
        },
        item5: {
          class: 'item5',
          name: '真如灯',
          text: '第六色为前五色合成，代表佛教不可见的真理与真如，真如灯非肉眼所能见，代表佛教的真理、真如。',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_colorful@2x.png',
          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_colorful@2x.png'
        },
        item6: {
          class: 'item6',
          name: '慈悲灯',
          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_purpose@2x.png',
          text: '蓝色光由佛陀的毛发放出，象征慈悲与和平，莲花灯柔和的蓝光引导众生向慈爱之道前行，照亮内心的宁静与祥和。',
          // img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower@2x.png',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_purpose@2x.png'
        },
        none: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower@2x.png'
      },
      codeList:[],
      list: [
        {
          class: 'item1',
          name: '清净灯',
          text: '白色光由佛陀的骨齿放出，白色的莲花灯代表清净与纯洁。清净灯寓意内心的无染与脱离烦恼，法性的纯净无染引导众生走向内在的自由与心灵的澄明，帮助修行者从轮回中得到解脱，达至清净的境界。',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flowerwhite@2x.png',
          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_white@2x.png'
        },
        {
          class: 'item2',
          name: '中道灯',
          text: '黄色光由佛陀的皮肤放出，黄色的莲花灯代表佛教核心教义中的中道。中道教义强调远离两极对立，如有无、苦乐、生灭，主张修行者应在平衡中找到觉悟的道路。',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_yellow@2x.png',
          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_yellow@2x.png'
        },
        {
          class: 'item3',
          name: '福德灯',
          text: '赤色光由佛陀的肌肉放出，赤色莲花灯光辉映着成就福德的力量，为修行者带来无穷的加持与福报。',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_orange@2x.png',
          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_orange@2x.png'
        },
        {
          class: 'item4',
          name: '智慧灯',
          text: '橙色光由佛陀的掌、踵和唇放出，象征佛法与智慧，橙色莲花灯光寓意智慧圆满与庄严，照亮觉悟之路。',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_pink@2x.png',
          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_pink@2x.png'
        },
        {
          class: 'item5',
          name: '真如灯',
          text: '第六色为前五色合成，代表佛教不可见的真理与真如，真如灯非肉眼所能见，代表佛教的真理、真如。',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_colorful@2x.png',
          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_colorful@2x@2x.png'
        },
        {
          class: 'item6',
          name: '慈悲灯',
          bgimg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_flower_purpose@2x.png',
          text: '蓝色光由佛陀的毛发放出，象征慈悲与和平，莲花灯柔和的蓝光引导众生向慈爱之道前行，照亮内心的宁静与祥和。',
          // img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower@2x.png',
          img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_purpose@2x.png',
        },
      ]
    }
  },
  watch: {
    img(val) {
      console.log(val, '图片生成出来了')
    }
  },
  computed: {
    ...mapState('home', ['img'])
  },
  mounted() {
    Bus.on('handleItem', value => {
      console.log(value, 'BushandleItem')
      this.getcodeList()
    })
    this.getcodeList()
    let obj = {
      '清净灯': 'item1',
      '中道灯': 'item2',
      '福德灯': 'item3',
      '智慧灯': 'item4',
      '真如灯': 'item5',
      '慈悲灯': 'item6',
    }
    this.getRequest('/api/wx/checkLight', {}).then(res => {
      console.log(res, '是否点过灯')
      this.checkLight = res.msg == '2'?'':res.msg
      this.active = this.imgobj[obj[this.checkLight]]||{}
    })
    // if (this.list.length != 6) {
    //   this.list.push({
    //     class: 'item' + (this.list.length + 1),
    //     name: 'none',
    //     img: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower@2x.png'
    //   })
    // }
    // console.log(this.imgobj
  },
  methods: {
    getcodeList(){
      this.getRequest('/api/wx/getCode').then(res => {
      this.codeList = res.data || []
      console.log(this.codeList, 'BusnewList')
    })
    },
    handleItem(item) {
      if (item.img == 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower@2x.png') {
        //none
        // if (this.checkLight) {
        //   Toast('今天已点灯，请明天再来')
        // } else {
          this.getRequest('/api/wx/light/open', {code: item.name}).then(res => {
            Toast('点灯成功')
          })
        // }
        return
      }
      if(this.codeList.length <6){
        Toast('请至少完成6处打卡')
        return
      }else{
        this.getRequest('/api/wx/light/open', {code: item.name}).then(res => {
            Toast('点灯成功')
          })
      }
      this.checkLight  = item.name
      this.active = this.imgobj[item.class]
      // this.showlist = true
    },
    close() {
      this.showlist = false
      // console.log('close');
    },
    open() {},
    handleNext(type) {
      console.log(type)
    },
    handleShare() {
      this.showShare = true
      this.showlist = false
      // setTimeout(() => {
      //   this.creatQrCode();
      // }, 100);
      this.$store.commit('home/setImg', null)
      this.$nextTick(() => {
        console.log('DOM updated!')
        // 在 DOM 更新后执行的回调函数
        setTimeout(() => {
          this.$store.dispatch('home/saveImage', this.$refs.downDiv)
        }, 1000)
        // this.$store.dispatch('home/saveImage', this.$refs.downDiv)
      })
    },
    creatQrCode() {
      if (this.qrcode1) {
        this.qrcode1 && this.qrcode1.clear() // 清除二维码
        this.qrcode2 && this.qrcode2.clear() // 清除二维码
        this.qrcode1.makeCode('xxxxx')
        this.qrcode2.makeCode('ssssss')
      } else {
        this.qrcode1 = new QRCode(this.$refs.qrCodeUrl1, {
          text: 'xxxx', // 需要转换为二维码的内容
          width: 46,
          height: 46,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
        this.qrcode2 = new QRCode(this.$refs.qrCodeUrl2, {
          text: 'xxxx', // 需要转换为二维码的内容
          width: 46,
          height: 46,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.clockedPage {
  width: 100%;
  height: 100%;
  // min-height: calc(100vh - 138px);
  background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/bg02@2x.png)
      100% 100% no-repeat;
    background-size: 100% 100%;
  .tips {
    font-weight: 400;
    font-size: 15px;
    color: #b8b8b8;
    line-height: 23px;
    text-align: center;
  }
  .xzlp {
    width: 367px;
    height: 378px;
    background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/img_loading_normal@2x.png)
      100% 100% no-repeat;
    background-size: 100% 100%;
    position: relative;
    .list {
      width: 100%;
      height: 100%;
      .item {
        position: absolute;
        width: 126px;
        height: 115px;
        .itemImg {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .item1 {
        left: 12px;
        top: 65px;
      }
      .item2 {
        left: calc(50% - 63px);
        top: 10px;
      }
      .item3 {
        right: 12px;
        top: 65px;
      }
      .item4 {
        right: 12px;
        bottom: 65px;
      }
      .item5 {
        left: calc(50% - 63px);
        bottom: 10px;
      }
      .item6 {
        left: 12px;
        bottom: 65px;
      }
    }
  }
  .codebutList {
    text-align: center;
    position: relative;
    top: 31px;
    width: 100%;
    // top: 76px;
    .downText {
      .img {
        margin-right: 10px;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 19px;
        text-align: center;
      }
      .tips {
        padding-top: 10px;
        font-weight: 400;
        font-size: 16px;
        color: #a49d94;
        line-height: 19px;
        text-align: center;
      }
    }
    .downButtom {
      .downButtomItem {
        width: 140px;
        height: 42px;
        background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/btn01@2x.png) 100% 100%
          no-repeat;
        background-size: cover;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 19px;
        font-style: normal;
        margin: 0 5px;
        line-height: 42px;
        text-align: center;
      }
    }
  }
  .sharePop {
    padding: 0 20px 60px 20px;
    width: calc(100vw - 60px);
    position: relative;
    .huaimg {
      width: 205px;
      height: 190px;
      object-fit: cover;
      transform: rotate(-33deg);
      position: absolute;
      left: -55px;
      top: 20px;
    }
  }
  .codeData {
    // background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/pop2@2x.png) no-repeat cover;
    background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/pop@2x.jpg) 100% 100%
      no-repeat;
    background-size: 100% 100%;
    width: 100%;
    // width: calc(100vw - 108px);
    height: 522px;
    position: relative;
    .close {
      position: absolute;
      right: -20px;
      top: -0px;
      // width: 42px;
      height: 42px;
      z-index: 10;
    }
    .text {
      font-weight: 400;
      font-size: 24px;
      color: #d86332;
      line-height: 29px;
      position: relative;
      padding-bottom: 72px;
      padding-right: 37px;
      .textContent {
        padding: 73px 0px 10px 0;
        font-size: 14px;
        line-height: 17px;
        word-wrap: break-word; /*英文的时候需要加上这句，自动换行*/
        word-break: break-all;
        text-align: right;
        display: flex;
        direction: rtl;
        div {
          width: 25px;
          text-align: center;
        }
        .textlist {
          padding-top: 40px;
          height: 306px;
          writing-mode: vertical-rl;
          text-align: left;
          direction: initial;
          // overflow: hidden; //超出的文本隐藏
          // text-overflow: ellipsis; //溢出用省略号显示
          // white-space:nowrap; //溢出不换行
        }
        .title {
          font-weight: 400;
          font-size: 16px;
          color: #b1967b;
          line-height: 19px;
        }
      }
      .codeImg {
        text-align: right;
        width: 100%;
        height: 72px;
        // float: right;
        .qrcode {
          padding: 5px;
          margin: 0 5px;
          background: #fff;
        }
      }
    }
  }
  .dengList {
    padding: 30px 30px 0 30px;
    .showinfo {
      text-align: center;
      position: relative;
      .dengimg {
        width: 322px;
        height: auto;
        position: relative;

        .hua {
          width: 100%;
          height: auto;
          object-fit: cover;
        }
        .page {
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;
          width: 100vw;
          top: 220px;
          right: 29px;
          &Icon {
            width: 48px;
            height: 48px;
            color: #e3c991;
          }
        }
      }
      .title {
        font-weight: 400;
        font-size: 30px;
        color: #fff9b1;
        line-height: 35px;
        width: 100%;
        position: absolute;
        bottom: 20px;
      }
      .text {
        text-align: left;
        font-weight: 400;
        font-size: 14px;
        color: #e3c991;
        line-height: 16px;
      }
      .downButtomItem {
        width: 140px;
        height: 42px;
        background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/btn01@2x.png) 100% 100%
          no-repeat;
        background-size: cover;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 19px;
        font-style: normal;
        margin: 40px auto 11px auto;
        line-height: 42px;
        text-align: center;
      }
    }
  }
}
</style>
