<template>
  <div class="workspace-merge-table height_100" v-DivHeight="getDivHeight">
    <el-table :data="tableData" border header-row-class-name="custom-table-header" @expand-change="expandChange"
      @sort-change="sortChange">
      <el-table-column type="expand">
        <template slot-scope="props">
          <div style="padding: 10px;height: 340px;">
            <Table :column="column" :tableData="props.row.data" @option="handleOption"
              :row="{ row: props.row, groupBy: groupBy, searchOption: searchOption, }" v-bind="$attrs" v-on="$listeners" />
          </div>
        </template>
      </el-table-column>
      <el-table-column v-for="column in groupingOption.filter(item => { return item.value == groupBy })" :key="column.value"
        :label="column.name" :prop="column.value" sortable="custom" show-overflow-tooltip>
        <template slot-scope="scope">
          <div>
            <span>{{ scope.row.name ? scope.row.name : '--' }}</span> 
            <span>（{{ scope.row.count?scope.row.count:'0' }}）</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { workspaceOptions } from "../mixins";
import { getTableHeight } from '@/views/components/mixins'
import Table from "./table";

export default {
  props: {
    // 检索条件
    searchOption: {
      default: () => {
        return {}
      }
    },
    // 分组的信息数组
    groupingOption: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 分组的值
    groupBy: String,
    queryParams: Object,
    column: {//显示栏位管理数组
      type: Array,
      default: () => {
        return []
      }
    },
  },
  mixins: [workspaceOptions, getTableHeight],
  components: {
    Table
  },
  data() {
    return {
      // columnList: [],
      //展开行数组
      expends: []
    }
  },
  watch: {

  },
  mounted() {
  },
  methods: {
    // 排序
    sortChange({ column, prop, order }) {
      let str = '1'
      this.$emit('on-sort', { column, prop, order, str })
    },
    //操作列事件
    handleOption(data) {
      this.$emit('option', data)
    },
    //展开行
    expandChange(row, expandedRows) {
      var index = this.expends.findIndex(item => {
        return item == row.id
      })
      if (index == -1) {
        this.expends.push(row.id)
      } else {
        this.expends.splice(index, 1)
      }
    },

  }
}
</script>

<style lang="scss">
.workspace-merge-table {
  
}
</style>