<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const props = defineProps({
  /** 外部列表（菜谱页等）；首页不传则使用固定五项 */
  list: {
    type: Array,
    default: () => [],
  },
  currentId: {
    type: [String, Number],
    default: '',
  },
  labelKey: {
    type: String,
    default: 'name',
  },
  valueKey: {
    type: String,
    default: 'id',
  },
  imgKey: {
    type: String,
    default: 'logoUrl',
  },
})

const emit = defineEmits(['changeType'])
const { t } = useI18n()

const fixedTabs = [
  {
    id: 'member-zone',
    nameKey: 'pages.home.quickTabs.memberZone',
    logoUrl: '/static/app/images/home/huiyuanzhuanqu.png',
  },
  {
    id: 'live-seafood-air',
    nameKey: 'pages.home.quickTabs.liveSeafoodAir',
    logoUrl: '/static/app/images/home/kongyunhaixian.png',
  },
  {
    id: 'must-eat-list',
    nameKey: 'pages.home.quickTabs.mustEatList',
    logoUrl: '/static/app/images/home/bichibang.png',
  },
  {
    id: 'new-calendar',
    nameKey: 'pages.home.quickTabs.newCalendar',
    logoUrl: '/static/app/images/home/shangxinrili.png',
  },
  {
    id: 'fresh-seafood-today',
    nameKey: 'pages.home.quickTabs.freshSeafoodToday',
    logoUrl: '/static/app/images/home/xiandahaixian.png',
  },
]

const useFixedTabs = computed(() => !props.list || props.list.length === 0)

function selectTab(item: Record<string, unknown>) {
  emit('changeType', item[props.valueKey])
}

function imageWidthByIndex(index: number) {
  return (index + 1) % 2 === 1 ? '104rpx' : '210rpx'
}

function getTabName(item: Record<string, unknown>) {
  if (useFixedTabs.value && item.nameKey) {
    return t(String(item.nameKey))
  }
  return item[props.labelKey]
}

function getImage(item: Record<string, unknown>) {
  return String(item[props.imgKey] ?? '')
}

const displayList = computed(() =>
  useFixedTabs.value ? fixedTabs : props.list,
)
</script>

<template>
  <scroll-view :scroll-x="true">
    <view class="flex items-center">
      <view class="shrink-0 w-30rpx"></view>
      <view
        v-for="(item, index) in displayList"
        :key="String((item as Record<string, unknown>)[valueKey] ?? (item as Record<string, unknown>).id ?? index)"
        :class="[index === 0 ? '' : 'ml-40rpx']"
        class="tab-item shrink-0 flex flex-col items-center"
        @click="selectTab(item as Record<string, unknown>)"
      >
        <image
          class="tab-img"
          :src="getImage(item as Record<string, unknown>)"
          mode="scaleToFill"
          :style="{ width: imageWidthByIndex(index) }"
        />
        <text class="tab-label line-clamp-1">{{ getTabName(item as Record<string, unknown>) }}</text>
      </view>
      <view class="shrink-0 w-30rpx op-0">1</view>
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
.tab-item {
  min-width: 94rpx;
}

.tab-label {
  margin-top: 10rpx;
  font-size: 22rpx;
  line-height: 28rpx;
  color: #333;
  white-space: nowrap;
}

.tab-img {
  height: 144rpx;
  width: auto;
  display: block;
  margin-bottom: 10rpx;
}
</style>
