<template>
  <div class="prayers-list" @click="handleclick">
    <!-- <u-navbar title="剑未配妥，出门已是江湖" @click-left="onClickBack" @click-right="onClickRight"></u-navbar> -->
    <div class="allList">
      <div class="list">
        <div class="content-scroll swiper">
          <div
            v-for="(item, index) in list"
            :key="index"
            class="scroll-item list"
            :class="
              current == index
                ? `active index${index} ${curIndex == index ? 'fang' : ''}`
                : `index${index}`
            "
            @click="changeTitle(index)"
          >
            <div class="activeItem" v-if="curIndex == index">
              <div class="activetext" v-for="(items, a) in item.list" :key="a">
                {{ items }}
              </div>
            </div>
            <div class="item-text item" v-else>{{ item.name }}</div>
            <div class="source">
              <text style="color: #9c9590">来源</text>
              <text>小阿飞</text>
            </div>
          </div>
        </div>
      </div>
      <div class="tips">
        请选择祈愿类型
        <div v-if="curIndex" class="downButtom flex justify-center">
          <div class="downButtomItem">返回我的祈愿</div>
        </div>
        <div v-else class="downButtom flex justify-center">
          <div class="downButtomItem">祈愿地图</div>
          <div class="downButtomItem" @click="handleShare">分享</div>
        </div>
      </div>
      <div class="img_signal" v-if="!show"></div>

      <van-popup
        v-model="shareShow"
        position="center"
        style="background: transparent"
        @close="close"
      >
      <div class="popItme">
        <div class="mySharepopup planel" ref="addImage" id="capture">
          <div class="shareItem answer_draw_canvas">
            <div class="activeItem answer_draw_canvas">
              <div
                class="activetext answer_draw_canvas"
                v-for="(items, a) in shareData.list"
                :key="a"
              >
                {{ items }}
              </div>
            </div>
          </div>
        </div>
        <div class="popRight">
          <div class="shareRight answer_draw_canvas">
              <div class="close" @click="close">
                <img
                  width="42px"
                  height="42px"
                  src="/static/img/icon_cancel@2x.png"
                ></img>
              </div>
              <div class="downBut" @click="handleDown">
                <div class="img">
                  <div>
                    <img
                      width="36px"
                      height="36px"
                      src="https://4dscene.4dage.com/new4dkk/deng/static/img/icon_download@2x.png"
                    ></img>
                  </div>
                </div>
              </div>
              <div class="downText" @click="handleDown">下载图片</div>
            </div>
            <div class="qrcodeDiv">
              <div class="codeImg1 qrcode" ref="qrCodeUrl1"></div>
              <div class="codeImg2 qrcode" ref="qrCodeUrl2"></div>
            </div>
        </div>
      </div>
      </van-popup>
      <!-- <canvas
      canvas-id="answerCanvas"
      class="answerCanvas"
      :style="'width:' + canvasWidth + 'px;height:' + canvasHeight + 'px;'"
    ></canvas> -->
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import QRCode from 'qrcodejs2'
export default {
  components: {
    // uNavbar
  },
  data() {
    return {
      active: '婚姻祈愿1',
      title1: '1.现在时间戳：' + Date.now(),
      show: false,
      shareShow: false,
      scrollLeft: 0, // 横向滚动条位置
      current: 2,
      curIndex: null,
      qrcode1: null,
      qrcode2: null,
      province: '请选择',
      provinceShow: false,
      shareData: {},
      list: [
        {
          name: '学业祈愿1',
          list: ['知识的殿堂中闪耀属于你的光芒。', '愿你学业精进，成绩辉煌，']
        },
        {
          name: '学业祈愿2',
          list: ['知识的殿堂中闪耀属于你的光芒。', '愿你学业精进，成绩辉煌，']
        },
        {
          name: '学业祈愿3',
          list: ['知识的殿堂中闪耀属于你的光芒。', '愿你学业精进，成绩辉煌，']
        },
        {
          name: '学业祈愿4',
          list: ['知识的殿堂中闪耀属于你的光芒。', '愿你学业精进，成绩辉煌，']
        },
        {
          name: '学业祈愿5',
          list: ['知识的殿堂中闪耀属于你的光芒。', '愿你学业精进，成绩辉煌，']
        },
        {
          name: '学业祈愿6',
          list: ['知识的殿堂中闪耀属于你的光芒。', '愿你学业精进，成绩辉煌，']
        }
      ],
      canvasWidth: 180, // 默认canvas宽高
      canvasHeight: 700,
      screenWidth: null, // 设备宽度
      screenHeight: null, // 设备高度
      // name: '',
      // pic: '',
      // chapter1: '',
      // chapter2: '',
      widget: null,
      msg: '加载中，请稍等...' // 提示语
    }
  },
  mounted() {
    // 获取标题区域宽度，和每个子元素节点的宽度
    // this.getScrollW();
  },
  methods: {
    renderInit() {
      // 获取设备信息
      wx.getSystemInfo({
        success: res => {
          console.log('屏幕', res)
          this.screenWidth = 180
          this.canvasWidth = this.screenWidth
          this.canvasHeight = 600
          console.log('海报高度：', this.canvasHeight)

          this.show = true
          // 数字容器宽度 动态设置
          setTimeout(() => {
            wx.showLoading({ title: '海报加载中...' })
            this.widget = this.selectComponent('.widget')
            this.renderToCanvas()
          }, 1000)
        }
      })
    },
    // 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
    getScrollW() {
      const query = uni.createSelectorQuery().in(this)
      query
        .select('.content-scroll')
        .boundingClientRect(data => {
          // 拿到 div 组件宽度
          this.contentScrollW = data.width
        })
        .exec()

      query
        .selectAll('.scroll-item')
        .boundingClientRect(data => {
          let dataLen = data.length
          for (let i = 0; i < dataLen; i++) {
            //  div 子元素组件距离左边栏的距离
            this.list[i].left = data[i].left
            //  div 子元素组件宽度
            this.list[i].width = data[i].width
          }
        })
        .exec()
    },

    // 选择标题
    changeTitle(index) {
      if (index == this.current && this.curIndex != index) {
        this.curIndex = index
      } else {
        this.curIndex = null
      }
      this.current = index
      console.log('changeTitle', index)
      this.scrollLeft = (index - 1) * 118
    },
    handleHome() {
      // console.log("开启云上观灯", uni);
      // uni.$u.route("/pages/home/home");
    },
    handleclick() {
      this.show = true
    },
    handleShare() {
      console.log('handleShare')
      this.shareShow = true
      this.shareData = this.list[this.current]
      setTimeout(() => {
        this.creatQrCode();
      }, 500)
    },
    close() {
      this.shareShow = false
      console.log('handleShare', this.shareShow)
    },
    changeswiper(e) {
      // 得加上这个方法！！！
      this.currentswiper = e.detail.current
    },
    confirm(val) {
      console.log('confirm', val)
      this.province = val.value[0]
      this.provinceShow = false
    },
    handleDown() {
      // this.renderInit();
      // this.extraImage()
      // this.draw();
    },
    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: 72,
          height: 72,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
        this.qrcode2 = new QRCode(this.$refs.qrCodeUrl2, {
          text: 'xxxx', // 需要转换为二维码的内容
          width: 72,
          height: 72,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.prayers-list {
  background: rgba(32, 21, 10, 0.7);
  border-radius: 0px 0px 0px 0px;
  height: 100vh;
  padding-top: 100px;
  .img_signal {
    width: 76px;
    height: 106px;
    background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/img_signal@2x.png) 100% 100%
      no-repeat;
    background-size: cover;
    position: absolute;
    right: 50px;
    bottom: 30px;
    animation: handleAni 1s linear infinite;
    transition: all 1s;
  }
  .popItme {
    width: calc(100vw - 10px);
    position: relative;
    .popRight {
      position: absolute;
      right: 65px;
      top: 40%;
      .shareRight{
        position: relative;
      }
      .qrcodeDiv {
        position: relative;
        bottom: -350px;
        left: -2px;
        .qrcode {
          padding: 5px;
          margin: 0 5px;
          background: #fff;
        }
      }
      .close {
        position: absolute;
        right: -24px;
        top: -20px;
        width: 42px;
        height: 42px;
      }
      .downBut {
        position: absolute;
        right: -20px;
        bottom: -70px;
      }
      .downText {
        position: absolute;
        right: -34px;
        bottom: -90px;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 19px;
        width: 64px;
        writing-mode: rl;
      }
      .codeImg1 {
        // position: absolute;
        // right: -90px;
        bottom: 50px;
        padding: 3px;
        background: #fff;
      }
      .codeImg2 {
        // position: absolute;
        // right: -90px;
        bottom: 150px;
        padding: 3px;
        background: #fff;
      }
      .qrcode {
        position: absolute;
        right: -50px;
        .codeImg {
          width: 100%;
        }
      }
    }
  }
  .mySharepopup {
    // width: 330px;
    // height: 537px;
    padding: 19px 17px 0px 17px;

    .shareItem {
      width: 150px;
      height: calc(100% - 512px);
      padding: 160px 0px;
      display: inline-block;
      background-size: 100% 100%;
      font-size: 12px;
      color: #303030;
      line-height: 18px;
      display: flex;
      writing-mode: vertical-lr;
      text-align: left;
      justify-content: center;
      flex-direction: column;
      background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/img_label@2x.png) 100% 100%
        no-repeat;
      background-size: contain;
      position: relative;
      // top: 44px;
      font-weight: 400;
      font-size: 16px;
      color: #303030;
      line-height: 24px;
      margin: 0 auto;
      .activetext {
        margin: 0 9px;
      }
    }
  }
  .tips {
    width: 100%;
    text-align: center;
    margin-top: 27px;
    color: #fff;
    font-size: 14px;
    line-height: 21px;

    .downButtom {
      padding-top: 20px;
      .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;
      }
    }
  }
  .list {
    height: 555px;
    width: 100%;
    // margin-top: 50rpx;
    box-sizing: border-box;
    .content-scroll {
      width: 100%;
      text-align: center;
      white-space: nowrap;
      overflow-x: scroll;
      overflow-y: hidden;
      // flex-direction: column;
      .scroll-item {
        white-space: nowrap;
        height: 500px;
        width: 118px;
        padding: 0 20px;
        display: inline-block;
        text-align: center;
        position: relative;
        transition: all 0.3s;
        .source {
          display: none;
          font-weight: 400;
          font-size: 12px;
          color: #fff9b1;
          line-height: 18px;
          writing-mode: vertical-lr;
          position: absolute;
          bottom: 23%;
          right: -10px;
        }
        .item-text {
          // transform: rotateY(180deg);
          font-size: 30px;
          line-height: 100rpx;
          position: absolute;
          top: calc(50% - 133px);
          left: calc(50% - 34px);
          font-weight: 400;
          font-size: 15px;
          color: #8c4042;
          &.active {
            color: #1468ff;
          }
        }
        .activeItem {
        }
      }
      .fang {
        transform: rotateY(180deg);
        transition: all 0.5s;
        .item-text {
          transform: rotateY(0deg);
        }
        .source {
          display: block;
          transform: rotateY(180deg);
        }
      }
      .active {
        .item-text {
          top: calc(50% - 226px);
          left: calc(50% - 50px);
        }
        .item {
          width: 50px;
          height: 453px;
          background-size: 100% 100%;
          font-size: 27px;
          color: #8c4042;
          line-height: 41px;
        }
        .activeItem {
          transform: rotateY(180deg);
          width: 100px;
          height: 263px;
          padding: 95px 0px;
          display: inline-block;
          background-size: 100% 100%;
          font-size: 12px;
          color: #303030;
          line-height: 18px;
          display: flex;
          writing-mode: vertical-lr;
          text-align: left;
          justify-content: center;
          flex-direction: column;
          background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/img_label@2x.png) 100%
            100% no-repeat;
          background-size: 100% 100%;
          position: relative;
          top: 44px;
        }
      }
    }
    .swiper {
      // padding: 0 10px;
      // .listitem {
      //   text-align: center;
      //   padding: 0 20px;
      .item {
        margin: 20px auto;
        width: 18px;
        height: 267px;
        background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/label@2x.png) 100% 100%
          no-repeat;
        background-size: cover;
        writing-mode: tb-rl;
        text-align: center;
        padding: 0 25px;
        position: relative;
        display: flex;
        writing-mode: vertical-lr;
        text-align: center;
        justify-content: center;
        flex-direction: column;
      }
      // .active {
      //   &:after {
      //     content: "";
      //     box-shadow: 0px 2px 18px 11px #fff86c,
      //       inset 0px 1px 1px 0px rgba(177, 156, 125, 0.7);
      //     position: absolute;
      //     height: 71%;
      //     width: 80%;
      //     top: 32px;
      //     left: 8px;
      //     border-radius: 25px;
      //     z-index: -1;
      //   }
      // }
      // }
    }
  }
}

@keyframes handleAni {
  from {
    right: 50px;
  }
  to {
    right: 30px;
  }
}
</style>
