<template>
  <div class="sys-org">
    <!-- <cy-org-list></cy-org-list> -->
    <div class="sys-org-left">
      <el-input v-model="searchName" placeholder="搜索部门/成员" style="margin-bottom: 15px;" clearable @input="searchList"></el-input>
      <div v-show="!searchName">
        <el-radio-group v-model="type" style="margin-bottom: 15px;" class="sys-org-radio">
          <el-radio-button label="组织机构"></el-radio-button>
          <el-radio-button label="角色"></el-radio-button>
        </el-radio-group>
        <el-tree
          v-show="type == '组织机构'"
          :data="orgList"
          node-key="id"
          :props="orgListProp"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="orgDetail"
        >
          <div slot-scope="{ node, data }">
            <i class="el-icon-folder" style="margin-right: 5px;"></i>
            <span :style="{color: orgInfo.id == node.data.id ? '#E9423A' : ''}">{{ node.data.name }}</span>
          </div>
        </el-tree>
        <div v-show="type == '角色'">
          <div style="width: 100%; display: flex; justify-content: center; margin-bottom: 20px;">
            <el-button v-power="'addRoleGroup'" type="normal" @click="isUpdateGroup = false, updateId = '', groupForm.name = '', $refs.addRoleGroup.show = true">新增角色组</el-button>
            <el-button v-power="'addRole'" type="normal" @click="$refs.addRole.openDialog()">新增角色</el-button>
          </div>
          <el-tree
            v-show="type == '角色'"
            :data="roleList"
            node-key="id"
            default-expand-all
            :props="roleListProp"
            :expand-on-click-node="true"
          >
            <div slot-scope="{ node, data }" :class="data.id == showIconId ? 'hover-class' : ''" @mouseover="showEditIcon(data, true)" @mouseleave="showEditIcon(data, false)">
              <i v-if="node.isLeaf" class="el-icon-s-custom" style="margin-right: 5px;"></i>
              <i v-if="!node.isLeaf" class="el-icon-folder" style="margin-right: 5px;"></i>
              <span :style="{color: roleInfo.id == data.id ? '#E9423A' : ''}" @click="roleDetail(data)">{{ data.name }}</span>
              <i v-show="data.id == showIconId" class="el-icon-edit-outline" style="margin-left: 5px;" @click.stop="isUpdateGroup = true, updateId = data.id, groupForm.name = data.name, $refs.addRoleGroup.show = true"></i>
            </div>
          </el-tree>
        </div>
      </div>
      <div v-if="searchName">
        <h4 style="margin-bottom: 15px;">搜索结果：</h4>
        <div v-for="(item, index) in searchResultList" :key="item.id + '_' + index" class="search-org" @click="openSearchResult(item)">
          <i class="el-icon-edit"></i>
          <span :style="{color: orgInfo.id == item.id ? '#E9423A' : ''}">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="sys-org-right">
      <org-info v-if="type == '组织机构' && !isPerson" :info="orgInfo" :org-list="orgList" @toOrg="orgDetail" @addOrg="getOrgList" @addPerson="addPersonInfo" @watchPerson="watchPersonInfo"></org-info>
      <person-info v-if="type == '组织机构' && isPerson == 1" :info="orgInfo" :person-info="personDetailInfo" :org-list="orgList" :disabled="personInfoDisable" @close="closePerson"></person-info>
      <role-info v-if="type == '角色'" :info="roleInfo" @close="getRoleList"></role-info>
      <person-detail v-if="type == '组织机构' && isPerson == 2" :person-info="personDetailInfo"></person-detail>
    </div>

    <cy-dialog ref="addRoleGroup" :title="isUpdateGroup ? '编辑角色组' : '新增角色组'" @close="$refs.groupForm.resetFields(), isUpdateGroup = false, updateId = ''">
      <el-form ref="groupForm" :model="groupForm" :rules="groupRules" label-width="120px" label-position="left">
        <el-form-item label="角色组名称：" prop="name" style="width: 100%;">
          <el-input v-model="groupForm.name" placeholder="请输入角色组名称"></el-input>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button type="primary" @click="confirm('groupForm')">保存</el-button>
        <el-button v-if="isUpdateGroup" type="normal" @click="deleteGroup">删除</el-button>
        <el-button type="normal" @click="$refs.groupForm.resetFields(), isUpdateGroup = false, updateId = '', $refs.addRoleGroup.show = false">取消</el-button>
      </template>
    </cy-dialog>
    <edit-role ref="addRole" @close="getRoleList"></edit-role>
  </div>
</template>

<script>
import orgInfo from './components/orgInfo.vue'
import roleInfo from './components/roleInfo.vue'
import personInfo from './components/personInfo.vue'
import personDetail from './components/personDetail.vue'
import editRole from './components/editRole.vue'
import request from '@/utils/request'

export default {
  name: 'LogManage',
  components: {
    orgInfo, roleInfo, personInfo, editRole, personDetail
  },
  data() {
    return {
      type: '组织机构',
      orgList: [],
      orgListProp: {
        label: 'name',
        children: 'children'
      },
      orgInfo: {},
      roleList: [],
      roleInfo: {},
      roleListProp: {
        label: 'name',
        children: 'childList',
        isLeaf: data => {
          return !data.childList
        }
      },
      isPerson: 0,
      personInfoDisable: false,
      searchName: '',
      searchResultList: [],
      groupForm: {
        name: ''
      },
      groupRules: {
        name: [{ required: true, message: '请输入角色组名称', trigger: 'blur' }]
      },
      isUpdateGroup: false,
      updateId: '',
      roleList: [],
      showIconId: '',
      personDetailInfo: {}
    }
  },
  mounted() {
    this.getOrgList()
    this.getRoleList()
  },
  methods: {
    getOrgList(val) {
      request({
        url: '/org/findRootOrgTreeNodeNumber',
        method: 'get'
      }).then(({ data }) => {
        this.orgList = data || []
        if (data && data.length > 0) {
          this.orgInfo = val || data[0]
        }
      })
    },
    getRoleList(val) {
      request({
        url: '/role/do_list',
        method: 'get',
        params: {
          page: 1,
          rows: 300
        }
      }).then(({ rows }) => {
        this.roleList = rows || []
        if (rows && rows.length > 0) {
          this.roleInfo = val || rows[0].childList[0]
        }
      })
    },
    orgDetail(val) {
      this.isPerson = 0
      this.orgInfo = val
    },
    closePerson(val) {
      this.getOrgList(this.orgInfo)
      if (val == 1) {
        this.isPerson = 0
      }
    },
    roleDetail(val) {
      if (!val.childList) {
        this.roleInfo = val
      }
    },
    searchList() {
      request({
        url: '/org/findOrgUserSearch',
        method: 'get',
        params: {
          keyword: this.searchName
        }
      }).then(({ data }) => {
        this.searchResultList = data || []
      })
    },
    submitGroup() {
      const data = new FormData()
      data.append('name', this.groupForm.name)
      if (this.isUpdateGroup) {
        data.append('id', this.updateId)
      }
      request({
        url: this.isUpdateGroup ? '/role/do_update' : '/role/do_add',
        method: 'post',
        data
      }).then(() => {
        this.$message.success(this.isUpdateGroup ? '修改角色组成功' : '新增成功')
        this.isUpdateGroup = false
        this.updateId = ''
        this.$refs.addRoleGroup.show = false
        this.getRoleList()
      })
    },
    deleteGroup() {
      const data = new FormData()
      data.append('id', this.updateId)
      request({
        url: '/role/do_delete',
        method: 'post',
        data
      }).then(() => {
        this.$message.success('删除成功')
        this.isUpdateGroup = false
        this.updateId = ''
        this.$refs.addRoleGroup.show = false
        this.getRoleList()
      })
    },
    confirm(key) {
      this.$refs[key].validate(flag => {
        if (flag) {
          this.submitGroup()
        } else {
          this.$message.error('必填项不能为空')
        }
      })
    },
    getTypeList() {
      request({
        url: '/role/findGroupRole',
        method: 'get'
      }).then(({ data }) => {
        this.roleList = data || []
      })
    },
    showEditIcon(info, flag) {
      if (info.childList && info.name !== '默认') {
        this.showIconId = flag ? info.id : ''
      }
    },
    addPersonInfo(val) {
      if (val) {
        this.personDetailInfo = { ...val }
      } else {
        this.personDetailInfo = {}
      }
      this.isPerson = 1
      this.personInfoDisable = false
    },
    watchPersonInfo(val) {
      if (val) {
        this.personDetailInfo = { ...val }
      } else {
        this.personDetailInfo = {}
      }
      this.isPerson = 1
      this.personInfoDisable = true
    },
    openSearchResult(info) {
      this.type = '组织机构'
      if (info.type) {
        this.personDetailInfo = { ...info }
        // this.getPersonDetail(info.id)
        this.isPerson = 1
      } else {
        this.isPerson = 0
        this.orgInfo = info
      }
    },
    getPersonDetail(id) {
      request({
        url: '/user/do_get',
        method: 'get',
        params: {
          id: id,
          orgId: 1
        }
      }).then(({ data }) => {
        this.isPerson = 2
        this.personDetailInfo = { ...data }
        this.orgInfo = data.userOrgRelList
        // this.orgInfo = {
        //   children: null,
        //   id: data.userOrgRelList[0].orgId,
        //   isParent: false,
        //   name: data.userOrgRelList[0].orgName,
        //   open: true,
        //   parentId: 1,
        //   type: false
        // }
      })
    }
  }
}
</script>

<style lang="scss">
.sys-org {
  display: flex;
  flex-direction: row;
  border: 1px solid #e0e0e0;
  height: calc(100vh - 235px);
  font-size: 14px;
  .sys-org-left {
    width: 300px;
    padding: 20px 10px 0;
    height: 100%;
    overflow: auto;
    border-right: 1px solid #e0e0e0;
    background-color: #f5f6f6;
    flex-shrink: 0;
    .el-tree {
      background-color: transparent;
    }
    .sys-org-radio {
      width: 100%;
      .el-radio-button {
        width: 50%;
        .el-radio-button__inner {
          width: 100%;
        }
      }
    }
    h4 {
      margin-bottom: 5px;
      margin-top: 5px;
    }
    .search-org {
      width: 100%;
      line-height: 20px;
      margin-bottom: 15px;
      cursor: pointer;
    }
    .hover-class {
      text-decoration: underline;
    }
  }
  .sys-org-right {
    height: 100%;
    overflow: auto;
    flex-grow: 1;
  }
}
</style>
