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

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

<template>
  <ElTable size="small" border :data="ladder" max-height="500px">
    <ElTableColumn prop="name" label="顺序" width="110px" fixed="left">
      <template #="{ $index }">
        {{ $index + 1 }}
      </template>
    </ElTableColumn>

    <ElTableColumn prop="type" label="商品类型" width="110px">
      <template #="{ row }">
        <ElTag>{{
          GOOD_OPTIONS.find(({ id }) => id === row.type + "")?.label || "--"
        }}</ElTag>
      </template>
    </ElTableColumn>
    <ElTableColumn prop="good_cover_img" width="60" label="图片">
      <template #="{ row }">
        <ElImage
          :src="row.good_cover_img"
          fit="cover"
          lazy
          :preview-src-list="
            row.good_cover_img !== '' ? [row.good_cover_img] : []
          "
          z-index="99999"
          preview-teleported
        />
      </template>
    </ElTableColumn>
    <ElTableColumn prop="good_name" label="商品名称" />
    <ElTableColumn prop="inventory" label="添加库存数" width="150px">
      <template #="{ row }">
        <el-input-number
          v-model="row.inventory"
          :step="1"
          :min="0"
          :precision="0"
          size="small"
          :max="99999999"
          value-on-clear="min"
          controls-position="right"
          step-strictly
        />
      </template>
    </ElTableColumn>
    <ElTableColumn prop="unit" label="单位" width="80px" />
    <ElTableColumn prop="moq" label="起订量" width="80px" />
    <ElTableColumn prop="step" label="步长" width="80px" />
    <ElTableColumn prop="price" label="售价" width="110px" />
    <!-- v-if="!readonly" -->
    <ElTableColumn width="80px" fixed="right">
      <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
          text
          type="primary"
          size="small"
          @click="() => emit('delete', $index)"
          >删除</ElButton
        >
      </template>
    </ElTableColumn>
  </ElTable>
</template>
