<template>
  <div>
    <div v-for="(rowValue, rowIdx) in props.params.cells" :key="rowIdx" class="row gx-1 m-0 cell-sp">
      <template v-for="colValue of rowValue" :key="colValue.target">
        <div
          v-if="colValue.iActionMap"
          v-b-tooltip.hover
          class="col"
          :title="colValue.iActionMap[params.data[colValue.target ] as string ].info??''"
        >
          {{ colValue.iActionMap[params.data[colValue.target] as string ].name }}
        </div>
        <div v-else v-b-tooltip.hover class="col" :title="colValue.info ?? ''">
          {{params.data[colValue.target] as string}}
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { GeneralListItem } from "@/defs/API/Nation";
import type { GameIActionInfo } from "@/defs/GameObj";
import type { CellClassParams } from "ag-grid-community";
import type { PropType } from "vue";

interface GenCellClassParams extends CellClassParams {
  data: GeneralListItem;
}

type GridCellInfo = {
  iActionMap?: Record<string, GameIActionInfo>;
  info?: string;
  target: keyof GeneralListItem;
};

const props = defineProps({
  params: {
    type: Object as PropType<
      GenCellClassParams & {
        cells: GridCellInfo[][];
      }
    >,
    required: true,
  },
});
</script>
