<template>
  <div class="mainPage" id="canvasPage">
    <div class="imgArr" :hidden="true">
      <img
        v-for="item in imgTotal"
        :key="item"
        :src="'http://wx.jinchengjiaye.com/h5-2019/static/images/icon-' + item + '.png'"
        @load="imgLoad"
        alt
      >
    </div>
    <div class="subPage" v-if="showPage">
      <img
        src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-12.png"
        style="z-index: 3;"
        class="centerLabel cover"
        alt
      >
      <img
        src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-10.png"
        class="icon10"
        style="position: absolute;left:9vw;top:3.7vh;z-index:100;width: 31.2vw;"
        v-if="imgSrc === null"
        :class="{'active': currentPage !== 0}"
        alt
      >
      <div class="page1" :class="{'show': currentPage === 1 && imgSrc === null}">
        <img
          src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-3.png"
          class="icon3"
          style="position: absolute;left:0;top:0;z-index:2;width: 87.5vw;"
          :class="{'active': currentPage === 1}"
          alt
        >
        <img
          src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-4.png"
          class="icon4"
          style="position: absolute;right:0;bottom:0;z-index:2;width: 77vw;"
          :class="{'active': currentPage === 1}"
          alt
        >
        <div class="centerLabel" style="z-index: 3">
          <img
            src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-11.png"
            class="icon11"
            style="width: 36.5vw;"
            :class="{'active': currentPage === 1}"
            alt
          >
          <div
            class="icon2"
            style="overflow: visible;position: relative;-webkit-transform-style: preserve-3d !important;transform-style: preserve-3d !important;"
          >
            <img
              src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-2.png"
              class="icon2"
              style="width:68vw;transform: translateY(.2rem);-webkit-transform: translateY(.2rem);"
              :class="{'active': currentPage === 1}"
              alt
            >
            <div class="circle circle1 centerLabel" :class="{'active': currentPage === 1}"></div>
            <div class="circle circle2 centerLabel" :class="{'active': currentPage === 1}"></div>
          </div>
          <img
            src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-13.png"
            class="icon13"
            style="width:56vw;display:inline-block;margin-top: .4rem;"
            :class="{'active': currentPage === 1}"
            alt
          >
          <img
            src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-1.png"
            class="icon1"
            style="width: 35.7vw;margin-top: .2rem;"
            :class="{'active': currentPage === 1}"
            @click="currentPage = 2"
            alt
          >
        </div>
      </div>
      <div class="page2" :class="{'show': currentPage === 2 && imgSrc === null}">
        <img
          src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-7.png"
          class="icon7"
          style="position: absolute;left:0;top:0;z-index:2;width: 100vw;"
          :class="{'active': currentPage === 2}"
          alt
        >
        <img
          src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-6.png"
          class="icon6"
          style="position: absolute;right:0;bottom:0;z-index:2;width: 100vw;"
          :class="{'active': currentPage === 2}"
          alt
        >
        <img
          src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-5.png"
          class="icon5"
          style="position: absolute;right:9vw;bottom:3.5vh;z-index:11;width: 43.7vw;"
          :class="{'active': currentPage === 2}"
          alt
        >
        <div class="nextStep" v-if="userSelectFlag.length" @click="nextStep">
          <span>下一步</span>
        </div>
        <div class="centerLabel">
          <img
            src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-13.png"
            class="icon13"
            style="width:66vw;display:inline-block;margin-top: .4rem;"
            :class="{'active': currentPage === 2}"
            alt
          >
          <div class="content">
            <span
              v-for="(item, index) in selectFlag"
              :key="index"
              class="flagItem"
              :class="{'active': currentPage === 2, [`flagItem${index+1}`]: true, 'selected': item.select}"
              @click="selectFlagItem(item, index)"
            >{{item.value}}</span>
          </div>
        </div>
      </div>
      <div class="page3" :class="{'show': currentPage === 3 && imgSrc === null}">
        <img
          src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-8.png"
          class="icon8"
          style="position: absolute;left:0;bottom:0;z-index:2;width: 100vw;"
          alt
        >
        <img
          src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-9.png"
          class="icon9"
          style="position: absolute;left:0;bottom:0;z-index:3;width: 100vw;"
          alt
        >
        <div class="userIcon" style="z-index: 20;">
          <a>
            <img :src="userIcon" class="centerLabel cover" alt>
          </a>
        </div>
        <div class="centerLabel" style="z-index: 20">
          <img
            src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-15.png"
            width="100%"
            alt
          >
          <span></span>
          <img
            src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-16.png"
            v-if="showEndTextIndex === 0"
            width="100%"
            alt
          >
          <img
            src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-17.png"
            v-if="showEndTextIndex === 1"
            width="100%"
            alt
          >
          <img
            src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-18.png"
            v-if="showEndTextIndex === 2"
            width="100%"
            alt
          >
        </div>
        <div class="bottomText">
          <div class="qrCode">
            <a>
              <img src="http://wx.jinchengjiaye.com/h5-2019/static/images/icon-19.png" class="centerLabel cover" alt>
            </a>
          </div>
          <span>长按二维码</span>
          <span>祝福你的2019</span>
        </div>
      </div>
      <div class="page4" :class="{'show': currentPage === 4 && imgSrc !== null}">
        <img :src="imgSrc" width="100%" class="cover" alt>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import musicPlay from '../../util/music'
export default {
  name: '',
  data () {
    return {
      showPage: false,
      imgNum: 0,
      imgTotal: 19,
      currentPage: 0,
      userIcon: '',
      qrCode: '',
      flagList: [
        '变更美变更帅',
        '年终奖拿到手软',
        '每天12点前睡觉',
        '瘦身10斤',
        '练出马甲线',
        '少脱发',
        '升职',
        '工资翻番',
        '一定要脱单',
        '带父母旅行',
        '养猫和狗子',
        '买房买车',
        '不用辅导孩子作业',
        '打败拖延症',
        '看一场爱豆演唱会',
        '照顾好身体',
        '学会理财',
        '写出N篇10W+文章',
        '自驾游',
        '多吃水果和蔬菜',
        '中大奖',
        '戒烟',
        '看完20本书',
        '实现财务自由',
        '方案一次过',
        '男（女）神回复我信息'
      ],
      selectFlag: [],
      userSelectFlag: [],
      showEndTextIndex: Math.floor(Math.random() * 3),
      imgSrc: null
    }
  },
  computed: {
  },
  components: {
  },
  created () {
    '*********'.split('*').forEach(x => {
      while (true) {
        const inx = Math.floor(Math.random() * this.flagList.length)
        const res = this.flagList[inx]
        if (this.selectFlag.indexOf(res) === -1) {
          this.selectFlag.push({
            select: false,
            value: res
          })
          break
        }
      }
    })
  },
  mounted () {
    this.$nextTick(() => {
      musicPlay('http://wx.jinchengjiaye.com/h5-2019/static/images/Thomas%20Greenberg.mp3')
    })
  },
  methods: {
    nextStep () { // 下一步
      this.currentPage = this.userSelectFlag.length ? 3 : 2
      window.setTimeout(() => {
        this.convert2canvas(document.getElementById('canvasPage')).then((res) => {
          this.imgSrc = res
          this.currentPage = 4
        })
      }, 300)
    },
    selectFlagItem (item, index) {
      document.getElementsByClassName('flagItem')[index].style = 'transition: all .3s ease;-webkit-transition: all .3s ease;'
      item.select = true
      this.userSelectFlag.push(item)
    },
    imgLoad () { // 图片加载进度存储
      this.imgNum += 1
      if (this.imgNum === this.imgTotal) {
        this.showPage = true
        window.setTimeout(() => {
          this.currentPage = 1
        }, 300)
      }
    },
    returnImgNum () { // 图片加载进度读取
      return Math.floor((this.imgNum / this.imgTotal) * 100)
    },
    convert2canvas (dom) {
      return new Promise((resolve, reject) => {
        var shareContent = dom
        var width = shareContent.offsetWidth // 获取dom 宽度
        var height = shareContent.offsetHeight // 获取dom 高度
        var canvas = document.createElement('canvas') // 创建一个canvas节点
        var scale = 1 // 定义任意放大倍数 支持小数
        canvas.width = width * scale // 定义canvas 宽度 * 缩放
        canvas.height = height * scale // 定义canvas高度 *缩放
        canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale
        var opts = {
          scale: scale, // 添加的scale 参数
          canvas: canvas, // 自定义 canvas
          width: width, // dom 原始宽度
          height: height,
          useCORS: true // 【重要】开启跨域配置
        }
        html2canvas(shareContent, opts).then(function (canvas) {
          var context = canvas.getContext('2d') // 【重要】关闭抗锯齿
          context.mozImageSmoothingEnabled = false
          context.webkitImageSmoothingEnabled = false
          context.msImageSmoothingEnabled = false
          context.imageSmoothingEnabled = false
          resolve(canvas.toDataURL('image/jpeg'))
        })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>
