<template>
  <div class="header clearfix">
    <div @click="backIndex" class="fl logo">
      <img :src="headerImg" alt="" width="30px" height="30px" />
      <span>{{ headerName }}</span>
    </div>
    <div class="fr login-user-info">
      <div class="user-info-wrap" :class="{ 'index-user-info': isIndex }">
        <el-popover placement="bottom" title="" width="74" trigger="hover" :popper-class="isIndex ? 'user-header-pop' : 'com-user-header-pop'" style="min-width: 95px;">
          <ul class="navsuerwrap">
            <li class="useritem" @click="toModifyUser"><span class="usertext">账号信息</span></li>
            <!-- <li class="useritem" @click="toModifyPaw"><span class="usertext">修改密码</span></li> -->
            <li class="useritem loginout" @click="toLoginOut"><span class="usertext">退出登录</span></li>
          </ul>
          <span class="navusername" slot="reference">{{ userInfoForm.realName }}<i class="el-icon-arrow-down arrowico"></i></span>
        </el-popover>
      </div>
    </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>
    </el-dialog>
  </div>
</template>

<script>
import { getRequest, putRequest } from '@/api/api';
export default {
  name: 'ywOtherHeader',
  props: {
    headerIcon: {
      type: String,
      default: ''
    },
    headerName: {
      type: String,
      default: ''
    },
    userData: {
      type: [Object, Array],
      default() {
        return {
          realName: '',
          gender: 0, // 1男0女
          clerkCode: '',
          phoneNumber: '',
          positionName: ''
        };
      }
    }
  },
  data() {
    return {
      requestProject: 'gic-authcenter',
      // 用户信息 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' }]
      },
      isIndex: false,
      entranceType: '',
      loginName: '',
      headerImg: ''
    };
  },
  watch: {
    headerIcon(newVal) {
      this.headerImg = newVal;
      this.init();
    },
    userData(newData) {
      this.userInfoForm = newData;
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      if (this.headerIcon != '') {
        // eslint-disable-next-line
        this.headerImg = require(`../../static/img/${this.headerImg}.png`);
      } else {
        // eslint-disable-next-line
        this.headerImg = require(`../../static/img/failed-load_img.png`);
      }
      this.userInfoForm = this.userData;
      // this.getUserInfo();
    },
    // 获取用户信息
    getUserInfo() {
      let para = {
        requestProject: this.requestProject
      };
      getRequest('/gic-platform-operation/login-user-info', 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;
          } else {
            this.$message.error(resData.message);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 账户信息
    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-authcenter/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;
        }
      });
    },

    // 退出登录
    toLoginOut() {
      let that = this;
      that
        .$confirm('确认退出吗?', '提示', {
          type: 'warning'
        })
        .then(() => {
          that.postLoginout();
        })
        .catch(() => {});
    },
    // 退出
    postLoginout() {
      let that = this;
      getRequest('/gic-authcenter/logout', {})
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 0) {
            that.$message.success('退出成功');
            window.location.href = window.location.origin + '/operation-platform/#/';
          } else {
            that.$message.error(resData.message);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 权限管理
    entranceAuthority(type) {
      this.entranceType = type;
      this.$router.push('/menuManage');
    },
    // 操作日志
    entranceLog(type) {
      this.entranceType = type;
      this.$router.push('/log');
    },
    // 返回首页
    backIndex() {
      window.location.href = window.location.origin + '/operation-platform/#/index';
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  height: 64px;
  background: #fff;
  box-shadow: 0px 3px 4px 0px rgba(214, 224, 240, 0.3);
  .logo {
    margin: 16px 8px 16px 44px;
    cursor: pointer;
    span {
      font-size: 16px;
      color: #303133;
      line-height: 30px;
      display: inline-block;
      vertical-align: top;
      padding-left: 6px;
    }
  }
  .login-user-info {
    margin: 17px 45px 0 0;
  }
}
.user-info-wrap {
  font-size: 0;
  color: #595959;
  display: inline-block;
  padding: 5px 0;
  .com-user-header-pop {
    width: 95px !important;
  }
  .navusername {
    font-size: 14px;
    color: #606266;
    padding-left: 14px;
    i {
      margin: 0 15px 0 12px;
    }
    &:hover .arrowico {
      transform: rotate(180deg);
    }
    .arrowico {
      transition: all 0.5s;
    }
  }
}
.navsuerwrap .useritem span {
  color: #595959;
  line-height: 30px;
  &:hover {
    color: #262626;
  }
}
// 首页的用户信息
.index-user-info {
  &.user-info-wrap {
    color: #fff;
    .navusername {
      color: #fff;
    }
  }
}
.user-header-pop .navsuerwrap .useritem span {
  color: #fff;
  &:hover {
    color: #e3e3e3;
  }
}
</style>
