<!--
<mk-tree :events="[{btnName:'删除',fn:deleteFunction},{btnName:'编辑',fn:updateFunction}]">
/**  传递按钮：支持的属性
   * ignorekey:"",ignoreval:""//忽略条件: 忽略对象,值；如果ignoreval='undefined'代表该忽略字段不存在时忽略
   * 按钮
   * disabled true|false
   * @click 点击按钮事件
   * type 0-4 0=白底黑字 1=白底蓝字 2=蓝底白字 3=灰底白字 4=超链接 默认=0
   * loading true|false
   * autofocus true|false
   * icon string 具体见 http://element.eleme.io/1.4/#/zh-CN/component/icon
   * icon-align string 图标位置，可选 left、right,默认left
   * tab true|false 选项卡模式
   * size 0-1 默认 1
   * confirm-text 点击后触发用户确认气泡，这个属性填写气泡的询问内容，如果不为空，只有点击气泡的确定才会触发click事件
   * confirm-ok-text 气泡确定按钮文字，默认 确定
   * confirm-cancel-text 气泡取消按钮文字，默认 取消
   * confirm-placement 出现位置，参考 http://element.eleme.io/1.4/#/zh-CN/component/popover placement
   */
 -->
<template>
  <div>
    <el-tree ref="mytree"
             :node-key="nodeKey"
             :data="data"
             :show-checkbox="showCheckbox"
             :default-expanded-keys="defaultExpandedKeys"
             @node-click="handleNodeClick"
             :default-checked-keys="defaultCheckedKeys"
             :highlight-current="highlightCurrent"
             :default-expand-all="defaultExpandAll"
             :expand-on-click-node="expandOnClickNode"
             :render-content="renderContentData" />
  </div>
</template>

<script>
import { t } from 'mk-element/src/locale';
import emitter from 'mk-element/src/mixins/emitter';
import ElTree from 'mk-element/packages/tree/src/tree';
import ElTag from 'mk-element/packages/tag/src/tag';
import ElButton from 'mk-element/packages/button/src/button';

export default {
  name: 'mk-tree',

  mixins: [emitter],

  components: {
    ElTree,
    ElTag,
    ElButton
  },

  data() {
    return {};
  },

  props: {
    data: {
      type: Array
    },
    emptyText: {
      type: String,
      default() {
        return t('el.tree.emptyText');
      }
    },
    renderAfterExpand: {
      type: Boolean,
      default: true
    },
    nodeKey: String,
    checkStrictly: Boolean,
    defaultExpandAll: Boolean,
    expandOnClickNode: {
      type: Boolean,
      default: true
    },
    checkOnClickNode: Boolean,
    checkDescendants: {
      type: Boolean,
      default: false
    },
    autoExpandParent: {
      type: Boolean,
      default: true
    },
    defaultCheckedKeys: Array,
    defaultExpandedKeys: Array,
    renderContent: Function,
    showCheckbox: {
      type: Boolean,
      default: false
    },
    draggable: {
      type: Boolean,
      default: false
    },
    allowDrag: Function,
    allowDrop: Function,
    props: {
      default() {
        return {
          children: 'children',
          label: 'label',
          icon: 'icon',
          disabled: 'disabled'
        };
      }
    },
    lazy: {
      type: Boolean,
      default: false
    },
    events: Array,
    highlightCurrent: Boolean,
    load: Function,
    filterNodeMethod: Function,
    accordion: Boolean,
    indent: {
      type: Number,
      default: 18
    }
  },
  computed: {
    children: {
      set(value) {
        this.data = value;
      },
      get() {
        return this.data;
      }
    }
  },
  created() {
    if (!this.renderContent) {
      this.renderContentData = this.createRenderContent;
    } else {
      this.renderContentData = this.renderContent;
    }
  },
  methods: {
    createRenderContent(h, { node, data, store }) {
      function getElTag(node, data, that) {
        if (!that.showCheckbox && data.tagname) {
          return <el-tag type="danger">{data.tagname}</el-tag>;
        }
      }
      function getTreeButtons(node, data, that) {
        let buttons = [];
        if (that.events && that.events.length > 0) {
          that.events.forEach(item => {
            if (that.btnShow(data, item)) {
              buttons.push(
                <mk-button style="padding-right:5px" type={4} confirm-text={item.confirmText} on-click={() => item.btnfun(node, data)}>
                  {item.btnname || item.btnName}
                </mk-button>
              );
            }
          });
        }
        return buttons;
      }
      return (
        <span>
          <span>
            {getElTag(node, data, this)}
            {data[this.props.label]}
          </span>
          <span>{getTreeButtons(node, data, this)}</span>
        </span>
      );
    },
    btnShow(data, oneevent) {
      if (oneevent.ignorekey) {
        if (oneevent.ignoreval === 'undefined') {
          return data[oneevent.ignorekey] !== undefined;
        } else {
          return data[oneevent.ignorekey] !== oneevent.ignoreval;
        }
      }
      return true;
    },
    handleNodeClick(data, node, treenode) {
      this.$emit('node-click', data, node, treenode);
    },
    setCheckedKeys(keys, leafOnly) {
      if (!this.nodeKey) {
        throw new Error('[Tree] nodeKey is required in setCheckedNodes');
      }
      this.$refs.mytree.setCheckedKeys(keys, leafOnly);
    },
    getCheckedKeys() {
      return this.$refs.mytree.getCheckedKeys();
    },
    setCurrentKey(key) {
      return this.$refs.mytree.setCurrentKey(key);
    }
  }
};
</script>
