<template>
  <ElTable v-if="stores?.length" :data="stores" border style="width: 100%">
    <ElTableColumn prop="name" :label="t('merchant.store.name')" min-width="160" />
    <ElTableColumn prop="status" :label="t('merchant.store.status')" width="140">
      <template #default="{ row }">
        <ElTag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</ElTag>
      </template>
    </ElTableColumn>
    <ElTableColumn prop="address" :label="t('merchant.store.address')" min-width="220" />
    <ElTableColumn prop="contactPhone" :label="t('merchant.store.contactPhone')" width="160" />
    <ElTableColumn prop="licenseNumber" :label="t('merchant.store.licenseNumber')" width="200" />
  </ElTable>
  <ElEmpty v-else :description="t('merchant.store.empty')" />
</template>

<script setup lang="ts">
  import { useI18n } from 'vue-i18n'
  import { ElEmpty, ElTable, ElTableColumn, ElTag } from 'element-plus'
  import { StoreStatus } from '@/enums/StoreStatus'

  interface Props {
    stores?: Api.Merchant.StoreListItem[]
  }

  defineProps<Props>()
  const { t } = useI18n()

  const getStatusType = (status: number) => {
    switch (status) {
      case StoreStatus.Operating:
        return 'success'
      case StoreStatus.Preparing:
        return 'warning'
      case StoreStatus.Closed:
        return 'info'
      case StoreStatus.Suspended:
        return 'danger'
      default:
        return 'info'
    }
  }

  const getStatusText = (status: number) => {
    switch (status) {
      case StoreStatus.Operating:
        return t('merchant.store.statusOperating')
      case StoreStatus.Preparing:
        return t('merchant.store.statusPreparing')
      case StoreStatus.Closed:
        return t('merchant.store.statusClosed')
      case StoreStatus.Suspended:
        return t('merchant.store.statusSuspended')
      default:
        return t('merchant.store.statusUnknown')
    }
  }
</script>
