<template>
  <el-header class="base-header">
    <div class="base-header__left">
      <i class="iconfont icon-fenleishezhi" style="font-size:24px" @click="drawerVisible = true"></i>
      <span class="title">{{currentModule.menuName}}</span>
    </div>
    <div class="base-header__right">
      <el-dropdown @command="onCommand" trigger="click">
        <span style="color:#909399;cursor:pointer">
          {{ userInfoForm.realName }}<i class="el-icon-arrow-down arrowico" style="margin-left:10px"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="info">账号信息</el-dropdown-item>
          <!-- <el-dropdown-item command="pwd">修改密码</el-dropdown-item> -->
          <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <!-- 修改用户信息 -->
    <el-dialog title="账户信息" class="user-form-dialog" :visible.sync="userFormVisible" width="425px">
      <el-form :model="userInfoForm" :rules="userFormRules" ref="userForm" label-width="100px">
        <el-form-item label="姓名" prop="realName">
          <el-input v-model="userInfoForm.realName"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="userInfoForm.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工号" prop="clerkCode">
          <el-input disabled v-model="userInfoForm.clerkCode"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phoneNumber">
          <el-input v-model="userInfoForm.phoneNumber" type="text" :maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="positionName">
          <el-input v-model="userInfoForm.positionName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelModUserInfo('userForm')">取 消</el-button>
        <el-button type="primary" @click="confirmModUserInfo('userForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog title="修改密码" :visible.sync="dialogPawVisible" width="385px">
      <el-form :model="pawForm" :rules="rules" ref="pawForm" label-width="80px">
        <el-form-item label="旧密码" prop="oldPaw">
          <el-input v-model="pawForm.oldPaw"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPaw">
          <el-input v-model="pawForm.newPaw"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="surePaw">
          <el-input v-model="pawForm.surePaw"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="toModifyPawCancel('pawForm')">取 消</el-button>
        <el-button type="primary" @click="toModifyPawSure('pawForm')">确 定</el-button>
      </div>
    </el-dialog>
    <el-drawer
      :modal="false"
      custom-class="header-drawer"
      size="300px"
      :show-close="false"
      append-to-body
      :visible.sync="drawerVisible"
      direction="ltr">
      <div class="header-drawer__container">
        <div class="header-drawer__header">
          <i class="iconfont icon-fenleishezhi" style="font-size:24px" @click="drawerVisible = true"></i>
          <span class="title">{{currentModule.menuName}}</span>
        </div>
        <el-menu :default-active="currentModule.code">
          <el-menu-item v-for="item in moduleList" :key="item.code" :index="item.code" @click="onSelectMenu(item)"><i style="width:20px;display:inline-block" :class="item.iconUrl"></i>{{item.menuName}}</el-menu-item>
        </el-menu>
        <div class="operation-log" @click="openLog">
          <span>操作日志</span>
          <i class="iconfont icon-right"></i>
        </div>
      </div>
    </el-drawer>
  </el-header>
</template>

<script>
import { getRequest, postRequest, putRequest } from '@/api/api';
export default {
  name: 'BaseHeader',
  props: {
    currentModule: {
      type: Object,
      required: true
    },
    moduleList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      requestProject: 'gic-authcenter',
      drawerVisible: false,
      // 修改密码
      dialogPawVisible: false,
      pawForm: {
        oldPaw: '',
        newPaw: '',
        surePaw: ''
      },
      rules: {
        oldPaw: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
        newPaw: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
        surePaw: [{ required: true, message: '请输入确认密码', trigger: 'blur' }]
      },
      // 用户信息 form
      userFormVisible: false,
      userInfoForm: {
        realName: '',
        gender: 0, // 1男0女
        clerkCode: '',
        phoneNumber: '',
        positionName: ''
      },
      userFormRules: {
        realName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        clerkCode: [{ required: true, message: '请输入员工代码', trigger: 'blur' }],
        phoneNumber: [{ required: true, message: '请输入手机号', trigger: 'blur' }, { pattern: /^1[34578]\d{9}$/, message: '手机号码格式不正确' }],
        positionName: [{ required: true, message: '请输入职位', trigger: 'blur' }]
      },
      loginName: '',
      // 是否显示操作日志和权限
      // menuAllCode: [],
      // isLogBool: true,
      // isAuthorityBool: true,
      // 判断权限管理的挑转路由
      // authorityUrl: ''
    };
  },
  // watch: {
  //   linkType(newVal) {
  //     this.entranceType = newVal;
  //   }
  // },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    openLog() {
      window.location.href = window.location.origin + '/operation-platform/#/log?tabId=system_log';
      this.drawerVisible = false;
    },
    onSelectMenu(item) {
      if(this.currentModule.code === item.code) return;
      window.location.href = window.location.origin + '/' + item.projectCode + '/#' + item.uri;
      this.drawerVisible = false;
    },
    onCommand(cmd) {
      switch(cmd) {
        case 'info': this.toModifyUser()
          break;
        case 'pwd': this.toModifyPaw()
          break;
        case 'loginOut': this.toLoginOut()
          break;
      }
    },
    // 获取用户信息
    getUserInfo() {
      let para = {
        requestProject: this.requestProject
      };
      getRequest('/gic-authcenter/loginuser', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode === '0') {
            let _result = resData.result;
            this.userInfoForm.realName = _result.realName;
            this.userInfoForm.gender = parseInt(_result.sex);
            this.userInfoForm.clerkCode = _result.employeeNumber;
            this.userInfoForm.phoneNumber = _result.userMobile;
            this.userInfoForm.positionName = _result.position;
            this.loginName = _result.loginName;
            // 判断是否显示 权限管理 操作日志
            // let menuTree = _result.menuTree ? _result.menuTree : [];
            // let menuTreeCode = this.getMenuTreeCode(menuTree);
            // this.isAuthorityBool = menuTreeCode.indexOf('authz_manage') > -1 ? true : false;
            // this.isLogBool = menuTreeCode.indexOf('system_log') > -1 ? true : false;
            // // 判断权限管理的挑转路由
            // menuTree.forEach(item => {
            //   if (item.code == 'authcenter' && item.nodeChildren && item.nodeChildren.length > 0) {
            //     item.nodeChildren.forEach(el => {
            //       if (el.code == 'authz_manage') {
            //         this.authorityUrl = el.nodeChildren[0].nodeChildren ? el.nodeChildren[0].nodeChildren[0].uri : el.nodeChildren[0].uri;
            //       }
            //     });
            //   }
            // });
          } else {
            this.$message.error(resData.message);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 获取menuTree所有的code
    // getMenuTreeCode(menuTree) {
    //   menuTree.forEach(item => {
    //     this.menuAllCode.push(item.code);
    //     if (item.nodeChildren && item.nodeChildren.length > 0) {
    //       this.getMenuTreeCode(item.nodeChildren);
    //     }
    //   });
    //   return this.menuAllCode;
    // },
    // 账户信息
    toModifyUser() {
      this.userFormVisible = true;
    },
    // 账户信息 取消
    cancelModUserInfo(formName) {
      this.userFormVisible = false;
      this.$refs[formName].clearValidate();
    },
    // 账户信息 确认
    confirmModUserInfo(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let params = {
            requestProject: this.requestProject,
            realName: this.userInfoForm.realName,
            sex: this.userInfoForm.gender,
            userMobile: this.userInfoForm.phoneNumber,
            position: this.userInfoForm.positionName
          };
          putRequest(`/gic-bizdict/loginuser/${this.loginName}`, params)
            .then(res => {
              let resData = res.data;
              if (resData.errorCode === '0') {
                this.userFormVisible = false;
                this.$message.success('修改成功');
              } else {
                this.$message.error(resData.message);
              }
            })
            .catch(error => {
              console.log(error);
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 修改密码的弹框
    toModifyPaw() {
      this.dialogPawVisible = true;
      this.pawForm.oldPaw = '';
      this.pawForm.newPaw = '';
      this.pawForm.surePaw = '';
    },
    // 修改密码弹框  取消
    toModifyPawCancel(formName) {
      this.dialogPawVisible = false;
      this.$refs[formName].clearValidate();
    },
    // 修改密码弹框  确定
    toModifyPawSure(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let para = {
            oldPassword: this.pawForm.oldPaw,
            newPassword: this.pawForm.newPaw
          };
          if (!this.pawForm.oldPaw.trim() || !this.pawForm.newPaw.trim() || !this.pawForm.surePaw.trim()) {
            this.$message.error('请输入密码');
            return false;
          }
          if (this.pawForm.newPaw.trim() != this.pawForm.surePaw.trim()) {
            this.$message.error('两次密码输入不一致!');
            return false;
          }
          postRequest('/gic-authcenter/password', para)
            .then(res => {
              let data = res.data;
              if (data.errorCode === '0') {
                this.dialogPawVisible = false;
                this.$message.success('修改成功');
                getRequest('/gic-authcenter/logout', {})
                  .then(res => {
                    let resData = res.data;
                    if (resData.errorCode === '0') {
                      window.location.href = window.location.origin + '/operation-platform/#/';
                    } else {
                      this.$message.error(resData.message);
                    }
                  })
                  .catch(function(error) {
                    console.log(error);
                  });
              } else {
                this.$message.error(data.message);
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 退出登录
    toLoginOut() {
      this.$confirm('确认退出吗?', '提示', {
        type: 'warning'
      })
        .then(() => {
          getRequest('/gic-authcenter/logout', {})
            .then(res => {
              let resData = res.data;
              if (resData.errorCode === '0') {
                this.$message.success('退出成功');
                window.location.href = window.location.origin + '/operation-platform/#/';
              } else {
                this.$message.error(resData.message);
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        })
        .catch(() => {});
    },
    // 权限管理
    // entranceAuthority(type) {
    //   this.entranceType = type;
    //   this.$router.push({
    //     path: this.authorityUrl,
    //     query: {
    //       code: 'authz_manage'
    //     }
    //   });
    // },
    // 操作日志
    // entranceLog(type) {
    //   this.entranceType = type;
    //   this.$router.push('/log');
    // },
    // 返回首页
    // backIndex() {
    //   this.$router.push('/index');
    // }
  }
};
</script>

<style lang="scss">
.header-drawer {
  &__container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    .operation-log {
      position: absolute;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      padding: 20px;
      bottom: 30px;
      left: 0;
      right: 0;
      color: #909399;
      font-size: 14px;
    }
    .el-menu-item {
      height: 36px;
      line-height: 36px;
      padding: 0 30px;
      color: #606266;
      &.is-active {
        background-color: #F5F7FA ;
        color: #1890ff;
      }
    }
  }
  &__header {
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #E4E7ED;
    i {
      vertical-align: middle;
    }
    .title {
      color: #303133;
      font-size: 16px;
      font-weight: bold;
      margin-left: 30px;
      vertical-align: middle;
    }
  }
}
</style>

<style lang="scss" scoped>
.base-header {
  border-bottom: 1px solid #E4E7ED;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &__left {
    i {
      cursor: pointer;
      vertical-align: middle;
    }
    .title {
      color: #303133;
      font-size: 16px;
      font-weight: bold;
      margin-left: 40px;
      vertical-align: middle;
    }
  }
}
</style>
