<template>
  <div class='bk-list'>
    <div v-if='title' class='list-title'>
      {{title}}
    </div>
    <scroll-view
      scroll-y 
      :style="height"
      @scrolltolower="this.loadMore"
      >
      <div v-for="(item, index) in list" :key="index" class='list-item' @click='item.callback ? item.callback(item) : () => {}'>
        <div class='item-title'>
          {{item.title}}
        </div>
        <div class='item-desc-wrap' v-if='item.desc || item.icon'>
           <div class='item-desc' v-if='item.desc'>
              {{item.desc}}
            </div>
            <div class='item-icon' v-if='item.icon'>
              <BKIcon :name="icon"></BKIcon>
            </div>
          </div>
      </div>
    </scroll-view>
    <div v-if='showNoMore' class='show-no-more'>
      {{showNoMore}}
    </div>
    <div v-if='loading' class='show-loading'>
      <BKLoading :name="loader" :tips='loadingTips'></BKLoading>
    </div>
  </div>
</template>
<script>

import BKIcon from './BKIcon'
import BKLoading from './BKLoading'

/** 列表组件
 *
 *
*/
export default {
  props: {
    title: ['String'],
    list: ['Array'],
    showNoMore: ['String'],
    loadMore: {
      type: 'Function',
      default: () => {}
    },
    loading: ['Boolean'],
    height: ['String']
  },
  components: {
    BKIcon,
    BKLoading
  },
  data: () => {
    return {
      icon: 'arrow-right',
      loader: 'loader-09'
    }
  },
  mounted () {
    console.log(this.list)
  },
  methods: {}
}
</script>

<style scoped>
.bk-list {
  margin-top: 20px;
  padding: 20px 40px;
}
.bk-list .list-title {
  font-size: 28px;
  color: #ccc;
  height: 40px;
}
.bk-list .list-item {
  min-height: 128px;
  display: flex;
  padding-top: 70px;
  padding-bottom: 26px;
  box-sizing: border-box;
  border-bottom: solid 1px #EBEBEB;
}
.bk-list .list-item .item-title {
  font-size: 32px;
  color: #222222;
  font-weight: 600;
}
.bk-list .list-item  .item-desc-wrap {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
}
.bk-list .list-item .item-desc {
  font-size: 30px;
  color: #999999;
  text-align: right;
  flex: 1;
}
.bk-list .list-item .item-icon {
  width: 32px;
  height: 32px;
  padding-top: 5px;
  margin-left: 15px;
}
.bk-list .show-no-more {
  text-align: center;
  margin-top: 20px;
  font-size: 24px;
  color: #ccc;
}
.bk-list .show-loading {
  justify-content: center;
  display: flex;
  align-items: center;
  height: 40px;
}
</style>

