<script setup lang="ts">
import { Subject } from 'rxjs';
import { PickupView, IActionParam, IParam, IContext } from '@core';
import { viewState } from './{{spinalCase page.codeName}}-state';
{{#page.ctrls}}
{{#eq controlType "PICKUPVIEWPANEL"}}
import { {{codeName}}PickupViewPanel } from '@widgets/{{spinalCase psAppDataEntity.codeName}}/{{spinalCase codeName}}-pickup-view-panel';
{{/eq}}
{{/page.ctrls}}
// props声明和默认值处理
interface Props {
  context?: IContext;
  viewParams?: IParam;
  openType?: "ROUTE" | "MODAL" | "EMBED";
  viewSubject?: Subject<IActionParam>;
}

const props = withDefaults(defineProps<Props>(), {
  openType:'ROUTE',
  viewSubject: () => new Subject<IActionParam>()
})

// emit声明
interface ViewEmit {
  (name: "viewEvent", value: IActionParam): void;
}

const emit = defineEmits<ViewEmit>();

// 安装功能模块，提供状态和能力方法
const pickupView = new PickupView(viewState(), props, emit).moduleInstall();
const { state, onCancel, onConfirm, onCtrlEvent } = pickupView;
</script>

<template>
    <AppPickupViewLayout :class="['app-pickup-view', state.viewSysCss]">
        <template #caption>
          <AppIconText class="app-view__caption" size="large" :text="state.viewCaption" />
        </template>
        {{#page.ctrls}}
            {{#eq controlType "TOOLBAR"}}
            <template v-slot:toolbar>
              <AppToolbar
                mode="button"
                name="{{lowerCase codeName}}"
                :actionModel="state.viewToolbarModel"
                @onToolbarEvent="onToolbarEvent"/>
            </template>
            {{/eq}}
            {{#eq controlType "PICKUPVIEWPANEL"}}
            <{{codeName}}PickupViewPanel
              name="{{name}}"
              :context="state.context"
              :rowEditState="state.rowEditState"
              :rowActiveMode="state.gridRowActiveMode"
              :showBusyIndicator="true"
              :viewParams="state.viewParams"
              :controlAction="state.{{name}}.action"
              :viewSubject="state.viewSubject"
              :selectedData="state.selectedData"        
              :parent="pickupView"           
              @onCtrlEvent="onCtrlEvent"
            ></{{codeName}}PickupViewPanel>
            {{/eq}}
          {{/page.ctrls}}
              <template v-slot:footer>
      <a-space class="app-pickup-view--footer">
        <a-button @click="onConfirm">确认</a-button>
        <a-button @click="onCancel">取消</a-button>
      </a-space>
    </template>
    </AppPickupViewLayout>
</template>