<template>
  <div class="body">
    <div class="organization-box">
      <div class="label-box">
        <span class="label-title">禁用成员</span>
      </div>
      <div class="button-common">
        <el-button @click="forbiddenBack">返回</el-button>
        <el-button @click="forbiddendel">删除成员</el-button>
      </div>
      <div class="main-list">
        <el-table
          stripe
          :row-style="cursor"
          :data="memberList"
          @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="phoneNumber" label="操作" width="100" align="center">
            <yh-operaction :lable="lable" @del="delate" @skip="skp" />
          </el-table-column>
        </el-table>
        <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>
    </div>
  </div>
</template>
<script>
import yhOperaction from '../../layout/components/operaction';
import {
  getDepartmentList,
  delateUser
} from '../../api/organization/organization';

export default {
  name: 'Forbidden',
  components: {
    yhOperaction
  },
  data() {
    return {
      delateid: [],
      tabellist: {
        staffIds: []
      },
      tabelselection: '',
      memberList: [],
      datamsg: '',
      lable: [{
        lab: '编辑',
        click: 'skip1'
      },
      {
        lab: '删除',
        click: 'delate'
      }
      ],
      editmsg: '',
      page: {
        currentPage: 0,
        pageSize: 10,
        total: 0
      }

    };
  },
  created() {
    this.datamsg = localStorage.getItem('enterprise-front-id');
    this.getEnabledMsg(this.datamsg);
  },
  methods: {
    getEnabledMsg(deptId) {
      const data = {
        deptId,
        enabled: 0,
        currentPage: this.page.currentPage,
        pageSize: this.page.pageSize,
        vesselBankFlag: 'B'
      };
      getDepartmentList(data).then((response) => {
        this.page.total = response.total;
        this.memberList.length = 0;
        this.memberList = response.records;
      });
    },
    forbiddenBack() {
      this.$router.back();
    },
    cursor() {
      return 'cursor:pointer;';
    },
    handleSelectionChange(val) {
      this.tabellist.staffIds = [];
      this.tabelselection = val;
      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: 'showMessage',
        params: row
      });
    },
    skp() {
      this.$router.push({
        name: 'orgEdit',
        params: this.editmsg
      });
    },
    delate() {
      delateUser(this.tabellist).then(() => {
        this.$message({
          message: '删除成功',
          type: 'success',
          showClose: true,
        });
        this.getEnabledMsg(this.datamsg);
      }).catch(() => {
        this.$message({
          message: '删除失败',
          type: 'error',
          showClose: true,
        });
      });
    },
    forbiddendel() {
      if (this.tabellist.enabled === 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.getEnabledMsg(this.datamsg);
        }).catch(() => {
          this.$message({
            message: '删除失败',
            type: 'error',
            showClose: true,
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          showClose: true,
        });
      });
    },
    mouseEnter(row, column) {
      this.tabellist.staffIds = [];
      if (column.label === '操作') {
        this.tabellist.staffIds.push(row.staffId);
        this.editmsg = row;
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getEnabledMsg(this.datamsg);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getEnabledMsg(this.datamsg);
    }

  }
};

</script>
<style scoped lang="scss">
.body {
  width: 960px;
  height: 100%;
  border-left: 1px solid #cccccc;
}
.organization-box {
  border: none;
}
.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: 262px;
}
.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;
}
</style>
