<template>
  <div class="element-tree" :id="element.key">
    <div class="element-tree-node" :class="{'element-tree-node-active': element.key === labDesign.activity.key }" @click="labDesign.activeChange(element, elements, index)">
      <div class="element-tree-node-left drag-item">
        <i v-if="element.level > 1" :class="expend ? 'el-icon-caret-bottom' : 'el-icon-caret-right'" style="color: #c0c4cc" @click.stop="expendClick(expend)"></i>
<!--        <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
          <el-tag v-if="element.level === 1" size="small" type="info">{{ element.label || element.mapper }}</el-tag>
          <el-tag v-else-if="element.level === 2" size="small" type="danger">{{ element.label || element.mapper }}</el-tag>
        </el-tooltip>-->
        <el-tag v-if="element.level === 1" size="small" type="info">{{ element.label || element.mapper }}</el-tag>
        <el-tag v-else-if="element.level === 2" size="small" type="danger">{{ element.label || element.mapper }}</el-tag>
        <i v-if="renderIcon" style="padding-left: 2px;color: #409eff;font-size: 18px" :class="renderIcon"></i>
        <i v-if="!element.visible" style="padding-left: 2px" class="iconfont icon-yanjing1"></i>
      </div>
      <span v-if="element.key === labDesign.activity.key">
        <el-popover
            v-if="element.level > 1 && !['view','divider','file'].includes(element.render)"
            placement="top"
            width="320"
            v-model="visible">
          <el-form label-width="80px" label-position="right">
            <el-form-item label="组件">
              <el-select v-model="selectRender.render" style="width: 100%" placeholder="选择要添加的组件">
                <el-option v-for="item in childRenders" :key="item.render" :value="item.render" :label="item.label" />
              </el-select>
            </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="selectRender.label" placeholder="组件展示名称"></el-input>
            </el-form-item>
           <el-form-item label="属性">
              <el-input v-model="selectRender.mapper" placeholder="组件属性"></el-input>
            </el-form-item>
            <el-form-item label-width="0" style="text-align: center">
              <el-button size="mini" @click="visible = false">取消</el-button>
              <el-button v-if="selectRender" type="primary" size="mini" @click="appendRender">确定</el-button>
            </el-form-item>
          </el-form>
           <i slot="reference" class="el-icon-plus" style="color: #409eff" title="设置"></i>
        </el-popover>
        <i class="el-icon-delete" style="color: red;padding-left: 2px" @click="elements.splice(index, 1)" title="删除"></i>
      </span>
    </div>
    <div v-if="element.level > 1 && element.elements.length > 0" :style="{ display: expend ? 'block' : 'none'}">
      <draggable v-model="element.elements" :setData="()=>{}" ghostClass="ghost" animation="300" handle=".drag-item" group="people"
      >
        <transition-group>
          <template v-for="(item, itemIndex) in element.elements" >
            <tree-node v-if="item.key"  style="padding-left: 16px" @expend="childExpend"
                       :key="item.key" :element="item" :elements="element.elements" :index="itemIndex" />
          </template>
        </transition-group>
      </draggable>
    </div>
  </div>
</template>

<script>
import LabDesign from "../../../../mixins/LabDesign";
import LabDrag from "../../../../mixins/LabDrag";
export default {
  name: "TreeNode",
  mixins: [LabDesign,LabDrag],
  props: {
    /**
     * 当前组件
     */
    element: {
      type: Object,
      default: function () {
        return { elements: [] }
      }
    },
    /**
     *  当前组件所属的集合
     */
    elements: {
      type: Array,
      default: function () {
        return []
      }
    },
    /**
     * 当前组件在所属集合的索引下标
     */
    index: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      expend: false,
      visible: false,
      selectRender: {
        render: '', label: '新组件', mapper: ''
      }
    }
  },
  watch: {
    'element.expend'() {
      const { expend } = this.element
      this.expend = expend
      this.$emit('expend', this.expend)
    }
  },
  computed: {
    renderIcon(){
      const render = this.$LabRender.find(this.element.render)
      if (render) {
        return render.icon
      }
      return ''
    },
    childRenders() {
      const { render } = this.element
      const list = this.$LabRender.list()
      if (render === 'tab') {
        return list.filter(item => ['tabPane'].includes(item.render))
      } else if (render === 'tabPane') {
        return list.filter(item => !['tabPane'].includes(item.render))
      } else if (render === 'buttonGroup') {
        return list.filter(item => ['button'].includes(item.render))
      } else if (render === 'table') {
        return list.filter(item => !['table','form','formTable','tabPane','tab'].includes(item.render))
      }
      return list
    }
  },
  methods: {
    appendRender() {
      const newItem = this.$LabRender.create(this.selectRender.render, this.selectRender.label,this.element.render)
      if (this.selectRender.mapper) {
        this.$set(newItem, 'mapper', this.selectRender.mapper)
      }
      this.element.elements.push(newItem)
      this.visible = false
      this.selectRender.mapper = this.$Util.uuid(6)
      this.selectRender.label = '新组件' + this.$Util.uuid(3)
    },
    expendClick(val) {
      this.expend = !val
      this.$set(this.element, 'expend', this.expend)
      this.$emit('expend', this.expend)
    },
    childExpend(val) {
      if (!val || this.expend) {
        return
      }
      this.expendClick(false)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
