<script setup lang="ts">
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { STYLE_OPTIONS, JUMP_OPTIONS } from "/@/config/status";
const emit = defineEmits(["choose", "delete", "update"]);

defineProps<{
  ladder: Record<string, any>[];
  type: string | number;
  readonly: boolean;
}>();
</script>

<template>
  <ElTable size="small" border :data="ladder">
    <ElTableColumn prop="name" label="顺序" width="60px">
      <template #="{ $index }">
        {{ $index + 1 }}
      </template>
    </ElTableColumn>
    <ElTableColumn prop="img" label="图片" width="50px">
      <template #="{ $index, row }">
        <ElImage
          fit="cover"
          lazy
          z-index="99999"
          :preview-teleported="true"
          :src="row.img"
          :preview-src-list="row.img !== '' ? [row.img] : []"
        /> </template
    ></ElTableColumn>

    <ElTableColumn prop="jump_type" label="跳转类型" width="85px">
      <template #="{ row }">
        <ElTag>{{
          JUMP_OPTIONS.find(({ id }) => id === row.jump_type + "")?.label ||
          "--"
        }}</ElTag>
      </template>
    </ElTableColumn>
    <ElTableColumn prop="jump_param" label="跳转地址" />
    <ElTableColumn
      prop="title"
      label="标题"
      v-if="type === '2' || type === 2"
      width="70px"
    />
    <ElTableColumn
      prop="style_type"
      v-if="type === '4' || type === 4"
      label="样式类型"
      width="70px"
    >
      <template #="{ row }">
        <ElTag>{{
          STYLE_OPTIONS.find(({ id }) => id === row.style_type + "")?.label ||
          "--"
        }}</ElTag>
      </template>
    </ElTableColumn>
    <ElTableColumn v-if="!readonly" width="70px">
      <template #header>
        <div class="w-full flex justify-between">
          <p>操作</p>

          <ElTooltip content="添加数据" placement="top">
            <ElButton
              link
              :icon="useRenderIcon('add')"
              @click="() => emit('choose')"
            />
          </ElTooltip>
        </div>
      </template>

      <template #="{ $index, row }">
        <ElButton
          link
          v-if="type !== '3' && type !== 3"
          :icon="useRenderIcon('edits')"
          @click="() => emit('update', { data: row, index: $index })"
        />
        <ElButton
          link
          :icon="useRenderIcon('delete')"
          @click="() => emit('delete', $index)"
        />
      </template>
    </ElTableColumn>
  </ElTable>
</template>
