<template>
  <div>
    <q-dialog ref="dialogRef" allow-focus-outside v-bind="attrs">
      <q-card
        :style="{
          width: attrs.maximized ? '100vw' : width,
          'max-width': '100vw',
          height: attrs.maximized ? '100vh' : height,
          'max-height': '100vh',
        }"
      >
        <q-card-section :style="headerStyle">
          <div class="flex justify-between">
            <div class="text-h6">{{ title }}</div>
            <div class="flex justify-end q-gutter-md">
              <q-btn v-close-popup dense flat icon="close" :title="$t('close')"> </q-btn>
            </div>
          </div>
        </q-card-section>
        <q-card-section class="q-pt-md" :style="bodyStyle">
          <div class="row">
            <div class="col-12">
              <q-input v-model="model.rawPassword" type="password" label="原密码" outlined autocomplete="false" class="p-1" />
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <q-input v-model="model.newPassword" type="password" label="新密码" outlined autocomplete="false" class="p-1" />
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <q-input v-model="model.confirmNewPassword" type="password" label="确认新密码" outlined autocomplete="false" class="p-1" />
            </div>
          </div>
        </q-card-section>
        <q-card-section class="row justify-center items-start content-start q-gutter-md">
          <q-btn :label="$t('confirm')" color="primary" style="width: 100px" @click="changePassword" />
          <q-btn :label="$t('cancel')" style="width: 100px" @click="dialogRef.hide" />
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>
<script setup lang="ts">
import { useAttrs, ref, reactive, toRaw } from 'vue';
import { useI18n } from 'vue-i18n';
import { axios, Environment } from 'platform-core';

const attrs = useAttrs();

const props = defineProps({
  headerStyle: { type: String, default: 'width:100%;padding: 16px 8px 4px 16px' },
  bodyStyle: { type: String, default: 'padding: 0px 8px 0px 8px;height:200px' },
  title: { type: String, default: '' },
  width: { type: String, default: '70%' },
  height: { type: String, default: '70%' },
});

const { t } = useI18n();
const dialogRef = ref();
const model = reactive({
  rawPassword: '',
  newPassword: '',
  confirmNewPassword: '',
});

const changePassword = () => {
  axios.post(Environment.apiContextPath('/api/system/user/changePassword'), toRaw(model)).then(() => {
    dialogRef.value.hide();
  });
};

const show = (param: object) => {
  dialogRef.value.show();
};

const hide = () => {
  dialogRef.value.hide();
};

defineExpose({
  show,
  hide,
});
</script>
