<template>
    <div class="ht-base-single-row-scroll-demo">
        <div
                class="demo-infinite-container"
                v-infinite-scroll="handleInfiniteOnLoad"
                :infinite-scroll-disabled="busy"
                :infinite-scroll-distance="10"
        >
            <ht-base-list :loading="loading">
                <ht-base-list-item v-for="(item,index) of data" :key="index">
                    <ht-base-list-item-meta :avatar="item.avatar" :title="item.title" :description="item.content"/>
                    <div class="demo-supplement">补充内容</div>
                </ht-base-list-item>
            </ht-base-list>
        </div>
    </div>
</template>

<script>

      export default {
        name: 'HtBaseSingleRowScrollDemo',
          data () {
              return {
                  data: [
                      {
                          content: '列表详情内容展示区域',
                          title:"标题01",
                          avatar: 'http://39.106.250.14:8082/base-components/static/SuCo_user.svg',
                      },
                      {
                          content: '列表详情内容展示区域',
                          title:"标题02",
                          avatar: 'http://39.106.250.14:8082/base-components/static/SuCo_user.svg',
                      },
                      {
                          content: '列表详情内容展示区域',
                          title:"标题03",
                          avatar: 'http://39.106.250.14:8082/base-components/static/SuCo_user.svg',
                      },
                      {
                          content: '列表详情内容展示区域',
                          title:"标题04",
                          avatar: 'http://39.106.250.14:8082/base-components/static/SuCo_user.svg',
                      },
                      {
                          content: '列表详情内容展示区域',
                          title:"标题05",
                          avatar: 'http://39.106.250.14:8082/base-components/static/SuCo_user.svg',
                      },
                      {
                          content: '列表详情内容展示区域',
                          title:"标题06",
                          avatar: 'http://39.106.250.14:8082/base-components/static/SuCo_user.svg',
                      },
                      {
                          content: '列表详情内容展示区域',
                          title:"标题07",
                          avatar: 'http://39.106.250.14:8082/base-components/static/SuCo_user.svg',
                      },
                      {
                          content: '列表详情内容展示区域',
                          title:"标题08",
                          avatar: 'http://39.106.250.14:8082/base-components/static/SuCo_user.svg',
                      },
                  ],
                  loading: false,
                  busy: false,
              }
          },
          methods: {
              handleInfiniteOnLoad  () {
                  const data = this.data
                  this.loading = true
                  if (data.length > 14) {
                      this.$HtBaseMessage.warning('列表没有更多数据')
                      this.busy = true
                      this.loading = false
                      return
                  }
                  this.data = data.concat([
                      {
                          content: '列表详情内容展示区域',
                          title:"标题09",
                          avatar: 'http://39.106.250.14:8082/base-components/static/SuCo_user.svg',
                      },
                      {
                          content: '列表详情内容展示区域',
                          title:"标题10",
                          avatar: 'http://39.106.250.14:8082/base-components/static/SuCo_user.svg',
                      },
                      {
                          content: '列表详情内容展示区域',
                          title:"标题11",
                          avatar: 'http://39.106.250.14:8082/base-components/static/SuCo_user.svg',
                      },
                      {
                          content: '列表详情内容展示区域',
                          title:"标题12",
                          avatar: 'http://39.106.250.14:8082/base-components/static/SuCo_user.svg',
                      },
                  ]);
                  this.loading = false
              },
          },
      }
</script>
<style type="less">
    .ht-base-single-row-scroll-demo {
        .demo-infinite-container {
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            overflow: auto;
            padding: 8px 24px;
            height: 300px;
        }
        .demo-supplement{
            display: flex;
            align-items:center;
            justify-content:center;
        }
    }
</style>

