<script lang="ts" setup>
import XEUtils from 'xe-utils';


const props = defineProps<{
  field: string;
  value: string;
}>();

const badgeMap: { [key: number]: string } = {
  0: '',
  1: 'LD',
  2: '7DD',
  3: 'DOTD/TD'
};

const loadJsonString = (val: string) => XEUtils.toStringJSON(val);

const isArray = computed(() => XEUtils.includes([ 'bullet_point', 'variants' ], props.field));

const formatedVal = computed(() => {
  if (props.field === 'discount') {
    return `${ props.value }%`;
  } else if (props.field === 'coupon' || props.field === 'price') {
    return `$${ props.value }`;
  } else if (props.field === 'badge') {
    const badgeValue = Number(props.value);
    return badgeMap[badgeValue] || ''; // 添加默认值以处理无效的 badge 值
  }
  return props.value;
});
</script>

<template>
  <div>
    <template v-if="props.field==='imgs'">
      <span v-for="(img, index) in loadJsonString(props.value)" :key="index">
        <el-tooltip effect="light" placement="bottom-start">
          <el-image
              :src="`https://m.media-amazon.com/images/I/${img}.jpg`"
              fit="fill"
              
              style="width: 40px; margin-right: 5px;"
          />
          <template #content>
            <el-image
                :src="`https://m.media-amazon.com/images/I/${img}.jpg`"
                
                style="width: 250px"
            />
          </template>
        </el-tooltip>
      </span>
    </template>
    <template v-else-if="isArray">
      <ul class="in-table-ul">
        <li v-for="(val, index) in loadJsonString(props.value)" :key="index">
          <span>{{ val }}</span>
        </li>
      </ul>
    </template>
    <span v-else>{{ formatedVal || '-' }}</span>
  </div>
</template>

<style scoped>
.in-table-ul {
  padding-left: 20px;
}
</style>
