<template>
  <div>
    <co-header fixed title="图文列表">
      <fallback slot="left"></fallback>
    </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-img co-col-xs-3">
            <img src="http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg" alt="">
          </div>
          <div class="co-view-cell-content co-col-xs-9">
            <p class="title co-ellipsis" v-text="'标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题' + i"></p>
            <p v-text="'内容' + i"></p>
            <p v-text="'内容' + i"></p>
          </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: {
      loadAction({data, resolve}) {
        getData(data.p * data.s, data => {
          this.list = resolve(data);
        });
      }
    }
  };
</script>

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