<template>
  <div class="tree-node">
    <div class="node-content">
      <span style="margin-right: 5px;">▪{{ nodeData.code }} »</span>
      <el-input v-model="nodeData.title" placeholder="请输入标题名称" style="width: 250px;" v-if="isRoot" :disabled="isDisabled"/>
      <el-input v-model="nodeData.title" placeholder="请输入标题名称" style="width: 250px;" v-if="nodeData.type1==='0'" :disabled="isDisabled"/>

      <el-input placeholder="请选择引用考核任务" readonly v-if="nodeData.type1==='1'||nodeData.type1==='2'" style="width: 250px;" :disabled="isDisabled"
                v-model="nodeData.pcTitle" @focus.stop="changeKaohe">
        <i slot="suffix" class="el-input__icon el-icon-search" style="color: #1890ff; font-weight: bolder"></i>
      </el-input>

      <!--评分占比-->
      <el-input-number style="margin-left: 5px;" v-model="nodeData.zb" :precision="2" :step="0.01" :min="0.01" :disabled="isDisabled"
                       :max="1" v-if="nodeData.type1==='1'||nodeData.type1==='0'"></el-input-number>

      <el-button type="primary" icon="el-icon-plus" size="mini" @click.stop="addChild('0')" :disabled="isDisabled"
                 v-if="isRoot||nodeData.type1==='0'">标题</el-button>
      <el-button type="primary" icon="el-icon-plus" size="mini" @click.stop="addChild('1')" :disabled="isDisabled"
                 v-if="isRoot||nodeData.type1==='0'">占比引用</el-button>
      <el-button type="primary" icon="el-icon-plus" size="mini" @click.stop="addChild('2')" :disabled="isDisabled"
                 v-if="isRoot||nodeData.type1==='0'">不占比引用</el-button>
      <el-button type="danger" icon="el-icon-delete" size="mini" @click.stop="removeNode" v-if="!isRoot" :disabled="isDisabled"></el-button>
    </div>
    <div class="children" v-if="nodeData.data && nodeData.data.length">
      <recursive-tree
        v-for="(child, index) in nodeData.data"
        :key="index"
        :node-data="child"
        :is-disabled="isDisabled"
        @add-child="onAddChild"
        @remove-node="onRemoveNode"
        @change-kaohe="onChangeKaohe"
      ></recursive-tree>
    </div>

  </div>
</template>

<script>
export default {
  name: 'RecursiveTree',
  props: {
    nodeData: {
      type: Object,
      required: true
    },
    isRoot: {
      type: Boolean,
      default: false
    },
    isDisabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 选择引用考核任务
    changeKaohe(){
      this.$emit('change-kaohe', this.nodeData)
    },
    // 选择引用考核任务
    onChangeKaohe(parentNode){
      this.$emit('change-kaohe', parentNode)
    },
    addChild(type1) {
      this.$emit('add-child', this.nodeData, type1)
    },
    removeNode() {
      this.$emit('remove-node', this.nodeData)
    },
    onAddChild(parentNode, type1) {
      this.$emit('add-child', parentNode, type1)
    },
    onRemoveNode(nodeToRemove) {
      this.$emit('remove-node', nodeToRemove)
    },
  }
}
</script>

<style scoped lang="scss">
.tree-node {
  margin-left: 30px;
  padding: 5px 0px 5px 5px;
  border-left: 1px solid #ccc;
}
.node-content {
  padding: 5px;
  background: #f5f5f5;
  margin-bottom: 5px;
}
button {
  margin-left: 10px;
}

.el-radio{
  margin-right: 10px;
}
</style>
