<template>
  <scroll-view style="height: 100%" scroll-y refresher-enabled="true" refresher-background="none" :refresher-threshold="100">
    <view class="empty-container">
      <u-empty mode="search" icon="/static/images/empty.svg" width="240" />
      <view class="justify-center">
        <navigator url="/pages/feedback/feedback?type=2" class="feedback-button">通过反馈告诉小编</navigator>
      </view>
      <view v-if="list" class="empty-topic">
        <view class="title-box justify-between">
          <text>推荐合集</text>
          <view class="more" @click="toChannel">
            更多>
          </view>
        </view>
        <topic :list="list" />
      </view>
    </view>
  </scroll-view>
</template>

<script>
import topic from '@/components/vod-topic.vue'
import { app } from '@/utils/api'

export default {
  components: {
    topic
  },
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.hotTopic()
  },
  methods: {
    hotTopic() {
      app.hotTopic().then(res => {
        this.list = res.data
      })
    },
    toChannel() {
      getApp().globalData.switchChannel.id = 0
      uni.switchTab({
      	url: '/pages/home/channel'
      })
    }
  }
}
</script>

<style lang="scss">
.empty-container {
  padding: 10px 0 15px;
  .u-empty {
    padding-top: 60px;
  }
  .feedback-button {
    margin-top: 25px;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background-color: $uni-color-primary;
    border-radius: 20px;
  }
  .empty-topic {
    margin-top: 40px;
    .title-box {
      padding: 0 15px;
      align-items: center;
      uni-text {
        font-size: 18px;
        font-weight: 700;
        color: #fff;
      }
      .more {
        font-size: 12px;
        color: #a1a0a4;
      }
    }
  }
}
</style>