<script setup lang="ts">
import ProfilePanel from "../account/ProfilePanel.vue";
import MembershipPanel from "../account/MembershipPanel.vue";
import PasswordPanel from "../account/PasswordPanel.vue";
import SearchPanel from "../account/SearchPanel.vue";
import AlertsPanel from "../../pages/review/AlertsPanel.vue";
import AssistantPanel from "../../pages/review/AssistantPanel.vue";
import { useUiStore } from "../stores/ui";
import BaseDialog from "./BaseDialog.vue";

const ui = useUiStore();
const titles = {
  profile: "个人资料", membership: "会员状态", password: "修改密码",
  search: "全局搜索", alerts: "提醒中心", assistant: "复盘助手",
} as const;
</script>

<template>
  <BaseDialog v-if="ui.dialog" :title="titles[ui.dialog]" :wide="['membership', 'search', 'alerts', 'assistant'].includes(ui.dialog)" @close="ui.closeDialog">
    <ProfilePanel v-if="ui.dialog === 'profile'" />
    <MembershipPanel v-else-if="ui.dialog === 'membership'" />
    <PasswordPanel v-else-if="ui.dialog === 'password'" />
    <SearchPanel v-else-if="ui.dialog === 'search'" />
    <AlertsPanel v-else-if="ui.dialog === 'alerts'" />
    <AssistantPanel v-else />
  </BaseDialog>
  <BaseDialog v-else-if="ui.confirmation" :title="ui.confirmation.title" @close="ui.resolveConfirmation(false)">
    <div class="form-grid">
      <p class="muted">{{ ui.confirmation.message }}</p>
      <div class="form-actions">
        <button class="btn" type="button" @click="ui.resolveConfirmation(false)">取消</button>
        <button class="btn btn-primary" type="button" @click="ui.resolveConfirmation(true)">{{ ui.confirmation.confirmLabel }}</button>
      </div>
    </div>
  </BaseDialog>
</template>
