<script lang="ts" setup>
/* __placeholder__ */
import type { MusicFInd, MusicGroup } from "@/types/home";
import { imgUrl, mediaUrl } from "@/utils/http";
import { reactive, ref, toRaw, watchEffect } from "vue";

import { musicStatusStore, useMemberStore } from "@/stores";

const prop = defineProps<{ list: MusicFInd[] }>();

var mu = reactive<any>([{ id: null }]);
const innerAudioContext = uni.createInnerAudioContext();
// console.log(innerAudioContext)
mu[0].id = uni.createInnerAudioContext();
// console.log(mu[0].id)
// a.autoplay = true
// mu[0].id.get()
// mu[0].id.autoplay = true

// mu[0].id.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'

// var mi = reactive<any>([{ id: null }])
// mi = toRaw(mu)
// mi[0].id.autoplay = true

// mi[0].id.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
// mi[0].id.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
// console.log(mi[0].id.volume)
// console.log(mi[0].id.volume = 1)
// console.log()
// console.log()
// mu[0].id.play()
// console.log(mu[0].id._autoplay)
// console.log(mu[0].id._src)
// console.log(mu[0].id._volume)
// mu[0].id.play()

// const innerAudioContext = ref(uni.createInnerAudioContext())
// // innerAudioContext.value =
// innerAudioContext.value.autoplay = true
// innerAudioContext.value.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3';

// var innerAudioContext = reactive<any>()
// var innerAudioContext = uni.createInnerAudioContext()
// innerAudioContext = uni.createInnerAudioContext()
// innerAudioContext.autoplay = true
// innerAudioContext.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3';
// console.log('---------')
// const innerAudioContext = uni.createInnerAudioContext()
// // innerAudioContext.autoplay = true
// innerAudioContext.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
// console.log(innerAudioContext)
// mu[0].id = innerAudioContext
// // mu[0].id.play()
// console.log(mu[0].id)
// mu[0].id.onPlay(
//   mu[0].id.play()
// )
// mu[0].id = uni.createInnerAudioContext()
// mu[0].id.autoplay = true
// mu[0].id.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'

// console.log(musicStatusStore().musicList)
let musicStore = musicStatusStore();
// musicStore.saveMusic(toRaw([{ id: 1212 }]))
//判断缓存里是否有该数据

//先查询出来缓存的话

//然后查询出来分类里边的数据

//没操作前将缓存里边没有的数据将数据给缓存

//有的数据呢将缓存里的状态都给重新给这个数组

//本地变量
// const innerAudioContext = uni.createInnerAudioContext()
// innerAudioContext.autoplay = true
// innerAudioContext.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
// innerAudioContext.onPlay(() => {
//   console.log('开始播放')
// })
// innerAudioContext.onError((res) => {
//   console.log(res.errMsg)
//   console.log(res.errCode)
// })
// let musicGroup = []
let musicTmpList = ref<MusicGroup[]>([]);

//用来储存缓存里的数据
let list = ref<MusicGroup[]>();

let flag = ref(false);

let listT = ref<MusicGroup[]>();
list.value = musicStore.musicList;
//监听父组件传输数据的变化
watchEffect(() => {
  // musicGroup = []
  musicTmpList.value = [];
  for (let i = 0; i < prop.list.length; i++) {
    let a = {
      author: prop.list[i].author,
      cover: prop.list[i].cover,
      id: prop.list[i].id,
      name: prop.list[i].name,
      sourceFile: prop.list[i].sourceFile,
      innerAudioContext: uni.createInnerAudioContext(),
      volume: 0.3,
      isClick: false,
    };
    // musicGroup.push(a)
    musicTmpList.value.push(a);
  }

  if (list.value!.length == 0) {
    musicStore.saveMusic(musicTmpList.value);
    list.value = musicStore.musicList;
  } else {
    //假如播放过第二次又来了只不过状态不一样
    for (let i = 0; i < list.value!.length; i++) {
      for (let j = 0; j < musicTmpList.value.length; j++) {
        if (list.value![i].id == musicTmpList.value[j].id) {
          console.log("-------");
          musicTmpList.value[j].innerAudioContext = list.value![i].innerAudioContext;
          musicTmpList.value[j].volume = list.value![i].volume;
          musicTmpList.value[j].isClick = list.value![i].isClick;
        }
      }
    }

    //标志着如何是否在这里边存在

    listT.value = [];
    for (let i = 0; i < musicTmpList.value.length; i++) {
      flag.value = false;
      for (let j = 0; j < list.value!.length; j++) {
        if (musicTmpList.value[i].id == list.value![j].id) {
          flag.value = true;
        }
      }
      if (!flag.value) {
        listT.value!.push(musicTmpList.value[i]);
      }
    }
    // console.log(listT.value);
    list.value!.push(...listT.value);

    musicStore.saveMusic(list.value);

    //假如缓存里没有就需要去缓存里添加
  }
});

//用本地的数据进行保存并初始化格式
const sliderChange = (e: any, item: MusicGroup) => {
  // console.log(e.detail.value)
  // let volume = e.detail.value / 100
  for (let i = 0; i < musicTmpList.value.length; i++) {
    if (musicTmpList.value[i].id == item.id) {
      // musicTmpList.value[i].volume = e.detail.value / 100
      musicTmpList.value[i].volume = e.detail.value / 100;

      musicTmpList.value[i].volume = e.detail.value / 100;
      toRaw(musicTmpList.value[i]).innerAudioContext.volume =
        musicTmpList.value[i].volume;
      musicStore.saveVolume(item.id, musicTmpList.value[i].volume);

      // console.log(musicTmpList.value[i].volume)
    }
  }
};
//选中播放音乐
const selectMusic = (id: string) => {
  // 循环列表将点击标志改变为true
  console.log(musicStore.musicList.length);
  for (let i = 0; i < musicTmpList.value.length; i++) {
    if (musicTmpList.value[i].id == id) {
      //列表显示
      musicTmpList.value[i].isClick = !musicTmpList.value[i].isClick;

      musicStore.saveIsclick(id, musicTmpList.value[i].isClick);
      // musicGroup[i].isClick = !musicGroup[i].isClick
      // musicTmpList.value[i].isClick = !musicTmpList.value[i].isClick

      //然后给该音乐创建一个音乐上下文
      //当选中后需要播放该音乐//未选中则应该停止该音乐
      if (musicTmpList.value[i].isClick) {
        toRaw(musicTmpList.value[i]).innerAudioContext.autoplay = true;
        toRaw(musicTmpList.value[i]).innerAudioContext.src =
          mediaUrl + musicTmpList.value[i].sourceFile;
        // musicGroup[i].innerAudioContext.src =
        //   'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
        // console.log(imgUrl + musicGroup[i].sourceFile)
        // console.log('https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3')
        toRaw(musicTmpList.value[i]).innerAudioContext.sessionCategory = "ambient";
        toRaw(musicTmpList.value[i]).innerAudioContext.obeyMuteSwitch = false;
        toRaw(musicTmpList.value[i]).innerAudioContext.play();
        musicStore.saveAudio(id, musicTmpList.value[i].innerAudioContext);
      } else {
        console.log("进入停止方法了");
        musicTmpList.value[i].innerAudioContext.stop();

        musicTmpList.value[i].isClick = false;
        musicStore.saveIsclick(id, false);
      }
    }
  }
};
</script>
<template>
  <view class="group_list_out">
    <view class="group_list">
      <view
        class="group_list_sq"
        v-for="item in musicTmpList"
        :key="item.id"
        style="padding-left: 10rpx; padding-right: 10rpx"
        @click="selectMusic(item.id)"
      >
        <view
          :style="{ background: item.isClick ? '#E5EFF0' : '#ffffff', width: '100%' }"
          class="group_list_sq"
        >
          <view>
            <image
              style="width: 60rpx; height: 60rpx; margin-top: 20rpx"
              :src="imgUrl + item.cover"
            ></image>
          </view>
          <view class="icon_font">{{ item.name }}</view>

          <slider
            :style="{ visibility: item.isClick ? 'visible' : 'hidden' }"
            activeColor="#B4CFD3"
            :value="item.volume * 100"
            style="width: 90%; margin: 4rpx 5%"
            @change="(e: any) => { sliderChange(e, item) }
              "
            min="0"
            max="100"
            block-size="16"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<style>
.group_list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  /* align-items: flex-start; */
  flex-wrap: wrap;
  width: 100%;
}

.group_list_out {
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 30rpx;
  margin-top: 30rpx;
  /* margin-bottom: 660rpx; */
}

.icon_font {
  font-size: 30rpx;
  color: #a5a7a7;
}

.group_list_sq {
  padding-left: 4rpx;
  padding-right: 4rpx;

  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 25%;
  margin: 10rpx 0px;
}
</style>
: any[]: { innerAudioContext: { onStop: (arg0: () => /* __placeholder__ */ /*
__placeholder__ */ void) => void; }; }[]: { innerAudioContext: { stop: () => void; }; }[]
