<template>
  <el-table
    :data="data"
    :height="tableHeight"
    @sort-change="sortChange"
    @select="select"
    @select-all="selectAll"
    border
    @expand="handleExpand"
    @selection-change="selectionChange"
    :default-sort = "defaultSort"
    style="width: 100%;"
    :row-style="showTr">
    <el-table-column v-if="checkBox" type="selection" width="55">
      </el-table-column>
    <el-table-column v-for="(column, index) in columns" :key="column.value"
      :label="column.label" :width="column.width"
      :formatter="column.formatter" :align="column.align"
      :class-name="column.className">
      <template scope="scope">
        <span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space"></span>
        <span v-if="toggleIconShow(index,scope.row)" >
          <i @click="toggle(scope.$index)" v-if="!scope.row._expanded" class="el-icon-caret-right" aria-hidden="true"></i>
          <i @click="toggle(scope.$index)" v-if="scope.row._expanded" class="el-icon-caret-bottom" aria-hidden="true"></i>
        </span>
        <span v-else-if="index===0" class="ms-tree-space"></span>
        {{scope.row[column.value]}}
      </template>
    </el-table-column>
    <el-table-column
        v-if="btnMode&&btns!==undefined"
        :fixed="btns.fixed"
        :prop="btns.value"
        :label="btns.label"
        :key="btns.value"
        :width="btns.width"
        :formatter="btns.formatter"
        :class-name="btns.className">
        <template scope="scope">
          <el-button :key="btn.value" @click="btn.functionName(scope.$index, scope.row)" v-for="btn in btns.btnArr" :type="btn.type" size="small"  :icon="btn.icon">
            {{btn.label}}
          </el-button>
        </template>
      </el-table-column>
  </el-table>
</template>
<script>
  import Utils from './utils/index.js'
//  import Vue from 'vue'
  export default {
    name: 'tree-grid',
    props: {
      // 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化
      treeStructure: {
        type: Boolean,
        default: function () {
          return false
        }
      },
      // 这是相应的字段展示
      columns: {
        type: Array,
        default: function () {
          return []
        }
      },
      // 这是数据源
      dataSource: {
        type: Array,
        default: function () {
          return []
        }
      },
      // 这个作用是根据自己需求来的，比如在操作中涉及相关按钮编辑，删除等，需要向服务端发送请求，则可以把url传过来
      requestUrl: {
        type: String,
        default: function () {
          return ''
        }
      },
      // 这个是是否展示操作列
      treeType: {
        type: String,
        default: function () {
          return 'normal'
        }
      },
      // 是否默认展开所有树
      defaultExpandAll: {
        type: Boolean,
        default: function () {
          return false
        }
      },
      // 表格高度
      tableHeight: {
        type: String,
        default: function () {
          return '450'
        }
      },
      // 默认排序
      defaultSort: {
        type: Object,
        default: function () {

        }
      },
      // 表格类型
      tableType: {
        type: Number,
        default: function () {
          return 1
        }
      },
      // 编辑按钮数组
      btns: {
        type: Object,
        default: function () {

        }
      },
      // 修改排序时触发事件
      sortChange: {
        type: Function,
        default: function () {

        }
      },
      // 单选事件
      select: {
        type: Function,
        default: function () {

        }
      },
      // 全选事件
      selectAll: {
        type: Function,
        default: function () {

        }
      },
      // 展开或关闭时触发的事件
      handleExpand: {
        type: Function,
        default: function () {

        }
      },
      // 选择发生改变时触发事件
      selectionChange: {
        type: Function,
        default: function () {

        }
      }
    },
    data () {
      return {
        checkBox: false, // 复选框
        btnMode: false, // 按钮
        page: 1,
        tpageSize: this.pageSize
      }
    },
    computed: {
    // 格式化数据源
      data: function () {
        let me = this
        if (me.treeStructure) {
          let data = Utils.MSDataTransfer.treeToArray(me.dataSource, null, null, me.defaultExpandAll)
          return data
        }
        return me.dataSource
      }
    },
    mounted () {
      if (this.tableType === 2) { // 如果是复选框模式
        this.checkBox = true // 显示复选框
        this.btnMode = false // 取消按钮
      } else if (this.tableType === 3) { // 如果是按钮模式
        this.btnMode = true
        this.checkBox = false
      } else if (this.tableType === 4) { // 如果是复选框+按钮模式
        this.checkBox = true
        this.btnMode = true
      } else { // 如果是单表格
        this.tableType = 1
        this.btnMode = false // 取消按钮
        this.checkBox = false // 取消复选框
      }
      // console.log('页面加载方法')
    },
    methods: {
    // 展开关闭树
      expand (expanded) {
        let me = this
        for (var i = 0; i < me.data.length; i++) {
          let record = me.data[i]
          record._expanded = expanded
        }
      },
    // 显示行
      showTr: function (row, index) {
        let show = (row._parent ? (row._parent._expanded && row._parent._show) : true)
        row._show = show
        return show ? '' : 'display:none;'
      },
    // 展开下级
      toggle: function (trIndex) {
        let me = this
        let record = me.data[trIndex]
        record._expanded = !record._expanded
      },
    // 显示层级关系的空格和图标
      spaceIconShow (index) {
        let me = this
        if (me.treeStructure && index === 0) {
          return true
        }
        return false
      },
    // 点击展开和关闭的时候，图标的切换
      toggleIconShow (index, record) {
        let me = this
        if (me.treeStructure && index === 0 && record.children && record.children.length > 0) {
          return true
        }
        return false
      },
      handleDelete () {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      exportExcel () {
        return this.export2Excel()
      },
      export2Excel () {
        require.ensure([], () => {
          const { export_json_to_excel } = require('vendor/Export2Excel')
          const tHeader = this.columns.map(item => item.label)
          const filterVal = this.columns.map(item => item.value)
          const list = this.data
          console.log(this.data)
          const data = this.formatJson(filterVal, list)
          export_json_to_excel(tHeader, data, '导出excel')
        })
      },
      formatJson (filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      }
    }
  }
</script>
<style scoped>
  .ms-tree-space{position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: 18px;
    height: 14px;}
  .ms-tree-space::before{content: ""}
  table td{
    line-height: 26px;
  }
</style>
