<template>
  <div>
    <div class="el-manager-ui__tableInfo el-manager-ui__border">
      <el-row class="el-manager-ui__tableBox">
        <div class="el-manager-ui__tableBox--tableTabs" v-if="showTableTools">
          <div v-if="multipleSelection.length !== 0" class="header">
            <div>
              <span class="tableTabs__tools"
                >已选中<span class="tableTabs__tools--number">{{
                  multipleSelection.length
                }}</span
                >项</span
              >
              <el-divider direction="vertical"></el-divider>
              <slot name="tableTools"> </slot>
            </div>
            <div>
              <el-button
                @click="clearMultipleSelection"
                type="text"
                icon="el-icon-close"
              ></el-button>
            </div>
          </div>
          <div v-else>
            <el-button type="text" icon="el-icon-s-grid"></el-button>
            <span v-if="title" class="el-manager-ui__tableBox--title">{{title}}</span>
          </div>
        </div>
        <div class="el-manager-ui__tableBox--tableContent">
          <el-table
            ref="table"
            :data="tableData"
            stripe
            v-bind="$attrs"
            v-on="$listeners"
            :header-cell-style="{ fontSize: '13px' }"
            :height="tableMaxHeight"
          >
            <template v-for="(item, index) in columnItemsDisp">
              <template v-if="item.render">
                <el-table-column
                  :key="item.prop || index"
                  :prop="item.prop || ''"
                  :label="item.label || ''"
                  :width="item.width ? item.width + 'px' : ''"
                  :fixed="item.fixed || false"
                  :type="item.type || ''"
                  :align="item.align||'center'"
                  :sortable ="item.sortable||false"
                  :show-overflow-tooltip="item.showOverflowTooltip || false"
                >
                  <template slot-scope="scope">
                    <slot :name="item._key" :scope="scope"></slot>
                  </template>
                </el-table-column>
              </template>
              <template v-else>
                <el-table-column
                  :key="item.prop || index"
                  :type="item.type || ''"
                  :prop="item.prop || ''"
                  :label="item.label || ''"
                  :width="item.width ? item.width + 'px' : ''"
                  :fixed="item.fixed || false"
                  :sortable ="item.sortable||false"
                  :align="item.type == 'selection' ? '' : item.align?item.align:'center'"
                  :show-overflow-tooltip="item.showOverflowTooltip || false"
                ></el-table-column>
              </template>
            </template>
            <el-table-column v-if="showOperationColumn" align="right" fixed="right" width="40">
              <template slot="header" slot-scope="scope">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <el-button type="text" icon="el-icon-more"></el-button>
                  </span>
                  <el-dropdown-menu slot="dropdown" style="width:158px">
                    <div class="el-manager-ui__tableBox--dropdown">
                      <el-button
                        type="text"
                        icon="el-icon-download"
                        @click="$emit('allDownload')"
                        v-if="showDownloadBtn"
                        >全部导出</el-button
                      >
                      <el-button
                        type="text"
                        icon="el-icon-setting"
                        @click="columnsConfigVisible = true"
                        >自定义列</el-button
                      >
                      <slot name="tableDropdown"></slot>
                    </div>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-row>
    </div>
    <el-pagination
      v-if="showPagination"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      @size-change="handleSizeChange"
      :page-sizes="[10, 50, 100]"
      :page-size="pagination.size"
      layout="total,sizes, prev, pager, next,jumper"
      :total="pagination.total"
    ></el-pagination>
    <manager-dialog
      :visible.sync="columnsConfigVisible"
      icon="el-icon-setting"
      title="自定义列"
      width="630px"
      :before-close="handleCloseConfig"
      class="el-columns-setting-transfer"
    >
      <div>
        <el-transfer
          :titles="['展示列', '移除列']"
          :filter-method="filterMethod"
          :props="{
            key: '_key',
            label: 'label'
          }"
          :data="sourceColumns"
          filter-placeholder="请输入列名"
          filterable
          v-model="selectedColumns"
        >
        </el-transfer>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setColums">保存设置</el-button>
      </span>
    </manager-dialog>
  </div>
</template>
<script>
import { on, off } from 'ns-element/src/utils/dom';
export default {
  name: 'ManagerTable',
  componentName: 'ManagerTable',
  provide() {
    return {
      managerForm: this
    };
  },
  data() {
    return {
      columnsConfigVisible: false,
      tableMaxHeight: null,
      rowHeight: 55,
      multipleSelection: [],
      selectedStrategies: [],
      selectedColumns: [],
      columnItemsDisp: []
    };
  },
  props: {
    showOperationColumn: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    outerHeight: {
      type: Number,
      default: 50
    },
    showTableTools: {
      type: Boolean,
      default: true
    },
    showPagination: {
      // 是否有页码
      type: Boolean,
      default: true
    },
    queryItems: {
      // 查询表单渲染数据
      type: Array,
      default: () => []
    },
    showQueryBtn: {
      // 查询的按钮控制
      type: Boolean,
      default: true
    },
    showDownloadBtn: {
      // 导出按钮控制
      type: Boolean,
      default: true
    },
    // table相关数据
    columnItems: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
    pagination: {
      type: Object,
      default: () => {
        return {
          current: 1,
          size: 10,
          total: 0
        };
      }
    }
  },
  created() {
    this.columnItemsDisp = this.columnItems;
    console.log(this.$listeners);
  },
  mounted() {
    this.clientTableHeight();
    on(window, 'resize', this.clientTableHeight);
  },
  updated() {
    this.$refs.table.doLayout();
  },
  destroyed() {
    off(window, 'resize', this.clientTableHeight);
  },
  computed: {
    sourceColumns() {
      return this.columnItems.filter(item => item._key && item.label);
    },
    querySpreadSlotItems() {
      return this.queryItems.filter((item, index) => item.type === 'slot');
    }
  },
  methods: {
    setColums() {
      if (this.handleCloseConfig()) {
        this.columnsConfigVisible = false;
        if (this.selectedColumns.length > 0) {
          this.columnItemsDisp = this.columnItems.filter(
            item => !this.selectedColumns.includes(item._key)
          );
        } else {
          this.columnItemsDisp = this.columnItems;
        }
      }
    },
    handleCloseConfig(done) {
      if (this.selectedColumns.length === this.sourceColumns.length) {
        this.$confirm('不能全部移除,至少展示一列!');
        return false;
      } else {
        done && done();
        return true;
      }
    },
    clientTableHeight() {
      this.tableMaxHeight =
        document.documentElement.clientHeight - this.outerHeight - 200;
    },
    filterMethod(query, item) {
      return item.label.indexOf(query) > -1;
    },
    clearMultipleSelection() {
      this.multipleSelection = [];
      this.$refs.table.clearSelection();
      this.$emit('clearSelection', this.multipleSelection);
    },
    // 分页当前页改变时触发函数
    handleCurrentChange: function(currentPage) {
      this.pagination.current = currentPage;
      this.$emit('search');
    },
    // 分页每页显示数目改变时触发函数
    handleSizeChange: function(size) {
      this.pagination.size = size;
      this.$emit('search');
    }
  }
};
</script>
