<template>
  <div class="brand">
    <addTop class="mt-10" :sa_brandid="data.sa_brandid" @addSuccess="department"></addTop>
    <el-table
      :data="tableData"
      stripe
      row-key="itemclassid"
      size="small"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        width="120">
      </el-table-column>
      <el-table-column
        prop="num"
        label="序号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="itemclassfullname"
        show-overflow-tooltip
        label="类别名称"
        width="200">
        <template slot-scope="scope">
          <span style="color:#3874f6"><b>{{scope.row.itemclassfullname}}</b></span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="itemclassnum"
        label="上级类别">
      </el-table-column> -->
      <el-table-column
        prop="itemclassnum"
        label="类别编码">
      </el-table-column>
      <el-table-column
        prop="itemclassname"
        label="类别简称">
        <template slot-scope="scope">
          <span style="color:#3874f6"><b>{{scope.row.itemclassname}}</b></span>
        </template>
      </el-table-column>
      <el-table-column
        prop="itemclassnum"
        label="是否末级">
        <template slot-scope="scope">
          {{scope.row.isdeep === 1?'是':'否'}}
        </template>
      </el-table-column>
       <el-table-column
        prop="itemclassnum"
        label="是否工具">
        <template slot-scope="scope">
          {{scope.row.istool === 1?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="itemclassnum"
        label="是否隐藏">
         <template slot-scope="scope">
          {{scope.row.ishide === 1?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="250"
        fixed="right">
        <template slot-scope="scope">
          <Edit class="inline-16" type="add" @addSuccess="addSuccess" :rowData="scope.row"/>
          <Edit class="inline-16" type="edit" @addSuccess="addSuccess" :rowData="scope.row"/>
          <Del  class="inline-16" :id="scope.row.itemclassid" @deleteSuccess="deleteSuccess"/>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import addTop from './components/addTop.vue'
import Edit from './components/edit.vue'
import Del from './components/delete.vue'
export default {
  props:['data'],
  components:{
    addTop,
    Edit,
    Del
  },
  data() {
    return {
      tableData:[]
    }
  },
  created() {
  },
  methods: {
    async department (callback) {
      const res = await this.$api.requested({
        "id": "20220922110403",
        "version":1,
        "content": {
          "sa_brandid":this.data.sa_brandid
        }
      })
      this.tableData = this.createTreeData(res.data[0].ttemclass)
      console.log(this.tableData);
      
      
    },
    createTreeData (array) {
      var that = this
      let arr = []
      function convertToElementTree(node) {
        // 新节点
        var elNode = {
          num:node['num'],
          itemclassfullname:node['itemclassfullname'],
          itemclassname: node["itemclassname"],
          parentid:node['parentid'],
          itemclassid:node['itemclassid'],
          itemclassnum:node['itemclassnum'],
          sa_brandid:that.data.sa_brandid,
          ishide:node['ishide'],
          isdeep:node['isdeep'],
          istool:node['istool'],
          children: []
        }
          
        if (node.subdep && node.subdep.length > 0) {
          // 如果存在子节点
          for (var index = 0; index < node.subdep.length; index++) {
          // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
          elNode.children.push(convertToElementTree(node.subdep[index]));
          }
        }
        return elNode;
      }
      array.forEach((element) => {
        arr.push(convertToElementTree(element))
      });
      return arr
    },
    addTopClass () {

    },
    addSuccess() {
      this.department()
    },
    deleteSuccess() {
      this.department()
    }
  },
  mounted () {
    this.department()
  }
};
</script>

<style scoped>
</style>
