<template>
  <Modal width="400px" :title="$t('sys.viewPWD')" :visible="visible" centered  class="model-table" :closable="false">
    <template #footer>
      <Button key="submit" type="primary" @click="okHandler">{{$t('sys.enter')}}</Button>
    </template>
    <FormItem :label="$t('sys.viewPWD')" name="password">
      <InputPassword v-model:value="password" :placeholder="$t('sys.placeInput')" />
    </FormItem>
  </Modal>
</template>

<script lang="ts" setup>
import { Modal, FormItem, InputPassword, Button } from 'ant-design-vue'
import { createLoadPack } from '@/utils'
import { ref } from 'vue';
import { authSharePassword } from '@/api';
import { Message } from 'bill/index'
import { ui18n } from '@/lang';

const visible = ref(true)
const password = ref('')

const emit = defineEmits<{ (e: 'close'): void }>()

const okHandler = createLoadPack(async () => {
  if (!password.value) {
    Message.error(ui18n.t('sys.placPWD'))
    return;
  }

  const pass = await authSharePassword(password.value)
  if (pass) {
    emit('close')
  } else {
    Message.error(ui18n.t('sys.pwdErr'))
  }
})
</script>
