<template>
  <div class="navbar" :style="{'background-color':theme}">
    <hamburger
      id="hamburger-container"
      :is-active="sidebar.opened"
      class="hamburger-container"
      @toggleClick="toggleSideBar"
    />

    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />

    <div class="right-menu">
      <template v-if="device!=='mobile'">
        <!-- <search id="header-search" class="right-menu-item" /> -->

        <!-- <error-log class="errLog-container right-menu-item hover-effect" /> -->
        <!-- <div class="right-menu-item hover-effect">{{ name }}</div> -->
        <!-- v-if="roleName" -->
        <div v-if="userCHname" class="right-menu-item hover-effect" style="font-size:14px">{{ userCHname }}
        </div>
        <div v-if="num" class="right-menu-items hover-effect" @click="goToApply">

          <el-badge :value="num" :max="99" class="item">
            <img src="@/assets/img/news.png" class=" image" alt="">
          </el-badge>
        </div>
        <!-- <el-tooltip  effect="dark" placement="bottom"> -->
        <!-- <size-select id="size-select" class="right-menu-item hover-effect" /> -->
        <!-- </el-tooltip> -->
        <screenfull id="screenfull" class="right-menu-item hover-effect" />
        <!-- <div class="right-menu-item hover-effect" style="font-size:13px;">[{{ roleName }}]</div> -->

      </template>
      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <div class="user-info">
            <img src="@/assets/img/person1.png" alt="">
          </div>
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/">
            <el-dropdown-item>首 页</el-dropdown-item>
          </router-link>
          <el-dropdown-item @click.native="editorPsw">修改密码</el-dropdown-item>
          <el-dropdown-item @click.native="themEdit">主题修改</el-dropdown-item>
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog
      title="修改密码"
      :visible.sync="pawStatus"
      :close-on-click-modal="false"
      :before-close="cancel"
      :modal-append-to-body="false"
      width="45%"
    >
      <div style="padding: 10px">
        <el-form ref="ruleForm" label-width="100px" :model="form" :rules="rules">
          <el-form-item label="原始密码：" prop="oldWarld">
            <el-input v-model="form.oldWarld" show-password size="small" />
          </el-form-item>
          <el-form-item label="新密码：" prop="passWarld">
            <el-input v-model="form.passWarld" show-password size="small" />
          </el-form-item>
          <el-form-item label="确认密码：" prop="NewPassWorld">
            <el-input v-model="form.NewPassWorld" show-password size="small" />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" size="mini" @click="submit('ruleForm')">保存</el-button>
            <el-button icon="el-icon-close" type="info" size="mini" @click="cancel">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CryptoJS from 'crypto-js';
import { mapGetters, mapState } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import ErrorLog from '@/components/ErrorLog'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import websocket from '../../mixins/websocket'
import { resetPassword } from '@/api/jurisdiction/user'
import { clearObjValue, message } from '@/utils/common'
import { getToken, setToken, removeToken } from '@/utils/auth'
const isOldPSW = (rule, value, callback) => {
  const encryptedInput = CryptoJS.MD5(value).toString();  // 对输入的密码进行MD5加密
  const storedPassword = sessionStorage.getItem('passWorld')  // 获取存储的加密密码
  if (encryptedInput === storedPassword) {
    callback()
  } else {
    callback(new Error('原始密码错误!'))
  }
}
const islength = (rule, value, callback) => {
  if (value.length < 6) {
    callback(new Error('密码最小六位数!'))
  } else {
    callback()
  }
}
export default {
  components: {
    Breadcrumb,
    Hamburger,
    ErrorLog,
    Screenfull,
    SizeSelect,
    Search
  },
  mixins: [websocket],
  data() {
    return {
      tuichuStatus: process.env.NODE_ENV === 'development',
      // roleName: sessionStorage.getItem('roles'),
      // name: sessionStorage.getItem("username"),
      userCHname: sessionStorage.getItem('userCHname'),
      psw: sessionStorage.getItem('passWorld'),
      pawStatus: false,
      form: {
        oldWarld: '',
        passWarld: '',
        NewPassWorld: ''
      },
      rules: {
        oldWarld: [
          {
            required: true,
            message: '请填写原始密码',
            trigger: 'blur'
          },
          {
            validator: isOldPSW,
            trigger: 'blur'
          }
        ],
        passWarld: [
          {
            required: true,
            message: '请填写新密码',
            trigger: 'blur'
          },
          {
            validator: islength,
            trigger: 'blur'
          }
        ],
        NewPassWorld: [
          {
            required: true,
            message: '请填写确认密码',
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              if (value.length < 6) {
                callback(new Error('密码最小六位数!'))
              } else if (value != this.form.passWarld) {
                callback(new Error('两次密码不匹配，请重新输入!'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['sidebar', 'avatar', 'device']),
    ...mapState({
      num: (state) => state.websocket.scoketNum,
      roleName: (state) => state.user.roleName,
      // userCHname: (state) => state.user.userCHname,
      name: (state) => state.user.name,
      theme() {
        return this.$store.state.settings.theme
      }
    })
  },
  watch: {
    userCHname: function(newVal, oldVal) {
      if (newVal) {
        this.userCHname = sessionStorage.getItem('userCHname')
      }
    }
  },
  methods: {
    cancel() {
      this.pawStatus = false
    },
    goToApply() {
      this.$router.push(`/homePage/approval`)
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    logout() {
      this.socketClose()
      sessionStorage.removeItem('username')
      sessionStorage.removeItem('passWorld')
      sessionStorage.removeItem('token')
      removeToken()
      this.$router.push(`/userLogin`)
    },
    editorPsw() {
      clearObjValue(this.form)
      this.pawStatus = true
    },
    // 主题修改
    themEdit() {
      this.$emit('clickThemEdit')
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const encryptedPassword = CryptoJS.MD5(this.form.passWarld).toString();
          const data = {
            id: sessionStorage.getItem('userid'),
            password: encryptedPassword
          }
          resetPassword(data).then((res) => {
            message('success', '修改密码成功', 3000)
            sessionStorage.removeItem('username')
            removeToken()
            this.$router.push(`/login`)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/element-variables.scss";
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  /* background: #fff; */
  background:$--color-common;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;

    &:focus {
      outline: none;
    }

    .right-menu-items {
      cursor: pointer;
      display: inline-block;
      padding: 0 8px;
      height: 10%;

      ::v-deep .is-fixed {
        top: 12px;
        right: 12px;
      }

      .item {
        margin-top: -35px;
        margin-right: 18px;
      }
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      /* color: #5a5e66; */
      color: #fff;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        margin-top: 8px;
        position: relative;
        .user-info{
          width: 35px;
          height: 35px;
          border-radius: 50%;
          background-color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          img{
            width:20px;
          }
        }
        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}

.image {
  width: 28px;
  vertical-align: text-bottom;
}
</style>
