<template>
  <view class="page" @touchmove.stop.prevent="">
    <image class="modeImage" src="../../assets/img/img1.png" mode="aspectFit" />
    <!-- 轮播图 -->
    <!-- <u-swiper
      indicator
      indicatorMode="dot"
      circular
      :radius="30"
      :autoplay="false"
      :list="swiperList"
      keyName="image"
      @change="getSwiperIndex"
      @click="previewImage"
    ></u-swiper> -->

    <!-- 按钮部分 -->
    <view v-show="!audioUrl" class="orangeBtn" @click="openPopup">
      <image
        src="../../assets/icon/sound-2.png"
        mode="scaleToFill"
      />开始录音</view
    >

    <view v-show="audioUrl" class="orangeBtn transparentBtn" @click="playVoice"
      ><image src="../../assets/icon/sound-2.png" mode="scaleToFill" />试听
      <view class="rerecord" @click.stop="openPopup">重新录音</view>
    </view>

    <!-- <view v-show="audioUrl" class="orangeBtn" @click="openPopup">重新录音</view> -->

    <view class="orangeBtn" @click="">生成视频</view>
    <!-- 分享 -->
    <view class="shareBox">
      <view class="tips">
        <text>邀请好友可获得2枚金币</text>
      </view>
      <view class="shareBtn" @click="">分享</view>
      <view class="shareBtn" @click="">邀请好友 </view>
      <view class="shareBtn" @click="">购买金币</view>
    </view>
    <!-- 弹出层 -->
    <view class="popup" v-show="showPopup" @click.stop="showPopup = false">
      <!-- 声纹图片 -->
      <u-transition :show="showPopup">
        <view class="transition wavyIcon">
          <image src="../../assets/icon/soundBG.png" />
        </view>
      </u-transition>

      <!-- 底部框 -->
      <u-transition
        :show="showPopup"
        @touchstart.stop="startRecord"
        @touchend.stop="endRecord"
      >
        <view class="transition microphoneIcon">
          <image src="../../assets/icon/sound.png" mode="aspectFit" />
        </view>
      </u-transition>
    </view>
  </view>
</template>

<script setup>
// import myloading from '../../components/myLoading.vue'
//#region 导入
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { userInfoModules } from "@/store/modules/userInfo";
import { getPhotoListApi } from "../../api/lookPhoto.js";
const userInfoModulesPinia = userInfoModules();

//#endregion

//#region 轮播图
const swiperList = 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);
    }
  });
}
// 轮播图滚动
const swiperIndex = ref(0);
function getSwiperIndex(index) {
  swiperIndex.value = index.current;
}
// 轮播图预览
const previewImageList = ref([]); //预览图片列表
function previewImage(index) {
  uni.previewImage({
    current: index, //预览图片的下标
    urls: previewImageList.value, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
    loop: true,
  });
}
//#endregion ---------------------

//#region 页面跳转
function bueCoin() {
  uni.showToast({
    title: "暂未开放",
    icon: "none",
    mask: true,
  });
  // uni.navigateTo({
  //   url: "/pages/home/buyCoin",
  // });
}
//#endregion ---------------------

//#region 弹出层
const showPopup = ref(true);
function openPopup() {
  showPopup.value = true;
}
function close() {
  console.log("close");
}
function open() {
  console.log("open");
}

//#endregion ---------------------

//#region 录音功能
let Recorder = null; //h5定义录音对象
let recorder = null; //h5定义录音实例
let recorderManager = null; //小程序定义录音实例
let innerAudioContext = null; //小程序定义mp3实例
const audioUrl = ref(null);
const audioRef = ref(null);

if (userInfoModulesPinia.platForm == 1) {
  // 在 H5 平台导入 Recorder
  import("js-audio-recorder").then((module) => {
    const Recorder = module.default;
    // 也可以继续使用 recorder 变量
    const parameter = {
      sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
      sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
      numChannels: 1, // 声道，支持 1 或 2， 默认是1
    };
    recorder = new Recorder(parameter);
  });
} else {
  recorderManager = uni.getRecorderManager();
  innerAudioContext = uni.createInnerAudioContext();
  innerAudioContext.autoplay = false;
}
//#endregion

//#region 录音
function startRecord() {
  if (userInfoModulesPinia.platForm != 1) {
    console.log("开始录音xcx");
    recorderManager.start({
      // format: "mp3", // 录音的格式
      duration: 60000, // 最大录音时长，单位毫秒
    });
  } else {
    console.log("开始录音h5");
    recorder.start();
  }
}
async function endRecord() {
  if (userInfoModulesPinia.platForm != 1) {
    recorderManager.onStop((res) => {
      console.log("录音结束xcx", res);
      audioUrl.value = res.tempFilePath;
      innerAudioContext.src = audioUrl.value;
    });
    recorderManager.stop();
  } else {
    console.log("录音结束h5");
    await recorder.stop();
    audioUrl.value = URL.createObjectURL(recorder.getWAVBlob());
  }
  showPopup.value = false;
}
async function playVoice() {
  if (userInfoModulesPinia.platForm != 1) {
    await innerAudioContext.play();
    console.log("试听了xcx");
  } else {
    const link = document.createElement("audio");
    link.src = audioUrl.value;
    link.play();
    console.log("试听了h5");
  }
}
//#endregion ---------------------

//#region 初始化
const workId = ref(null); //作品id
onLoad(async (options) => {
  workId.value = options.id;
  // await getSwiperList();
  // await getSupperPhotoState(swiperList.value[0].id);
});
//#endregion ---------------------

//#region

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

<style lang="scss">
.page {
  position: relative;
  padding-bottom: 200rpx;
}
.modeImage {
  width: 540rpx;
  height: 720rpx;
}
.myBtnbox {
  margin-top: 30rpx;
}
.orangeBtn {
  position: relative;
  margin-top: 30rpx;
  image {
    vertical-align: text-top;
    width: 52rpx;
    height: 40rpx;
    margin-right: 20rpx;
  }
  .rerecord {
    position: absolute;
    top: -14rpx;
    right: -78rpx;
    height: 50rpx;
    width: 142rpx;
    text-align: center;
    line-height: 50rpx;
    border-radius: 25rpx;
    background-color: #000;
    font-size: 22rpx;
    font-weight: bold;
  }
}
.transparentBtn {
  background-color: transparent;
  border: 2rpx solid #fff;
}

.shareBox {
  position: absolute;
  bottom: 100rpx;
  padding: 0 60rpx;
  // margin-top: 150rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .tips {
    position: absolute;
    top: -70rpx;
    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: 72rpx;
    line-height: 72rpx;
    text-align: center;
    background-color: #3d3e3f;
    border-radius: 36rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
.popup {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  .wavyIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 530rpx;
    height: 173rpx;
    // background-color: #fff;
    z-index: 3;
    overflow: hidden;
    image {
      width: 520rpx;
      height: 173rpx;
    }
    // image {
    //   position: absolute;
    //   left: -500rpx;
    //   display: inline-block;
    //   width: 1000rpx;
    //   height: 160rpx;
    //   z-index: 3;
    //   // animation: moveImage 3s linear infinite;
    // }
    @keyframes moveImage {
      0% {
        left: -100rpx;
      }
      50% {
        left: -500rpx;
      }
      100% {
        left: -100rpx;
      }
    }
  }
  .microphoneIcon {
    position: absolute;
    bottom: 0;
    height: 410rpx;
    width: 100%;
    border-radius: 36rpx 36rpx 0 0;
    background-color: #fff;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    image {
      // max-width: 0%;
      // max-height: 0%;
      width: 108rpx;
      height: 83rpx;
      touch-action: none;
      z-index: -1;
      pointer-events: none;
    }
  }
}
</style>
