<!-- 组织架构模块 -->
<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"  class="activeLink">船端成员管理</router-link>-->
          <!--<router-link v-if="serviceType == 'board' || serviceType == 'both'" to="/jobAuthority">岸基权限管理</router-link>-->
          <!--<router-link v-if="serviceType == 'ship' || serviceType == 'both'" to="/jobAuthorityShip">船端权限管理</router-link>-->

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

        </div>
      </div>
      <div class="org-main">
        <div class="organization-container">
          <!--左边-->
          <div style="width: 260px">
            <yh-tree :show="show" @treeClick="treeClick" @treeMsg="treeMsg" @treeAdd="treeAdd" />
          </div>
          <router-view />

          <!--1.默认显示-->
          <div v-show="msg" class="organization-box">
            <div class="hide-box">
              <div class="default-box">
                <img src="../../static/images/components/noMessage.png">
                <p>当前还没有任何成员</p>
              </div>
              <div class="hide-button">
                <el-button v-show="msg1" type="primary" @click="showAdd">新建部门</el-button>
                <el-button v-show="msg2" type="primary" @click="addman">新建成员</el-button>
                <el-button v-show="msg3" type="primary" @click="lookforbidden">查看禁用成员</el-button>
              </div>
            </div>
          </div>
          <!--2.列表显示-->
          <div v-show="list" class="organization-box">
            <div class="label-box">
              <span class="label-title">{{ lcdmsg }}</span>
            </div>
            <div class="button-common">
              <el-button v-show="newAddMan" type="primary" @click="addman">新建成员</el-button>
<!--              <el-button @click="setUpTheDepartmentclick">变更部门</el-button>-->
<!--              <el-button @click="del">删除成员</el-button>-->
              <el-button @click="lookforbidden">查看禁用成员</el-button>
            </div>
            <div class="main-list">
              <el-table
                stripe
                :row-style="cursor"
                :data="memberList"
                height="59.2vh"
                @selection-change="handleSelectionChange"
                @row-click="rowClick"
                @cell-mouse-enter="mouseEnter">
                <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="staffName" label="姓名" width="160" />
                <el-table-column prop="roles[0].roleName" label="职务" />
                <el-table-column prop="deptName" label="部门" />
                <el-table-column prop="staffMobilePhone" label="手机号" />
                <el-table-column prop="staffAccount" label="账号ID" />
                <el-table-column prop 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>
          <!--5.设置所属部门-->
          <el-dialog title="设置所属部门" :visible.sync="setUpTheDepartment" width="600px" center>
            <div class="adddepartment">
              <div class="adddepartment1">
                <el-tree
                  ref="tree"
                  :data="data"
                  show-checkbox
                  default-expand-all
                  node-key="id"
                  check-strictly
                  highlight-current
                  @check="check"
                />
                <!--:props="defaultProps"-->
              </div>
              <div class="adddepartment2">
                <span class="adddepartment4">成员将属于以下部门</span>
                <div v-for="(item,key) in checklist" :key="key" class="adddepartment3">
                  <span class="adddepartmentLeft">{{ item.value }}</span>
                  <span class="adddepartmentDel" @click="adddepartmentDel">删除</span>
                </div>
              </div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="setUpTheDepartment = false">取 消</el-button>
              <el-button type="primary" @click="setUpTheDepartmentsave">保 存</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import yhTree from '../../views/organizationShip/tree';
import yhOperaction from '../../layout/components/operaction';
import {
  delateUser,
  changeDepartment,
  getDepartmentList
} from '../../api/organization/organization';
import {
  getVesselDeptByCompId
} from '../../api/organization/tree';


export default {
  name: 'Organization',
  components: {
    yhTree,
    yhOperaction
  },
  data() {
    return {
      newAddMan: false,
      title: '',
      deptId: '',
      compId: localStorage.getItem('enterprise-front-companyId'),
      checklist: [],
      list: false,
      headState: '/organization',
      setUpTheDepartment: false,
      /* 更改部门弹窗 */
      selectradio: '',
      selectradioname: '',
      msg1: false,
      msg: false,
      msg2: false,
      msg3: false, // 查看禁用成员
      centerDialogVisible: false,
      /* 添加部门弹窗 */
      memberList: [],
      tabelselection: [],
      tabellist: {
        staffIds: []
      },
      listdata: '',
      delateid: [],
      editmsg: '',
      lcdmsg: '',
      lable: [{
        lab: '编辑',
        click: 'skip1'
      },
      {
        lab: '删除',
        click: 'delate'
      }
      ],
      data: [],
      addSection: {
        compId: this.compId,
        deptName: '',
        parentDeptId: ''
      },
      rules: {
        deptName: [{
          required: true,
          message: '',
          trigger: 'blur'
        }]
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      show: ''
    };
  },
  watch: {
    $route() {
      this.treeClick(this.listdata, 1);
    }
  },
  computed: {
    ...mapGetters({
      serviceType: 'serviceType'
    })
  },
  created() {
    this.getTitleList();
  },
  methods: {
    getTitleList() {
      const data = {
        parentId: '-1',
        children: ['1']
      };
      this.listdata = {
        parentId: '-1',
        children: ['1']
      };
      const numberval = this.page.currentPage;
      this.treeClick(data, numberval);
    },

    /* 页面加载后传递tree的信息判断页面展示内容 */
    treeMsg(treeMsg) {
      this.title = treeMsg[0].label;
      this.lcdmsg = treeMsg[0].label;
      if (treeMsg[0].children.length > 0) {
        this.msg = true;
        this.msg1 = true;
      }
    },
    treeClick(data, numberval) {
      this.listdata = data;
      this.page.currentPage = numberval;
      let data1 = '';
      if (data.parentId === '-1') {
        data1 = {
          deptId: '',
          enabled: 1,
          currentPage: numberval,
          pageSize: this.page.pageSize,
          vesselBankFlag: 'V'
        };
      } else {
        data1 = {
          enabled: 1,
          deptId: data.deptId,
          currentPage: numberval,
          pageSize: this.page.pageSize,
          vesselBankFlag: 'V'
        };
      }
      getDepartmentList(data1).then((response) => {
        this.page.total = response.total;
        this.memberList = [];
        if (data.parentId === '-1' && response.records.length > 0) {
          this.memberList = response.records;
          this.list = true;
          this.msg = false;
          this.msg1 = false;
          this.msg2 = false;
          this.msg3 = false;
          this.newAddMan = false;
        } else if (data.parentId === '-1' && response.records.length === 0) {
          this.list = false;
          this.msg = true;
          this.msg1 = false;
          this.msg2 = false;
          this.msg3 = false;
          this.newAddMan = false;
        } else if (data.parentId !== '-1' && response.records.length === 0) {
          this.list = false;
          this.msg = true;
          this.msg1 = true;
          this.msg2 = true;
          this.msg3 = true;
          this.newAddMan = true;
        } else if (data.parentId !== '-1' && response.records.length > 0) {
          this.memberList = response.records;
          this.list = true;
          this.msg = false;
          this.msg1 = false;
          this.msg2 = false;
          this.msg3 = false;
          this.newAddMan = true;
        }
      }).catch(() => {
        this.msg = false;
      });
    },
    skp(msg) {
      if (msg === 'skip1') {
        localStorage.setItem('enterprise-front-showMsg', this.editmsg.staffId);
        this.$router.push({
          name: 'orgEditShip',
          params: this.editmsg
        });
      }
    },
    /* 删除部门下成员 */
    delate() {
      delateUser(this.tabellist).then(() => {
        this.$message({
          message: '删除成功',
          type: 'success',
          showClose: true,
        });
        this.treeClick(this.listdata);
      }).catch(() => {
        this.$message({
          message: '删除失败',
          type: 'error',
          showClose: true,
        });
      });
    },
    handleSelectionChange(val) {
      this.tabellist.staffIds = [];
      this.tabelselection = val;
      this.tabellist.deptId = val.deptId;
      for (let i = 0; i < val.length; i++) {
        this.tabellist.staffIds.push(val[i].staffId);
      }
    },
    rowClick(row) {
      localStorage.setItem('enterprise-front-showMsg', row.staffId);
      this.$router.push({
        name: 'showMessageShip',
        params: row
      });
    },
    cursor() {
      return 'cursor:pointer;';
    },
    adddepartmentDel() {
      this.resetChecked();
      this.checklist = [];
    },
    /* 删除 */
    lookforbidden() {
      const sendMsg = this.listdata;
      this.$router.push({
        name: 'forbiddenShip',
        params: sendMsg
      });
    },
    /* 查看禁用成员 */
    /* 批量删除部门下成员 */
    del() {
      if (this.tabellist.staffIds.length === 0) {
        this.$message({
          message: '请选择要删除的成员',
          type: 'error',
          showClose: true,
        });
        return false;
      }
      this.$confirm('此操作将永久删除该成员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delateUser(this.tabellist).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success',
            showClose: true,
          });
          this.treeClick(this.listdata);
        }).catch(() => {
          this.$message({
            message: '删除失败',
            type: 'error',
            showClose: true,
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          showClose: true,
        });
      });
    },

    addman() {
      this.$router.push({
        name: 'orgAddManShip',
        params: this.listdata
      });
    },
    setUpTheDepartmentsave() {
      const data = {
        staffIds: this.tabellist.staffIds,
        deptId: this.deptId
      };
      changeDepartment(data).then(() => {
        this.$message({
          message: '变更成功',
          type: 'success',
          showClose: true,
        });
        this.setUpTheDepartment = false;
        this.treeClick(this.listdata);
      }).catch(() => {
        this.$message({
          message: '变更失败',
          type: 'error',
          showClose: true,
        });
      });
    },
    /* 保存变更部门 */
    resetChecked(key, value) {
      this.$refs.tree.setCheckedKeys([key]);
      this.checklist.push({
        key,
        value
      });
    },
    /* 清空 */
    check(data) {
      this.checklist = [];
      this.deptId = data.id;
      const key = data.id;
      const value = data.label;
      this.resetChecked(key, value);
    },
    setUpTheDepartmentclick() {
      if (this.tabellist.staffIds.length === 0) {
        this.$message({
          type: 'error',
          message: '请选择要变更部门的成员',
          showClose: true,
        });
        return false;
      }
      this.setUpTheDepartment = true;
      /* 渲染左侧部门树 */
      getVesselDeptByCompId({
        compId: this.compId
      }).then((response) => {
        response.forEach((item) => {
          item.label = item.deptName
        })
        const treeObj = [{
          disabled: true,
          children: response,
          fromIndex: null,
          fromParentId: null,
          id: '1',
          index: 1,
          isEdit: false,
          label: localStorage.getItem('enterprise-front-companyName'),
          parentId: '-1'
        }]
        this.data = treeObj;
      });
    },
    mouseEnter(row, column) {
      if (column.label === '操作') {
        this.tabellist.staffIds = [];
        this.tabellist.staffIds.push(row.staffId);
        this.delateid.splice(0, 1, row.staffId);
        this.editmsg = row;
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.treeClick(this.listdata, 1);
      this.page.pageSize = 10;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.treeClick(this.listdata, val);
    },
    treeAdd(s, d) {
      this.addSection.compId = d.fromParentId;
      this.addSection.parentDeptId = d.id;
      this.centerDialogVisible = true;
    },
    showAdd() {
      this.show = new Date().getTime();
    }
  }
};

</script>
<style scoped lang="scss">
/deep/ body {
  overflow-y: hidden;
}
.organization-container {
  height: calc(85vh);
  overflow-y: auto;
}
.border {
  width: 960px;
  height: 100%;
  border-left: 1px solid #cccccc;
}
.uphead {
  margin: 20px 0;
  height: 60px;
  line-height: 60px;
}
.img {
  display: inline-block;
  height: 60px;
  width: 60px;
  border-radius: 50%;
}
.kyc-passin {
  margin-left: 20px;
  width: 170px;
}
.talk {
  font-size: 12px;
  color: #999999;
}
.department {
  padding-top: 25px;
  border-top: 1px dashed #999999;
}
// /*000000*/
// /deep/.el-dialog__body {
//   padding: 0;
// }
// /deep/ .el-dialog--center .el-dialog__body {
//   padding: 0;
// }
.adddepartment {
  height: 400px;
  display: flex;
  justify-content: space-between;
}
.adddepartment1 {
  padding: 20px;
  width: 50%;
}
.adddepartment2 {
  padding: 20px;
  width: 50%;
  background-color: #eeeeee;
}
/deep/.el-tree-node__content {
  height: 40px;
}
.adddepartment3 {
  height: 36px;
  line-height: 36px;
  background-color: #ffffff;
  position: relative;
  margin-bottom: 5px;
}
.adddepartment4 {
  display: inline-block;
  margin-bottom: 20px;
}
.adddepartmentLeft {
  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;
}
.adddepartmentDel {
  display: inline-block;
  position: absolute;
  right: 20px;
  color: #1d6ced;
  cursor: pointer;
}
.addcenterDialogVisible {
  display: inline-block;
  margin-top: 50px;
  margin-bottom: 50px;
}
/deep/.fenye .el-input__inner,
.el-input__icon {
  width: 100%;
}
/deep/.fenye .el-input__icon {
  width: 100%;
}
.fenye {
  margin-top: 10px;
  float: right;
}
/deep/.el-form-item .el-input__inner {
  width: 392px;
}

.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>
