<!-- 职务权限模块 -->
<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">岸基权限管理</router-link>-->
          <!--<router-link v-if="serviceType == 'ship' || serviceType == 'both'" to="/jobAuthorityShip" class="activeLink">船端权限管理</router-link>-->

          <router-link to="/organization">岸基成员管理</router-link>
          <router-link to="/organizationShip">船端成员管理</router-link>
          <router-link to="/jobAuthority">岸基权限管理</router-link>
          <router-link to="/jobAuthorityShip" class="activeLink">船端权限管理</router-link>


        </div>
      </div>
      <!--职责权限管理主体-->
      <div class="org-main">
        <div class="organization-box">
          <div class="label-box">
            <span class="label-title">{{ jobInfo.label }}</span>
          </div>
          <!--选择部门后显示-->
          <div  class="show-box"  v-loading="showLoading">
            <!--列表-->
            <div class="main-list">
              <el-table
                ref="roleList"
                height="59.2vh"
                stripe
                :data="roleList">
                <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="chineseName" label="职务中文名称" width="150" />
                <el-table-column prop="englishName" label="职务英文名称" width="150" />
                <el-table-column prop="deptName" label="所属部门">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.deptId" :placeholder="$t('common.selected')"
                               @change="deptChange(scope.$index,scope.row.deptId)">
                      <el-option
                        v-for="item in initDeptList"
                        :key="item.deptId"
                        :label="item.deptName"
                        :value="item.deptId">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <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="120" align="center">
                  <template slot-scope="scope">
                    <el-dropdown size="small">
                      <el-button type="primary" size="mini">
                        更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="saveData(scope.row)">保存</el-dropdown-item>
                        <el-dropdown-item @click.native="settingAuth(scope.row)">设置职责范围</el-dropdown-item>
                        <el-dropdown-item @click.native="deleteRow(scope.row)">删除权限</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="organization-container">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import {
  createVesselRole, delateUser
} from '../../api/jobAuthority/jobAuthority';
import {
  getVesselDeptByCompId
} from '../../api/organization/tree';
import {
  getRoleDutyByCompId
} from '../../api/organization/organization';

export default {
  name: 'JobAuthority',
  components: {
  },
  data() {
    return {
      showLoading: false,
      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: {
        deptId: '1'
      }, // 弹框所属部门
      msg: '', // 当前行所有信息
      initDeptList: []
    };
  },
  computed: {
    ...mapGetters({
      serviceType: 'serviceType'
    })
  },
  created() {
    this.showLoading = true
    this.getRoleComList();
    getVesselDeptByCompId({ compId: localStorage.getItem('enterprise-front-companyId') }).then((response) => {
      this.initDeptList = response
      this.showLoading = false
    });
  },
  methods: {
    /* 页数 */
    handleCurrentChange() {
      this.getRoleComList();
    },
    /* 总页数 */
    handleSizeChange() {
      this.getRoleComList();
    },
    /* 点击公司名获取所有角色列表 */
    getRoleComList() {
      getRoleDutyByCompId({ compId: localStorage.getItem('enterprise-front-companyId'), vesselBankFlag: 'V' }).then((response) => {
        this.roleList = response;
        this.page.total = response.length;
      });
    },
    deptChange(index, id) {
      this.roleList[index].deptId = id
      this.roleList[index].deptName = this.initDeptList.find(item => id === item.deptId).deptName
    },
    saveData(row) {
      this.showLoading = true
      const params = {
        roleName: row.chineseName,
        roleNameEn: row.englishName,
        roleDescription: '',
        vesselBankFlag: 'V',
        dutyId: row.dutyId,
        compId: row.compId,
        deptId: row.deptId,
        roleId: row.roleId
      }
      createVesselRole(params).then(() => {
        this.$message.success('保存成功')
        this.showLoading = false
      });
    },
    deleteRow(row) {
      this.$confirm('此操作将永久删除该职务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const arr = [];
        arr.push(row.roleId);
        delateUser(arr).then(() => {
          this.getRoleComList();
        });
        this.$message({ type: 'success', message: '删除成功!' });
      }).catch(() => {
      });
    },
    settingAuth(row) {
      localStorage.setItem('enterprise-front-roleId', this.msg.roleId);
      localStorage.setItem('enterprise-front-deptId', this.msg.deptId);
      this.$router.push({
        name: 'jobScopeShip',
        params: {
          roleId: row.roleId
        }
      });
    }
  }
};

</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;
     }
   }
 }
.el-button--primary{
  color: black;
  background-color: white !important;
  border-color: #DDE9FC !important;
}
</style>
