<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-03-20 14:36:37
 * @LastEditors  : 无尘
 * @LastEditTime : 2020-02-21 18:49:08
 -->
<template>
  <div class="contacts-wrap common-set-wrap">
    <nav-crumb :navpath="navpath"> </nav-crumb>
    <div class="right-content">
      <div class="right-box" :style="{ 'min-height': bgHeight }">
        <div class="apps-content flex" :style="{ 'min-height': bgHeight }">
          <div class="apps-content-left border-box">
            <div class="left-tree-body border-box">
              <div class="left-tree-search">
                <el-input placeholder="请输入内容" v-model="searchInput" class="w-225" @keyup.native="value => toInput(value, searchInput)" clearable @clear="clearInput"></el-input>
                <span class="iconfont iconzuzhijiagouguanli p-l-10 cursor-pointer" @click="toManage"></span>
              </div>
              <div class="left-tree p-t-14">
                <contact-tree v-if="!searchInput" :itemData="wxData" v-model="wxData" @getSelectData="getSelectData"></contact-tree>
                <contact-tree-search v-if="searchInput" :itemData="wxData" v-model="wxData" @getSearchSelectData="getSearchSelectData"></contact-tree-search>
              </div>
            </div>
          </div>
          <div class="apps-content-right">
            <div class="content-right-body border-box">
              <!-- 查看是否是部门，不是门店 -->
              <depart-list v-if="departObj.isStore == 0" :departObj="departObj" @resetData="resetData" @changeDepart="changeDepart" @addDepart="addDepart"></depart-list>
              <depart-member v-if="departObj.isStore == 0" :departObj="departObj"></depart-member>
              <!-- 门店的显示门店成员 -->
              <store-member v-if="departObj.isStore == 1" :departObj="departObj"></store-member>
            </div>
          </div>
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import contactTree from '@/components/company/contact-tree.vue';
import departList from '@/components/company/depart-list.vue';
import departMember from '@/components/company/depart-member.vue';
import storeMember from '@/components/company/store-member.vue';
import contactTreeSearch from '@/components/company/contact-tree-search.vue';
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
export default {
  name: 'reviewed',
  components: {
    navCrumb,
    contactTree,
    departList,
    departMember,
    storeMember,
    contactTreeSearch
  },
  data() {
    return {
      bgHeight: window.screen.availHeight - 380 + 'px',
      // 面包屑参数
      navpath: [
        {
          name: '首页',
          path: '/index'
        },
        {
          name: '通讯录',
          path: ''
        }
      ],
      searchInput: '',
      wxData: [
        // {
        //   id: 2,
        //   level: 0,
        //   expand: false,
        //   isStore: 0,
        //   departmentName: '总部2',
        //   bindFlag: 0,
        //   children: [
        //       {
        //         id: 22,
        //         expand: false,
        //     isStore: 1,
        //         departmentName: '总部2',
        //     bindFlag: 1,
        //         children: []
        //   }]
        // }
      ],
      selectData: {},
      departObj: {}
    };
  },
  computed: {},
  methods: {
    /**
     * 点击子部门触发
     */
    changeDepart(obj) {
      const that = this;
      that.departObj = obj;
    },
    /**
     * 添加子部门触发
     */
    addDepart(obj) {
      const that = this;
      that.departObj.children = obj;
    },
    /**
     * 修改部门名称触发
     */
    resetData(name) {
      const that = this;
      that.selectData.departmentName = name;
      that.departObj.departmentName = name;
    },

    /**
     * 组织架构管理
     */
    toManage() {
      const that = this;
      that.$router.push('/orgStructSet');
    },
    /**
     * 每次选中一个树中节点，把当前数据返回，
     * 获取选中部门/门店数据
     */
    getSelectData(obj) {
      const that = this;
      // console.log(obj);
      // obj.label = '测试';
      that.selectData = obj;
      that.departObj = obj;
    },
    getSearchSelectData(obj) {
      const that = this;
      that.departObj = obj;
    },
    /**
     * 路由跳转
     */
    changeRoute(path) {
      this.$router.push(path);
    },
    /**
     * 输入
     */
    toInput: _debounce(function(e, value) {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    }, 500),
    // 搜索清除
    clearInput() {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    },

    /**
     * 获取列表数据
     */
    getTableList(val) {
      const that = this;
      let para = {
        keyWord: that.searchInput || '', // 搜索字段
        isStore: 0, // 当前页
        parentId: '' // 一页显示个数
      };
      getRequest('/haoban-manage3-web/department-list-level', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (!!resData.result && resData.result.length) {
              resData.result.forEach(ele => {
                ele.expand = false;
                ele.children = [];
                ele.label = ele.departmentName;
              });
            }
            that.departObj = resData.result[0];
            that.wxData = resData.result || [];
            // console.log(that.wxData);
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {},
  mounted() {
    const that = this;
    that.getTableList();
    document.documentElement.style.backgroundColor = '#f0f2f5';
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  }
};
</script>
<style type="text/less" lang="less" scoped>
.bg-82C5FF {
  background: #82c5ff;
}
.color-508CEE {
  color: #508cee;
}
.color-FF585C {
  color: #ff585c;
}
.line-h-18 {
  line-height: 18px;
}
.w-225 {
  width: 225px;
}
.tooltip-text {
  width: 100%;
  white-space: pre-wrap;
  word-break: break-all;
}
.contacts-wrap {
  height: 100%;
}
.right-content {
  /*width: 100%;*/
  padding: 0 20px 20px 20px;
  min-height: calc(100% - 160px);
  .right-box {
    background: #fff;
    min-height: 500px;
    padding: 0px;
    .apps-content {
      .apps-content-left {
        min-width: 293px;
        width: 293px;
        height: 100%;
        background: #fff;
        overflow-x: hidden;
        overflow-y: auto;
        .left-tree-body {
          width: 100%;
          padding: 20px 12px;
          .iconzuzhijiagouguanli {
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
      .apps-content-right {
        width: calc(100% - 303px);
        padding-left: 10px;
        background: #f0f2f5;
        .content-right-body {
          width: 100%;
          padding: 20px;
          background: #fff;
        }
        .daily-set-wrap {
          height: 100%;
          background: #fff;
        }
        .app-detail-wrap {
          height: 100%;
          background: #fff;
        }
        .common-set-wrap {
          height: 100%;
          background: #fff;
        }
      }
    }
  }
}
</style>
