<!-- 职务权限模块 -->
<template>
  <div>
    <div class="org-box">
      <!--组织架构两个导航-->
      <div class="org-nav">
        <div class="org-title">
          <!--<router-link v-if="serviceType == 'board' || serviceType == 'both'" to="/organization">岸基成员管理</router-link>-->
          <!--<router-link v-if="serviceType == 'ship' || serviceType == 'both'" to="/organizationShip">船端成员管理</router-link>-->
          <!--<router-link v-if="serviceType == 'board' || serviceType == 'both'" to="/jobAuthority" class="activeLink">岸基权限管理</router-link>-->
          <!--<router-link v-if="serviceType == 'ship' || serviceType == 'both'" to="/jobAuthorityShip">船端权限管理</router-link>-->

          <router-link to="/organization">岸基成员管理</router-link>
          <router-link to="/organizationShip">船端成员管理</router-link>
          <router-link to="/jobAuthority" class="activeLink">岸基权限管理</router-link>
          <router-link to="/jobAuthorityShip">船端权限管理</router-link>
        </div>
      </div>
      <!--职责权限管理主体-->
      <div class="org-main">
        <div class="organization-container">
          <!--内容树结构-->
          <yh-tree @treeClick="treeDay" @treeAdd="treeAdd" />
          <!--右侧主体-->
          <div class="organization-box">
            <div class="label-box">
              <span class="label-title">{{ jobInfo.label }}</span>
            </div>
            <!--默认显示-->
            <div v-show="clickNavStatus" class="hide-box">
              <div class="default-box">
                <img src="../../static/images/components/noMessage.png">
                <p>当前还没有任何职务</p>
              </div>
              <div class="hide-button">
                <el-button type="primary" @click="getNewJob">新建职务</el-button>
              </div>
            </div>
            <!--选择部门后显示-->
            <div v-show="!clickNavStatus" class="show-box">
              <!--共通按钮-->
              <div class="button-common">
                <el-button type="primary" @click="getNewJob">新建职务</el-button>
                <el-button @click="deleteButton">删除职务</el-button>
              </div>
              <!--列表-->
              <div class="main-list">
                <el-table
                  ref="roleList"
                  height="59.2vh"
                  stripe
                  :data="roleList"
                  @cell-mouse-enter="ent"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column type="selection" width="30" align="center" />
                  <el-table-column prop="roleId" label="序号" width="50" align="center">
                    <template slot-scope="scope">{{ scope.$index+1 }}</template>
                  </el-table-column>
                  <el-table-column prop="roleName" label="职务名称" width="200" />
                  <el-table-column prop="deptName" label="所属部门" />
                  <el-table-column prop="resources" label="管理范围（权限）">
                    <template slot-scope="scope">
                      <span
                        v-for="(item,value) in scope.row.resources"
                        :key="value"
                        class="resources"
                      >{{ item.resourceName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="phoneNumber" label="操作" width="100" align="center">
                    <yh-operaction :lable="lable" @del="delate" @skip="skp" />
                  </el-table-column>
                </el-table>
              </div>
              <el-pagination
                :current-page="page.currentPage"
                :page-sizes="[10,20,30,50]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
            <!--新建职务弹框-->
            <el-dialog title="新建职务" :visible.sync="messageBox" width="600px" center>
              <!--弹框主体-->
              <span class="star font">职务名称：</span>
              <el-input v-model="jobName" placeholder="请输入职务名称" class="addjob" />
              <span class="star font">所属部门：</span>
              <span v-show="modifyStatus" class="content">{{ deptList.jobName }}</span>
              <span class="operaction" @click="modifyDepartment">{{ modifyText }}</span>
              <!--弹框底部-->
              <span slot="footer" class="dialog-footer">
                <el-button @click="messageBox = false">取 消</el-button>
                <el-button type="primary" @click="newJob">确 定</el-button>
              </span>
            </el-dialog>

            <!--设置修改所属部门-->
            <el-dialog title="设置所属部门" :visible.sync="setModifyDepartment" width="600px" center>
              <div class="modify-department">
                <div class="department-box">
                  <el-tree
                    ref="tree"
                    :data="treemsg"
                    show-checkbox
                    default-expand-all
                    node-key="id"
                    check-strictly
                    highlight-current
                    @check="check"
                  />
                </div>
                <div class="department-tree">
                  <span class="department-title">成员将属于以下部门</span>
                  <div v-for="(item,key) in checklist" :key="key" class="department-from">
                    <span class="department-left">{{ item.value }}</span>
                    <span class="department-del" @click="addDepDel">删除</span>
                  </div>
                </div>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="setModifyDepartment = false">取 消</el-button>
                <el-button type="primary" @click="departmentSave">保 存</el-button>
              </span>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import yhTree from '../../layout/components/tree.vue';
import yhOperaction from '../../layout/components/operaction.vue';
import {
  getUser,
  findRoles,
  delateUser
} from '../../api/jobAuthority/jobAuthority';
import {
  getTreeList,
} from '../../api/organization/tree';

export default {
  name: 'JobAuthority',
  components: {
    yhTree,
    yhOperaction
  },
  data() {
    return {
      centerDialogVisible: false,
      /* 添加部门弹窗 */
      addSection: {
        compId: localStorage.getItem('enterprise-front-companyId'),
        deptName: '',
        parentDeptId: ''
      },
      page: {
        currentPage: 0,
        pageSize: 10,
        total: 0
      },
      jobInfo: {
        label: localStorage.getItem('enterprise-front-companyName')
      }, // 部门信息
      headState: '/organization',
      clickNavStatus: true, // 部门下有无职务 列表切换
      alltole: true, // 角色筛选标识
      messageBox: false, // 新建职务弹框
      setModifyDepartment: false, // 修改设置部门弹框
      jobName: {}, // 新建职务的名称
      roleList: [], // 角色列表
      multipleSelection: [], // 删除的职务
      treemsg: [], // 新建职务 树结构的部门列表
      modifyText: '', // 新建职务 部门设置和修改切换
      modifyStatus: false, // 新建职务 部门设置和修改切换
      checklist: [], // 新建职务 树结构删除
      roleButtonIds: [], // 按钮删除的角色id列表
      roleIds: [], // 操作删除的角色id列表
      lable: [{
        lab: '设置职责范围',
        click: 'skip1'
      },
      {
        lab: '删除',
        click: 'delate'
      }
      ],
      deptList: {}, // 弹框所属部门
      msg: '', // 当前行所有信息
    };
  },
  computed: {
    ...mapGetters({
      serviceType: 'serviceType'
    })
  },
  created() {
    /* 点击公司名获取所有角色列表 */
    this.getRoleComList();
  },
  methods: {
    /* 弹出框所属部门修改或设置 */
    modifyDepartment() {
      this.setModifyDepartment = true;
      this.getTreeMsg();
    },
    /* 新建职务 树结构获取所有部门 */
    getTreeMsg() {
      getTreeList({
        compId: this.addSection.compId
      }).then((response) => {
        this.treemsg = response;
        this.treemsg[0].disabled = true;
      });
    },
    /* 新建职务 树结构删除 */
    addDepDel() {
      this.resetChecked();
      this.checklist = [];
    },
    /* 新建职务 树结构删除 */
    resetChecked(key, value) {
      this.$refs.tree.setCheckedKeys([key]);
      this.checklist.push({
        key,
        value
      });
    },
    /* 新建职务 树结构清空 */
    check(data,) {
      this.checklist = [];
      const key = data.id;
      const value = data.label;
      this.resetChecked(key, value);
    },
    /* 新建职务 树结构保存 */
    departmentSave() {
      this.setModifyDepartment = false;
      this.modifyText = '修改';
      this.modifyStatus = true;
      this.deptList.deptId = this.checklist[0].key;
      this.deptList.jobName = this.checklist[0].value;
    },
    /* 新建职务弹框是公司还是部门 */
    getNewJob() {
      this.jobName = '';
      this.messageBox = true;
      if (this.jobInfo.label === localStorage.getItem('enterprise-front-companyName')) {
        this.deptList.jobName = '';
        this.modifyText = '设置';
        this.modifyStatus = false;
      } else {
        this.deptList.jobName = this.jobInfo.label;
        this.modifyText = '修改';
        this.modifyStatus = true;
      }
    },
    /* 新建角色 */
    newJob() {
      if (this.deptList.jobName === '' || this.jobName === '') {
        this.$message({
          message: '"*"为必填信息',
          type: 'warning',
          showClose: true,
        });
      } else {
        const data = {
          roleName: this.jobName, // 职务名称
          deptId: this.deptList.deptId, // 所属部门ID
          compId: this.addSection.compId
        };
        getUser(data).then(() => {
          this.messageBox = false;
          if (this.alltole) {
            this.getRoleList();
          } else {
            this.getRoleComList();
          }
        }).catch((code) => {
          if (code === 'MANAGEMENT-004') {
            this.$message({
              message: '职务名称冲突，请重新命名',
              type: 'error',
              showClose: true,
            });
            this.jobName = '';
          }
        });
      }
    },
    /* 页数 */
    handleCurrentChange(num) {
      this.page.currentPage = num;
      if (this.alltole) {
        this.getRoleList();
      } else {
        this.getRoleComList();
      }
    },
    /* 总页数 */
    handleSizeChange(num) {
      this.page.pageSize = num;
      if (this.alltole) {
        this.getRoleList();
      } else {
        this.getRoleComList();
      }
    },
    /* 点击左侧树 获得部门信息 */
    treeDay(treeClickData) {
      this.jobInfo = treeClickData;
      this.deptList.deptId = this.jobInfo.id;
      this.page.currentPage = 0;
      if (this.jobInfo.parentId === -1) {
        this.alltole = false;
        this.getRoleComList();
      } else {
        this.alltole = true;
        this.getRoleList();
      }
    },
    /* 点击公司名获取所有角色列表 */
    getRoleComList() {
      const data = {
        compId: this.addSection.compId,
        currentPage: this.page.currentPage,
        pageSize: this.page.pageSize,
        vesselBankFlag: 'B'
      };
      findRoles(data).then((response) => {
        this.roleList = response.records;
        this.page.total = response.total;
        if (response.total !== 0) {
          this.clickNavStatus = false;
        } else {
          this.clickNavStatus = true;
        }
      });
    },
    /* 获取角色列表 */
    getRoleList() {
      const data = {
        compId: this.addSection.compId,
        deptId: this.jobInfo.id,
        currentPage: this.page.currentPage,
        vesselBankFlag: 'B',
        pageSize: this.page.pageSize
      };
      findRoles(data).then((response) => {
        this.roleList = response.records;
        this.page.total = response.total;
        if (response.total !== 0) {
          this.clickNavStatus = false;
        } else {
          this.clickNavStatus = true;
        }
      });
    },
    /* 删除时候多选 */
    handleSelectionChange(val) {
      this.roleIds = [];
      this.multipleSelection = val;
      for (const i in this.multipleSelection) {
        this.roleIds.push(this.multipleSelection[i].roleId);
      }
      this.roleButtonIds = this.roleIds;
    },
    /* 表格移入操作 */
    ent(row,) {
      this.msg = row;
    },
    /* 点击当前行操作执行跳转设置职责范围 */
    skp(msg) {
      if (msg === 'skip1') {
        this.$router.push({
          name: 'jobScope',
          params: {
            roleId: this.msg.roleId
          }
        });
        localStorage.setItem('enterprise-front-roleId', this.msg.roleId);
        localStorage.setItem('enterprise-front-deptId', this.msg.deptId);
      }
    },
    /* 按钮删除角色 */
    deleteButton() {
      if (this.roleButtonIds.length !== 0) {
        this.$confirm('此操作将永久删除该职务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delateUser(this.roleButtonIds).then(() => {
            if (this.alltole) {
              this.getRoleList();
            } else {
              this.getRoleComList();
            }
          });

          this.$message({
            type: 'success',
            message: '删除成功!',
            showClose: true,
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
            showClose: true,
          });
        });
      } else {
        this.$message({
          type: 'info',
          message: '请选择要删除的成员',
          showClose: true,
        });
      }
    },
    /* 操作删除 */
    delate() {
      this.roleIds = [];
      this.roleIds.push(this.msg.roleId);
      delateUser(this.roleIds).then(() => {
        this.getRoleList();
      });
    },
    /* 树添加子部门 */
    treeAdd(s, d) {
      this.addSection.parentDeptId = d.parentId;
      this.centerDialogVisible = true;
    },
  }
};

</script>
<style scoped lang="scss">
.organization-box {
  height: calc(82vh);
  overflow-y: auto;
  .resources {
    border-right: 1.5px solid #ccc;
    padding: 0 5px;
  }
  .resources:nth-last-child(1) {
    border-right: none;
  }
}
.modify-department {
  height: 400px;
  display: flex;
  justify-content: space-between;
}
.department-box {
  padding: 20px;
  width: 262px;
  overflow-y: auto;
}
.department-tree {
  padding: 20px;
  width: 50%;
  background-color: #eeeeee;
}
/deep/.el-tree-node__content {
  height: 40px;
}
.department-from {
  height: 36px;
  line-height: 36px;
  background-color: #ffffff;
  position: relative;
  margin-bottom: 5px;
}
.department-title {
  display: inline-block;
  margin-bottom: 20px;
}
.department-left {
  width: 195px;
  display: inline-block;
  position: absolute;
  left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shipName {
  height: 20px;
  line-height: 20px;
  padding: 0 4px 0 8px;
  background-color: #dde9fc;
  margin-right: 10px;
  margin-bottom: 10px;
}
.dv1 {
  width: 730px;
  vertical-align: top;
}
.dv1 > span {
  float: left;
}
.editShip:after {
  margin-left: 8px;
  font-size: 18px;
  content: "×";
  color: #ffffff;
  vertical-align: -2px;
  cursor: pointer;
}
.department-del {
  display: inline-block;
  position: absolute;
  right: 20px;
  color: #1d6ced;
  cursor: pointer;
}
.addjob {
  width: 413px;
}
/deep/.addjob .el-input__inner {
  width: 413px !important;
}
/deep/.department-box .is-disabled {
  display: none;
}
.org-nav {
  background: #fff;
  position: fixed;
  width: 100%;
  height: 50px;
  z-index: 990;

  .org-title {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    width: 550px !important;
    margin: 0 auto;

    a {
      color: #666 !important;
    }

    a:nth-child(1) {
      padding-right: 0px !important;
      border-right: none !important;
    }

    a:nth-child(2) {
      padding-left: 0 !important;
    }

    .activeLink {
      font-weight: bold;
      color: #1D6CED !important;
    }
  }
}
</style>
