<template>
  <div>
    <el-table :data="faNode[nodeKey]" row-key='nodeId' border :tree-props="{children: 'properties',}">
      <el-table-column prop="id" label="编号" width="100">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.key" v-if="!disabled"></el-input>
          <span v-if="disabled">{{scope.row.key}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="180">
        <template slot-scope="scope">
          <el-select v-model="scope.row.type" placeholder="请选择" v-if="!disabled">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <span v-if="disabled">{{getName(scope.row.type)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="required" label="是否必须" width="100">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.required" :disabled="disabled"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" v-if="!disabled"></el-input>
          <span v-if="disabled">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="!disabled">
        <template slot="header">
          <span>操作</span>
          <el-button type="text" @click="add(-1)" class="ml15">新增</el-button>
        </template>
        <template slot-scope="scope">
          <el-button type="text" @click="add(scope.$index,scope.row)" class="ml15">新增</el-button>
          <el-button type="text" @click="del(scope.$index,scope.row,scope)" class="ml15">删除</el-button>
          <el-button type="text" @click="addChildren(scope.row)" class="ml15">新增子类</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    },
    faNode: {
      type: Object,
      required: true
    },
    nodeKey: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'input'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default() {
        return `请选择${this.item.label}`
      }
    }
  },
  data() {
    return {
      options: [{
        value: 'Ingter',
        label: 'Ingter'
      }, {
        value: 'Boolean',
        label: 'Boolean'
      }, {
        value: 'String',
        label: 'String'
      }, {
        value: 'Object',
        label: 'Object'
      }, {
        value: 'Array',
        label: 'Array'
      }],
      itemdata: [],
      index: 0,
    }
  },
  methods: {
    getName(value) {
      let name = ''
      this.options.forEach(item => {
        if (item.value == value) {
          name = item.label
        }
      })
      return name
    },
    add(index, row) {
      let nodeId = new Date().getTime()
      this.itemdata = []
      this.index = 0
      if (row) {
        this.getItem(this.faNode[this.nodeKey], row.nodeId)
      } else {
        this.itemdata = this.faNode[this.nodeKey]
      }
      this.itemdata.splice(this.index + 1, 0, { 'nodeId': nodeId, properties: [] })
    },
    getItem(list, nodeId) {
      let self = this;
      list.forEach((item, index) => {
        if (item.nodeId == nodeId) {
          self.index = index
          self.itemdata = list
        } else if (item.properties && item.properties.length > 0) {
          self.getItem(item.properties, nodeId)
        }
      });
    },
    del(index, row) {
      this.itemdata = []
      this.index = 0
      if (row) {
        this.getItem(this.faNode[this.nodeKey], row.nodeId)
      }
       this.itemdata.splice(this.index, 1)
    },
    addChildren(row) {
      let nodeId = new Date().getTime()
      row.properties.push({ 'nodeId': nodeId, properties: [] })
    }
  },
}
</script>