<script lang="ts" setup>
/**
 * @Name: DataTableSlot.vue
 * @Description: 商品列表-单元格插槽
 * @Author: Cheney
 */

import { useCountryInfoStore } from '/@/stores/countryInfo';
import { getTagType } from '/@/utils/useTagColor';


const props = defineProps<{
  row: any,
  field: any
}>();
const { row, field } = props;

const countryInfoStore = useCountryInfoStore();
const country = countryInfoStore.Countries.find(c => c.code == row.country_code);
const color = country ? country.color : '#3875F6';
const region = countryInfoStore.Region.find(r => r.code == row.shop.region);
</script>

<template>
  <div class="font-medium">
    <div v-if="field === 'region'">
      <el-tag :disable-transitions="true" :type=getTagType(row.shop.region)>
        {{ region ? region.name : '-' }}
      </el-tag>
    </div>
    <div v-else-if="field === 'country_code'">
      <el-tag :disable-transitions="true" :style="{ color: color, borderColor: color }" effect="plain" round>
        {{ country ? country.name : '-' }}
      </el-tag>
    </div>
    <div v-else-if="field === 'platform_number'">
      {{ row.shop.platform_number }}
    </div>
    <div v-else-if="field === 'shop_name'">
      {{ row.shop.name }}
    </div>
    <div v-else-if="field === 'fulfillment_channel'">
      <el-tag :disable-transitions="true" :type="row.fulfillment_channel === 'FBM' ? 'primary' : 'warning'">
        {{ row.fulfillment_channel }}
      </el-tag>
    </div>
    <div v-else-if="field === 'status'">
      <el-tag :disable-transitions="true"
              :type="row.status === 'Active' ? 'success' : row.status === 'Inactive' ? 'danger' : 'info'">
        {{ row.status === 'Active' ? '在售' : row.status === 'Inactive' ? '不在售' : '不完整' }}
      </el-tag>
    </div>
    <!-- 动态获取 -->
    <div v-else>
      {{ row[field] }}
    </div>
  </div>
</template>

<style scoped>

</style>
