<template>
  <view class="page">
    <!-- 轮播图 -->
    <u-swiper
      indicator
      indicatorMode="dot"
      circular
      :radius="30"
      :autoplay="false"
      :list="swiperList"
      keyName="image"
      @change="getSwiperIndex"
      @click="previewImage"
    ></u-swiper>
    <view class="checkMore">左右滑动查看更多</view>
    <!-- <view class="uploadBtn grayBtn">
      <text>我要让照片说话</text>
      <view class="free">
        <text>耗金币2枚</text>
      </view>
    </view> -->
    <view @click="downloadImg" class="uploadBtn">
      <text>下载照片</text>
    </view>
    <view class="grayBtn" @click="photoSupper">
      <!-- <view v-if="supperPhotoState == 0 || supperPhotoState == 3" class="free">
        <text>耗金币1枚</text>
      </view> -->
      {{ supperTips() }}
    </view>
    <!-- 底部 -->
    <view class="bottomBox">
      <view class="tips">
        <text>邀请好友可获得2枚金币</text>
      </view>
      <button open-type="share" class="shareBtn">分享</button>
      <view class="shareBtn" @click="inviteFriend">邀请好友</view>
      <view class="shareBtn" @click="buyCoin">金币充值</view>
    </view>
  </view>
</template>

<script setup>
// import myloading from '../../components/myLoading.vue'
//#region 导入
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { ref, reactive, watch } from "vue";
import { userInfoModules } from "@/store/modules/userInfo";
import {
  getPhotoListApi,
  photoSupperApi,
  getSupperPhotoStateApi,
} from "../../api/lookPhoto.js";
//#endregion
const userInfoModulesPinia = userInfoModules();
//#region 轮播图
const workId = ref(null); //作品id
onLoad(async (options) => {
  workId.value = options.id;
  await getSwiperList();
  await getSupperPhotoState(swiperList.value[0].id);
});
const swiperList = ref([]); //轮播图
const previewImageList = ref([]); //预览图片列表

async function getSwiperList() {
  const res = await getPhotoListApi(workId.value);
  console.log(res.data.photoList);
  swiperList.value = res.data.photoList;
  swiperList.value.forEach((item) => {
    if (item.imageSuper) {
      previewImageList.value.push(item.imageSuper);
    } else {
      previewImageList.value.push(item.image);
    }
  });
}
//#endregion ---------------------

//#region 下载
const swiperIndex = ref(0);
function getSwiperIndex(index) {
  swiperIndex.value = index.current;
}
function downloadImg() {
  let filePath = wx.env.USER_DATA_PATH + "/" + "zhixiang.png";
  uni.downloadFile({
    filePath: filePath,
    url: swiperList.value[swiperIndex.value].imageSuper
      ? swiperList.value[swiperIndex.value].imageSuper
      : swiperList.value[swiperIndex.value].image, //仅为示例，并非真实的资源
    // url: "http://tmp/iFlp7n9vAaaEa3276321f9c19ed0031617eb27119af4.png", //仅为示例，并非真实的资源
    success: (res) => {
      let data = res;
      console.log(data);
      // console.log(res);
      if (res.statusCode == 200) {
        uni.saveImageToPhotosAlbum({
          filePath: filePath,
          // .replace(".bin", ".png")
          // filePath: data.tempFilePath,
          success: () => {
            //提示保存成功
            uni.showToast({
              title: "保存成功",
              iconL: "success",
              duration: 2000,
            });
          },
          fail: (res2) => {
            //失败关闭提示信息！！！
            uni.showToast({
              icon: "none",
              title: "下载失败",
              duration: 3000,
            });
            console.log("下载失败", res2);
          },
          complete: function () {
            //隐藏提示
            // uni.hideLoading();
          },
        });
      }
    },
    fail: (err) => {
      console.log(err, "err");
      uni.showToast({
        icon: "none",
        mask: true,
        title: "下载失败,请重新下载",
      });
    },
  });
  // if (userInfoModulesPinia.platForm != 1) {
  //   uni.saveImageToPhotosAlbum({
  //     filePath: "https://uiadmin.net/uview-plus/common/logo.png",
  //     success: function () {
  //       console.log("save success");
  //     },
  //   });
  // } else {
  //   const link = document.createElement("a");
  //   link.href = "https://uiadmin.net/uview-plus/common/logo.png";
  //   link.download = "image.jpg";
  //   link.click();
  // }
}
//#endregion ---------------------

//#region
function previewImage(index) {
  uni.previewImage({
    current: index, //预览图片的下标
    urls: previewImageList.value, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
    loop: true,
  });
}
//#endregion ---------------------

//#region 分享
onShareAppMessage((res) => {
  // 分享事件来源：button（页面内分享按钮）、menu（右上角分享按钮）
  if (res.from === "button") {
    // 来自页面内分享按钮
    return {
      //分享标题
      title: "智像",
      //页面 path
      path: `/pages/login/index`,
      // 分享图标
      // imageUr: shopDetailsData.value?.GoodsCoverImg,
      success: function () {
        // 转发成功
        console.log("res", res);
      },
      fail: function () {
        // 转发失败
        console.log("res", res);
      },
    };
  } else {
    return {
      title: "智像",
      path: "/pages/login/index",
      // imageUr: shopDetailsData.value?.GoodsCoverImg,
    };
  }
});
// onShareAppMessage((res) => {
//   return {
//     title: "页面分享的标题",
//     path: "pages/uploadPhoto/uploadPhoto",
//     // imageUrl: "",
//   };
// });

function share() {
  // --------------------------------------------------
  // uni.showToast({
  //   title: "敬请期待！",
  //   icon: "none",
  // });
  // return;
  // uni.onShareAppMessage({
  //   provider: "weixin", //分享服务提供商（即weixin|qq|sinaweibo）
  //   scene: "WXSenceTimeline", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏)
  //   type: 5,
  //   title: "分享到朋友圈",
  //   summary: "分享描述",
  //   href: "www.baidu.com", //分享跳转地址
  //   imageUrl: "../static/lovehot.png", //分享图片路径(必须是线上可访问图片)
  //   miniProgram: {
  //     id: "wx75cf14e3a0d45821",
  //     path: "pages/index/index",
  //     type: 0,
  //     webUrl: "",
  //   },
  //   success: function (res) {
  //   },
  //   fail: function (err) {
  //   },
  // });
}
function inviteFriend() {
  uni.showToast({
    title: "敬请期待！",
    icon: "none",
  });
  return;
  uni.share({
    provider: "weixin", //分享服务提供商（即weixin|qq|sinaweibo）
    scene: "WXSceneSession", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏)
    type: 5,
    title: "分享给好友",
    summary: "分享描述",
    href: "www.baidu.com", //分享跳转地址
    imageUrl: "../static/lovehot.png", //分享图片路径(必须是线上可访问图片)
    miniProgram: {
      id: "gwx75cf14e3a0d45821",
      path: "pages/index/index",
      type: 0,
      webUrl: "",
    },
    success: function (res) {
      // console.log("success:" + JSON.stringify(res));
    },
    fail: function (err) {
      // console.log("fail:" + JSON.stringify(err));
    },
  });
}
//#endregion ---------------------

//#region 页面跳转
function buyCoin() {
  if (userInfoModulesPinia.platForm == 3) {
    uni.showToast({
      title: "暂未开放",
      icon: "none",
      mask: true,
    });
  } else {
    uni.navigateTo({
      url: "/pages/index/buyCoin",
    });
  }
}
//#endregion ---------------------

//#region 超分相关
const supperPhotoState = ref(false);
async function photoSupper() {
  if (supperPhotoState.value == 1 || supperPhotoState.value == 2) {
    return;
  }
  // uni.showModal({
  //     title: "提示",
  //     content: "确定高清处理?",
  //     success: function (res) {
  //       if (res.confirm) {
  //         checkboxValue.value = ["同意智像相机用户使用协议"];
  //         // handleLogin();
  //         getphonenumber(e);
  //       } else if (res.cancel) {
  //       }
  //     },
  //     fail: (err) => {},
  //   });
  try {
    uni.showLoading({
      title: "高清处理中...",
      mask: true,
    });
    const res = await photoSupperApi({
      id: swiperList.value[swiperIndex.value].id,
    });
    console.log(res);
    uni.hideLoading();
    uni.showToast({
      title: "高清处理请求成功，请稍后",
      title: "高清处理请求成功，请稍等",
      icon: "none",
    });

    getSupperPhotoState(swiperList.value[swiperIndex.value].id);
  } catch (error) {
    console.log(error, "超分失败");
    uni.hideLoading();
    uni.showToast({
      title: "高清处理失败，请重试",
      icon: "none",
    });
  }
}

async function getSupperPhotoState(id) {
  try {
    const res = await getSupperPhotoStateApi(id);
    supperPhotoState.value = res.data.status;
    console.log(supperPhotoState.value, "状态");
  } catch (error) {
    console.log(error, "超分失败");
  }
}

function supperTips(params) {
  if (supperPhotoState.value == 0 || supperPhotoState.value == 3) {
    return "一键高清";
  } else if (supperPhotoState.value == 1) {
    return "高清处理中,请稍后";
  } else if (supperPhotoState.value == 2) {
    return "已高清处理";
  }
}

watch(
  () => swiperIndex.value,
  (index) => {
    getSupperPhotoState(swiperList.value[index].id);
  }
);
//#endregion ---------------------

//#region

//#endregion ---------------------
</script>

<style lang="scss">
.page {
  background-color: rgba(24, 25, 26, 1);
}
// 轮播图
.u-swiper {
  margin-top: 40rpx;
  width: 540rpx;
  height: 720rpx !important;
  border-radius: 50rpx;
  swiper {
    width: 100%;
    height: 720rpx !important;
    image {
      width: 100%;
      height: 720rpx !important;
    }
  }

  // h5
  :deep(.u-swiper__wrapper) {
    width: 100%;
    height: 720rpx !important;
    image {
      width: 100%;
      height: 720rpx !important;
    }
  }
}

.checkMore {
  color: #ffffff;
  margin-top: 30rpx;
}

// 俩按钮
.uploadBtn {
  position: relative;
  margin-top: 100rpx;
  width: 520rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background: #ff4f00;
  border-radius: 50rpx;
  font-size: 30rpx;
  color: #fff;
  font-weight: 900;
  .free {
    position: absolute;
    top: -18rpx;
    right: -70rpx;
    width: 142rpx;
    height: 50rpx;
    background-color: #000;
    border-radius: 25rpx 25rpx 25rpx 0;
    font-size: 22rpx;
    font-weight: 900;
    line-height: 50rpx;
    text-align: center;
    // image {
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    //   width: 100%;
    //   height: 100%;
    //   z-index: 1;
    // }
    // text {
    //   position: absolute;
    //   top: 0rpx;
    //   left: 0;
    //   line-height: 49rpx;
    //   width: 100%;
    //   height: 100%;
    //   font-size: 22rpx;
    //   font-weight: 900;
    //   z-index: 2;
    // }
  }
}
.grayBtn {
  .free {
    position: absolute;
    color: #fff;
    top: -18rpx;
    right: -70rpx;
    width: 142rpx;
    height: 50rpx;
    background-color: #ff4f00;
    border-radius: 25rpx 25rpx 25rpx 0;
    font-size: 22rpx;
    font-weight: 900;
    line-height: 50rpx;
    text-align: center;
  }
}

.bottomBox {
  flex: 1;
  position: relative;
  bottom: -30rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 65rpx 10rpx 0;
  .tips {
    position: absolute;
    top: 0rpx;
    right: 60rpx;
    width: 313rpx;
    height: 50rpx;
    background-color: #000;
    border-radius: 25rpx 25rpx 25rpx 0;
    font-size: 22rpx;
    font-weight: 900;
    line-height: 50rpx;
    text-align: center;
  }
  .shareBtn {
    width: 200rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    border-radius: 70rpx;
    background-color: rgba(255, 255, 255, 0.1);
  }
}
</style>
