<script setup>

import {computed, ref} from "vue";
import {useQuasar} from "quasar";
import authApi from "app/src/api/auth/authApi";
import {useUserInfoStore} from "stores/user";

const open = defineModel('open', {default: false})

const func = defineEmits(['onClose', 'onOk'])

const oldPassword = ref('')
const newPassword = ref('')

const loading = ref(false)
const quasar = useQuasar()

async function action() {
  if (oldPassword.value === '' && newPassword.value === '') {
    return;
  }

  loading.value = true;

  try {

    await authApi.modifyPassword(oldPassword.value, newPassword.value);
    open.value = false
    func('onOk');
  } catch (e) {
    console.warn(e);
    quasar.dialog({
      transitionShow: 'fade',
      transitionHide: 'fade',
      title: '啊哈？',
      message: e.message,
    });
  } finally {
    loading.value = false;
  }
}

const screenWidth = ref(document.body.clientWidth)
window.onresize = () => screenWidth.value = document.body.clientWidth

const userInfoStore = useUserInfoStore()

</script>

<template>
  <q-dialog persistent no-esc-dismiss no-shake transition-show="fade" transition-hide="fade"
            v-model="open">
    <q-card class="info-dialog px-2">
      <div class="sticky top-0 bg-white z-10">
        <q-card-section>
          <div class="text-h6">用户信息</div>
        </q-card-section>
        <q-separator/>
      </div>

      <q-card-section class="flex-grow">
        <div class="flex flex-col gap-4 text-base">
          <span class="text-base">在这里查看用户信息，以及修改密码</span>
          <q-separator/>
          <table>
            <tbody>
            <tr>
              <td>UID</td>
              <td>{{ userInfoStore.info.basic.id }}</td>
            </tr>
            <tr>
              <td>用户类型</td>
              <td>{{ userInfoStore.info.basic.userType }}</td>
            </tr>
            <tr>
              <td>用户名</td>
              <td>{{ userInfoStore.info.basic.username }}</td>
            </tr>
            </tbody>
          </table>

          <q-separator/>

          <div class="flex flex-row gap-4">
            <div class="flex flex-col flex-grow">
              <span>原密码</span>
              <q-input dense outlined type="password" v-model="oldPassword"></q-input>
            </div>
            <q-icon name="keyboard_double_arrow_right" size="1.5rem" class="mt-8"
                    :class="screenWidth > 500 ? '' : 'hidden'"/>
            <div class="flex flex-col flex-grow">
              <span>新密码</span>
              <q-input dense outlined type="password" v-model="newPassword"></q-input>
            </div>
            <span>
              修改密码后，请重新登录<br>
              如果忘记了原密码，请联系管理员
            </span>
          </div>
        </div>
      </q-card-section>

      <div class="sticky bottom-0 bg-white z-10">
        <q-separator/>
        <q-card-actions align="right">
          <slot name="actions"></slot>
          <q-btn flat v-close-popup>算了</q-btn>
          <q-btn flat @click="action">好的</q-btn>
        </q-card-actions>
      </div>

      <q-inner-loading
        :showing="loading"
        label="与服务器通信中..."
        label-class="text-teal"
        label-style="font-size: 1.1em"
        color="gray"
        class="z-20"
      />
    </q-card>
  </q-dialog>
</template>

<style scoped lang="sass">
</style>
