<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-03-20 14:36:37
 * @LastEditors  : 无尘
 * @LastEditTime : 2020-02-21 10:22:54
 -->
<template>
  <div class="my-customer-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">
            <div class="content-gic-title font-16 color-303133 text-left">GIC门店架构</div>
            <div class="content-gic flex">
              <div class="gic-content-business">
                <ul>
                  <li class="cursor-pointer" v-for="(item, index) in enterpriseData" :key="index + 'li'" @click="selectEnterprise(item)">
                    <div class="ul-li-cell flex">
                      <div class="cell-img">
                        <img :src="item.enterpriseLogo" alt="img" />
                      </div>
                      <div class="cell-info">
                        <div class="cell-info-name font-14 color-303133">
                          <span class="gic-name">{{ item.enterpriseName }}</span
                          ><span class="gic-version">{{ item.version }}</span>
                        </div>
                        <div class="cell-info-version font-12 color-909399">{{ item.nodeCount }}</div>
                      </div>
                    </div>
                  </li>
                </ul>
                <div class="add-enterprise cursor-pointer text-center" @click="showAddDialog"><span class="iconfont icontianjiajiahaowubiankuang font-12 color-2f54eb"></span><span class="font-12 color-2f54eb p-l-10">新建GIC商户授权</span></div>
              </div>
              <div class="gic-content-depart">
                <org-tree :itemData="gicData"></org-tree>
              </div>
            </div>
          </div>
          <div class="apps-content-right">
            <div class="content-wx-title flex flex-space-between">
              <span class="font-16 color-303133 text-left">企业微信组织架构</span>
              <el-button type="text" @click="toRecycle">回收站（）</el-button>
            </div>
            <div class="content-wx">
              <wx-tree :itemData="wxData" v-model="wxData"></wx-tree>
            </div>
          </div>
        </div>
        <div class="save-body m-t-10">
          <div class="change-title text-center font-14 color-303133">好办组织结构于2020-10-10 14:22:15 发生改动</div>
          <div class="text-center m-t-15">
            <el-button type="primary" @click="saveData">保存更改并同步至企业微信</el-button>
          </div>
        </div>
      </div>
      <add-enterprise v-if="addShow" @refreshData="refreshData"></add-enterprise>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import addEnterprise from '@/components/company/add-enterprise.vue';
import orgTree from '@/components/company/org-tree.vue';
import wxTree from '@/components/company/wx-tree.vue';
import { getRequest, postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
export default {
  name: 'reviewed',
  data() {
    return {
      bgHeight: window.screen.availHeight - 380 + 'px',
      // 面包屑参数
      navpath: [
        {
          name: '首页',
          path: '/index'
        },
        {
          name: '通讯录',
          path: '/contactsList'
        },
        {
          name: '组织架构管理',
          path: ''
        }
      ],
      enterpriseData: [],
      gicData: [],
      wxData: [
        //{
        //     id: 2,
        //     level: 1,
        //     expand: false,
        //     isStore: 0,
        //     label: '总部2',
        //     bindFlag: 0,
        //     children: [{
        //       id: 22,
        //       level: 2,
        //       expand: false,
        //       isStore: 1,
        //       label: '总部2',
        //       bindFlag: 1,
        //       children: []
        //     }]
        //   }
      ],
      addShow: false
    };
  },
  computed: {},
  methods: {
    /**
     * 保存
     */
    saveData: _debounce(function() {
      const that = this;
      that.postSaveData();
    }, 300),
    postSaveData() {
      const that = this;
      let para = {};
      postRequest('/haoban-manage3-web/wx-enterprise-bind', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.tableData = resData.result.list || [];
            that.total = resData.result.total;
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 选择企业
     */
    selectEnterprise(item) {
      const that = this;
      that.getGicData(item);
    },
    getGicData(item) {
      const that = this;
      let para = {
        enterpriseId: item.enterpriseId, //
        wxEnterpriseId: item.wxEnterpriseId, //
        version: item.version
      };
      getRequest('/haoban-manage3-web/unbind-department-list', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.gicData = resData.result.list || [];
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    getWxData() {
      const that = this;
      let para = {
        parentId: '',
        isStore: 0
      };
      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.wxData = resData.result || [];
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 新增
     */
    showAddDialog() {
      const that = this;
      that.addShow = true;
    },
    refreshData(res) {
      const that = this;
      that.addShow = false;
      if (res == 'close') {
        return;
      }
      that.getTableList();
    },
    /**
     * 跳转回收站
     */
    toRecycle() {
      const that = this;
      that.changeRoute('/recycle');
    },
    /**
     * 路由跳转
     */
    changeRoute(path) {
      this.$router.push(path);
    },

    /**
     * 获取企业列表数据
     */
    getTableList(val) {
      const that = this;
      let para = {};
      getRequest('/haoban-manage3-web/wx-enterprise-list', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.enterpriseData = resData.result || [];
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {},
  mounted() {
    const that = this;
    that.getTableList();
    that.getWxData();
    document.documentElement.style.backgroundColor = '#f0f2f5';
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  components: {
    navCrumb,
    addEnterprise,
    orgTree,
    wxTree
  }
};
</script>
<style type="text/scss" lang="scss" scoped>
.bg-82C5FF {
  background: #82c5ff;
}
.color-508CEE {
  color: #508cee;
}
.color-FF585C {
  color: #ff585c;
}
.line-h-18 {
  line-height: 18px;
}
.tooltip-text {
  width: 100%;
  white-space: pre-wrap;
  word-break: break-all;
}
.my-customer-wrap {
  height: 100%;
}
.right-content {
  /*width: 100%;*/
  padding: 0 20px 20px 20px;
  min-height: calc(100% - 160px);
  .right-box {
    min-height: 500px;
    padding: 0px;
    .save-body {
      width: 100%;
      height: 120px;
      padding: 32px 0 22px 0;
      background: #fff;
      box-sizing: border-box;
    }
    .apps-content {
      .apps-content-left {
        width: 50%;
        height: 100%;
        background: #fff;
        overflow-x: hidden;
        overflow-y: auto;
        .content-gic-title {
          height: 46px;
          line-height: 46px;
          padding: 0 20px;
          box-sizing: border-box;
          border-bottom: 1px solid #e4e7ed;
        }
        .content-gic {
          min-height: calc(100% - 160px);
          .gic-content-business {
            position: relative;
            width: 262px;
            height: 400px;
            padding: 0 20px;
            box-sizing: border-box;
            border-right: 1px solid #e4e7ed;
            ul {
              height: 100%;
              overflow-x: hidden;
              overflow-y: auto;
              li {
                margin-top: 20px;
              }
            }
            .add-enterprise {
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              height: 48px;
              line-height: 48px;
              box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.12);
              z-index: 1;
              .iconfont {
                font-size: 13px;
              }
            }
            .ul-li-cell {
              .cell-img {
                width: 52px;
                min-width: 52px;
                max-width: 52px;
                height: 52px;
                border-radius: 2px;
                border: 1px solid rgba(228, 231, 237, 1);
                box-sizing: border-box;
                img {
                  width: 100%;
                }
              }
              .cell-info {
                padding-left: 10px;
                box-sizing: border-box;
                .cell-info-name {
                  height: 37px;
                  white-space: pre-wrap;
                  word-break: break-all;
                }
                .gic-name {
                  font-size: 14px;
                  color: #303133;
                  line-height: 18px;
                }
                .gic-version {
                  display: inline-block;
                  padding: 2px 5px;
                  margin-left: 5px;
                  background: rgba(255, 241, 240, 1);
                  border-radius: 2px;
                  border: 1px solid rgba(255, 163, 158, 1);
                  font-size: 10px;
                  color: #f5222d;
                }
              }
            }
          }
          .gic-content-depart {
            position: relative;
            padding: 20px;
            box-sizing: border-box;
          }
        }
      }
      .apps-content-right {
        width: 50%;
        margin-left: 10px;
        background: #fff;
        .content-wx-title {
          height: 46px;
          line-height: 46px;
          padding: 0 20px;
          box-sizing: border-box;
          border-bottom: 1px solid #e4e7ed;
        }
        .content-wx {
          padding: 10px 0 20px 0;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>
