<template>
  <u-popup
    mode="bottom"
    :border-radius="20"
    :popup="false"
    v-model="value"
    :maskCloseAble="true"
    length="auto"
    :safeAreaInsetBottom="true"
    @close="popupClose"
    :z-index="9999"
    close-icon="close"
  >
    <view class="share-box" :style="{ paddingBottom: bianyi ? '50rpx' : '0' }">
      <view class="title">分享商品</view>
      <view class="goodname">{{ goodName }}</view>
      <view class="img-box">
        <view class="box">
          <image
            v-for="(x, i) in images"
            :key="i"
            :src="x.pic_url"
            class="img"
            mode="aspectFill"
            @click="previewImage(i)"
          />
        </view>
      </view>
      <view class="op-box">
        <view class="left">
          <text @click="copyHandler">复制文本</text>
          <text @click="savePicHandler" style="text-align: center;"
            >保存图片</text
          >
          <text @click="genernalHandler" style="text-align: right;"
            >生成海报</text
          >
        </view>
        <view class="right">
          <text>分享到</text>
          <image
            src="/static/images/icon/quan.png"
            style="width: 24px; height: 24px;"
            @click="sendQuanHandler"
          />
          <!-- #ifdef MP-WEIXIN -->
          <button open-type="share" style="border: none; outline: none;">
            <image
              src="/static/images/icon/friend.png"
              style="width: 24px; height: 24px;"
            />
          </button>
          <!-- #endif -->
        </view>
      </view>
    </view>
    <u-top-tips ref="uTips"></u-top-tips>
  </u-popup>
</template>

<script>
export default {
  model: {},
  props: {
    value: {
      type: Boolean,
      default: true,
    },
    goodId: {
      type: Number,
      default: 0,
    },
    goodName: {
      type: String,
      default: "",
    },
    images: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      bianyi: false,
    };
  },
  mounted() {
    this.bianyi = this.$uiConfig.is_bang;
  },
  methods: {
    popupClose(){
      this.$emit('close')
    },
    savePicHandler() {
      uni.showLoading({
        title: "正在下载图片",
      });
      let arr = JSON.parse(JSON.stringify(this.images));
      this.downLoadImage(arr);
    },
    genernalHandler() {
      //this.goodId
      uni.navigateTo({
        url: "/pages/goods/draw?id="+this.goodId,
      });
    },
    sendQuanHandler() {
      this.copyHandler();
      setTimeout(() => {
        this.savePicHandler();
      }, 1000);
    },
    downLoadImage(arr) {
      let that = this;
      uni.downloadFile({
        url: arr[0].pic_url,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function () {
                arr.splice(0, 1);
                if (arr.length > 0) {
                  that.downLoadImage(arr);
                } else {
                  uni.hideLoading();
                  uni.showToast({
                    title: "下载成功",
                  });
                }
              },
              fail: function (e) {
                uni.hideLoading();
                that.$refs.uTips.show({
                  title: "下载失败，请稍后重试",
                  type: "error",
                  duration: "2300",
                });
              },
            });
          } else {
            uni.hideLoading();
            that.$refs.uTips.show({
              title: "下载失败，请稍后重试",
              type: "error",
              duration: "2300",
            });
          }
        },
      });
    },
    copyHandler() {
      uni.setClipboardData({
        data: this.goodName,
      });
    },
    previewImage(i) {
      uni.previewImage({
        urls: this.imgs,
        current: i,
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {},
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
  },
};
</script>

<style>
.share-box {
  position: relative;
  padding: 20rpx;
  padding-bottom: 0;
}
.share-box .title {
  font-size: 40rpx;
  color: #000;
  margin-bottom: 50rpx;
  font-weight: 600;
}
.share-box .goodname {
  font-size: 28rpx;
  line-height: 1.5;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #333;
}
.share-box .img-box {
  margin-top: 40rpx;
  padding-bottom: 40rpx;
  display: block;
  border-bottom: 2rpx solid #f1f1f1;
  overflow-x: auto;
}
.share-box .img-box .box {
  white-space: nowrap;
}
.share-box .img-box .box .img {
  display: inline-block;
  width: 252rpx;
  height: 252rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}
.share-box .op-box {
  display: flex;
  margin: 20rpx 0;
  align-items: center;
  font-size: 14px;
  color: gray;
}
.share-box .op-box .left {
  display: flex;
  flex: 1;
  width: 1rpx;
  align-items: center;
}
.share-box .op-box .left text {
  flex: 1;
  text-align: left;
  width: 1rpx;
}
.share-box .op-box .right {
  margin-left: 20rpx;
  border-left: 2rpx solid #f1f1f1;
  display: flex;
  align-items: center;
}
.share-box .op-box .right text,
.share-box .op-box .right image {
  margin-left: 20rpx;
}
.share-box .op-box .right button {
  border: none;
  outline: none;
  padding: 0;
  width: 68rpx;
  height: 48rpx;
  margin: 0;
  line-height: unset;
}
.share-box .op-box .right button::after {
  border: none;
}
</style>
