<route lang="json5">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '%tabbar.music%',
  },
}
</route>
<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;
  }
  .wd-search {
    width: 100%;
  }
  .music-recommend {
    height: calc(100vh - 320rpx);
    overflow: auto;
    background: #f2f2f2;
  }
  ::v-deep .wd-search__block {
    border-radius: 50px;
  }
  ::v-deep .wd-search__input {
    height: 42px;
  }
  ::v-deep .wd-tabs__line {
    background: #f88842;
  }
  ::v-deep .is-active {
    color: #f88842;
  }
</style>
