/**
* @Description: 群组管理
* @author wx
* @date 2020/4/24
*/
<template>
  <div class="group-com">
    <Right-To-Left>
      <div slot="left">
        <group-tree
          ref="groupTree"
          @nodeClick="nodeClick"
          @handleEditGroup="handleEditGroup"
          @handleDelGroup="handleDelGroup"
          @handleCopyGroup="handleCopyGroup"
          @removeGroup="removeGroup"
        />
        <dee-dialog
          :dialog-visible="dialogVisible"
          :title="dialogTitle"
          width="40%"
          @handleClose="handleClose"
        >
          <edit-group v-if="isEdit && model!==3" :edit-id="editId" @on-cancel="dialogVisible = false" @editSubmit="editSubmit" @handleClose="handleClose" />
          <dee-as-com
            v-if="!isEdit && model!==3"
            :lay-config="{
              typeName: typeName,
              layKey: keyName
            }"
            parent-show-mode="dialog"
            :form="bindForm"
            @completeEven="completeEven"
            @on-cancel="dialogVisible = false"
          />
          <copy-group v-if="model===3" :copy-group-item="copyGroupItem" @getGroups="getGroups" @handleClose="handleClose" />
        </dee-dialog>
      </div>
      <div slot="right" class="table-box-content">
        <div v-show="showRight" ref="searchBox">
          <dee-as-com
            ref="groupDetail"
            :lay-config="{
              typeName: 'DxGroup',
              layKey: 'defaultView'
            }"
            :basic-data="{id: editId}"
          />
        </div>
        <div v-show="showRight" :style="{height: tableHeight}">
          <dee-as-com
            ref="DxGroupMemberLinkTable"
            :lay-config="{
              typeName:'DxGroupMemberLink',
              layKey:'defaultResult'
            }"
            :extra-params="extraParams"
          />
        </div>
        <div v-show="!showRight" class="noData-wrap">
          <img src="/images/common/nodata.png" alt>
          <span>暂无数据</span>
        </div>
      </div>
    </Right-To-Left>
  </div>
</template>
<script>
import GroupTree from './components/groupTree'
import EditGroup from './components/editGroup'
import CopyGroup from './components/copy-group'
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
  name: 'Gruop',
  components: { GroupTree, EditGroup, CopyGroup },
  data() {
    return {
      bindForm: {},
      dialogTitle: '',
      dialogVisible: false,
      isEdit: false,
      selectedGroup: null,
      extraParams: [],
      editId: '',
      keyName: '',
      typeName: '',
      editGroupId: '',
      model: 0,
      copyGroupItem: null,
      showRight: false,
      tableHeight: '100%'
    }
  },
  computed: {
    parentObject: function() {
      return { parentNames: this.selectedGroup && this.selectedGroup.orgNames ? this.selectedGroup.orgNames.join('/') : '' }
    }
    // searchBoxHeight: function() {
    //   return this.$refs.searchBox ? this.$refs.searchBox.offsetHeight + 'px' : 'calc(100% - 78px)'
    // }
  },
  created() {
  },
  mounted() {
    this.getGroups()
    if (this.$refs.searchBox) {
      this.watchSize()
    }
  },
  methods: {
    watchSize() {
      const _this = this
      var erd = elementResizeDetectorMaker()
      erd.listenTo(this.$refs.searchBox, (element) => { // 这里的this.$refs.fan指定要监听的元素对象,对应的是<div ref="fan"></div>
        _this.$nextTick(() => { // 这里填写监听改变后的操作
          _this.tableHeight = `calc(100% - ${element.offsetHeight + 12}px)`
        })
      })
    },
    editSubmit() {
      this.getGroups()
      this.handleClose()
    },
    completeEven(data) {
      if (data.buttonInformation.type === 'submit') {
        this.getGroups()
        this.$refs.groupDetail.$refs.asCom.getData()
      }
      this.handleClose()
    },
    handleCopyGroup(data) {
      this.dialogTitle = '添加群组'
      this.dialogVisible = true
      this.model = 3
      this.copyGroupItem = data
    },
    handleEditGroup(isEdit, data) {
      this.dialogVisible = true
      this.dialogTitle = isEdit ? '编辑群组' : '新增群组'
      this.isEdit = isEdit
      if (!this.isEdit) {
        this.bindForm = {
          target: {
            scope: !this.$store.state.tripleManage.switch ? 'ALL' : (JSON.parse(localStorage.getItem('userLevel')) && JSON.parse(localStorage.getItem('userLevel')).level === '2' ? 'ORGANIZATION' : 'ALL')
          },
          source: {
            id: !this.$store.state.tripleManage.switch ? null : (JSON.parse(localStorage.getItem('userLevel')) && JSON.parse(localStorage.getItem('userLevel')).level === '2' ? Number(JSON.parse(localStorage.getItem('userLevel')).organizationId) : null)
          }
        }
      }
      this.typeName = 'DxOrganizationGroupLink'
      this.keyName = isEdit ? 'defaultEdit' : 'defaultCreate'
      this.editId = data ? data.id + '' : ''
    },
    handerTreeFun(item, data, node) {
      if (item.btnValue && this[item.btnValue]) {
        this[item.btnValue](item, data, node)
      } else {
        this.$emit('handerTreeFun', item, data, node)
      }
    },
    refreshTreeLoad() {
      this.editId = ''
      this.getGroups()
    },
    getGroups() {
      this.$refs.groupTree.getGroupOrg()
    },
    getListTree(obj) {
      this.nodeClick(obj)
    },
    getList() {
      this.$refs.table.getRewritingData()
    },
    nodeClick(obj) {
      if (obj.subTypeName && obj.subTypeName === 'DxGroup') {
        this.showRight = true
        this.selectedGroup = obj
        this.editId = obj.id
        this.$refs.DxGroupMemberLinkTable.$refs.asCom.getData(
          [{ fieldName: 'sourceId', operator: 'EQ', value: obj.id }],
          obj
        )
      } else {
        this.showRight = false
      }
    },
    handleClose() {
      this.model = ''
      this.dialogVisible = false
      this.keyName = ''
      this.typeName = ''
      this.editGroupId = ''
    },
    addGroup(item) {
      this.keyName = 'addOrgGroup'
      this.typeName = 'DxGroupLink'
      this.editGroupId = ''
      this.dialogTitle = '新增群组'
      this.dialogVisible = true
    },
    submitFun() {
      const form = { ...this.$refs.form.propForm }
      if (form.id) {
        form.operator = 'MODIFY'
      }
      this.$getService(this.typeName).save(form).then(res => {
        this.getGroups()
        this.$utils.showMessageSuccess(form.id ? '编辑成功' : '新增成功')
        this.handleClose()
      })
    },
    handleDelGroup(data) {
      this.$utils.showConfirm(
        '你是否确定删除选中的群组吗?',
        '提示',
        'warning',
        '确定',
        '取消',
        () => {
          const modelName = this.$utils.getModelName4dxClassName(data.dxClassname)
          this.$api.batchDelete(modelName, data.id).then(res => {
            this.$utils.showMessageSuccess('删除成功!')
            this.getGroups()
          })
        }
      )
    },
    removeGroup(data, node) {
      this.$utils.showConfirm(
        '你是否确定移除选中的群组吗?',
        '提示',
        'warning',
        '确定',
        '取消',
        () => {
          this.$api.remove('DxGroupLink', data.linkId).then(res => {
            this.$utils.showMessageSuccess('移除成功')
            this.getGroups()
          })
        }
      )
    }
  }
}
</script>

<style lang="scss">
.group-com {
  height: 100%;
  .dee-default-tree-com .el-tree {
    height: 100%;
  }
  .splitter-pane-resizer.vertical {
    opacity: 1;
    background-color: #F1F4F5;
    width: 6px;
    border-left: 0;
    border-right: 0;
  }
  .table-box-content{
    height: 100%;
  }
  .border-box-style >div{
    height: 100%;
  }
  .noData-wrap{
    width: 100%;
    height: calc(100% - 90px);
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    img{
      width: 190px;
      height: 132px;
    }
  }
}
</style>