<template>
  <div>
    <el-table :data="formatData"
              :row-style="showRow"
              v-bind="$attrs"
              @row-click="singleClick"
              tooltip-effect="dark"
              v-loading="vLoading"
              :element-loading-text="elementLoadingText"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 1)"
              :border="border"
              :row-key="rowKey"
              highlight-current-row
              ref="vueTreeTable"
              :style="currentStyle"
              :default-sort="defaultSort"
              :span-method="spanMethod"
              cell-class-name="common-table-cell"
              header-cell-class-name="common-table-header">
      <el-table-column v-if="columns.length === 0"
                       width="150">
        <template slot-scope="scope">
          <span v-for="space in scope.row._level"
                class="ms-tree-space"
                :key="space"></span>
          <span class="tree-ctrl"
                v-if="iconShow(0, scope.row)"
                @click="toggleExpanded(scope.$index)">
            <i v-if="!scope.row._expanded"
               class="el-icon-plus"></i>
            <i v-else
               class="el-icon-minus"></i>
          </span>
          {{scope.$index}}
        </template>
      </el-table-column>
      <el-table-column v-else
                       v-for="(column, index) in columns"
                       :key="column.prop"
                       :align="column.align"
                       header-align="center"
                       :label="column.label"
                       :width="column.width"
                       :sortable="column.sortable"
                       :show-overflow-tooltip="column.showOverflowTooltip">
        <template slot-scope="scope">
          {{column.format?column.format(scope.row):scope.row[column.prop]}}
          <span class="tree-ctrl"
                v-if="iconShow(index, scope.row)"
                @click="toggleExpanded(scope.$index)">
            <i v-if="!scope.row._expanded"
               class="iconfont iconzengjia tree-table-icon"></i>
            <i v-else
               class="iconfont iconjian tree-table-icon"></i>
          </span>
        </template>
      </el-table-column>
      <slot></slot>
    </el-table>
  </div>
</template>

<script>
import treeToArray from './eval'
export default {
  name: 'TreeTable',
  props: {
    sourceData: {
      type: [Array, Object],
      required: true
    },
    columns: {
      type: Array,
      default: () => []
    },
    currentStyle: function () {
      return this.styles
    },
    evalFunc: Function,
    evalArgs: Array,
    expandAll: {
      type: Boolean,
      default: false
    },
    rowKey: {
      type: [Function, String],
      require: false
    },
    defaultSort: {
      type: Object,
      default: function () {
        return {}
      }
    },
    // 控制合并行和列的方法
    spanMethod: {
      type: Function,
      default: function () {
        return function ({ row, column, rowIndex, columnIndex }) {
          return null
        }
      }
    },
    border: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    elementLoadingText: {
      type: String,
      default: function () {
        return '拼命加载中'
      }
    },
    childrenName: {
      type: String,
      default: 'children'
    },
    singleClick: Function
  },
  data () {
    return {
      currentTotal: 0,
      tableDatas: this.sourceData,
      vLoading: false,
      columnMenus: {},
      selectionData: [],
      tableData: [],
      formatData: [],
      setDatasource: this.sourceData && this.sourceData.length > 0
    }
  },
  computed: {
  },
  methods: {
    showRow (row) {
      const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
      row.row._show = show
      return show ? 'animation:treeTableShow 1s-webkit-animation:treeTableShow 1s' : 'display:none'
    },
    // 切换下级是否展开
    toggleExpanded (trIndex) {
      const record = this.formatData[trIndex]
      this.$set(record, '_expanded', !record._expanded)
      this.setInitFalg(true)
    },
    setInitFalg (falg) {
      this.$nextTick(() => {
        let tmp = []
        if (!Array.isArray(this.sourceData)) {
          tmp.push(...[this.sourceData])
        } else {
          tmp.push(...this.sourceData)
        }
        if (!falg) {
          tmp.forEach(v => {
            this.$set(v, '_expanded', false)
          })
          this.formatData = tmp
        } else {
          const func = this.evalFunc || treeToArray
          const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs, null, this.childrenName) : [tmp, this.expandAll, null, null, this.childrenName]
          this.formatData = func.apply(null, args)
        }
      })
    },
    // 图标显示
    iconShow (index, record) {
      return (index === 0 && record[this.childrenName] && record[this.childrenName].length > 0)
    }
  }
}

</script>
<style rel="stylesheet/css">
@keyframes treeTableShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes treeTableShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.tree-table-icon {
    margin-left: 8px;
    cursor: pointer;
    color: #6DA1FF;
}
</style>
