<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-08-14 16:51:07
 * @LastEditors  : 无尘
 * @LastEditTime : 2020-02-24 16:27:15
 -->
<!--
<org-tree v-if="item.children.length" :itemData="item.children" ></org-tree>

import orgTree from './org-tree.vue';
-->
<template>
  <ul class="m-l-10">
    <draggable :list="itemData" class="org-component" :options="leftOption" :move="onMove" @start="isDragging = true" @end="itemMoveEnd">
      <li v-for="(item, index) in itemData" :key="index + 'gic'">
        <div class="li-cell cursor-pointer" @click="toggleExpand(item)">
          <span :class="['font-12 color-606266', item.isStore == 1 ? 'color-fff' : '', 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>
        <li-row v-show="!!item.children.length && item.expand" :itemData="item.children"></li-row>
      </li>
    </draggable>
  </ul>
</template>
<script>
import draggable from 'vuedraggable';
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';
export default {
  name: 'li-row',
  components: {
    draggable
  },
  props: {
    itemData: {
      type: [Object, Array],
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      // leftOption
      leftOption: {
        group: {
          name: 'people',
          pull: true,
          put: false
        },
        sort: false,
        disabled: false
      }
    };
  },
  methods: {
    /**
     * 展开或者关闭下级
     */
    async toggleExpand(item) {
      const that = this;
      // console.log(item);
      item.expand = item.expand ? false : true;
      // 点击的时候，如果非门店且子级是空的需要请求获取子级
      if (item.isStore == 0 && !item.children.length && !item.loaded) {
        item.children = await that.getChildData(item);
      }
    },
    /**
     * 获取下级数据
     */
    getChildData(item) {
      const that = this;
      let para = {
        parentId: item.departmentId, //
        isStore: item.isStore, //
        keyword: '' //
      };
      return new Promise((resolve, reject) => {
        getRequest('/haoban-manage3-web/department-list-level', para)
          .then(res => {
            let resData = res.data;
            if (resData.errorCode == 1) {
              // 加一个已加载标志
              if (resData.result.length) {
                item.loaded = true;
                resData.result.forEach(ele => {
                  ele.expand = false;
                  ele.children = [];
                  ele.level = item.level + 1;
                  ele.label = ele.departmentName;
                });
              }
              resolve(resData.result || []);
              return false;
            }
            resolve([]);
            errMsg.errorMsg(resData);
          })
          .catch(function(error) {
            resolve([]);
            that.$message.error({
              duration: 1000,
              message: error.message
            });
          });
      });
    },
    /**
     *  move{relatedContext, draggedContext}
     */
    onMove(evt) {
      // const that = this;
      // 判断中间是否存在父级

      const draggedElement = evt.draggedContext.element;
      // console.log(evt, !draggedElement.fixed);
      return !draggedElement.fixed;
    },
    /**
     *  move end
     */
    itemMoveEnd(evt) {
      const that = this;
      // 判断中间是否已经添加
      // console.log(that.itemData);
      that.$forceUpdate();
    }
  },
  watch: {
    itemData: function(newData, oldData) {
      const that = this;
      that.trData = JSON.parse(JSON.stringify(newData));
    }
  },
  mounted() {
    const that = this;
    that.trData = JSON.parse(JSON.stringify(that.itemData));
  },
  beforeDestroy() {
    this.tempArr = [];
  }
};
</script>
<style lang="less" scoped>
.li-cell {
  line-height: 26px;
  .color-fff {
    color: #fff;
  }
}

.w-110 {
  width: 110px;
}

.w-320 {
  width: 320px;
}

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

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