<template>
  <div>
    <co-header fixed title="多行列表">
      <fallback slot="left"></fallback>
      <a slot="right" @click="toSearch()">
          <co-button class="xs-icon-search"></co-button>
      </a>
    </co-header>
    <div class="co-wrapper">
      <cus-loading :load-method="loadAction" :list="list">
        <div class="co-view-cell co-line-down" v-for="(item, i) in list" :class="{'co-line-up': i == 0}">
          <div class="co-view-cell-content co-col-xs-10">
            <p class="title co-ellipsis" v-text="'测试数据' + i"></p>
            <p v-text="'内容' + i"></p>
            <p v-text="'内容' + i"></p>
          </div>
          <div class="co-view-cell-status co-col-xs-2">
            <span>已完成</span>
          </div>
          <i class="co-cell-allow-right"></i>
        </div>
      </cus-loading>
    </div>

  </div>
</template>

<script type="es6">

  var getData = (index = 0, callback) => {
    let arr = [];
    for (let i = 1; i <= 10; i++) arr.push(index + i);
    // 模拟数据没有更多数据
    if (index > 28) arr.length = 2;
    // 模拟网络请求，延时回调
    setTimeout(t => callback(arr), 1500);
  };

  export default {
    data() {
      return {
        list: []
      };
    },

    created() {
      for (let i = 1; i <= 20; i++) {
        this.list.push(i);
      }
    },

    methods: {
      toSearch() {
        this.$router.push('/search');
      },
      loadAction({data, resolve}) {
        getData(data.p * data.s, data => {
          this.list = resolve(data);
        });
      }
    }
  };
</script>

<style lang="less">
</style>
