<template>
  <div class='icon'>
    <BKList :title="list.title" :list="list.list"></BKList>
    <BKList 
      :title="listLoadMore.title" 
      :list="listLoadMore.list" 
      :loading="listLoadMore.loading"
      :height="listLoadMore.height"
      :loadMore="loadMore"
      :showNoMore="listLoadMore.showNoMore"
    ></BKList>
  </div>
</template>
<script>
import BKList from '@/components/BKList'
export default {
  components: {
    BKList
  },
  data () {
    return {
      list: {
        title: '普通列表',
        list: [
          {
            title: '昼夜同在'
          },
          {
            title: '一个人'
          },
          {
            title: '与我常在',
            desc: '这是一条描述'
          },
          {
            title: '除非你是我',
            icon: 'arrow-right'
          }
        ]
      },
      listLoadMore: {
        title: '异步加载数据',
        loading: false,
        height: 'height: 150px',
        list: [
          {
            title: '从他该知道你的快乐与不幸'
          },
          {
            title: '透视'
          },
          {
            title: '纵使意难平',
            icon: 'arrow-right'
          }
        ],
        showNoMore: ''
      },
      loadMore: this.loadMore,
      noMore: false
    }
  },
  mounted () {
    wx.setNavigationBarTitle({
      title: 'BKList 列表'
    })
  },
  methods: {
    loadMore () {
      if (this.listLoadMore.loading) {
        return
      }
      if (this.noMore) {
        this.listLoadMore = Object.assign(this.listLoadMore, {showNoMore: '暂无更多数据'})
        return
      }
      this.listLoadMore = Object.assign(this.listLoadMore, {loading: true})
      setTimeout(() => {
        this.listLoadMore = Object.assign(this.listLoadMore, {
          loading: false,
          list: this.listLoadMore.list.concat([
            {
              title: '快乐与气氛'
            },
            {
              title: '高低牵引'
            },
            {
              title: '融化心境'
            }
          ])
        })
        this.noMore = true
      }, 2000)
    }
  }
}
</script>
<style scoped>
</style>
