<template>
    <div class="page-index">
      <co-header title="标题">
        <fallback slot="left"></fallback>
        <router-link :to="{ name: '', params: {} }" slot="right">菜单</router-link>
      </co-header>
      <div class="co-wrapper co-scroller">
        <cus-loading :load-method="loadAction" :list="list">
          <div class="co-view-cell co-line-down"
            v-for="(item, i) in list">
            <div class="co-view-cell-img co-col-xs-3">
              <cus-img :src="mergeHost(item.image)" alt=""></cus-img>
            </div>
            <div class="co-view-cell-content co-col-xs-9">
              <p class="title co-ellipsis" v-text="item.userName"></p>
              <p v-text="item.content || '内容' + i"></p>
              <p v-text="item.publishDate"></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">
  import {mapActions} from 'vuex';

  const NAMESPACE = 'index';
  export default{
    name: 'index',
    data() {
      return {
        list: []
      };
    },
    methods: {
      ...mapActions(NAMESPACE, ['getList']),
      /**
      * 动态数据加载
      * @param {int} data.p 翻页参数，页码
      * @param {int} data.s 翻页参数，每页条数
      * @param {Function} resolve 根据用户上下拉操作自动解析并返回结果
      */
      loadAction({data, resolve}) {
        this.getList({
          data: data,
          success: data => {
            this.list = resolve(data);
          }
        });
      },
      mergeHost(path) {
        return config.mxm + path;
      }
    }
  };
</script>

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