<template>
  <div class="navbar">
    <div class="navbar-left">
      <div class="top-left-logo">
        <img style="height: 25px" src="@/assets/images/sdklogo.png" alt="">
        <img style="margin-left:10px;height: 24px" src="@/assets/images/wms.png" alt="">
      </div>
      <div class="top-left-split" v-if="menuMode === 'horizontal'"></div>
      <!--菜单上下结构时显示-->
      <div class="top-left-menu" v-if="menuMode === 'horizontal'">
        <!--        <Sidebar />-->
        <Menu />
      </div>
    </div>
    <div class="navbar-right">
      <lang-select class="navbar-lang" />
      <!-- 布局选择 -->
      <el-dropdown
        popper-class="mode-select-popper"
        class="mode-select"
        @command="changeMenuMode"
      >
        <svg-icon icon-class="mode" width="22px" height="22px"/>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="(item,index) of naviModes"
              :key="index"
              :command="item.value"
            >
              <svg-icon
                :icon-class="menuMode === item.value?item.icon+'-select':item.icon+'-default'"
                :width="'20px'"
                :height="'20px'"
              ></svg-icon>
              <span>{{item.label}}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown popper-class="navbar-user" @command="changeSysOpe">
        <div class="navbar-use-show">
          <svg-icon icon-class="head_pic" :width="'24px'" :height="'24px'"></svg-icon>
          <span class="userName" style="font-size: 13px;">{{ userName || "" }}</span>
        </div>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="sop">
              <svg-icon icon-class="sys_sop" width="16px" height="16px"></svg-icon>
              <span>操作手册</span>
            </el-dropdown-item>
            <el-dropdown-item command="pwdDrawer">
              <svg-icon icon-class="modify_pwd" width="16px" height="16px"></svg-icon>
              <span>修改密码</span>
            </el-dropdown-item>
            <el-dropdown-item command="logout">
              <svg-icon icon-class="logout" width="16px" height="16px"></svg-icon>
              <span>退出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!--  修改密码的抽屉  -->
    <el-drawer title="修改密码" v-model="pwdVisible" @close="pwdVisible = false" @opened="pwdOpend">
      <el-form ref="formDataRef" :model="formData" :rules="rules" label-position="top">
        <el-form-item label="原密码" prop="oripwd">
          <el-input show-password v-model="formData.oripwd" placeholder="请确认密码" />
        </el-form-item>
        <el-form-item label="新密码" prop="pwd">
          <el-input show-password v-model="formData.pwd" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="pwdConfirm">
          <el-input show-password v-model="formData.pwdConfirm" placeholder="请确认密码" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="pwdVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </template>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
import { computed, getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElForm, ElMessageBox } from 'element-plus';
import useStore from '@/store';
import Menu from './Menu.vue';

// 组件依赖
import LangSelect from '@/components/LangSelect/index.vue';
import { changePssword, getRSAPublic } from "@/api/auth";
import { JSEncrypt } from "jsencrypt";

const { app, tagsView } = useStore();
const router = useRouter();
const menuMode = computed(() => app.menuMode);
const formDataRef = ref(ElForm);
const { proxy }: any = getCurrentInstance();
const state = reactive({
  naviModes: [{
    value: 'horizontal',
    label: '上下布局',
    icon: 'top-bottom'
  }, {
    value: 'vertical',
    label: '左右布局',
    icon: 'left-right'
  }],
  name: '' as any,
  userN: '' as any,
  pwdVisible: false,
  formData: {
    pwd: '',
    pwdConfirm: '',
    oripwd: ''
  },
  rules: {
    pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    oripwd: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
    pwdConfirm: [
      { required: true, message: '请确认密码', trigger: 'blur' },
      { validator: validatePassword, trigger: 'blur' }
    ],
  },
  rsa: '',
  userName: '' as any,
});

const {
  naviModes,
  userName,
  pwdVisible,
  formData,
  rules,
  rsa,
  name
} = toRefs(state);
onMounted(() => {
  state.userName = localStorage.getItem('userName') ? localStorage.getItem('userName') : '';
});
function changeMenuMode(item: any) {
  app.changeMenuMode(item);
}
function changeSysOpe(item: any) {
  switch (item) {
    case 'sop':
      break;
    case 'pwdDrawer':
      state.pwdVisible = true;
      break;
    case 'logout':
      logout();
      break;
  }
}
function validatePassword(rule: any, value: any, callback: any) {
  if (value != state.formData.pwd) {
    callback(new Error('密码输入不一致'));
  } else {
    callback();
  }
}
function pwdOpend() {
  state.formData = {
    pwd: '',
    pwdConfirm: '',
    oripwd: ''
  }
  getRSAPublic().then((res: any) => {
    state.rsa = res.data;
  }).catch((error: any) => {
    //报错内容
  });
}
function submitForm() {
  formDataRef.value.validate((valid: boolean) => {
    if (valid) {
      // let encrypt = new JSEncrypt();  // 新建JSEncrypt对象
      // encrypt.setPublicKey(state.rsa); // 设置公钥
      // let encrypted = encrypt.encrypt(state.formData.pwd);  // 对密码进行加密
      // state.formData.pwd = encrypted;
      let params = {
        userId: localStorage.getItem('userId'),
        oldPassword: state.formData.oripwd,
        newPassword: state.formData.pwd
      }
      changePssword(params).then((res: any) => {
        proxy.$ElMessage.success('修改密码成功');
        state.pwdVisible = false;
      })

    } else {
      return false;
    }
  });
}
function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    tagsView.delAllViews();
    router.push(`/login`);
    // localStorage.clear();
    localStorage.removeItem('ut');
    localStorage.removeItem('userId');
    localStorage.removeItem('userName');
    localStorage.removeItem('orgNo');
  });
}
</script>

<style lang="scss" scoped>
.navbar-lang {
  margin-right: 10px;
}

.navbar {
  width: 100%;
  padding: 0 15px;
  height: 40px;
  background: #FFFFFF;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1010;

  .navbar-use-show {
    display: flex;
    align-items: center;
    cursor: pointer;

    .userName {
      margin-left: 7px;
    }
  }

  .hamburger-container {
    cursor: pointer;
  }

  .navbar-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;

    .top-left-logo {
      margin-left: 16px;
      font-weight: bold;
      font-size: 20px;
      display: flex;
      margin-top: 1px;
    }

    .top-left-split {
      width: 1px;
      height: 20px;
      background: #D9DFEF;
      margin: 2px 30px 0 40px;
    }

    .top-left-menu {
      flex: 1;
    }
  }

  .navbar-right {
    display: flex;
    align-items: center;
    justify-content: end;
    min-width: 90px;

    .mode-select {
      cursor: pointer;
      margin: 0 10px;
    }
  }
}
</style>
<style lang="scss">
.navbar-user {
  .el-dropdown-menu {
    padding: 8px 0;

    .el-dropdown-menu__item {
      margin-bottom: 4px;

      svg {
        margin-right: 4px;
      }
    }
  }
}

.mode-select-popper {
  .el-dropdown-menu {
    padding: 8px 0;

    .el-dropdown-menu__item {
      margin-bottom: 4px;

      svg {
        margin-right: 4px;
      }
    }
  }
}
</style>
