<script setup lang="ts">
import { ElDropdown, ElDropdownItem, ElDropdownMenu } from "element-plus";
import { useRouter } from "vue-router";
import { useChangePwdLogic } from "../login/useChangeInitPwd";
import { useUserStore } from "../../store/modules/users";

const userStore = useUserStore();
const router = useRouter();
const userHeadImg =
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAACTFBMVEUAAADJ5f/C1f/Y6//D1f/D1P/D1f/C1f/C1f/D1f/D1f/C1P/D1v/D1P/F1f/E1f/D4f8qkf/8/f7C1f/D1P/C1f/D1f/G2f8Pl/82of8Alv8Alv8qkf8Alv8Amf+z1P8qkP8rkP8rkf8qkP8rkP8rkv8fk/8rk/8tlv99vP8qkf8hkf+my/+XyP8Alf8rkP8ulP/C1P/+48oqkP8Alf8yLSj///8mKjMakf99vP+02P/Z2uv24dL74MfqzrYhJS0ICAoDlP8lkf/9483228IsMTv1+f/L2/9Nrf8Hlf8gkf8dkf/H1vv+7dzt39ry39X94skeISkkIR8UFhsVFBPN5f+dxv90vv88rv9XrP9Upv8VnP8el/8Pk/8nkf8opf7a6f3p8/mEyfjQ1/O3yPHd3euru+Lm3eCouN3+5s+Ypsjz2L/x1r7v07uFkrDArqBveZOtmolocYlSWWx2aV4wNUFRSEBDPDclKTIwKycrJyMZHCIcGhgNDhDl8f/o7v/R3v+h2P+60f+k0f+oyv+kyv+Iwf9uuf9Fsf9fq/9Dqv82p/8fof9Dnf8rl/8ulf8Sk/8Nmv4JmP5jvf0bn/3K5vj++/fL1ve7zff8+PXx9PX09PPQ5fLJ3/DU5O7i3OT37OLn29j+6dWdrM/03cnv18KQnb7t0bqLmLfky7bgyLK5srLWv6p9iaV7hqLKtKB4hJ94g567qpuyn41kbYSjkYFcZXpobHlZYnaQgXKHeWtsY1xZV1xFS1tVUlRbUktCQ0cpLTcpKi0hHhxL2Mh0AAAAMXRSTlMACeYD+fXy7Nu3r498ZmBOEfX898tcNxsbCffmX1w3/Obbt6+PfGZOEezs5svLy8s3l8xbiQAAAwdJREFUSMeFlPVf20AYh68tpd7SUkpxl/mShnSMlRba4u4wXDdsMHTI3N3d3d1d/rElJM3lkvTD81Ny3/fJe/fJ3QERMpNOo1aFhKjUGp1JBpYhzKhVYjyUWmMYCI5MH4qJCNUHa6MwyGFZ7+DDwcvss9ygABJEWmH5ls9OCv/HfvbdGglE2Hiff/HHyeB/HWhiAwIiwmH9GFU6Wz3vppX37Fh4hKAezubHlNP9d2aupmahprZ61vkyECCGDX5/wjm/+C+LYa7OU+vvDfSw8dbLm7+/1vMri6PO4x4NJHJu5QorBnF7Fp6+mg4IOxart3ORVcEKBgwRZnDc92E6YLihgBnY/yvnC1N14zjN8/Evk5Nf3z1xvoGZnPnneozPxDcc4fdjXqhf2m/o/hl7iwo/+/n7it6JRgxhdBsqfEdSIyVoUeGeQPiEpFpqyUpkpKfyASo8u4ScDxkwoQ0GcCGVSG4COlS4tYygAxpUKPMKhT4k1wA1htJTgdZXoLEaqDAhfMNbJghVIEQk5PCEAWEYAgUIrK8qEwsqsXCfE+6IMhVcNGTTcBVO4xrOEWVqoJEQXLkjQ76hkVyXWNAAnYSAu3IpHrlwsaADJikBr/L5XDguIZjg5kMEBrGglHHbG7IbCn2FgkwrPkCFBeSVrWx9uYXchaZG8RHtJEnyImOUkxRIj9Aw4SWwvyWbKuq6Stff7bKQpKWlgRfr0Wumofmkw3GEJDvPdt+mhGsdTQXkTofjVPMB7pqBF1lC9tHWfAfFCbL+DEFc8OLl3QTRVFBPj+W3Fh3cCy8yoFhTtJkgShwM+6hn4vhN73WC4nAjO5pXfOzQagVgscdQWTGTtBcTNOdunCeWKGEFgoixA474aCpqW0raCIYOgoURSvKi4wGPODoqpae7gaFxTxHzQA/SlMYBhDiqR167g2Mjme3gY44FAuKpdZwOKiSuByLsawkiP4iwzg4kUKSvku6QmK4A0kSlmcWCOS0KBCczNsXMF8wpsZlgGaIyUpOTViZYViQlp2aIP/4fJ+COaSqOTnUAAAAASUVORK5CYII=";

const {
  changePwdFormRef,
  changePwdFormData,
  changePwdFormColumns,
  changePwdRules,
  changePwdFormHandleEvent,
  handleConfirm,
} = useChangePwdLogic(0);

const handleCommand = (item) => {
  if (item === "changePwd") {
    changePwd();
  }
  if (item === "logout") {
    logout();
  }
};

const changePwd = () => {
  openChangePwdDg();
};

const logout = () => {
  userStore.logoutAction(router);
};

const isShow = computed({
  get: () => userStore.changePwdDialogVisible,
  set: (v) => userStore.setChangePwdDialogVisible(v),
});

const changePwdDgProps = reactive({
  title: "修改密码",
  showDrawer: isShow,
  size: "small",
});

const openChangePwdDg = () => {
  changePwdDgProps.showDrawer = true;
};

const handleDialogCancel = () => {
  changePwdFormRef.value.resetForm(changePwdFormRef.value.ruleFormRef);
  changePwdDgProps.showDrawer = false;
};

// 新增编辑抽屉
const handleDrawerEvent = (data) => {
  const { eventName = "" } = data;
  // 抽屉点击确定按钮
  if (eventName === "success") {
    unref(handleConfirm)();
  }
};

// 关闭抽屉前的设置（会暂停抽屉的关闭）重置表单
const handleCloseDrawer = async (done) => {
  if (changePwdFormRef.value) {
    await changePwdFormRef.value.resetForm(changePwdFormRef.value.ruleFormRef);
  }
  done();
};
const isExitHover = ref(false);
const isExitHover1 = ref(false)
</script>

<template>
  <div class="custom-header-right">
    <el-dropdown trigger="click" @command="handleCommand">
      <div class="user-item">
        <img :src="userHeadImg" alt="" class="user-avatar" />
        <span class="user-name">{{ userStore.getCurrentUserName }}</span>
      </div>
      <template #dropdown>
        <el-dropdown-menu class="header-drop-menu user-drop-menu">
          <el-dropdown-item command="changePwd" @mouseenter="isExitHover=true" @mouseleave="isExitHover=false">
            <svg v-if="!isExitHover" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="编组-20" transform="translate(-2.000000, 0.000000)">
                        <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
                        <path d="M8,0.833333333 C9.88343983,0.833333333 11.5,2.47264078 11.5,4.27184296 C11.5,4.54798533 11.2761424,4.77184296 11,4.77184296 C10.7238576,4.77184296 10.5,4.54798533 10.5,4.27184296 C10.5,3.02182188 9.3280031,1.83333333 8,1.83333333 C6.6719969,1.83333333 5.5,3.02182188 5.5,4.27184296 L5.49966667,5.83233333 L12,5.83333333 C12.9618959,5.83333333 13.7507729,6.57411552 13.8272559,7.51630483 L13.8333333,7.66666667 L13.8333333,13.3333333 C13.8333333,14.3458554 13.012522,15.1666667 12,15.1666667 L12,15.1666667 L4,15.1666667 C2.98747796,15.1666667 2.16666667,14.3458554 2.16666667,13.3333333 L2.16666667,13.3333333 L2.16666667,7.66666667 C2.16666667,6.65414463 2.98747796,5.83333333 4,5.83333333 L4,5.83333333 L4.49966667,5.83233333 L4.5,4.27184296 C4.5,2.47264078 6.11656017,0.833333333 8,0.833333333 Z M4.98966667,6.83233333 L4,6.83333333 C3.53976271,6.83333333 3.16666667,7.20642938 3.16666667,7.66666667 L3.16666667,7.66666667 L3.16666667,13.3333333 C3.16666667,13.7935706 3.53976271,14.1666667 4,14.1666667 L4,14.1666667 L12,14.1666667 C12.4602373,14.1666667 12.8333333,13.7935706 12.8333333,13.3333333 L12.8333333,13.3333333 L12.8333333,7.66666667 C12.8333333,7.20642938 12.4602373,6.83333333 12,6.83333333 L12,6.83333333 L5.01020327,6.8332313 C5.00681036,6.83329921 5.00340917,6.83333333 5,6.83333333 L4.98966667,6.83233333 Z M8,9.16666667 C8.27614237,9.16666667 8.5,9.39052429 8.5,9.66666667 L8.5,12.3333333 C8.5,12.6094757 8.27614237,12.8333333 8,12.8333333 C7.72385763,12.8333333 7.5,12.6094757 7.5,12.3333333 L7.5,9.66666667 C7.5,9.39052429 7.72385763,9.16666667 8,9.16666667 Z" id="形状结合" fill-opacity="0.65" fill="#000000" fill-rule="nonzero"></path>
                        <circle id="椭圆形" fill-opacity="0.65" fill="#000000" cx="8" cy="9.66666667" r="1"></circle>
                    </g>
                </g>
            </svg>
            <svg v-if="isExitHover" width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="编组-20" transform="translate(-2.000000, 0.000000)">
                        <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
                        <path d="M8,0.833333333 C9.88343983,0.833333333 11.5,2.47264078 11.5,4.27184296 C11.5,4.54798533 11.2761424,4.77184296 11,4.77184296 C10.7238576,4.77184296 10.5,4.54798533 10.5,4.27184296 C10.5,3.02182188 9.3280031,1.83333333 8,1.83333333 C6.6719969,1.83333333 5.5,3.02182188 5.5,4.27184296 L5.49966667,5.83233333 L12,5.83333333 C12.9618959,5.83333333 13.7507729,6.57411552 13.8272559,7.51630483 L13.8333333,7.66666667 L13.8333333,13.3333333 C13.8333333,14.3458554 13.012522,15.1666667 12,15.1666667 L12,15.1666667 L4,15.1666667 C2.98747796,15.1666667 2.16666667,14.3458554 2.16666667,13.3333333 L2.16666667,13.3333333 L2.16666667,7.66666667 C2.16666667,6.65414463 2.98747796,5.83333333 4,5.83333333 L4,5.83333333 L4.49966667,5.83233333 L4.5,4.27184296 C4.5,2.47264078 6.11656017,0.833333333 8,0.833333333 Z M4.98966667,6.83233333 L4,6.83333333 C3.53976271,6.83333333 3.16666667,7.20642938 3.16666667,7.66666667 L3.16666667,7.66666667 L3.16666667,13.3333333 C3.16666667,13.7935706 3.53976271,14.1666667 4,14.1666667 L4,14.1666667 L12,14.1666667 C12.4602373,14.1666667 12.8333333,13.7935706 12.8333333,13.3333333 L12.8333333,13.3333333 L12.8333333,7.66666667 C12.8333333,7.20642938 12.4602373,6.83333333 12,6.83333333 L12,6.83333333 L5.01020327,6.8332313 C5.00681036,6.83329921 5.00340917,6.83333333 5,6.83333333 L4.98966667,6.83233333 Z M8,9.16666667 C8.27614237,9.16666667 8.5,9.39052429 8.5,9.66666667 L8.5,12.3333333 C8.5,12.6094757 8.27614237,12.8333333 8,12.8333333 C7.72385763,12.8333333 7.5,12.6094757 7.5,12.3333333 L7.5,9.66666667 C7.5,9.39052429 7.72385763,9.16666667 8,9.16666667 Z" id="形状结合" fill="#0095FF" fill-rule="nonzero"></path>
                        <circle id="椭圆形" fill="#0095FF" cx="8" cy="9.66666667" r="1"></circle>
                    </g>
                </g>
            </svg>
            <span>修改密码</span>
          </el-dropdown-item>
          <el-dropdown-item command="logout" @mouseenter="isExitHover1=true" @mouseleave="isExitHover1=false">
            <svg v-if="!isExitHover1" width="14px" height="16px" viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="编组-37" transform="translate(-1.000000, 0.000000)">
                        <path d="M5.79235239,3.06337452 C5.91474515,3.31091164 5.8132956,3.61079905 5.56575849,3.73319181 C3.70361212,4.65391525 2.5,6.55223695 2.5,8.66666667 C2.5,11.7042328 4.96243388,14.1666667 8,14.1666667 C11.0375661,14.1666667 13.5,11.7042328 13.5,8.66666667 C13.5,6.55371139 12.2980743,4.65649052 10.4379288,3.7350167 C10.1904837,3.61243801 10.0892595,3.31247447 10.2118382,3.06502937 C10.3344169,2.81758427 10.6343804,2.71636004 10.8818255,2.83893873 C13.0794058,3.9275701 14.5,6.16995573 14.5,8.66666667 C14.5,12.2565175 11.5898509,15.1666667 8,15.1666667 C4.41014913,15.1666667 1.5,12.2565175 1.5,8.66666667 C1.5,6.1682114 2.92258504,3.92452841 5.1225351,2.83678061 C5.37007222,2.71438785 5.66995964,2.8158374 5.79235239,3.06337452 Z M8,0.833333333 C8.27614237,0.833333333 8.5,1.05719096 8.5,1.33333333 L8.5,8 C8.5,8.27614237 8.27614237,8.5 8,8.5 C7.72385763,8.5 7.5,8.27614237 7.5,8 L7.5,1.33333333 C7.5,1.05719096 7.72385763,0.833333333 8,0.833333333 Z" id="形状结合" fill="#575757" fill-rule="nonzero"></path>
                        <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
                    </g>
                </g>
            </svg>
            <svg v-if="isExitHover1" width="14px" height="16px" viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="编组-37" transform="translate(-1.000000, 0.000000)">
                        <path d="M5.79235239,3.06337452 C5.91474515,3.31091164 5.8132956,3.61079905 5.56575849,3.73319181 C3.70361212,4.65391525 2.5,6.55223695 2.5,8.66666667 C2.5,11.7042328 4.96243388,14.1666667 8,14.1666667 C11.0375661,14.1666667 13.5,11.7042328 13.5,8.66666667 C13.5,6.55371139 12.2980743,4.65649052 10.4379288,3.7350167 C10.1904837,3.61243801 10.0892595,3.31247447 10.2118382,3.06502937 C10.3344169,2.81758427 10.6343804,2.71636004 10.8818255,2.83893873 C13.0794058,3.9275701 14.5,6.16995573 14.5,8.66666667 C14.5,12.2565175 11.5898509,15.1666667 8,15.1666667 C4.41014913,15.1666667 1.5,12.2565175 1.5,8.66666667 C1.5,6.1682114 2.92258504,3.92452841 5.1225351,2.83678061 C5.37007222,2.71438785 5.66995964,2.8158374 5.79235239,3.06337452 Z M8,0.833333333 C8.27614237,0.833333333 8.5,1.05719096 8.5,1.33333333 L8.5,8 C8.5,8.27614237 8.27614237,8.5 8,8.5 C7.72385763,8.5 7.5,8.27614237 7.5,8 L7.5,1.33333333 C7.5,1.05719096 7.72385763,0.833333333 8,0.833333333 Z" id="形状结合" fill="#0095FF" fill-rule="nonzero"></path>
                        <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
                    </g>
                </g>
            </svg>
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <ya-drawer
      :drawerProps="changePwdDgProps"
      @handleEvent="handleDrawerEvent"
      destroy-on-close
      :before-close="handleCloseDrawer"
    >
      <template #content>
        <YaForm
          label-position="top"
          ref="changePwdFormRef"
          labelWidth="100px"
          :formColumns="changePwdFormColumns"
          :formData="changePwdFormData"
          :rules="changePwdRules"
          @handleEvent="changePwdFormHandleEvent"
        >
        </YaForm>
      </template>
    </ya-drawer>
  </div>
</template>

<style lang="scss" scoped>
.custom-header-right {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  padding-right: 16px;
  box-sizing: border-box;

  .user-item {
    display: flex;
    align-items: center;
    cursor: pointer;

    .user-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      box-sizing: border-box;
    }

    .user-name {
      font-size: 14px;
      font-weight: 400;
      color: #fff;
      margin-left: 8px;
    }
  }
}

.header-drop-menu {
  span {
    margin-left: 3px;
  }
  .el-dropdown-menu__item {
    .iconfont {
      font-size: 14px;
      margin-right: 5px;
    }
  }
}
::v-deep .ya-form .is-error.el-form-item--default {
  margin-bottom: 38px;
}
</style>
