<script setup lang="ts">
import { Subject } from 'rxjs';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-dataview-state';
import { DataViewControl, IActionParam, IParam, IContext, ControlAction } from '@core';
{{#if ctrl.itemPSLayoutPanel}}
  {{#ctrl.itemPSLayoutPanel}}
import { {{codeName}}Panel } from '@widgets/{{spinalCase psAppDataEntity.codeName}}/{{spinalCase codeName}}-panel';
  {{/ctrl.itemPSLayoutPanel}}
{{/if}}
{{#if ctrl.batchToolBarItems}}
import AppToolbar from '@components/common/app-toolbar.vue';
{{/if}}

interface Props {
  name:string,
  parent: IParam;
  context: IContext;
  viewParams: IParam;
  multiple?: boolean;
  selectFirstDefault?: boolean;
  controlAction: ControlAction;
  showBusyIndicator?: boolean;
  viewSubject: Subject<IActionParam>;
}

const props = withDefaults(defineProps < Props > (), {
  viewSubject: () => new Subject < IActionParam > (),
  showBusyIndicator: true,
  multiple: false,
  selectFirstDefault: false,
})

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

// emit声明
const emit = defineEmits<CtrlEmit>();

// 安装功能模块，提供状态和能力
const { name, state, onUIAction, newRow, remove, save, load, refresh, getData, xDataControl, exportExcel, onToolbarEvent, useCustom } = new DataViewControl(ctrlState(), props, emit).moduleInstall();
const { onDataViewItemSelected, isSelected } = useCustom();

// 暴露内部状态及能力
defineExpose({ name, state, newRow, remove, save, load, refresh, getData, exportExcel });
</script>
<template>
  <div class="app-dataview" ref="xDataControl">
    <a-row
      v-show="state.items && state.items.length > 0"
      class="dataview-container"
      :gutter="20"
      justify="start">
      <template v-for="(item, index) in state.items" :key="index">
        <a-col {{#if ctrl.cardWidth}}:style="{ width: '{{ctrl.cardWidth}}px'{{#if ctrl.cardHeight}}, height: '{{ctrl.cardHeight}}px'{{/if}} }"{{else}}:span="6"{{#if ctrl.cardHeight}}:style="{ height: '{{ctrl.cardHeight}}px' }"{{/if}}{{/if}}>
          {{#if ctrl.itemPSLayoutPanel}}
          <{{ctrl.itemPSLayoutPanel.codeName}}Panel
            :class="['app-dataview-item', isSelected(item) ? 'app-dataview-item__selection' : '']"
            {{#if ctrl.cardHeight}}
            :style="{ height: '{{ctrl.cardHeight}}px' }"
            {{/if}}
            @click="(event) => onDataViewItemSelected(item, event)"
            :context="state.context"
            :viewParams="state.viewParams"
            :navDatas="[item]"
            panelType="LAYOUT">
          </{{ctrl.itemPSLayoutPanel.codeName}}Panel>
          {{else}}
          <a-card :class="['app-dataview-item', isSelected(item) ? 'app-dataview-item__selection' : '']" @click="(event) => onDataViewItemSelected(item, event)" {{#if ctrl.cardHeight}}:style="{ height: '{{ctrl.cardHeight}}px' }"{{/if}}>
            <template #title>
              \{{item.srfmajortext}}
            </template>
            <template v-if="state.uIActions && Object.keys(state.uIActions).length" #actions>
              <div class="app-dataview-item__actions">
                <template v-for="(action, index) of state.uIActions" :key="index">
                <span
                  v-if="item[action.uIActionTag][0].visible"
                  :class="['app-dataview-item__action', item[action.uIActionTag][0].disabled ? 'disabled' : '']"
                  :title="action.tooltip ? action.tooltip : action.caption"
                  @click.stop="(event) => onUIAction(item, item[action.uIActionTag][0], event)">
                  <template v-if="action.showIcon">
                    <i v-if="action.cssClass" :class="action.cssClass" />
                    <img v-if="action.imagePath" :src="action.imagePath" />
                  </template>
                  <span v-if="action.showCaption" class="text">\{{action.caption}}</span>
                </span>
                </template>
              </div>
            </template>
            <span class="app-dataview-item__description">\{{item.srfdescription}}</span>
          </a-card>
          {{/if}}
        </a-col>
      </template>
    </a-row>
    <div v-if="!state.items || state.items.length === 0" class="not-data">
      <span class="empty-text">
      {{#if ctrl.emptyText}}
        {{ctrl.emptyText}}
      {{else}}
        无数据
      {{/if}}
      </span>
      {{#if ctrl.quickToolBarItems}}
      <AppToolbar
        mode="button"
        class="app-dataview-quicktoolbar"
        name="{{ctrl.quickToolBarName}}"
        :actionModel="state.quickToolbar"
        @onToolbarEvent="onToolbarEvent"
      ></AppToolbar>
      {{/if}}
    </div>
  </div>
</template>
<style lang="scss">
</style>