<template>
  <view :style="viewColor">
    <view class='distribution-posters'>
      <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval"
              :duration="duration" @change="bindchange" previous-margin="40px" next-margin="40px">
        <block v-for="(item,index) in spreadData" :key="index" class="img-list">
          <swiper-item class="aaa">
            <div class="box" ref="bill" :class="swiperIndex == index ? 'active' : 'quiet'">
              <view class="user-msg">
                <view class="user-code">
                  <image class="canvas" :style="{height:hg+'px'}" :src="posterImage[index]"
                         v-if="posterImage[index]"></image>
                  <canvas class="canvas" :style="{height:hg+'px'}" :canvas-id="'myCanvas'+ index"
                          v-else></canvas>
                </view>
              </view>
            </div>
            <!-- <image :src="item.wap_poster" class="slide-image" :class="swiperIndex == index ? 'active' : 'quiet'" mode='aspectFill' /> -->
          </swiper-item>
        </block>
      </swiper>

      <view class="Sharebution">
        <!-- #ifdef MP-WEIXIN -->
        <view class='left' style="background:#f4c241;" @click='ShareImage(posterImage[swiperIndex])'>转发给好友
        </view>
        <view class='right b-color' @click='savePosterPath(posterImage[swiperIndex])'>保存海报</view>
        <!-- #endif -->
      </view>

      <!-- #ifndef MP-WEIXIN  -->
      <view class='keep b-color' @click='savePosterPath(posterImage[swiperIndex])'>保存海报</view>
      <!-- #endif -->

      <!-- #ifdef H5  -->
      <div class="preserve acea-row row-center-wrapper">
        <div class="line"></div>
        <div class="tip">长按保存图片</div>
        <div class="line"></div>
      </div>
      <!-- #endif -->
    </view>
    <!-- #ifdef MP -->
    <!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
    <!-- #endif -->
    <home style="left: -10px;"></home>
    <view class="qrimg">
      <zb-code ref="qrcode" :show="codeShow" :cid="cid" :val="val" :size="size" :unit="unit"
               :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize"
               :onval="onval" :loadMake="loadMake" @result="qrR" />
    </view>
  </view>
</template>

<script>
import zbCode from '@/components/zb-code/zb-code.vue'
import {
  getUserInfo,
  spreadBanner,
  spreadMsg,
  imgToBase
} from '@/api/user.js';
import {
  toLogin
} from '@/libs/login.js';
import {
  mapGetters
} from "vuex";
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
import home from '@/components/home';
// #ifdef APP-PLUS
import {
  HTTP_REQUEST_URL
} from '@/config/app.js'
import spread from "../../../libs/spread";
import {
  fail
} from 'assert';
// #endif
export default {
  components: {
    // #ifdef MP
    authorize,
    // #endif
    home,
    zbCode
  },
  data() {
    return {
      imgUrls: [],
      indicatorDots: false,
      posterImageStatus: true,
      circular: false,
      autoplay: false,
      interval: 3000,
      duration: 500,
      swiperIndex: 0,
      spreadList: [],
      userInfo: {},
      poster: '',
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false, //是否隐藏授权
      spreadData: [{}], //新海报数据
      nickName: "",
      siteName: "",
      mpUrl: "",
      canvasImageUrl: '',
      posterImage: [],
      //二维码参数
      codeShow: false,
      cid: '1',
      ifShow: true,
      val: "", // 要生成的二维码值
      size: 200, // 二维码大小
      unit: 'upx', // 单位
      background: '#FFF', // 背景色
      foreground: '#000', // 前景色
      pdground: '#32dbc6', // 角标色
      icon: '', // 二维码图标
      iconsize: 40, // 二维码图标大小
      lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
      onval: true, // val值变化时自动重新生成二维码
      loadMake: true, // 组件加载完成后自动生成二维码
      src: '', // 二维码生成后的图片地址或base64
      codeSrc: "",
      wd: 225,
      hg: 500
    };
  },
  onLoad(options) {

    // 关系处理
    if (options.spread) spread(options.spread, this.isLogin)
  },
  computed: mapGetters({
    'isLogin': 'isLogin',
    'userData': 'userInfo',
    'viewColor': 'viewColor',
    'uid': 'uid'
  }),
  watch: {
    isLogin: {
      handler: function(newV, oldV) {
        if (newV) {
          this.userSpreadBannerList();
        }
      },
      deep: true
    },
    userData: {
      handler: function(newV, oldV) {
        if (newV) {
          this.$set(this, 'userInfo', newV);
        }
      },
      deep: true
    }
  },
  async onReady() {
    if (this.isLogin) {
      // #ifdef H5
      let userData = await getUserInfo()
      this.val = window.location.host + '?spread=' + userData.data.uid
      // #endif
      await this.spreadMsgs()
    } else {
      toLogin();
    }

  },
  onShow() {
    // #ifdef APP-PLUS
    console.log(HTTP_REQUEST_URL, '=============')
    // #endif
    this.$nextTick(() => {
      let selector = uni.createSelectorQuery().select('.aaa');
      selector.fields({
        size: true
      }, data => {
        console.log(data)
        this.wd = data.width
        this.hg = data.height
      }).exec();
    })
  },
  methods: {
    onLoadFun: function(e) {
      this.$set(this, 'userInfo', e);
      this.userSpreadBannerList();
    },
    qrR(res) {
      this.codeSrc = res
    },
    //获取图片
    async spreadMsgs() {
      let that = this
      let rqData = {
        // #ifdef MP
        type: 'routine',
        // #endif
        // #ifndef MP
        type: 'h5',
        // #endif
      }
      let res = await spreadMsg(rqData)
      that.spreadData = res.data.poster
      that.nickName = res.data.nickname
      let codeUrl = "?spread=" + that.userInfo.uid
      // #ifdef MP || APP-PLUS
      let mpUrl = await that.downloadFilestoreImage(res.data.qrcode)
      // #endif
      // #ifdef H5 || APP-PLUS
      let qrCode = await that.imgToBase(res.data.qrcode)
      // #endif
      uni.showLoading({
        title: '海报生成中',
        mask: true
      });
      for (let i = 0; i < res.data.poster.length; i++) {
        let arr2
        // #ifdef MP || APP-PLUS
        arr2 = [mpUrl, await that.downloadFilestoreImage(res.data.poster[i].pic)]
        // #endif
        // #ifdef H5
        let img = await that.imgToBase(res.data.poster[i].pic)
        arr2 = [qrCode, img]
        // #endif
        that.$util.userPosterCanvas(arr2, res.data.nickname, res.data.mark, i, that.wd, that.hg, (
            tempFilePath) => {
          that.$set(that.posterImage, i, tempFilePath);
        });
        uni.hideLoading();
      }
    },
    async imgToBase(url) {
      let res = await imgToBase({
        image: url
      })
      return res.data.image
    },
    // 二维码生成
    codeImg() {
      // http://当前域名+"?spread="+用户uid
    },
    // 授权关闭
    authColse: function(e) {
      this.isShowAuth = e
    },
    bindchange(e) {
      let spreadList = this.spreadList;
      this.swiperIndex = e.detail.current;
      // this.$set(this, 'poster', spreadList[e.detail.current].poster);
    },
    ShareImage(url) {
      let that = this;
      console.log(url);
      wx.showShareImageMenu({
        path: url,
        success: (res) => {
          console.log(res)
        },
        fail: function(res) {
          console.log(res);
          that.$util.Tips({
            title: '分享失败'
          });
        }
      });
    },
    savePosterPath(url) {
      let that = this;
      // #ifdef MP
      uni.getSetting({
        success(res) {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            uni.authorize({
              scope: 'scope.writePhotosAlbum',
              success() {
                uni.saveImageToPhotosAlbum({
                  filePath: url,
                  success: function(res) {
                    that.$util.Tips({
                      title: '保存成功',
                      icon: 'success'
                    });
                  },
                  fail: function(res) {
                    that.$util.Tips({
                      title: '保存失败'
                    });
                  }
                });
              }
            });
          } else {
            uni.saveImageToPhotosAlbum({
              filePath: url,
              success: function(res) {
                that.$util.Tips({
                  title: '保存成功',
                  icon: 'success'
                });
              },
              fail: function(res) {
                that.$util.Tips({
                  title: '保存失败'
                });
              }
            });
          }
        }
      });
      // #endif
      // #ifdef APP-PLUS
      uni.saveImageToPhotosAlbum({
        filePath: url,
        success: function(res) {
          that.$util.Tips({
            title: '保存成功',
            icon: 'success'
          });
        },
        fail: function(res) {
          that.$util.Tips({
            title: '保存失败'
          });
        }
      });
      // #endif
    },
    //图片转符合安全域名路径
    downloadFilestoreImage(url) {
      return new Promise((resolve, reject) => {
        let that = this;
        // console.log('图片转符合安全域名路径 url：',url);
        uni.downloadFile({
          url: url,
          success: function(res) {
            // console.log("图片转符合安全域名路径 success：",res);
            resolve(res.tempFilePath);
          },
          fail: function(err) {
            resolve(url);
            // console.log("图片转符合安全域名路径 fail：",err);
          }
        });
      })
    },
    setShareInfoStatus: function() {
      if (this.$wechat.isWeixin()) {
        if (this.isLogin) {
          getUserInfo().then(res => {
            let configAppMessage = {
              desc: '分销海报',
              title: res.data.nickname + '-分销海报',
              link: '/pages/index/index?spread=' + res.data.uid,
              imgUrl: this.spreadList[0]
            };
            this.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"],
                configAppMessage)
          });
        } else {
          toLogin();
        }

      }
    },
    userSpreadBannerList: function() {
      let that = this;
      uni.showLoading({
        title: '获取中',
        mask: true,
      })
      spreadBanner().then(res => {
        uni.hideLoading();
        that.$set(that, 'spreadList', res.data);
        that.$set(that, 'poster', res.data[0].poster);
        // #ifdef H5
        that.setShareInfoStatus();
        // #endif
      }).catch(err => {
        uni.hideLoading();
      });
    }
  },
  // #ifdef MP
  // 分享给好友
  onShareAppMessage() {
    let pages = getCurrentPages();
    let page = pages[pages.length - 1]
    let shareData = {
      title: '分销海报',
      path: page.$page.fullPath || '/' + page.route,
    };
    // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
    if (this.isLogin) shareData.path = shareData.path + '?spread=' + this.uid;
    // 返回最终的分享配置信息
    return shareData
  },
  // 分享到朋友圈
  onShareTimeline() {
    let shareData = {
      title: '分销海报',
      query: {},
    };
    // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
    if (this.isLogin) shareData.query.spread = this.uid;
    // 返回最终的分享配置信息
    return shareData
  },
  // #endif
}
</script>

<style lang="scss">
page {
  background-color: #a3a3a3 !important;
}

.canvas {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.box {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 18rpx;
  overflow: hidden;

  .user-msg {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .user-code {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      justify-content: space-between;

      image {
        width: 100%;
      }
    }
  }
}

.img-list {
  margin-right: 40px;
}

.distribution-posters swiper {
  width: 100%;
  height: 1000rpx;
  position: relative;
  margin-top: 40rpx;
}

.distribution-posters .slide-image {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border-radius: 15rpx;
}

.distribution-posters /deep/.active {
  transform: none;
  transition: all 0.2s ease-in 0s;
}

.distribution-posters /deep/ .quiet {
  transform: scale(0.8333333);
  transition: all 0.2s ease-in 0s;
}

.distribution-posters .Sharebution {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 80rpx;
  font-size: 30rpx;
  margin: 15rpx auto;
  margin-top: 38rpx;

  .left {
    width: 350rpx;
    color: #fff;
    border-radius: 50rpx;
    text-align: center;
    line-height: 80rpx;
    margin: 15rpx auto;
    background: #f4c241;
    background-color: var(--view-theme);
  }

  .right {
    font-size: 30rpx;
    color: #fff;
    width: 350rpx;
    border-radius: 50rpx;
    text-align: center;
    line-height: 80rpx;
    margin: 15rpx auto;
    background-color: var(--view-theme);
  }
}

.distribution-posters .keep {
  font-size: 30rpx;
  color: #fff;
  width: 600rpx;
  height: 80rpx;
  border-radius: 50rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 15rpx auto;
  background-color: var(--view-theme);
}

.distribution-posters .preserve {
  color: #fff;
  text-align: center;
  margin-top: 38rpx;
}

.distribution-posters .preserve .line {
  width: 100rpx;
  height: 1px;
  background-color: #fff;
}

.distribution-posters .preserve .tip {
  margin: 0 30rpx;
}
</style>