<template>
  <div>
    <van-nav-bar title="首页" fixed placeholder safe-area-inset-top />
    <van-swipe class="my-swipe">
      <van-swipe-item v-for="item in banner" :key="item.linkUrl" @click="$router.push({path:'/text',query:{id:item.linkUrl,title:'新闻资讯'}})">
        <img :src="item.coverImgUrl" alt="">
      </van-swipe-item>
    </van-swipe>
    <div class='main'>
      <div class='collectName'>养老资讯</div>
      <van-list v-model="loading" :immediate-check="false" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="videoList">
          <div v-for="(item,index) in info" @click="$router.push({path:'/newsDetails',query:{id:item.id}})" :key="index">
            <div v-if="index == 2" class="info_bg">
              <div class="sub_info_bg" bindtap="bedTap">
                <div class="left">
                  <img src="../../assets/images/homePage/bed.png" style="margin-left: 5px;width: 55px;height:45px;" />
                  <div class="title_bg">
                    <div>家庭养老床位</div>
                    <div class="sub_title">把养老床位搬回家</div>
                  </div>
                </div>
                <div class="right">
                  <div class="right_info">立即了解</div>
                </div>
              </div>

              <div class='videoBg'>
                <!-- 标题 收藏数量 -->
                <div class='videoNameBg'>
                  <div class='videoName'>{{item.title}}</div>
                  <div class='videoCollectBg'>
                    <div class='videoCollectNum'>{{item.publishTime}}</div>
                  </div>
                </div>

                <!-- 图文 或视频的图片 -->
                <div class='coverImageBg' v-if='item.coverImgUrl != null'>
                  <div class="videoImageBg">
                    <van-image class='videoContent' :src='item.coverImgUrl' />
                  </div>

                </div>
              </div>
            </div>
            <div class='videoBg' v-else>
              <!-- 标题 收藏数量 -->
              <div class='videoNameBg'>
                <div class='videoName'>{{item.title}}</div>
                <div class='videoCollectBg'>
                  <div class='videoCollectNum'>{{item.publishTime}}</div>
                </div>
              </div>

              <!-- 图文 或视频的图片 -->
              <div class='coverImageBg' v-if='item.coverImgUrl != null'>
                <div class="videoImageBg">
                  <van-image class='videoContent' :src='item.coverImgUrl' />
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <Tabbar />
  </div>
</template>
<script>
import { getTags, getArticleList } from '../../api/index.js'
import Tabbar from '../../components/Tabbar.vue'
export default {
  components: { Tabbar },
  data() {
    return {
      banner: [],
      info: [],
      loading: false,
      finished: false,
      pageNum: 1,
      pageSize: 10,
    }
  },
  created() {
    this.getList('image')
    this.onLoad()
  },
  methods: {
    async getList(type) {
      var data = {
        orderByColumn: 'publish_time',
        isAsc: 'desc',
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      if (type == 'image') {
        data.articleLabel = 'image'
      } else if (type == 'dynamic') {
        data.columnCode = 'dynamic'
      }
      const res = await getArticleList(data)
      if (res.code == '200') {
        if (type == 'image') {
          this.banner = res.rows
        } else if (type == 'dynamic') {
          if (this.pageNum == 1) {
            this.info = res.rows
          } else {
            this.info = this.info.concat(res.rows)
          }
          if (this.info.length >= res.total) {
            this.finished = true
          }
          this.loading = false
          this.pageNum++
        }
      }
    },
    onLoad() {
      this.getList('dynamic')
    },
    async getTags() {
      const res = await getTags({})
      console.log(res)
    },
  },
}
</script>
<style lang="scss" scoped>
.my-swipe {
  width: 100%;
  height: 300px;
  overflow: hidden;
  margin: 0 auto;
  transform: translateY(0);
  /deep/.van-swipe-item {
    text-align: center;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.main {
  margin-top: 26px;
  width: calc(100% - 60px);
  padding: 0 30px;
  text-align: left;
  .collectName {
    margin-top: 10px;
    color: #1c1c1c;
    font-size: 34px;
    padding-top: 10px;
    box-sizing: border-box;
  }
}
.videoBg {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #f5f5f8;
  .videoNameBg {
    flex: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    .videoName {
      color: #1a1a1a;
      font-size: 30px;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: break-word;
      white-space: normal !important;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .videoCollectNum {
      color: #9f9f9f;
      font-size: 27px;
    }
    .videoCollectBg {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 16px;
      margin-top: 26px;
    }
  }
}
.info_bg {
  width: 100%;
  height: 335px;
}
.sub_info_bg {
  margin: 0 auto;
  height: 44%;
  border-radius: 80px;
  background-color: #ec9c67;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sub_info_bg .left {
  flex: 2;
  display: flex;
}
.title_bg {
  color: white;
  font-size: 34px;
}
.sub_title {
  font-size: 26px;
}
.sub_info_bg .right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.right_info {
  width: 80%;
  line-height: 80px;
  background-color: rgb(238, 238, 146);
  border-radius: 40px;
  font-size: 32px;
  text-align: center;
}
.coverImageBg {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 16px;
}
.videoImageBg {
  position: relative;
  width: 214px;
  height: 154px;
}
</style>