<!--
 * @Descripttion: 门店分组
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-08-14 16:51:07
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-17 09:18:05
 -->
<!--
<org-tree v-if="item.children.length" :item-data="item.children" @getSelectData="getSelectData"></org-tree>

import orgTree from '@/components/app/my-customer/org-tree.vue';
getSelectData(obj) {
  const that = this;
  that.departObj = obj;
  that.selectRadio = 0;
  that.showMember = false;
  that.storeObj = {};
  // 判断是不是门店
  that.currentPage = 1;
  that.tableData = [];
  that.clerkOptions = [];
  that.clerkId = '0'; // 导购
  that.searchInput = '';
  that.multipleSelection = [];
},
-->
<template>
  <ul :class="['gic-tree-body']">
    <li v-for="(item, index) in itemData" :key="index + 'gic'">
      <div :class="['li-cell cursor-pointer', departObj.storeGroupId == item.storeGroupId ? 'li-cell-active' : '']">
        <div :style="{ 'margin-left': (item.groupLevel + 1) * 20 + 'px' }" :class="['li-cell-inner border-box cursor-pointer']" @click="toggleExpand(item)">
          <span :class="['font-12 color-606266', item.isStore == 1 || !item.hasSonNode ? 'color-fff' : '', item.expand ? 'el-icon-caret-bottom' : 'el-icon-caret-right']"></span><span v-if="item.loading" class="el-tree-node__loading-icon el-icon-loading"></span><span class="font-14 color-606266 p-l-10">{{ item.label }}</span>
        </div>
      </div>
      <li-row v-show="!!item.children.length && item.expand" :depart-obj="departObj"  :item-obj="item" :item-data="item.children" @getSelectData="getSelectData"></li-row>
    </li>
  </ul>
</template>
<script>

export default {
  name: 'LiRow',
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    },
    itemData: {
      type: [ Object, Array ],
      default() {
        return [];
      }
    },
    itemObj: {
      type: [ Object, Array ],
      default() {
        return [];
      }
    },
    // 选中节点
    departObj: {
      type: Object,
      default() {
        return {
          departmentId: '',
          departmentName: '',
          wxDepartmentId: '',
          parentId: '',
          isStore: '',
          staffCount: '',
          bindFlag: '',
          loading: false
        };
      }
    }
  },
  data() {
    return {

    };
  },
  beforeDestroy() {
    this.tempArr = [];
  },
  methods: {
    /**
     * @description: 获取选中部门/门店数据
     * @param {Object} obj
     * @author: 无尘
     */
    getSelectData(obj) {
      const that = this;
      that.selectData = obj;
      that.$emit('getSelectData', obj);
    },
    /**
     * @description: 展开或者关闭下级
     * @param {Object} item
     * @author: 无尘
     */
    async toggleExpand(item) {
      const that = this;
      item.expand = item.expand ? false : true;
      that.$emit('getSelectData', item);
    }
  }
};
</script>
<style lang="less" scoped>
.m-l-20 {
  margin-left: 20px;
}

.li-cell {
  position: relative;
  line-height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #606266;
  .color-fff {
    color: #fff;
  }
  &.li-cell-active {
    background: rgba(47, 84, 235, 0.05);
    color: #2f54eb;
    span {
      color: #2f54eb;
    }
    .color-fff {
      color: rgba(47, 84, 235, 0.05);
    }
  }
}
.li-cell-inner {
  line-height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.w-110 {
  width: 110px;
}

.w-320 {
  width: 320px;
}

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

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