<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { imgUrl } from "@/utils/http";
import { watch, watchEffect } from "vue";
import type { TypeList } from "@/types/home";
// const prop = defineProps({
//   list: [],
// })
// const props = defineProps<{ list: TypeList[] }>()

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

const emit = defineEmits(["FatherClick"]);

const selectType = (id: string) => {
  emit("FatherClick", id);
};
// const prop=defineProps({
//   list:TypeList[]
// })
onLoad(() => {
  // console.log(prop)
});

watchEffect(() => {
  // eslint-disable-next-line no-undef
  console.log("测试监听");
  console.log(prop.list);
});

// watch(prop, (newValue, OldValue, onCleanup) => {
//   console.log("数据变化了", `新值是：${newValue}`, `旧值是${OldValue}`);
// });
// watch(prop.typeList, (newValue, oldValue) => {
//   console.log('watch 已触发', newValue)
// })
//子组件调用父组件方法//传输参数查询音乐列表方法
</script>

<template>
  <view>
    <!-- {{ prop.typeList }}
    {{ prop.top }} -->
    <!-- {{ imgUrl + prop.typeList[0].cover }} -->
    <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
      <view
        id="demo1"
        class="scroll-view-item_H uni-bg-red middle_sq"
        v-for="item in list"
        :key="item.id"
      >
        <view>
          <!-- {{ item.cover }} -->
        </view>
        <image
          @click="selectType(item.id)"
          class="middle_sq_image"
          :src="imgUrl + item.cover"
        />
      </view>
    </scroll-view>
  </view>
</template>

<style>
.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;
}

.middle_sq {
  width: 260rpx;
  height: 300rpx;
  margin-right: 20rpx;
}

.middle_sq_image {
  border-radius: 40rpx;
}
</style>
