<script setup lang="ts">
import { Subject } from 'rxjs';
import { RightOutlined, LeftOutlined, DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons-vue';
import { MPickupView, 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 mpickupView = new MPickupView(viewState, props, emit).moduleInstall();
const { state, pickupViewPanel, onCancel, onConfirm, onCtrlEvent, onMoveRight, onMoveLeft, onAllMoveRight, onAllMoveLeft, onRightPanelClick } = mpickupView;
</script>

<template>
    <AppMpickupViewLayout :class="['app-mpickup-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}}
      {{/page.ctrls}}
      <a-row class="app-mpickup-view__split">
        <a-col :span="18">
        {{#page.ctrls}}
          {{#eq controlType "PICKUPVIEWPANEL"}}
            <{{codeName}}PickupViewPanel
              name="{{name}}"
              ref="pickupViewPanel"
              :context="state.context"
              :rowEditState="state.rowEditState"
              :rowActiveMode="state.gridRowActiveMode"
              :showBusyIndicator="true"
              :viewParams="state.viewParams"
              :controlAction="state.{{name}}.action"
              :viewSubject="state.viewSubject"
              :multiple="true"
              :selectedData="state.selections"
              :parent="mpickupView"
              @onCtrlEvent="onCtrlEvent"
            ></{{codeName}}PickupViewPanel>
          {{/eq}}
        {{/page.ctrls}}
        </a-col>
        <a-col :span="1" class="split__buttons">
          <a-space direction="vertical">
            <a-button @click="onMoveRight" :disabled="state.selectedData.length === 0"><right-outlined /></a-button>
            <a-button @click="onMoveLeft" :disabled="state.rightPanelSelections.length === 0"><left-outlined /></a-button>
            <a-button @click="onAllMoveRight"><double-right-outlined /></a-button>
            <a-button @click="onAllMoveLeft"><double-left-outlined /></a-button>
          </a-space>
        </a-col>
        <a-col :span="5" class="split__right">
          <div
            v-for="(item, index) in state.selections"
            :key="index"
            :class="['picker-item', state.rightPanelSelections.includes(item) ? 'picker-item__selected' : '']"
            @click="(event) => onRightPanelClick(item, event)">
              <span class="text">\{{item.srfmajortext}}</span>
          </div>
        </a-col>
      </a-row>
      <template v-slot:footer>
        <a-space class="app-mpickup-view--footer">
          <a-button @click="onConfirm" :disabled="state.selections.length === 0">确认</a-button>
          <a-button @click="onCancel">取消</a-button>
        </a-space>
      </template>
    </AppMpickupViewLayout>
</template>