<template>
  <div id="study" class="app">
    <!-- <van-sticky :offset-top="0">
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </van-sticky> -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        @click="() => toUrlDetail(item.id)"
        v-for="item in list"
        :key="item.id + Math.random()"
      >
        <div class="bannerItem">
          <van-image :src="item.imgUrl" />
          <div class="van-ellipsis title" v-text="item.title"></div>
        </div>
      </van-swipe-item>

      <template #indicator><div></div> </template>
    </van-swipe>
    <news-list :comId="-1" />
  </div>
</template>

<script>
import NewsList from "../../components/NewsList/NewsList";
import { banner } from "@/api/article/article.js";
// import { Search as vanSearch, Sticky as vanSticky } from "vant";
import {
  Swipe as vanSwipe,
  SwipeItem as vanSwipeItem,
  Image as vanImage
} from "vant";
import "vant/lib/swipe/style";
import "vant/lib/image/style";
import "vant/lib/swipe-item/style";
export default {
  name: "app",
  data: function() {
    return {
      value: "",
      list: []
    };
  },
  methods: {
    toUrlDetail(id) {
      if (!id) return;
      window.parent
        ? (window.parent.location.href = "/newsDetail.html?id=" + id)
        : (location.href = "/newsDetail.html?id=" + id);
    }
  },
  mounted() {
    banner().then(res => {
      this.list = res || [];
    });
  },
  beforeDestroy: function() {},
  components: {
    NewsList,
    vanSwipe,
    vanSwipeItem,
    vanImage
    // vanSearch,
    // vanSticky
  }
};
</script>
<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  .bannerItem {
    position: relative;
    .van-image {
      width: 100%;
      height: 100%;
    }
    .title {
      position: absolute;
      bottom: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      line-height: 30px;
      color: #fff;
      font-size: 14px;
    }
  }
}
</style>
