<template>
    <van-list
            class="eye-list"
            v-model="loading"
            :finishedText="finishedText"
            :immediateCheck="immediateCheck"
            :loadingText="loadingText"
            :offset="offset"
            :finished="isFinished"
            @load="onLoad"
    >

        <template v-if="headers.length">
            <e-renderer key='header-data'
                        class="eye-list__header"
                        :data="headers"
                        :cols="headers.length">
                <template slot-scope="{ row, index}">
                    <span>{{ row }}</span>
                </template>
            </e-renderer>
        </template>

        <template v-if="list.length">
            <e-renderer key='list-data'
                        class="eye-list__body"
                        :data="list"
                        :cols="cols"
                        :item-class="itemClass">
                <template slot-scope="{row,index}">
                    <slot :row="row" :index="index"></slot>
                </template>
            </e-renderer>
        </template>
        <template v-else-if="!loading && isFinished">
            <div key="list-empty"
                 class="eye-list__empty">
                <slot name="empty"></slot>
            </div>
        </template>
    </van-list>
</template>

<script>

  import { Core } from 'eye-core';

  export default {

    name: 'EList',

    props: {
        itemClass: String,
        finishedText: String,
        immediateCheck: {
            type: Boolean,
            default: true
        },
        headers: {
            type: Array,
            default: function() {
                return [];
            }
        },
        loadingText: {
            type: String,
            default: '正在玩命加载...'
        },
        offset: {
            type: Number,
            default: 10
        },
        pageSize: {
            type: Number,
            default: 10
        },
        pageNum: {
            type: Number,
            default: 1
        },
        pageCountField: {
            type: String,
            default: 'pages'
        },
        rowCountField: {
            type: String,
            default: 'count'
        },
        dataSourceField: {
            type: String,
            default: 'rows'
        },
        refreshFunc: {
            type: Function,
            required: true
        },
        params: {
            type: Object,
            default: n => {}
        },
        cols: {
            type: Number,
            default: 1
        }
    },

    watch: {
      'params'(newValue,oldValue) {
          newValue && this.find(newValue);
      },
    },

    computed: {
      // 格式化数据源
      list: function() {
        this.records = this.records.concat(this.dataSource);
        return this.records;
      }

    },

    data() {
      return {
        records: [],
        dataSource: [],
        loading: false,
        baseParams: this.params,
        pageParams: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          pageCount: 0,
          rowCount: 0
        },
        isFinished: false,
        resultField: {
          dataSource: this.dataSourceField,
          pageCount: this.pageCountField,
          rowCount: this.rowCountField
        }
      };
    },
    methods: {
      /**
       * 清空列表数据
       */
      resetData() {
        this.records = [];
        this.dataSource = [];
        this.pageParams = {
          pageNum: 1,
          pageSize: this.pageSize,
          pageCount: 0,
          rowCount: 0
        }
      },

      find(params) {
        this.resetData();
        this.baseParams = params;
        this.onLoad();
      },

      _fill(res) {
        res = Core.array.dataSourceFormatter(res, this.resultField, this.pageSize);
        this.pageParams = Object.assign(this.pageParams, res.pageParams);
        this.dataSource = res.dataSource || [];
      },

      _isFinished() {
        if (!this.pageParams.rowCount) {
          this.isFinished = true;
        }

        if (!this.isFinished && this.pageParams.pageCount && !this.dataSource.length) {
          this.isFinished = true;
        }

        if (!this.isFinished && !this.pageParams.pageCount) {
          this.isFinished = false;
        }

        if (!this.isFinished) {
          this.isFinished = this.pageParams.pageCount <= this.pageParams.pageNum;
        }
      },

      onLoad() {
        if (this.pageParams.pageCount) {
          this.pageParams.pageNum++;
        }

        let params = Object.assign({}, this.baseParams || {});
        let promise = this.refreshFunc(params, this.pageParams);
        if (promise instanceof Promise) {
          promise.then((res) => {
            this._fill(res);
            this.$nextTick(() => {
              this.loading = false;
              this._isFinished();
            });
          }).catch(error => {
            this.loading = false;
            this.isFinished = true;
          });
        }
        else {
            this.loading = false;
            this.isFinished = true;
        }

      }
    }

  };
</script>


