<template>
  <div class="body">
    <!--8.成员详情-->
    <div class="organization-box">
      <div class="label-box">
        <span class="label-title">成员详情</span>
      </div>
      <div class="button-common">
        <el-button @click="back">返回</el-button>
        <el-button type="primary" @click="edit">编辑</el-button>
        <el-button @click="forbitten">{{ state }}</el-button>
        <el-button @click="del">删除</el-button>
      </div>
      <div class="main-list">
        <div class="uphead">
          <span class="imghead font">头像：</span>
          <img :src="msg.staffHeadimg===''?url:msg.staffHeadimg" class="img">
        </div>
        <div>
          <span class="star font">中文名：</span>
          <span class="ontent">{{ msg.staffName }}</span>
        </div>
        <div>
          <span class="font">英文名：</span>
          <span class="ontent">{{ msg.staffNameEn }}</span>
        </div>
        <div>
          <span class="star font">账号：</span>
          <span class="ontent">{{ msg.staffAccount }}</span>
        </div>
        <div>
          <span class="star font">密码：</span>
          <span class="ontent">******</span>
        </div>
        <div>
          <span class="star font">手机号：</span>
          <span class="ontent">{{ msg.staffMobilePhone }}</span>
        </div>
        <div>
          <span class="star font">性别：</span>
          <span class="ontent">{{ msg.staffSex === 'FEMALE'?'男':'女' }}</span>
        </div>
        <div class="department">
          <div>
            <span class="star font">部门：</span>
            <span class="ontent">{{ hfmsg[0].label }}/{{ msg.deptName }}</span>
          </div>
          <div>
            <span class="star font">职务：</span>
            <span class="ontent">{{ zhiwuName.roleName }}</span>
          </div>
          <div class="lastspan">
            <span class="star font">关联船舶：</span>
            <div class="ontent ddv1">
              <span
                v-for="(item,key) in msg.vessels"
                :key="key"
                class="ontent shipName"
              >{{ item.vesselName }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import urladdress from './url';
import {
  getUsegMsg,
  disAble,
  enAble
} from '../../api/organization/showMessage';
import {
  getTreeList
} from '../../api/organization/tree';
import {
  delateUser
} from '../../api/organization/organization';

export default {
  name: 'ShowMessang',
  data() {
    return {
      compId: localStorage.getItem('enterprise-front-companyId'),
      statetf: true,
      url: urladdress.urlmsg,
      msg: {
        userAccount: '',
        userCellPhone: '',
        userHeadimg: '',
        userRealName: '',
        userRealNameEn: '',
        userSex: '',
        roles: [{
          roleName: ''
        }],
        vessels: [{
          vesselName: ''
        }]
      },
      state: '禁用',
      startStatetf: true,
      hfmsg: [
        {
          label: ''
        }
      ],
      data: '',
      zhiwuName: {}
    };
  },
  created() {
    const staffId = localStorage.getItem('enterprise-front-showMsg');
    this.data = this.$route.params;
    if (this.data.enabled === 0) {
      this.state = '启用';
      this.statetf = false;
      this.startStatetf = false;
    }
    this.getmsg(staffId);
  },
  methods: {
    /* 获取用户详情 */
    getmsg(staffId) {
      getUsegMsg({
        staffId
      }).then((response) => {
        this.msg = response;
        for (let i = 0; i < response.roles.length; i++) {
          if (response.roles[i].major === '1') {
            this.zhiwuName = response.roles[i]
          }
        }

        if (!response.staffHeadimg) {
          this.msg.staffHeadimg = ''
        }
      });
      getTreeList({
        compId: this.compId
      }).then((response) => {
        this.hfmsg = response;
      });
    },
    back() {
      if (this.startStatetf === true) {
        this.$router.back();
      } else {
        this.$router.push({
          name: 'forbidden',
          params: this.data
        });
      }
    },
    edit() {
      this.$router.push({
        name: 'orgEditShip',
        params: this.data
      });
    },
    forbitten() {
      /* 禁用 */
      if (this.statetf) {
        disAble({
          staffId: this.msg.staffId
        }).then(() => {
          this.$message({
            message: '禁用成功',
            type: 'success',
            showClose: true,
          });
          this.state = '启用';
          this.statetf = false;
          this.$router.back();
        }).catch(() => {
          this.$message({
            message: '禁用失败',
            type: 'error',
            showClose: true,
          });
        });
      } else {
        enAble({
          staffId: this.msg.staffId
        }).then(() => {
          this.$message({
            message: '启用成功',
            type: 'success',
            showClose: true,
          });
          this.state = '禁用';
          this.statetf = true;
          this.$router.back();
        }).catch(() => {
          this.$message({
            type: 'success',
            message: '启用成功',
            showClose: true,
          });
        });
      }
    },
    del() {
      this.$confirm('此操作将永久删除该成员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const staffIds = {
          staffIds: []
        };
        staffIds.staffIds.push(this.msg.staffId);
        delateUser(staffIds).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success',
            showClose: true,
          });
          this.$router.back();
        }).catch(() => {
          this.$message({
            message: '删除成功',
            type: 'success',
            showClose: true,
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          showClose: true,
        });
      });
    }
  }
};

</script>
<style scoped lang="scss">
.body {
  width: 960px;
  height: 100%;
  border-left: 1px solid #cccccc;
}
.organization-box {
  height: calc(86vh - 10px);
  overflow-y: auto;
  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  {
//   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;
}
.ddv1 {
  //width: 730px;
  vertical-align: top;
}
.ddv1 > 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;
}
.main-list {
  height: calc(42vh);
}
</style>
