<template functional>
  <div>
    <el-table-column v-for="(column, index) of props.columnsArr" :key="column.text" align="left" header-align="center" :label="column.text" :width="column.width" show-overflow-tooltip>
      <template slot-scope="scope" v-if="!column.children">
        <!-- eslint-disable-next-line vue/no-confusing-v-for-v-if -->
        <span v-if="index === 1">
          <span v-for="space in scope.row._level" v-if="props.firstColumns" :key="space" class="ms-tree-space"/>
          <span v-if="props.iconShow(index,scope.row) && props.firstColumns" class="tree-ctrl" @click="props.toggleExpanded(scope.$index)">
              <i v-if="!scope.row._expanded" class="el-icon-arrow-right"/>
              <i v-else class="el-icon-arrow-down"/>
          </span>
          {{scope.$index +1}}
        </span>
        <span v-else>
          {{ scope.row[column.value] }}
        </span>
        <!--<span v-for="space in scope.row._level" v-if="index === 2 && props.firstColumns" :key="space" class="ms-tree-space"/>-->
        <!--<span v-if="props.iconShow(index,scope.row) && props.firstColumns" class="tree-ctrl" @click="props.toggleExpanded(scope.$index)">-->
            <!--<i v-if="!scope.row._expanded" class="el-icon-arrow-right"/>-->
            <!--<i v-else class="el-icon-arrow-down"/>-->
        <!--</span>-->
        <!--{{ scope.row[column.value] }}-->
      </template>
      <ChildrenColumns v-if="column.children" :formatDataArr="props.formatDataArr" :iconShow="props.iconShow" :toggleExpanded="props.toggleExpanded" :columnsArr="column.children" :firstColumns="false" :key="column.text"></ChildrenColumns>
    </el-table-column>
  </div>
</template>

<script>
export default {
  functional: true,
  name: 'ChildrenColumns',
  props: {
    columnsArr: Array,
    formatDataArr: Array,
    toggleExpanded: Function,
    iconShow: Function,
    firstColumns: { // 是否为第一级表头，用以区分控制层级按钮显示在一级表头第一个位置
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  $color-blue: #2196F3;
  $space-width: 8px;
  .ms-tree-space {
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: $space-width;
    height: 14px;
  &::before {
     content: ""
   }
  }
  .processContainer{
    width: 100%;
    height: 100%;
  }
  table td {
    line-height: 26px;
  }

  .tree-ctrl{
    position: relative;
    cursor: pointer;
    color: $color-blue;
    margin-left: -$space-width;
  }
</style>
