<template>
  <div ref="list" class="cust-list">
    <slot name="header">
      <el-input
        v-model="queryParams.keyword"
        style="margin-bottom: 10px;"
        placeholder="搜索"
        clearable
        @keyup.enter.native="handleSearch"
      >
        <el-button slot="append" icon="el-icon-search" @click="handleSearch" />
      </el-input>
    </slot>
    <el-table
      ref="table"
      v-loading="loading"
      :data="list"
      :height="tableHeight"
      :highlight-current-row="true"
      @selection-change="handleSelectionChange"
      @select="handleSelect"
      @select-all="handleSelectAll"
      @row-click="handleRowClick"
    >
      <el-table-column type="selection" width="30" align="center" />
      <el-table-column :label="`页${queryParams.pageNum}`" type="index" width="34" align="center" />
      <slot />
    </el-table>

    <div class="cust-pagination">
      <slot name="pagination">
        <el-pagination
          :current-page="queryParams.pageNum"
          :page-sizes="pageSizes"
          :page-size="queryParams.pageSize"
          layout="sizes, prev, total, next"
          :total="total"
          @size-change="handlePageSizeChange"
          @current-change="handleCurrentPageChange"
        />
      </slot>
    </div>
  </div>
</template>

<script>
import AutoTableHeight from '@/views/tm/components/AutoTableHeight'

export default {
  name: 'SimpleList',
  mixins: [AutoTableHeight],
  props: {
    queryMethod: {
      type: Function,
      default: null
    },
    // 查询参数
    params: {
      type: Object,
      default: () => ({})
    },
    pageSize: {
      type: Number,
      default: 15
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    // 初始可以加载的时机, 改变的时候没有数据会加载
    firstLoadAble: {
      type: Boolean,
      default: true,
    },
    // 默认主键
    propKey: {
      type: String,
      default: 'id'
    },
    // 副主键
    subKey: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      selection: [],
      // 总条数
      total: 0,
      // 客户信息表格数据
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        keyword: '',
      },
    }
  },
  computed: {
    pageSizes() {
      return [this.pageSize, this.pageSize * 2, this.pageSize * 4]
    }
  },
  watch: {
    params: {
      handler(val) {
        this.queryParams = {
          ...this.queryParams,
          ...val
        }
      },
      deep: true,
      immediate: true
    },
    pageSize: {
      handler(val) {
        this.queryParams.pageSize = val || 15
      },
      immediate: true
    },
    firstLoadAble: {
      handler(val) {
        if (val && this.list.length === 0) {
          this.$nextTick(() => {
            this.getList();
          })
        }
      },
      immediate: true,
    }
  },
  methods: {
    /** 查询列表 */
    getList() {
      if (!this.queryMethod) {
        return
      }
      this.loading = true
      this.queryMethod(this.queryParams).then(response => {
        this.list = response.rows || []
        this.total = response.total
        this.loading = false
      }).catch(e => {
        this.loading = false
      })
    },
    clearSelection() {
      this.$refs.table.clearSelection();
    },
    // 点击搜索
    handleSearch() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 页码大小改变
    handlePageSizeChange(val) {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页码改变
    handleCurrentPageChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selection = selection || [];
      
      if (this.multiple) {
        this.$emit("change", this.selection);
      }
    },
    // 单选点击
    handleSelect(selection, row) {
      if (!this.multiple) {
        selection.forEach(val => {
          const subCheck = this.subKey ? val[this.subKey] === row[this.subKey] : true;
          if (val[this.propKey] !== row[this.propKey] || !subCheck) {
            this.$nextTick(() => {
              this.$refs.table.toggleRowSelection(val, false);
            });
          }
        });
        this.$nextTick(() => {
          this.$emit("change", this.selection);
        });
      }
    },
    // 全选点击
    handleSelectAll() {
      if (!this.multiple) {
        // 单选清空数据
        this.$refs.table.clearSelection();
        this.$emit("change", []);
      }
    },
    // 点击行
    handleRowClick(row) {
      const index = this.selection.findIndex(val => {
        const subCheck = this.subKey ? val[this.subKey] === row[this.subKey] : true;
        return val[this.propKey] === row[this.propKey] && subCheck;
      });
      if (this.multiple) {
        // 多选
        this.$refs.table.toggleRowSelection(row, index < 0);
        return;
      }
      // 单选
      this.$refs.table.clearSelection();
      if (index < 0) {
        this.$refs.table.toggleRowSelection(row, true);
      }
      this.$nextTick(() => {
        this.$emit("change", this.selection);
      });
    },
  }
}
</script>
<style scoped lang="scss">
.cust-list {
  // box-shadow: 2px 0 2px rgba($color: #666666, $alpha: 1);
  height: 100%;
  ::v-deep .el-table__cell {
      padding: 0px !important;
      .cell {
        padding: 10px 2px !important;
        line-height: 18px;
      }
      .el-checkbox__label {
        padding-left: 4px;
      }
    }

}

.cust-pagination {
  margin-top: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
