<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-08-14 16:51:07
 * @LastEditors  : 无尘
 * @LastEditTime : 2020-02-14 12:33:26
 -->
<!--
<wx-tree v-model="itemData" ></wx-tree>

import wxTree from './wx-tree.vue';
-->
<template>
  <ul class="m-l-10">
    <draggable :list="itemData" class="wx-component" :options="rightOption" @input="emitter" @change="changeData">
      <li v-for="(item, index) in itemData" :key="index + 'gic'">
        <div class="li-cell cursor-pointer" v-contextmenu:contextmenu @click="toggleExpand(item)">
          <span :class="['font-12 color-606266', item.expand ? 'el-icon-caret-bottom' : 'el-icon-caret-right']"></span><span :class="['font-14 p-l-10 p-r-10 iconfont', item.isStore == 1 ? 'icondianpu-kuai' : 'iconqiye-tianchong', item.bindFlag == 1 ? 'color-2f54eb' : 'color-dedfe6']"></span><span class="font-14 color-606266">{{ item.label }}</span>
        </div>
        <v-contextmenu ref="contextmenu">
          <v-contextmenu-item @click="addChild(item)">添加子部门</v-contextmenu-item>
          <v-contextmenu-item @click="modChild(item)">修改名称</v-contextmenu-item>
          <v-contextmenu-item @click="delChild(item)">删除</v-contextmenu-item>
          <v-contextmenu-item>部门ID: {{ item.id }}</v-contextmenu-item>
        </v-contextmenu>
        <li-row v-if="item.expand" :itemData="item.children"></li-row
        ><!-- v-show="!!item.children.length && item.expand" -->
      </li>
    </draggable>
  </ul>
</template>
<script>
import draggable from 'vuedraggable';
import showMsg from '@/common/js/showmsg';
export default {
  name: 'li-row',
  components: {
    draggable
  },
  props: {
    value: {
      type: [Object, Array],
      default() {
        return [];
      }
    },
    itemData: {
      type: [Object, Array],
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      rightOption: {
        group: {
          name: 'people',
          pull: true,
          put: true
        },
        sort: true
      }
    };
  },
  computed: {},
  methods: {
    /**
     *  改变数组数据
     */
    emitter(value) {
      console.log(value);
      this.$emit('input', value);
    },
    changeData(value) {
      console.log(value);
    },
    /**
     * 展开或者关闭下级
     */
    toggleExpand(item) {
      const that = this;
      console.log(item);
      item.expand = item.expand ? false : true;
      if (!item.children.length) {
        item.expand = true;
      }
      that.$forceUpdate();
    },
    /**
     * 添加子部门
     */
    addChild(item) {
      const that = this;
      console.log('添加：', item);
      item.children.push({
        id: 225,
        expand: true,
        label: '总部225',
        children: []
      });
      that.$forceUpdate();
    },
    /**
     * 修改名称
     */
    modChild(item) {
      const that = this;
      console.log('修改：', item);
      item.label = 2222;
      that.$forceUpdate();
    },
    /**
     * 删除
     */
    delChild(item) {
      const that = this;
      console.log('删除:', item, that.itemData);
      if (!!item.children.length) {
        showMsg.showmsg('当前节点下有子节点，不可删除', 'warning');
        return false;
      }
      let key = '';
      that.itemData.forEach((ele, index) => {
        if (ele.id == item.id) {
          key = index;
        }
      });
      that.itemData.splice(key, 1);
      that.$forceUpdate();
    }
  },
  watch: {
    value: function(newData, oldData) {
      const that = this;
      that.trData = JSON.parse(JSON.stringify(newData));
    }
  },
  mounted() {
    const that = this;
    that.trData = JSON.parse(JSON.stringify(that.value));
  }
  /*  beforeDestroy() {} */
};
</script>
<style lang="less" scoped>
.li-cell {
  min-height: 26px;
  line-height: 26px;
}

.w-110 {
  width: 110px;
}

.w-320 {
  width: 320px;
}

.m-t-14 {
  margin-top: 14px;
}

.child-row {
  padding-left: 10px;
}
</style>
