<template>
  <div class="page p-result">
    <div class="main">
      <!-- 详情卡片 -->
      <div class="sec-1">
        <div class="wrap">
          <div class="title">
            <span class="color-white">测试</span>
            <span>结果</span>
          </div>
          <div class="card">
            <div class="card-hd">{{title}}</div>
            <div class="card-bd">
              <div class="card-cont">
                <div :key="index" v-for="(item, index) in result">{{item}}</div>
              </div>
              <button @click="saveResult" class="card-btn">
                <image
                  class="icon icon-download"
                  lazy-load="false"
                  mode="scaleToFill"
                  src="/static/images/icon-download.png"
                  style="width:16px;height:16px;"
                />保存结果
              </button>
              <button class="card-btn" data-id="shareBtn" open-type="share">
                <image
                  @click="share"
                  class="icon icon-share"
                  lazy-load="false"
                  mode="scaleToFill"
                  src="/static/images/icon-share.png"
                  style="width:16px;height:16px;"
                />分享结果
              </button>
              <button @click="replay" class="card-btn">
                <image
                  class="icon icon-reload"
                  lazy-load="false"
                  mode="scaleToFill"
                  src="/static/images/icon-reload.png"
                  style="width:16px;height:16px;"
                />再来一次
              </button>
            </div>
          </div>
        </div>
      </div>
      <!-- 列表、热门 -->
      <div class="sec-2">
        <div class="list">
          <div class="list-hd">
            <div class="l">大家都在测</div>
            <div @click="goList" class="r">更多>></div>
          </div>
          <div class="list-bd">
            <list-item :data="item" :key="index" v-for="(item, index) in hotList"></list-item>
          </div>
        </div>
      </div>
    </div>
    <!-- canvas -->
    <painter
      :palette="template"
      @imgOK="onImgOk"
      customStyle="position: absolute; left: -9999rpx;"
      v-if="paint"
    />
  </div>
</template>

<script>
import card from '@/components/card'
import search from '@/components/search'
import listItem from '@/components/list-item'
import tag from '@/components/tag'
import requestUtil from '@/utils/request'
import sdkManage from '@/utils/jcfw/SDKManage'

export default {
  data() {
    return {
      hotList: [],
      result: '',
      title: '',
      template: {},
      imgPath: '',
      paint: false,
      _id: ''
    }
  },

  components: {
    search,
    listItem,
    tag
  },
  async onLoad(options) {
    this.users = options.users
    this._id = options._id
    sdkManage.init(options)
  },
  async mounted() {
    await this.getResult()
    await this.getHot()
    const palette = {
      background: '#eee',
      width: '750rpx',
      height: '1334rpx',
      views: [
        {
          type: 'image',
          url: '/static/images/bg-result.png',
          css: {
            top: '0rpx',
            left: '0rpx',
            width: '750rpx',
            height: '1334rpx'
          }
        },
        {
          type: 'text',
          text: this.title,
          css: {
            top: '100rpx',
            left: '0rpx',
            width: '750rpx',
            color: '#000000',
            textAlign: 'center',
            fontSize: '52rpx',
            fontWeight: 'bold',
            lineHeight: '64rpx'
          }
        },
        {
          type: 'text',
          text: this.result.join('\n'),
          css: {
            top: '220rpx',
            left: '100rpx',
            width: '550rpx',
            color: '#000000',
            lineHeight: '72rpx',
            fontSize: '48rpx'
          }
        },
        {
          type: 'image',
          url: '/static/images/qr-code.jpg',
          css: {
            bottom: '128rpx',
            right: '60rpx',
            width: '120rpx',
            height: '120rpx'
          }
        },
        {
          type: 'text',
          text: '小程序',
          css: {
            bottom: '64rpx',
            right: '64rpx',
            height: '120rpx',
            color: '#999999',
            lineHeight: '48rpx',
            fontSize: '28rpx'
          }
        },
        {
          type: 'text',
          text: '奇妙测试机',
          css: {
            bottom: '32rpx',
            right: '64rpx',
            height: '120rpx',
            color: '#999999',
            lineHeight: '48rpx',
            fontSize: '28rpx'
          }
        }
      ]
    }

    this.template = palette
    this.paint = true
  },
  onShareAppMessage(res) {
    // if (res.from === 'button') {
    //   // 来自页面内转发按钮
    // }
    return {
      title: this.title,
      path: `/pages/details/main?_id=${this._id}`
    }
  },
  methods: {
    async getHot() {
      try {
        const data = await requestUtil.getData('/list', { type: 'hot' })
        this.hotList = data.result
      } catch (err) {
        console.log(err)
      }
    },
    async getResult() {
      try {
        const data = await requestUtil.getData('/result', {
          _id: this._id,
          users: this.users
        })
        this.result = data.result
        this.title = data.title
      } catch (err) {
        console.log(err)
      }
    },
    replay() {
      wx.navigateBack({
        delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
      })
    },
    share() {
      setTimeout(() => {
        sdkManage.uploadLog('click_share', { id: this._id, title: this.title })
      }, 0)
    },
    paint() {},
    onImgOk(e) {
      this.imgPath = e.mp.detail.path
      console.log(this.imgPath)
    },
    saveResult() {
      setTimeout(() => {
        sdkManage.uploadLog('click_save', { id: this._id, title: this.title })
      }, 0)

      wx.showToast({
        title: '正在保存', //提示的内容,
        icon: 'loading', //图标,
        duration: 2000, //延迟时间,
        mask: true //显示透明蒙层，防止触摸穿透,
      })
      const self = this
      setTimeout(() => {
        wx.saveImageToPhotosAlbum({
          filePath: self.imgPath,
          success: function() {
            wx.showToast({
              title: '保存成功', //提示的内容,
              icon: 'success', //图标,
              duration: 2000, //延迟时间,
              mask: true //显示透明蒙层，防止触摸穿透,
            })
          },
          fail: function(err) {
            wx.showToast({
              title: '保存失败！请重试！', //提示的内容,
              icon: 'none', //图标,
              duration: 2000, //延迟时间,
              mask: true //显示透明蒙层，防止触摸穿透,
            })
            console.log(err)
          }
        })
      }, 1000)
    },
    goList() {
      wx.switchTab({
        url: `/pages/list/main`
      })
    }
  }
}
</script>

<style lang="less" scoped>
.p-result {
  .main {
    padding: 40rpx 20rpx 60rpx;
  }
  .sec-1 {
    .wrap {
      position: relative;
      margin: 0 auto;
      padding: 60rpx 32rpx;
      background-color: #fffdf5;
      border: 4px solid #ffdc34;
    }
    .title {
      position: absolute;
      transform: translateX(0%);
      top: -2rpx;
      left: -2rpx;
      height: 64rpx;
      padding: 0 32rpx;
      font-size: 32rpx;
      line-height: 64rpx;
      font-weight: 700;
      background-color: #ffdc34;
    }

    .card {
      .card-hd {
        margin-bottom: 0rpx;
        text-align: center;
        font-size: 48rpx;
        font-weight: 700;
      }
      .card-bd {
        line-height: 1.5;
        font-size: 32rpx;

        .card-cont {
          margin: 12rpx 0;
          text-indent: 1em;
          font-size: 42rpx;
        }

        .card-btn {
          margin: 32rpx auto;
          border: none;
          background-color: #ffdc34;
          color: #fff;
          border-radius: 0;
          width: 100%;
          letter-spacing: 4rpx;
          .icon {
            margin-right: 16rpx;
            vertical-align: middle;
          }
        }
      }
    }
  }

  .sec-2 {
    margin-top: 30rpx;
    .list {
      background-color: #fff;
      border: 4rpx solid #ffdc34;
      .list-hd {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80rpx;
        padding: 0 32rpx;
        line-height: 80rpx;
        border-bottom: 1px solid #f0f0f0;
        .l {
          font-weight: 700;
          color: #ffdc34;
        }
        .r {
          font-size: 28rpx;
          color: #ffdc34;
        }
      }
    }
  }
}
</style>
