<template>
  <el-drawer v-model="drawerVisible" size="340px" modal-class="avatar-menu" :with-header="false">
    <!-- <div class="theme-item flx-justify-between not-hover">
      <span class="text-disable sle flx-1"> 当前账套: {{ userStore.currentAccount }} </span>
      <el-button text class="flx-shrink" :icon="SwitchButton" size="small" @click="logout">
        {{ $t("header.logout") }}
      </el-button>
    </div> -->
    <div class="avatar-item flx-center">
      <AvatarIcon :username="username"></AvatarIcon>
      <div class="avatar-item__content flx-1">
        <div class="avatar-item__content-title flx">
          <span class="title sle text-primary-text flx-1">
            {{ username }}
          </span>
          <el-button text bg class="flx-shrink" :icon="SwitchButton" size="small" @click="logout">
            {{ $t("header.logout") }}
          </el-button>
        </div>
        <div class="text-secondary-text">{{ usercode }}</div>
      </div>
    </div>
    <div class="theme-item" style="cursor: pointer" @click="openDialog('passwordRef')">
      <span>{{ $t("header.changePassword") }}</span>
      <el-icon><ArrowRight /></el-icon>
    </div>

    <!-- <div class="flx-center">
      <el-button-group>
        <el-button>{{ $t("header.changePassword") }}</el-button>
      </el-button-group>
    </div> -->

    <!-- <el-divider class="avatar-divider" /> -->

    <van-cell-group :title="$t('header.systemSetting')">
      <van-cell :title="$t('header.language')">
        <el-radio-group v-model="language" size="small" @change="changeLanguage">
          <el-radio-button v-for="item in languageList" :label="item.value" :value="item.value" :key="item.value">
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </van-cell>
      <van-cell :title="$t('header.componentSize')">
        <el-radio-group v-model="assemblySize" size="small" @change="setAssemblySize">
          <el-radio-button v-for="item in assemblySizeList" :label="item.value" :value="item.value" :key="item.value">
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </van-cell>
    </van-cell-group>

    <!-- <div class="lj-cell-group"> -->
    <!-- <div class="title">
        {{ $t("header.theme") }}
      </div> -->
    <!-- <div class="theme-item">
      <span>当前账套</span>
      <span class="text-disable">
        {{ userStore.currentAccount }}
      </span>
    </div> -->
    <!-- <div class="theme-item">
      <span>色弱模式</span>
      <el-switch v-model="isWeak" @change="changeGreyOrWeak('weak', !!$event)" />
    </div> -->
    <!-- </div> -->

    <div class="lj-cell-group">
      <div class="title">
        {{ $t("header.theme") }}
      </div>
      <div class="theme-item">
        <span>暗黑模式</span>
        <SwitchDark />
      </div>
      <div class="theme-item">
        <span>灰色模式</span>
        <el-switch v-model="isGrey" @change="changeGreyOrWeak('grey', !!$event)" />
      </div>
      <div class="theme-item">
        <span>色弱模式</span>
        <el-switch v-model="isWeak" @change="changeGreyOrWeak('weak', !!$event)" />
      </div>
    </div>

    <!-- 界面设置 -->
    <!-- <el-divider class="divider" content-position="center">
      <el-icon><Setting /></el-icon>
      界面设置
    </el-divider> -->
    <!-- <div class="theme-item">
      <span>折叠菜单</span>
      <el-switch v-model="isCollapse" />
    </div>
    <div class="theme-item">
      <span>面包屑</span>
      <el-switch v-model="breadcrumb" :disabled="layout == 'vertical' || layout == 'transverse'" />
    </div>
    <div class="theme-item">
      <span>面包屑图标</span>
      <el-switch v-model="breadcrumbIcon" :disabled="layout == 'vertical' || layout == 'transverse'" />
    </div>
    <div class="theme-item">
      <span>标签栏</span>
      <el-switch v-model="tabs" :disabled="layout == 'vertical'" />
    </div> -->
    <!-- <div class="theme-item">
      <span>页脚</span>
      <el-switch v-model="footer" />
    </div> -->
    <!-- <div class="theme-item">
      <span>切换动画</span>
      <el-switch v-model="tabsAnimating" />
    </div> -->

    <div class="lj-cell-group">
      <div class="title">
        {{ $t("header.interface") }}
      </div>
      <div class="theme-item">
        <span>标签栏图标</span>
        <el-switch v-model="tabsIcon" />
      </div>
      <div class="theme-item autolock-item">
        <span>
          自动锁屏
          <template v-if="autoLockTime > 0"> (分钟) </template>
        </span>
        <el-switch
          v-model="lockTime"
          v-show="autoLockTime == 0"
          :active-value="1"
          :inactive-value="0"
          @change="handleChangeAutoLock"
        />
        <el-input-number
          v-model="lockTime"
          v-show="Number(autoLockTime) != 0"
          :min="0"
          :max="360"
          controls-position="right"
          :precision="0"
          value-on-clear="min"
          @change="handleChangeInputAutoLock"
        />
      </div>
      <div class="theme-item">
        <span>在新标签页中打开详情页</span>
        <el-switch v-model="detailBlank" />
      </div>
    </div>

    <PasswordDialog ref="passwordRef" @success="toLogout"></PasswordDialog>

    <template #footer>
      <div class="flx-justify-between">
        <span class="text-secondary-text"> 系统版本 </span>
        {{ Version }}
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { storeToRefs } from "pinia";
import { useTheme } from "@/hooks/useTheme";
import { useI18n } from "vue-i18n";
import { useUserStore } from "@/stores/modules/user";
import { useGlobalStore } from "@/stores/modules/global";
import { LayoutType } from "@/stores/interface";
import { DEFAULT_PRIMARY } from "@/config";
import mittBus from "@/utils/mittBus";
import SwitchDark from "@/components/SwitchDark/index.vue";
import { Setting, ColdDrink, QuestionFilled, SwitchButton, ArrowRight } from "@element-plus/icons-vue";
import { MittEnum } from "@/enums/mittEnum";
import AvatarIcon from "./AvatarIcon.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { LanguageType } from "@/stores/interface";
import { AssemblySizeType } from "@/stores/interface";
import PasswordDialog from "./PasswordDialog.vue";

import AssemblySize from "./AssemblySize.vue";
import Language from "./Language.vue";
import SearchMenu from "./SearchMenu.vue";
import ThemeSetting from "./ThemeSetting.vue";
import Message from "./Message.vue";
import Fullscreen from "./Fullscreen.vue";
import Avatar from "./Avatar.vue";
import RefreshPage from "./RefreshPage.vue";
import AutoLock from "./AutoLock.vue";

const { changePrimary, changeGreyOrWeak, setAsideTheme } = useTheme();

const { t } = useI18n();
const userStore = useUserStore();
const Version = import.meta.env.VITE_APP_VERSION;

const { username, usercode } = userStore.userInfo;

const emits = defineEmits(["gotoRefresh"]);
const refresh = () => emits("gotoRefresh");

const globalStore = useGlobalStore();
const {
  layout,
  primary,
  isGrey,
  isWeak,
  asideInverted,
  isCollapse,
  breadcrumb,
  breadcrumbIcon,
  tabs,
  tabsIcon,
  footer,
  tabsAnimating,
  autoLockTime,
  detailBlank
} = storeToRefs(globalStore);

// 预定义主题颜色
const colorList = [
  DEFAULT_PRIMARY,
  "#daa96e",
  "#0c819f",
  "#409eff",
  "#27ae60",
  "#ff5c93",
  "#e74c3c",
  "#fd726d",
  "#f39c12",
  "#9b59b6"
];

const language = ref(globalStore.language);

const languageList = [
  { label: "简体中文", value: "zh-cn" },
  { label: "English", value: "en" }
];

const i18n = useI18n();
const changeLanguage = (lang: string) => {
  i18n.locale.value = lang;
  globalStore.setGlobalState("language", lang as LanguageType);
};

const assemblySizeList = [
  { label: "默认", value: "default" },
  { label: "宽松", value: "large" },
  { label: "紧凑", value: "small" }
];

const assemblySize = ref(globalStore.assemblySize);
const setAssemblySize = (item: AssemblySizeType) => {
  globalStore.setGlobalState("assemblySize", item);
  refresh();
};

// 设置布局方式
const setLayout = (val: LayoutType) => {
  globalStore.setGlobalState("layout", val);
  setAsideTheme();
};

const toLogout = async () => {
  await userStore.logout(true);
  ElMessage.success(t("sys.app.logoutSuccess"));
};

/**
 * @description 退出登录
 */
const logout = () => {
  ElMessageBox.confirm(t("sys.app.logoutMessage"), t("sys.app.logoutTip"), {
    confirmButtonText: t("common.okText"),
    cancelButtonText: t("common.cancelText"),
    type: "warning"
  }).then(async () => {
    await toLogout();
  });
};

// 打开主题设置
const drawerVisible = ref(false);
mittBus.on(MittEnum.AvatarDrawer, () => (drawerVisible.value = true));

const passwordRef = ref<InstanceType<typeof PasswordDialog> | null>(null);
const openDialog = (ref: string) => {
  if (ref == "passwordRef") passwordRef.value?.openDialog();
};

// 打开自动锁屏
const lockTime = ref(0);
lockTime.value = autoLockTime.value;
const handleChangeAutoLock = (val: string | number | boolean) => {
  autoLockTime.value = lockTime.value;
  globalStore.setGlobalState("autoLockTime", autoLockTime.value);
};
const handleChangeInputAutoLock = (cur: number | undefined, prev: number | undefined) => {
  let valueArr: any = [];
  let _val = cur?.toString();
  valueArr.push(_val);
  console.log("cur :>> ", cur);
  if (_val && !new RegExp(/^\d+$/g).test(_val)) {
    ElMessage.error("仅可输入数值");
    valueArr = _val && _val.match(/\d+(.\d+)?/g);
    console.log("valueArr :>> ", valueArr);
  }
  autoLockTime.value = Number(valueArr[0]);
  // globalStore.setGlobalState("autoLockTime", autoLockTime.value);
};

const getLastChar = (val: string) => {
  return val.substring(val.length - 2);
};

// const handleTest = (val: any) => {
//   console.log("val :>> ", val);
//   let valueArr: any = [];
//   let _val = val.key;
//   valueArr.push(_val);
//   if (_val && !new RegExp(/^\d+$/g).test(_val)) {
//     ElMessage.error("仅可输入数值");
//     valueArr = _val && _val.match(/\d+(.\d+)?/g);
//     console.log("valueArr eee :>> ", valueArr);
//   }
//   // autoLockTime.value = Number(valueArr[0]);
//   console.log("handleTest valueArr.value :>> ", valueArr);
// };
</script>

<!-- <style scoped lang="scss">
@import "./index.scss";
</style> -->

<style lang="scss">
.avatar-menu {
  // top: 54px;
  top: 40px;
  height: calc(100% - 40px);

  .el-drawer__body {
    background-color: $color-gray-2;
    padding: 0;

    .avatar-item {
      margin: 10px;
      margin-left: 20px;
      &__img {
        position: relative;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin: 0 auto;
        background: var(--li-linear-gradient-primary-1);

        color: $color-gray-1;
        @include text-style-h-5-bold;
      }

      &__content {
        position: relative;
        margin: auto 8px;
        margin-right: 0;
        &-title {
          @include text-style-h-5-bold;
        }
      }
    }
  }
  .functions-item {
    margin: 20px;
    padding: 10px 0;
    border-top: 1px solid $color-gray-4;
    border-bottom: 1px solid $color-gray-4;
    .el-space__item {
      cursor: pointer;
      &:last-child {
        margin-right: 0 !important;
      }
    }
  }

  .theme-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 20px;
    span {
      display: flex;
      align-items: center;
      font-size: 14px;
      .el-icon {
        margin-left: 3px;
        font-size: 15px;
        color: var(--el-text-color-regular);
        cursor: pointer;
      }
    }
    &:not(.not-hover):hover {
      background-color: $color-primary-000;
    }
    &.autolock-item {
      :deep(.el-input-number) {
        width: 100px;

        .el-input-group__append {
          padding: 0 10px;
        }
        .el-input__wrapper {
          padding-left: 5px;
        }
      }
    }
  }
}

// .tool-bar-ri {
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   padding-right: 25px;
//   padding-left: 13px;
//   padding-top: 8px;
//   padding-bottom: 8px;
//   box-sizing: border-box;
//   .header-icon {
//     display: flex;
//     align-items: center;
//     height: 100%;
//     & > * {
//       // margin-left: 21px;
//       // padding-left: 10px;
//       // padding-right: 10px;
//       height: 100%;
//       // align-items: center;
//     }
//   }
// }
.lj-cell-group {
  margin: 20px 12px;
  border-radius: $br-sm;
  background-color: $color-gray-1;
  overflow: hidden;

  > .title {
    padding: 8px 12px;
    padding-bottom: 0;
    color: $color-text-primary-text;
    @include text-style-body-bold;
  }
  > .theme-item {
    span {
      color: $color-text-secondary-text;
    }
    &:hover span {
      color: $color-text-primary-text;
    }
  }
}
</style>
