<template>
  <div class="el-tableList">
   <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    style="width: 100%">
    <el-table-column v-if="showSelection" type="selection" width="55" />
    <el-table-column
        v-for="(item, index) in tableProps" :key="index"
        :prop="item.prop"
        :label="item.label"
      >
    </el-table-column>
    <el-table-column label="操作" width="100" v-if="showOperation">                        
      <template slot-scope="scope">
        <slot :row="scope.row"></slot>
      </template>
    </el-table-column>
   </el-table>
    <div v-if="showPagination" class="xy-pagination">
        <el-pagination
            :hide-on-single-page="true"
            :layout="layout"
            :current-page="config.pageNum"
            :page-sizes="config.sizes"
            :page-size="config.pageSize"
            :total="config.total"
            @size-change="handleSizeChange"
            @current-change="handlePageChange" />
    </div>
  </div>
</template>

<script>
import ElTable from 'element-ui/packages/table';
import ElTableColumn from 'element-ui/packages/table-column';
import ElPagination from 'element-ui/packages/pagination';
export default {
  name: 'ElTableList',
  components: {
    ElTable,
    ElTableColumn,
    ElPagination
  },
  props: {
    tableProps: {
      type: Array,
      default: () => [],
      require: true
    },
    initRun: {
      type: Boolean,
      default: true
    },

    action: {
      required: false
    },

    params: {
      type: Object
    },

    // 监听参数变化
    watchParamsChange: {
      type: Boolean,
      default: false
    },

    // // 是否记录参数到url中
    // rememberParams: {
    //   type: Boolean,
    //   default: false
    // },
    // 样式
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    pageSize: {
      type: Number,
      default: 10
    },
    showOperation: { // 是否显示操作区域
      type: Boolean,
      default: false
    },
    showSelection: { // 是否显示批量按钮
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

      showPagination: true,

      config: {
        pageNum: 1, // 当前页码
        sizes: [5, 10, 20, 30], // 每页条目数选项
        pageSize: this.pageSize || 10, // 每页条目数
        total: 0 // 查询记录总数
      },

      timer: null,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    };
  },
  watch: {
    params: {
      handler: function() {
        if (this.watchParamsChange) {
          this.handlePageChange();
        }
      },
      deep: true
    }
  },
  mounted() {
    if (this.initRun) {
      let urlParams = this.$route.query;
      if (urlParams && this.params) {
        // eslint-disable-next-line no-restricted-syntax
        for (let key in urlParams) {
          // eslint-disable-next-line no-undefined
          if (this.params[key] !== undefined) {
            this.params[key] = urlParams[key];
          }
        }
      }
      this.handlePageChange(this.config.pageNum);
    }
  },
  methods: {
    fetchData() {
      // 请求参数
      let requestParams = {
        pageNum: this.config.pageNum,
        pageSize: this.config.pageSize
      };

      // 合并请求参数
      if (this.params) {
        Object.assign(requestParams, this.params);
      }

      try {
        this.action(requestParams).then(res => {
          if (res.code === 1) {
            let resData = res.data || {};
            let total = resData.total;

            this.config.total = total;

            // if (total > this.config.pageSize) {
            //     this.showPagination = true;
            // } else {
            //     this.showPagination = false;
            // }

            let listData = resData.list;

            if (listData && listData.length > 0) {
              this.tableData = listData;
              this.$emit('onpagixload', {
                config: this.config,
                data: listData
              });

              return;
            } else {
              this.tableData = [];
            }
          } else {
            this.tableData = [];
            this.$message({
              type: 'error',
              message: res.msg
            });
          }

          this.config.total = 0;

          this.$emit('onpagixload', {
            config: this.config,
            data: null
          });

          clearTimeout(this.timer);
        }).catch(error => {
          this.tableData = [];
          this.$message({
            type: 'error',
            message: error
          });
          this.$emit('onpagixload', {
            config: this.config,
            data: null
          });

          clearTimeout(this.timer);
        });
      } catch (e) {
        this.$message({
          type: 'error',
          message: e
        });

        this.config.total = 1642;
        this.$emit('onpagixload', {
          config: this.config,
          data: null
        });

        this.timer && clearTimeout(this.timer);
        console.log(e);
      }
    },

    // 切换分页展示条目数
    handleSizeChange(pageSize) {
      // eslint-disable-next-line no-mixed-operators
      let pageNum = Math.floor((this.config.pageNum - 1) * this.config.pageSize / pageSize) + 1;

      this.config.pageNum = pageNum;
      this.config.pageSize = pageSize;

      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.fetchData();
      }, 0);
    },

    // 切换页码
    handlePageChange(pageNum) {
      if (!pageNum) {
        pageNum = 1;
      }

      this.config.pageNum = pageNum;

      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.fetchData();
      }, 0);
    },
    // 批量操作返回数据
    handleSelectionChange(val) {
      this.$emit('update:selectionList', val);
    }
  }
};
</script>
