<template>
    <div id="modal_account_edit" class="w-[600px] h-[296px] bg-[#FFFFFF] rounded
        shadow-lg flex flex-col">
        <ModalHeader :headerText="i18next.t('AcctMgmt.AccountEdit')"/>
        
        <main class="flex row h-[96px] my-[32px] flex-col px-8">
            <div class="input-row w-full flex py-3">
                <span class="field-label w-[68px] text-sm flex items-center font-medium mr-4 justify-end">{{ i18next.t("AcctMgmt.Account") }} </span>
                <input class="w-[454px] rounded p-1 btn btn-sm btn-neutralborder border-[1px] border-[#64748B] flex items-center h-[40px]"/>
            </div>
            <div class="input-row w-full flex py-3 items-center">
                <span class="field-label w-[68px] text-sm flex items-center font-medium mr-4 justify-end">{{ i18next.t("AcctMgmt.FullName") }} </span>
                <input class="w-[454px] rounded p-1 btn btn-sm btn-neutralborder border-[1px] border-[#64748B] flex items-center h-[40px]"/>
            </div>
        </main>
        <footer class="flex row footer justify-end pr-[32px]">            
            <button class="cancel-btn rounded rounded-full w-[92px] h-10 px-2.5 py-6 border border-[1px] border-[#64748B]
                flex justify-center items-center text-[#4E5969] font-medium"
                @click="onCancelBtnClick"
            >
                {{ i18next.t("Global.Cancel") }}
            </button>
            <button class="confirm-btn rounded rounded-full w-[92px] h-10 px-2.5 py-6 bg-[#0099FF]
                flex justify-center items-center text-[#ffffff] font-medium  ml-[16px]"
                @click="onConfirmBtnClick"
            >
                {{ i18next.t("Global.Confirm") }}
            </button>
        </footer>       
    </div>
</template>

<script>
import { defineComponent } from 'vue';
import i18next from "@/i18n/i18n.js";
import { mapActions, } from 'pinia';
import { useModalStore } from '@/stores/modal.js';
import ModalHeader from "./ModalHeader.vue";

export default defineComponent({
    setup() {
        return {
        };
    },
    data() {
        return {
            i18next: i18next,
        };
    },
    components: {
        ModalHeader,
    },
    methods: {
        onConfirmBtnClick(){
            //TODO:
        },
        onCloseBtnClick(){
            this.closeModal();
        },
        onCancelBtnClick(){
            this.closeModal();
        },
        ...mapActions(useModalStore, ['closeModal']),
    }
});

</script>
<style>
#modal_account_edit {
    background-color: #ffffff;
    backdrop-filter: opacity(1); /*防止子元件繼承父元件的透明度 */
}
</style>