<script setup lang="ts">
// import CustomNavbar from './components/CustomNavbar.vue'
import Calculagraph from './components/Calculagraph.vue'
import GroupList from './components/GroupList.vue'
import MiddleScrollView from './components/MiddleScrollView.vue'

import { imgUrl } from '@/utils/http'

import { onLoad } from '@dcloudio/uni-app'

import { getHomeApi, musicFindApi, musicTypeApi } from '@/services/home'
import { reactive, ref } from 'vue'
import type { MusicFInd, TypeList } from '@/types/home'

const homeApi = async () => {
  const res = await getHomeApi()
  console.log(res)
}

const bgUrl = ` url(${imgUrl}'./light-ting/covers/type-scene.png') no-repeat`

const old = reactive({ scrollTop: 0 })

const scroll = (e: any) => {
  old.scrollTop = e.detail.scrollTop
}
let typeList = ref<TypeList[]>([])
let top = ref('211122')

let firstId = ref<string>('')
//查询音乐的方法s
const musicType = async () => {
  const res = await musicTypeApi()
  top.value = '1111111111111111'
  // typeList = res
  typeList.value = res.data

  if (typeList.value.length > 0) {
    // firstId.value = typeList.value[0].id
    musicFind(typeList.value[0].id)
  }
  // console.log(typeList)
}
const Father = (id: string) => {
  //父组件被调用以后需要调用接口查询方法

  musicFind(id)
}

//调用查询具体音乐分类的方法
let musicList = ref<MusicFInd[]>([])
const musicFind = async (id: string) => {
  const a = await musicFindApi(id)
  musicList.value = a.data
  console.log('musicFindAop')
  console.log(a)
}

//小程序使用onload
onLoad(() => {
  // homeApi();
  musicType()
})
</script>

<template>
  <view class="bg">
    <Calculagraph />
    <view class="tip_font"> 请选择声音，可多种组合 </view>
    <MiddleScrollView :list="typeList" @FatherClick="Father" />
    <GroupList :list="musicList" />
  </view>
  <!-- <CustomNavbar />
  <LaiTingSwiper /> -->
</template>

<style lang="scss">
//
.bg {
  // background: v-bind(bgUrl);
  // background: url(v-bind(bgUrl)) no-repeat;
  // background: url(v-bind(bgUrl)) no-repeat;
  background: rgb(228, 240, 248)
    url(https://test.jue-ming.com:8084/file/show?filePath=./light-ting/covers/bg.png) no-repeat;
  background-size: contain;
  width: 750rpx;
  // height: 100vh;
  padding-top: 20vh;
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-bottom: 40rpx;
}

.tip_font {
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  font-size: 30rpx;
  color: #5aa4ae;
  font-weight: 700;
}

.scroll-Y {
  height: 300rpx;
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}

.scroll-view-item {
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}

.scroll-view-item_H {
  display: inline-block;
  width: 30%;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}
</style>
