<route lang="json5">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '%tabbar.music%',
  },
}
</route>
<script setup lang="ts"></script>
<template>
  <view>
    <view class="music-search">
      <wd-search @change="searchBtn" v-model="searchValue" placeholder-left hide-cancel />
    </view>
    <view class="bg">
      <wd-tabs>
        <wd-tab title="综合推荐">
          <view class="music-recommend">
            <recommend :type="heartRed" />
          </view>
        </wd-tab>
        <wd-tab title="我的收藏">
          <view class="music-recommend">
            <recommend :type="heartGrey" />
          </view>
        </wd-tab>
      </wd-tabs>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import recommend from './component/musicRecommend.vue'
  const searchValue = ref('')
  const heartRed = ref(0) // 全部
  const heartGrey = ref(1) // 我的收藏

  const searchBtn = () => {
    console.log(searchValue.value)
  }
</script>
<style scoped lang="scss">
  .music-search {
    display: flex;
    flex: 1 0 0;
    gap: 20rpx;
    align-items: center;
    padding: 20rpx 0px;
  }
  .wd-search {
    width: 100%;
  }
  .music-recommend {
    padding: 32rpx;
    overflow: auto;
  }
</style>
