<template>
  <div>
    <vxe-table
      ref="xTable"
      class="virtual-table"
      :data="data"
      :height="height"
      :max-height="maxHeight"
      show-overflow="title"
      :scroll-y="{enable:false}"
      :row-config="{isHover: true}"
      :header-cell-class-name="getHeaderCellClassName"
      :row-class-name="getRowClassName"
      :cell-class-name="getCellClassName"
      v-bind="$attrs"
      :resizable="border"
      :border="border"
      :checkbox-config="checkboxConfig"
      :column-config="columnConfig"
      :footer-method="footerMethod"
      footer-cell-class-name="virtual-footer-cell"
      v-on="$listeners"
      @checkbox-change="checkboxChange"
      @checkbox-all="checkboxAll"
    >
      <template
        v-for="(col,colIndex) in computedColumns"
      >
        <vxe-column
          :key="col.rowKey || colIndex"
          v-bind="col"
          :field="col.prop"
          :title="col.label"
          :min-width="col.minWidth || col['min-width']"
        >
          <template :slot="col.render?'default':null" slot-scope="scope">
            <expandDom
              :row="scope.row"
              v-bind="col"
              :data="data"
              :col-index="colIndex"
              :index="scope.rowIndex"
            >
            </expanddom>
          </template>
        </vxe-column>
      </template>
    </vxe-table>
    <div
      v-if="hasBatchAction"
      class="y-table-batch-action-area"
      :style="`left: ${leftOffset}px`"
    >
      <div class="action-left">
        <div v-if="showSelectCount">已选择当前页<span :style="{color: primaryColor}"> {{ selection.length }}</span> 项</div>
        <slot name="action-left"></slot>
      </div>
      <div class="action-right">
        <slot name="action-right" :selection="selection"></slot>
        <el-button @click="handleCancelSelection">取消选择</el-button>
      </div>
    </div>

  </div>
</template>

<script>
/**
 * 待完成功能：
 * 1、功能说明文档
 */

import { clone } from 'lodash'
import expandDom from '../../expandDom'
import { isEmpty } from 'xe-utils'
import color from '../../../styles/element-variables.scss'

export default {
  name: 'YVirtualTable',
  components: {
    expandDom
  },
  props: {
    // 表格数据
    data: {
      type: Array,
      default: () => []
    },
    // 表格列
    columns: {
      type: Array,
      default: () => []
    },
    border: {
      type: Boolean,
      default: true
    },
    // 表格调试
    height: {
      type: [String, Number],
      default: 980
    },
    // 最大高度
    maxHeight: {
      type: [String, Number]
    },
    // 表格尺寸 -- medium / small / mini
    size: {
      type: String,
      default: 'medium',
      validator(value) {
        return ['medium', 'small', 'mini'].includes(value)
      }
    },
    // 展示底部操作条
    hasBatchButton: {
      type: Boolean,
      default: true
    },
    leftOffset: {
      type: [String, Number],
      default: 200
    },
    showSelectCount: {
      type: Boolean,
      default: true
    },
    headerCellClassName: {
      type: Function
    },
    rowClassName: {
      type: Function
    },
    cellClassName: {
      type: Function
    },
    summaryMethod: {
      type: Function
    }
  },
  data() {
    return {
      originData: Object.isFrozen(this.data) ? clone(this.data) : this.data,
      selection: [],
      primaryColor: color.primaryColor
    }
  },
  computed: {
    computedColumns() {
      return this.columns.reduce((total, curr) => {
        if (!curr.hideCol) {
          (curr.type === 'selection') && (curr.type = 'checkbox')
          total.push(curr)
          return total
        } else {
          return total
        }
      }, [])
    },
    hasBatchAction() {
      const hasSelection = this.columns.find(column => column.type === 'checkbox')
      if (this.hasBatchButton && hasSelection && !isEmpty(this.selection)) {
        return true
      }
      return false
    },
    checkboxConfig() {
      const config = {}
      const selectionColumn = this.computedColumns.find(v => ['selection', 'checkbox'].includes(v.type))
      selectionColumn?.selectable && (config.checkMethod = selectionColumn.selectable)
      selectionColumn?.visible && (config.checkMethod = selectionColumn.visible)
      return config
    },
    columnConfig() {
      return {
        minWidth: 60
      }
    },
    footerMethod(params) {
      if (this.$attrs['footerMethod']) {
        params.columns.forEach(v => {
          v.property = v.prop
        })
        // 原vxe-table footerMethod api
        return () => this.$attrs['footerMethod'](params)
      }

      if (this.$props.summaryMethod) {
        // 仿el-table summaryMethod方法
        params.columns.forEach(v => {
          v.property = v.prop
        })
        const footer = this.$props.summaryMethod(params)
        return () => [footer]
      }
      return undefined
    }
  },
  watch: {
    data: {
      handler(val) {
        this.$emit('data-change', val)
      }
    }
  },
  mounted() {

  },
  methods: {
    getMinWidth(cols) {
      if (Array.isArray(cols)) {
        const len = cols.length
        const minWidth = Math.random(100 / len)
        return minWidth + '%'
      }
    },
    checkboxAll({ records }) {
      this.selection = records
      this.$emit('select-all', records)
    },
    checkboxChange({ records }) {
      this.selection = records
      this.$emit('selection-change', records)
    },
    handleCancelSelection() {
      this.$refs.xTable.clearCheckboxRow()
      this.selection = []
    },
    getHeaderCellClassName(params) {
      return this.headerCellClassName ? this.headerCellClassName(params) : ''
    },
    getRowClassName(params) {
      return this.headerCellClassName ? this.headerCellClassName(params) : ''
    },
    getCellClassName(params) {
      return this.headerCellClassName ? this.headerCellClassName(params) : ''
    }
  }
}
</script>

<style lang="scss" scoped>

.virtual-table {
  ::v-deep .vxe-table--main-wrapper {
    .vxe-header--row {
      .vxe-header--column {
        padding: 12px 0;
        background: #F5F7FA;
      }
    }

    .vxe-body--row {
      .vxe-body--column {
        padding: 12px 0;
        .vxe-cell--checkbox.is--disabled .vxe-icon-checkbox-unchecked{
          background-color: #edf2fc;
        }
      }
    }

    .virtual-footer-cell {
      background-color: #F5F7FA;
    }
  }
}

.y-table-batch-action-area {
  z-index: 5;
  display: flex;
  position: fixed !important;
  height: 64px;
  align-items: center;
  bottom: 0;
  right: 0;
  background-color: $--color-white;
  box-sizing: border-box;
  padding: 0 24px;
  box-shadow: 0px -3px 6px -4px rgba(0, 0, 0, 0.12),
  0px -6px 16px 0px rgba(0, 0, 0, 0.08), 0px -9px 28px 8px rgba(0, 0, 0, 0.05);

  .action-left {
    flex: 4;
    height: 100%;
    display: inline-flex;
    align-items: center;
    font-size: 14px;

    button {
      margin-left: 16px;
    }
  }

  .action-right {
    flex: 1;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
