<script setup lang="ts">
import { imgUrl } from "@/utils/http";
import { ref } from "vue";
import { useMemberStore } from "@/stores";
import { createPosterApi } from "@/services/home";
import type { CreatePo } from "@/types/home";
const userInfo = useMemberStore();
const title = ref<string>("");
const duration = ref<number>();
const price = ref<number>();
const num = ref<number>();
//海报
const placard = ref<string>();
placard.value = userInfo.userInfo.posterBackground;

//是否是新生成的海报带二维码
const isCreatePaster = ref<boolean>(false);
//调用接口得到图片海报路径
//更换壁纸
const changeImage = () => {
  uni.chooseImage({
    success: (chooseImageRes) => {
      const tempFilePaths = chooseImageRes.tempFilePaths;
      uni.uploadFile({
        url: "/file/customUpload", //仅为示例，非真实的接口地址
        filePath: tempFilePaths[0],
        name: "file",
        success: (uploadFileRes) => {
          let photo = `${imgUrl}${JSON.parse(uploadFileRes.data).data}`;
          placard.value = photo;
          isCreatePaster.value = false;
        },
      });
    },
  });
};
//生成海报
const createPlacard = () => {
  console.log(duration.value);
  if (title.value == "") {
    uni.showToast({
      title: "请填写标题",
      icon: "none",
    });
    return;
  }
  if (typeof duration.value == "undefined") {
    uni.showToast({
      title: "请填写时长",
      icon: "none",
    });
    return;
  }

  if (typeof price.value == "undefined") {
    uni.showToast({
      title: "请填写价格",
      icon: "none",
    });
    return;
  }
  if (typeof num.value == "undefined") {
    uni.showToast({
      title: "请填写次数",
      icon: "none",
    });
    return;
  }
  if (num.value == 0 || price.value == 0 || duration.value == 0) {
    uni.showToast({
      title: "时长|价格|次数不能为0",
      icon: "none",
    });
    return;
  }
  //判断图片是否改变
  createPoster({
    userId: userInfo.userInfo.id,
    title: title.value,
    effectiveDays: duration.value as number,
    amount: price.value as number,
    times: num.value as number,
    background: placard.value,
  });
  //调用生成海报的方法
};
const createPoster = async (val: CreatePo) => {
  const res = await createPosterApi(val);
  console.log("海报");
  console.log(res);
  if (res.data == "2001") {
    uni.showToast({
      title: res.msg,
      icon: "fail",
    });
  } else {
    // console.log(res.data);
    placard.value = `${imgUrl}${res.data}`;
    isCreatePaster.value = true;
  }
};
//下载图片
const saveLocal = () => {
  //下载图片
  // uni.showLoading();
  let url: string = placard.value as string;
  uni.downloadFile({
    url: url, //仅为示例，并非真实的资源
    success: (res) => {
      console.log(res);
      if (res.statusCode === 200) {
        uni.saveImageToPhotosAlbum({
          // 然后调用这个方法
          filePath: res.tempFilePath,
          success: (res) => {
            // uni.hideLoading();
            uni.showToast({
              title: "已保存至相册",
              icon: "success",
            });
          },
        });
      }
    },
  });
};
</script>
<template>
  <view class="invite_user">
    <uni-row class="demo-uni-row">
      <uni-col :span="12">
        <view class="user_input">
          <view class="user_font">标题</view>
          <view
            ><uni-easyinput
              type="text"
              :inputBorder="false"
              :clearable="false"
              v-model="title"
              placeholder="请输入标题"
            ></uni-easyinput
          ></view>
        </view>
      </uni-col>
      <uni-col :span="12">
        <view class="user_input">
          <view class="user_font">时长</view>
          <view
            ><uni-easyinput
              type="number"
              :clearable="false"
              :inputBorder="false"
              v-model="duration"
              placeholder="请输入时长（天）"
            ></uni-easyinput
          ></view>
        </view>
      </uni-col>
    </uni-row>
    <uni-row style="margin-top: 100rpx">
      <uni-col :span="12">
        <view class="user_input">
          <view class="user_font">价格</view>
          <view
            ><uni-easyinput
              type="number"
              :clearable="false"
              :inputBorder="false"
              v-model="price"
              placeholder="请输入价格（元）"
            ></uni-easyinput
          ></view>
        </view>
      </uni-col>
      <uni-col :span="12">
        <view class="user_input">
          <view class="user_font">次数</view>
          <view
            ><uni-easyinput
              type="number"
              :clearable="false"
              :inputBorder="false"
              v-model="num"
              placeholder="请输入次数"
            ></uni-easyinput
          ></view>
        </view>
      </uni-col>
    </uni-row>
    <button class="mini-btn" size="mini" @click="changeImage">跳转支付</button>
    <view class="button_group">
      <button class="mini-btn" size="mini" @click="changeImage">更换壁纸</button>
      <button class="mini-btn" size="mini" @click="createPlacard">生成海报</button>
    </view>
    <view class="remark_user">备注:更换壁纸请上传720*1280分辨率的壁纸,大小在3M以下</view>
    <view>
      <image
        :show-menu-by-longpress="isCreatePaster"
        mode="aspectFill"
        style="width: 720rpx; height: 1280rpx"
        :src="placard"
      ></image
    ></view>
    <view class="remark_eweima"
      >备注:可以长按分享二维码，或点击你保存至手机，请保管好二维码以防他人使用</view
    >
    <view style="text-align: center; padding: 0rpx 100rpx">
      <button class="save_button" size="mini" @click="saveLocal">保存至本地</button>
    </view>
  </view>
</template>
<style lang="scss">
page {
  height: 100%;
}
.invite_user {
  height: 100%;
  width: 100%;
  padding: 10rpx 15rpx;
  background: rgb(243, 250, 248);
  .remark_user {
    color: #000000;
    opacity: 0.4;
    font-size: 26rpx;
    margin-top: 20rpx;
    margin-bottom: 10rpx;
  }
  .remark_eweima {
    text-align: center;
    color: #000000;
    opacity: 0.4;
    font-size: 26rpx;
    margin-top: 20rpx;
    margin-bottom: 10rpx;
    padding: 0rpx 40rpx;
  }
  .save_button {
    text-align: center;
    background: linear-gradient(#ffffff, rgb(125, 123, 226));
    color: #ffffff;
    width: 100%;
    font-size: 36rpx;
    margin-top: 40rpx;
    margin-bottom: 100rpx;
  }
  .button_group {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 20rpx 0rpx;
    button {
      background: linear-gradient(#ffffff, blue);
      color: #ffffff;
      font-size: 36rpx;
    }
  }
  .user_input_time {
    padding: 20rpx 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    .user_font {
      width: 100rpx;
    }
  }
  .user_input {
    padding: 20rpx 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .user_out {
      display: flex;
      flex-direction: row;
      justify-content: start;
      align-items: center;
      .user_font {
        width: 100rpx;
      }
    }
    .user_font {
      width: 100rpx;
    }
    .user_font_unit {
      color: blue;
    }
  }
}
</style>
