<template>
    <div class="works">
      <van-nav-bar
        title="我的作品"
        left-arrow
        @click-left="$router.go(-1)"
        @click-right="onClickRight"
      />
      <van-tabs v-model="active" animated>
        <van-tab title="视频">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div class="works-video">
                <div class="works-video__item" v-for="item in list" :key="item.id" :style="{backgroundImage: `url(${item.thumb})`}">
                  <div class="works-video__views">
                    <van-icon class-prefix="fa fa-play-circle-o" size="20" color="#EEF3F9" />
                    <span style="color: #EEF3F9">{{ item.status === 2 ? item.view_num_str : '审核中' }}</span>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="图文">
          <van-pull-refresh v-model="refreshing1" @refresh="onRefresh1">
            <van-list
              v-model="loading1"
              :finished="finished1"
              finished-text="没有更多了"
              @load="onLoad1"
            >
              <van-cell v-for="item in list1" :key="item.id" :title="item.title" :value="item.mtime" is-link>
                <template #label>
                  <div class="van-multi-ellipsis--l3">{{ item.content }}</div>
                </template>
              </van-cell>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
</template>

<script>
export default {
  name: 'works',
  data () {
    return {
      active: 0,
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      list1: [],
      loading1: false,
      finished1: false,
      refreshing1: false,
      page: 0,
      page1: 0
    }
  },
  methods: {
    onLoad () {
      this.$http.video.publishedList({
        page: this.refreshing ? this.page = 1 : this.page += 1
      }).then(({ code, data }) => {
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
        }
        if (code === 200) {
          if (data.total_page === 0 || data.total_page === data.current_page) {
            this.finished = true
          }
          if (data.current_page === 1) {
            this.list = data.list
          } else {
            this.list = this.list.concat(data.list)
          }
        }
        this.loading = false
      })
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    onLoad1 () {
      this.$http.article.publishedList({
        page: this.refreshing1 ? this.page1 = 1 : this.page1 += 1
      }).then(({ code, data }) => {
        if (this.refreshing1) {
          this.list1 = []
          this.refreshing1 = false
        }
        if (code === 200) {
          if (data.total_page === 0 || data.total_page === data.current_page) {
            this.finished1 = true
          }
          if (data.current_page === 1) {
            this.list1 = data.list
          } else {
            this.list1 = this.list1.concat(data.list)
          }
        }
        this.loading1 = false
      })
    },
    onRefresh1 () {
      // 清空列表数据
      this.finished1 = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading1 = true
      this.onLoad1()
    },
    onClickRight () {}
  }
}
</script>

<style lang="scss" scoped>
.works {
  &-video {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2PX 2PX;
    &__item {
      height: 180px;
      background-size: cover;
      background-position: center center;
      position: relative;
      padding: 10px;
      display: flex;
      align-items: flex-end;
    }
    &__views {
      display: flex;
      align-items: center;
      i {
        margin-right: 5px;
      }
    }
  }
}
</style>
