<!--
  @description: 系统设置->机构管理
  @author: hdk
  @routerPath: /systemManagement/organization
  @date:  2020-11-04 16:43:03
-->
<template>
  <div>
    <div class="title title_border p0-16">
      <i class="el-icon-s-home" />
      组织结构
    </div>
    <!-- 搜索条件 -->
    <section style="margin:10px 16px 0 16px;" class=" clearfix SearchContent">
      <div class="SearchContent_leftInput fl">
        <el-form ref="searchForm" :model="searchForm" inline label-width="70px">
          <el-form-item label="机构名称">
            <el-input v-model="searchForm.departName" placeholder="请输入" style="width:150px" />
          </el-form-item>
          <el-form-item label="机构属性">
            <el-select v-model="searchForm.orgType" placeholder="请选择" style="width:150px">
              <el-option
                v-for="item in orgTypeList"
                :key="item.typecode"
                :label="item.typename"
                :value="item.typecode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.useStatus" placeholder="请选择" style="width:150px">
              <el-option
                v-for="item in useStatusList"
                :key="item.typecode"
                :label="item.typename"
                :value="item.typecode"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="fr">
        <el-button type="primary" @click="onSearch">
          搜 索
        </el-button>
        <el-button plain type="info" @click="resetForm()">
          重 置
        </el-button>
      </div>
    </section>
    <div class="organization-state-operation">
      <el-button type="primary" plain @click="setStatus('02')">
        停用
      </el-button>
      <el-button type="primary" plain @click="setStatus('01')">
        启用
      </el-button>
      <el-button type="primary" plain @click="deleteDepart">
        删除
      </el-button>
    </div>
    <div>
      <div class="organization_left">
        <!-- 组织机构树 -->
        <organizationTree
          ref="organizationTree"
          :height="organizationTreeData.height"
          :highlight-current="organizationTreeData.highlightCurrent"
          :on-click-node="organizationTreeData.onClickNode"
          :search-params="searchParams"
          @nodeClickData="treeNodeClick"
        />
      </div>
    </div>
    <div class="organization_right">
      <div class="organization-operation">
        <el-button type="primary" plain @click="infoEdit('01')">
          添加机构
        </el-button>
        <el-button type="primary" plain @click="infoEdit('02')">
          编辑机构信息
        </el-button>
        <el-button type="primary" plain @click="handleUser">
          用户信息
        </el-button>
      </div>
      <!-- 用户列表 -->
      <userListByDepart v-if="userListShow" :organization-information="organizationInformation" />
      <!-- 基本信息编辑 -->
      <companyInfoAdd
        v-if="!userListShow && isEdit"
        :organization-information="organizationInformation"
        :edit-method="editMethod"
        @changeIsEdit="changeIsEdit"
      />
      <!-- 基本信息查看 -->
      <companyInfoDetail
        v-if="!userListShow && !isEdit"
        ref="companyInfoDetail"
        :organization-information="organizationInformation"
      />
    </div>
  </div>
</template>
<script>
/* 公共混入*/
import { ListMixin } from '@/mixins/ListMixin'
import { organizationGroupMixin } from '../mixins/organizationGroupMixin'
/* 接口*/
import { updateDepartInfoStatus, delDepart } from '@api/rolemanagment/organization'
/* 公用方法*/
import { filterDictText, restoreInitialValue } from '@/assets/js/utils' // 常用方法
/* 组件*/
import organizationTree from '@/views/common/user/organizationTree/organizationTree' // 组织机构
import companyInfoAdd from '../organizationInfo/organizationInfoAddComp' // 公司信息添加、编辑
import companyInfoDetail from '../organizationInfo/organizationInfoDetailComp' // 公司信息查看
import userListByDepart from '../organizationInfo/organizationInfoUserListComp' // 用户列表

export default {
  name: 'Organization',
  components: {
    organizationTree, // 组织机构
    companyInfoAdd, // 公司信息添加、编辑
    companyInfoDetail, // 公司信息查看
    userListByDepart // 用户列表
  },
  mixins: [ListMixin, organizationGroupMixin],
  data() {
    return {
      isEdit: false, // 基本信息是否编辑
      userListShow: false, // 用户列表显隐控制
      editMethod: '', // 01添加机构 02编辑机构信息
      organizationInformation: {}, // 当前选中组织信息
      organizationTreeData: {
        height: 'calc(100vh - 56px - 40px - 20px - 90px)', // 树容器高度
        highlightCurrent: true, // 选中高亮
        onClickNode: true // 点击结点
      },
      searchParams: {}, // 查询条件
      searchForm: {
        departName: '', // 机构名称
        orgType: '', // 机构类型
        useStatus: '' // 状态
      }
    }
  },
  methods: {
    filterDictText,
    // 树节点点击
    treeNodeClick(data) {
      // 点击列表状态重置（查看基本信息）
      if (this.isEdit) {
        // 查看
        this.isEdit = false
      }
      this.organizationInformation = data
    },
    // 搜索
    onSearch() {
      this.searchParams = JSON.parse(JSON.stringify(this.searchForm))
    },
    // 重置
    resetForm() {
      // 重置searchForm
      restoreInitialValue(this.searchForm)
      // 搜索
      this.onSearch()
    },
    // 删除机构
    deleteDepart() {
      // 删除机构接口调用
      delDepart(this.organizationInformation.id).then(res => {
        this.$message({
          message: '操作成功！',
          type: 'success'
        })
        // 刷新tree操作的结点
        this.$refs.organizationTree.refreshData()
      }).catch(() => {
      })
    },
    // 设置状态 status 01启用 02停用
    setStatus(status) {
      const params = {
        id: this.organizationInformation.id, // 机构id
        flag: status // 状态 01启用 02停用
      }
      // 机构状态接口调用
      updateDepartInfoStatus(params).then(res => {
        this.$message({
          message: '操作成功！',
          type: 'success'
        })
        // 查看或编辑更新视图
        if (!this.userListShow && !this.isEdit) {
          this.$refs.companyInfoDetail.getBasicDepartInfo()
        }
      }).catch(() => {
      })
    },
    // 机构操作前逻辑判断是否选中机构
    isCheckedOrg() {
      // 是否选中机构
      if (!this.organizationInformation.id) {
        this.$message({
          message: '请选择要操作的组织机构',
          type: 'warning'
        })
        return false
      }
      return true
    },
    // 机构新增、编辑
    infoEdit(editMethod) {
      // 是否选中机构
      if (!this.isCheckedOrg()) {
        return false
      }
      // 编辑模式
      this.editMethod = editMethod
      // 用户列表控制
      this.userListShow = false
      // 是否可编辑
      this.isEdit = true
    },
    // 新增编辑确认、取消回调
    changeIsEdit(isRefresh) {
      // 确认刷新，取消不刷新
      if (isRefresh) {
        // 刷新tree操作的结点
        this.$refs.organizationTree.refreshData()
      }
      // 编辑模式
      this.editMethod = ''
      // 用户列表控制
      this.userListShow = false
      // 是否可编辑
      this.isEdit = false
    },
    // 打开用户列表
    handleUser() {
      if (!this.isCheckedOrg()) {
        return false
      }
      // 用户列表控制
      this.userListShow = true
      // 查看
      this.isEdit = false
    }
  }
}
</script>
<style lang="less" scoped>
.organization_left {
  padding-top: 10px;
  padding-right: 10px;
  float: left;
  width: 15vw;
  .organization_left_scrollbar{
    height: calc(100vh - 56px - 40px - 20px);
  }
}
.organization_right {
  padding-top: 10px;
  padding-left: 5px;
  float: left;
  width: calc(85vw - 240px);
}
.organization-state-operation {
  padding: 10px 15px;
  border-bottom: 1px solid #EEEEEE;
}
.organization-operation {
  padding: 0px 15px 5px 15px;
}
</style>
