<template>
  <!--  -->
  <view class="aiPaintDetail_M">
    <view class="paint">
      <!-- 绘制好的图替换默认图展示 -->
      <view class="successCover" v-if="transImg">
        <image :src="transImg" mode="widthFix" class="img"/>
      </view>
    </view>
    <view class="complete">
      <!-- 	prompt关键词 -->
      <view class="keywords">
        <view>
          <view class="promptTitle">关键词</view>
        </view>
        <view class="content">
          <text>{{prompt}}</text>
        </view>
      </view>

      <!-- 图画详细参数 -->
      <view class="label">
        <!-- 	<view class="style">
            <view class="i">关键词</view>
            <view class="text">{{ prompt }}</view>
          </view> -->
        <view class="style">
          <view class="i">画布:</view>
          <view class="text">{{ imgWidth }}x{{ imgHeight }}</view>
        </view>
        <view class="style">
          <view class="i">创作风格:</view>
          <view class="text">{{styleName}}</view>
        </view>
        <view class="style">
          <view class="i">作品编号:</view>
          <view class="text">{{paintId}}</view>
        </view>
        <view class="style">
          <view class="i">创作时间:</view>
          <view class="text">{{paintTime}}</view>
        </view>
      </view>


    </view>

    <!-- 	底部操作栏(绘制成功替换，告知图片保存在用户画册里) -->
    <view class="action" >
      <view class="action-group">
        <view class="actionBtn">
          <view class="grid" @click="onCopyPrompt">
            <view><uni-icons type="link" size="24"></uni-icons></view>
            <text class="grid-text">复制关键词</text>
          </view>
        </view>
        <view class="actionBtn">
          <view class="grid" @click="onSaveImage(transImg)">
            <view><uni-icons type="cloud-download" size="24"></uni-icons></view>
            <text class="grid-text">保存作品</text>
          </view>
        </view>
        <button open-type="share" size="mini" class="actionBtn" plain="true" type="default">
          <view class="grid" >
            <view><uni-icons type="paperplane" size="24"></uni-icons></view>
            <text class="grid-text">分享好友</text>
          </view>
        </button>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  name: "aiPaintDetail",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  //混合封装的属性和方法
  mixins: [],
  //组件传入的属性
  props: {},
  data() {
    //这里存放数据
    return {
      transImg: undefined,
      imgHeight: undefined,
      imgWidth: undefined,
      prompt: undefined,
      successFlag: false,
      paintId: undefined,
      paintTime: undefined,
      styleName: undefined,
      batchSize: undefined,
    };
  },
  onLoad(options) {
    //接收上一个页面传来的绘画参数
    const paintData = JSON.parse(options.data);
	console.log(paintData)
    this.imgHeight = paintData.height;
    this.imgWidth = paintData.width;
    this.prompt = paintData['prompt'];
    this.styleName = paintData.styleName;
    this.batchSize = paintData.batchSize;
    this.paintTime = paintData.createTime;
    this.transImg = paintData.imgUrl;
    this.paintId = paintData.id;
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {

    //保存图片
    onSaveImage(url){
      let that = this;
      that.download(url)
    },

    // 下载
    download(url) {
      let that = this;
      //console.log('即将下载的图片为',that.transImg)
      uni.showLoading({
        title: '正在保存图片...',
        success() {
          //获取用户的当前设置。获取相册权限
          uni.getSetting({
            success: (res) => {
              //如果没有相册权限
              if (!res.authSetting["scope.album"]) {
                //向用户发起授权请求
                uni.authorize({
                  scope: "scope.album",
                  success: () => {
                    uni.saveImageToPhotosAlbum({
                      //图片路径，不支持网络图片路径
                      filePath: url,
                      success: (res) => {

                      },
                      fail: (res) => {
                        return uni.showToast({
                          title: res.errMsg,
                          icon: 'none'
                        });
                      },
                      complete: (res) => {
                        uni.hideLoading();
                        if (res.errMsg !== "saveImageToPhotosAlbum:ok") {
                          return uni.showToast({
                            title: "下载失败！",
                            icon: 'none'
                          });
                        } else {
                          return uni.showToast({
                            title: "保存成功！",
                            icon: 'none',
                            success() {

                            }
                          });
                        }
                      },
                    });
                  },
                  //授权失败
                  fail: () => {
                    uni.hideLoading();
                    uni.showModal({
                      title: "您已拒绝获取相册权限",
                      content: "是否进入权限管理，调整授权？",
                      success: (res) => {
                        if (res.confirm) {
                          //调起客户端小程序设置界面，返回用户设置的操作结果。（重新让用户授权）
                          uni.openSetting({
                            success: (res) => {

                            },
                          });
                        } else if (res.cancel) {
                          return uni.showToast({
                            title: "已取消！",
                            icon: 'none'
                          });
                        }
                      },
                    });
                  },
                });
              } else {
                //如果已有相册权限，直接保存图片到系统相册
                uni.saveImageToPhotosAlbum({
                  filePath: url,
                  success: (res) => {
                    console.log('有权限下载图片结果为',res)
                    console.log('333333')

                  },
                  fail: (res) => {
                    return uni.showToast({
                      title: res.errMsg,
                      icon: 'none'
                    });
                  },
                  //无论成功失败都走的回调
                  complete: (res) => {
                    uni.hideLoading();
                    if (res.errMsg !== "saveImageToPhotosAlbum:ok") {
                      return uni.showToast({
                        title: "下载失败！",
                        icon: 'none'
                      });
                    }else{
                      return uni.showToast({
                        title: "保存成功！",
                        duration: 2000,
                        icon: 'none'
                      });
                    }
                  },
                });
              }
            },
            fail: (res) => {},
          });
        }
      });
    },

    //复制关键词
    onCopyPrompt(){
      let that = this;
      //console.log('点击复制关键词事件')
      uni.setClipboardData({
        data: that.prompt,
        success() {
          uni.showToast({
            title: '复制关键词成功!'
          });

        }
      })
    },
  },
  created() {
  }, //生命周期 - 创建完成（可以访问当前this实例）
  mounted() {
  }, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {
  }, //生命周期 - 创建之前
  beforeMount() {
  }, //生命周期 - 挂载之前
  beforeUpdate() {
  }, //生命周期 - 更新之前
  updated() {
  }, //生命周期 - 更新之后
  beforeDestroy() {
  }, //生命周期 - 销毁之前
  destroyed() {
  }, //生命周期 - 销毁完成
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped lang="scss">
.aiPaintDetail_M {

  .complete {
    padding-bottom: 200rpx;

    .Multi-sheet-tips {
      width: 92%;
      margin: 0 auto;
      font-size: 24rpx;
      line-height: 38rpx;
      color: $uni-base-color;
      border-bottom: 1rpx solid $uni-border-2;
    }

    .label {
      width: 92%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: left;
      align-items: flex-start;
      margin-top: 15rpx;


      .style {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        margin-top: 30rpx;
        font-weight: bolder;

        .i {
          font-size: 28rpx;
          color: $uni-primary;
          border-radius: 5rpx;
          margin-right: 15rpx;
          line-height: 38rpx;
        }

        .text {
          font-size: 26rpx;
          line-height: 38rpx;
          font-weight: bolder;
          color: $uni-base-color;
        }
      }
    }

    .promptTitle{
      text-align: center;
      font-weight: bolder;
      font-size: 28rpx;
      color: $uni-primary;
    }

    .keywords {
      width: 90%;
      margin: 0 auto;
      //background-color: #1A94BC1A;
      //padding: 15rpx;
      border-radius: 10rpx;
      margin-top: 15rpx;
      font-weight: bolder;

      .content {
        margin-top: 20rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /*这里设置几行*/
        overflow: hidden;
        color: $uni-base-color;
        font-size: 26rpx;
      }
    }
  }

  .paint {

    .successCover {
      width: 100%;
      height: auto;
      border-radius: 10 rpx;

      .img {
        width: 100%;
        height: auto;
        border-radius: 10 rpx;
      }
    }
  }

  .action {
    width: 100%;
    position: fixed;
    bottom: 0rpx;
    left: 0rpx;
    background-color: #fff;
    padding: 20rpx 10rpx;

    .action-group {
      width: 90%;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      button {
        background-color: transparent;
        border: 0;
        outline: 0;
        font-size: 28rpx;
        padding: 0;
        line-height: inherit;
      }

      button::after{
        border: none;
        outline: 0;
      }

      .actionBtn{
        width: 50%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        //margin:0rpx 25rpx 0rpx 25rpx;

        .grid {
          display: flex;
          flex-direction: column;
          align-items: center;

          .grid-text {
            font-size: 28rpx;
            margin-top: 10rpx;
          }

        }
      }
    }
  }
}
</style>