<template>
    <div class="ht-base-single-row-more-demo">
        <ht-base-list  class="demo-list" item-layout="vertical">
            <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"/>
                <template slot="action">
                    <li class="demo-list-action-item">补充内容</li>
                </template>
                <div slot="extra" class="demo-list-extra">
                    <li>
                        <a href="" class="demo-list-extra-item" style="border-right: 1px solid;">编辑</a>
                    </li>
                    <li>
                        <a href=""  class="demo-list-extra-item">更多</a>
                    </li>
                </div>
            </ht-base-list-item>
            <div v-if="showLoadingMore" :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
                <ht-base-spin v-if="loadingMore" fix class="demo-list-spin">
                    <img class="demo-spin-img" style="width: 20px;margin-right: 10px;" src="http://39.106.250.14:8082/base-components/static/LiRa_refresh1.svg" alt=""/>
                </ht-base-spin>
                <ht-base-button v-else @click="onLoadMore">加载更多</ht-base-button>
            </div>
        </ht-base-list>
    </div>
</template>

<script>
  export default {
    name: 'HtBaseSingleRowMoreDemo',
      data () {
          return {
              loadingMore: false,
              showLoadingMore: true,
              timer:null,
              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',
                  },
              ],
          }
      },
      methods: {
          onLoadMore () {
              this.loadingMore = true;
              this.timer = setTimeout(()=>{
                  this.data = this.data.concat([
                      {
                          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',
                      },
                  ]);
                  this.loadingMore = false;
              },1500);

              this.$nextTick(() => {
                  window.dispatchEvent(new Event('resize'))
              })
          },
      },
  }
</script>
<style type="less">
    .ht-base-single-row-more-demo {
        @-webkit-keyframes spin {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }
        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        .demo-list,.ivu-list-vertical {
            min-height: 350px;
                .ivu-list-item-main{
                    display: flex;
                }
                .ivu-list-item-extra{
                    display: flex;
                    line-height: 54px;
                }
            .demo-list-action-item{
                padding: 0;
            }
            .demo-list-extra{
                font-size: 12px;
                color: #228EF8;
                display: flex;
                .demo-list-extra-item{
                    padding: 0 10px;
                }

            }

        }
        .demo-supplement{
            display: flex;
            align-items:center;
            justify-content:center;
        }
        .demo-list-spin{
            height: inherit;
            position: relative;
            bottom: 0;
        }
        .demo-spin-img {
            width: 30px;
            -webkit-animation: spin 1s linear 1s 5 alternate;
            animation: spin 1s linear infinite;
        }
    }
</style>

