<template>
  <div>
    <form action="/">
      <van-search
        v-model="keyword"
        show-action
        placeholder="请输入搜索内容"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div class="list-bg" v-if="list.length">
      <div class="list-wrap">
        <h4>视频直播</h4>
        <VideoItem v-for="(item, index) in list" :key="index" :item="item" />
      </div>
    </div>
    <!-- <div class="list-bg pt20">
      <div class="list-wrap">
        <h4>服务包</h4>
        <ServerItem />
      </div>
    </div> -->
    <Empty text="暂无相关搜索～" v-if="!list.length" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import VideoItem from "@/components/VideoItem.vue";
// import ServerItem from "@/components/ServerItem.vue";
import Empty from "@/components/Empty.vue";
import { useRouter } from "vue-router";
import { queryLivePlan } from "@/api/index";
const router = useRouter();

const onCancel = () => {
  router.go(-1);
};

const keyword = ref("");
const list = ref([]);
const onSearch = async () => {
  const ret = await queryLivePlan({
    type: 2,
    size: 100000000,
    current: 1,
    keyword: keyword.value,
  });
  if (ret.code === 0 && ret.data) {
    list.value = ret.data.list;
  }
};
</script>
<style scoped lang="scss">
::v-deep .van-search {
  background: #f5f6f7;
  .van-search__content {
    background: #fff;
    border-radius: 34px;
  }
}
.pt20 {
  padding-top: 20px;
}
.list-bg {
  background: #f5f6f7;
}
.list-wrap {
  padding: 48px 32px 0 40px;
  background: #fff;
  border-radius: 16px 16px 0 0;
  h4 {
    color: #333333;
    text-align: justify;
    font-family: "PingFang SC";
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
  }
}
</style>
