<template>
  <div>
    <div class="absolute inset-0">
      <img src="/assets/images/auth/bg-gradient.png" alt="image" class="h-full w-full object-cover" />
    </div>

    <div
      class="relative flex min-h-screen items-center justify-center bg-[url(/assets/images/auth/map.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16"
    >
      <img src="/assets/images/auth/coming-soon-object1.png" alt="image" class="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
      <img src="/assets/images/auth/coming-soon-object2.png" alt="image" class="absolute left-24 top-0 h-40 md:left-[30%]" />
      <img src="/assets/images/auth/coming-soon-object3.png" alt="image" class="absolute right-0 top-0 h-[300px]" />
      <img src="/assets/images/auth/polygon-object.svg" alt="image" class="absolute bottom-0 end-[28%]" />
      <div
        class="relative w-full max-w-[870px] rounded-md bg-[linear-gradient(45deg,#fff9f9_0%,rgba(255,255,255,0)_25%,rgba(255,255,255,0)_75%,_#fff9f9_100%)] p-2 dark:bg-[linear-gradient(52.22deg,#0E1726_0%,rgba(14,23,38,0)_18.66%,rgba(14,23,38,0)_51.04%,rgba(14,23,38,0)_80.07%,#0E1726_100%)]"
      >
        <div class="relative flex flex-col justify-center rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 px-6 lg:min-h-[758px] py-20">
          <div class="absolute top-6 end-6">
            <div class="dropdown">
              <Popper :placement="store.state.rtlClass === 'rtl' ? 'bottom-start' : 'bottom-end'" offsetDistance="8">
                <button
                  type="button"
                  class="flex items-center gap-2.5 rounded-lg border border-white-dark/30 bg-white px-2 py-1.5 text-white-dark hover:border-primary hover:text-primary dark:bg-black"
                >
                  <div>
                    <img :src="currentFlag" alt="image" class="h-5 w-5 rounded-full object-cover" />
                  </div>
                  <div class="text-base font-bold uppercase">{{ store.state.locale }}</div>
                  <span class="shrink-0">
                    <icon-caret-down />
                  </span>
                </button>
                <template #content="{ close }">
                  <ul class="!px-2 text-dark dark:text-white-dark grid grid-cols-2 gap-2 font-semibold dark:text-white-light/90 w-[280px]">
                    <template v-for="item in store.state.languageList" :key="item.code">
                      <li>
                        <button
                          type="button"
                          class="w-full hover:text-primary"
                          :class="{ 'bg-primary/10 text-primary': i18n.locale === item.code }"
                          @click="changeLanguage(item), close()"
                        >
                          <img class="w-5 h-5 object-cover rounded-full" :src="`/assets/images/flags/${item.code.toUpperCase()}.svg`" alt="" />
                          <span class="ltr:ml-3 rtl:mr-3">{{ item.name }}</span>
                        </button>
                      </li>
                    </template>
                  </ul>
                </template>
              </Popper>
            </div>
          </div>
          <div class="mx-auto w-full max-w-[440px]">
            <div class="mb-10 flex items-center">
              <div class="flex h-16 w-16 items-end justify-center overflow-hidden rounded-full bg-[#00AB55] ltr:mr-4 rtl:ml-4">
                <img :src="store.state.user.user.face" class="w-full object-cover" alt="images" />
              </div>
              <div class="flex-1">
                <h4 class="text-2xl dark:text-white">{{ store.state.user.user.username }}</h4>
                <p class="text-white-dark">Enter your password to unlock your ID</p>
              </div>
            </div>
            <form class="space-y-5">
              <!-- @submit.prevent="router.push('/')" -->
              <div>
                <label for="Password" class="dark:text-white">Password</label>
                <div class="relative text-white-dark">
                  <input id="Password" type="password" v-model="password" placeholder="Enter Password" class="form-input ps-10 placeholder:text-white-dark" />
                  <span class="absolute start-4 top-1/2 -translate-y-1/2">
                    <icon-lock-dots :fill="true" />
                  </span>
                </div>
              </div>
              <div>
                <label for="Password" class="dark:text-white">Confirm Password</label>
                <div class="relative text-white-dark">
                  <input id="Password" type="password" v-model="conpassword" placeholder="Enter Password" class="form-input ps-10 placeholder:text-white-dark" />
                  <span class="absolute start-4 top-1/2 -translate-y-1/2">
                    <icon-lock-dots :fill="true" />
                  </span>
                </div>
              </div>
              <button
                @click="submitPassword"
                type="submit"
                class="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]"
              >
                UNLOCK
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';
import * as API_Auth from '@/api/auth';
import { useI18n } from 'vue-i18n';
import appSetting from '@/app-setting';
import { useRouter,useRoute } from 'vue-router';
import { useMeta } from '@/composables/use-meta';
import { useStore } from 'vuex';
import IconCaretDown from '@/components/icon/icon-caret-down.vue';
import { ElMessageBox, FormInstance, ElMessage } from 'element-plus';
/*     import IconLockDots from '@/components/icon/icon-lock-dots.vue'; */

useMeta({ title: 'Lockscreen Boxed' });
const router = useRouter();
const route = useRoute();

const store = useStore();
let password = ref('');
let conpassword=ref('')
// multi language
const i18n = reactive(useI18n());
const changeLanguage = (item: any) => {
  i18n.locale = item.code;
  appSetting.toggleLanguage(item);
};
const currentFlag = computed(() => {
  return `/assets/images/flags/${i18n.locale.toUpperCase()}.svg`;
});
const submitPassword = () => {
  if(password.value !==conpassword.value){
    ElMessage.error('两次密码不一致！');
    return
  }else if(password.value=='' ){
    ElMessage.error('密码不能为空！');
    return
  }else if(conpassword.value=='' ){
    ElMessage.error('确认密码不能为空！');
    return
  }
  API_Auth.editAdministrator(store.state.user.user.uid, { password: password.value }).then((res) => {
    ElMessage.success('修改成功！');
    store.dispatch('logoutAction').then(() => {
      const route = router.resolve('/login');
      location.replace(route.href); // 为了重新实例化vue-router对象 避免bug
    });
  });
};
</script>
