<script lang="ts" setup>
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  currentId: {
    type: [String, Number],
    default: '',
  },
})

const emit = defineEmits(['changeType']);

watchEffect(() => {
  if (props.currentId) {
    selectedIndex.value = props.currentId;
  }
});

const selectedIndex = ref();

function selectTab(item: any) {
  selectedIndex.value = item.id;
  emit('changeType', item.id);
}
</script>

<template>
  <scroll-view :scroll-x="true">
    <view class="flex items-center">
      <view class="shrink-0 w-30rpx"></view>
      <template v-for="(item, index) in list" :key="index">
        <view
            :class="[index === 0 ? '' : 'ml-40rpx']"
            class="w-112rpx flex flex-col items-center"
            @click="selectTab(item)"
        >
          <view
              :class="['img-wrap', selectedIndex == item.id ? 'img-selected' : '']"
          >
            <image
                :src="item.categoryImage"
                class="tab-img rounded-50% overflow-hidden"
                mode="aspectFill"
            ></image>
          </view>
          <text
              :class="selectedIndex === index ? 'text-#CE7138' : 'text-#333'"
              class="line-clamp-1 text-20rpx lh-20rpx mt-12rpx font-500"
          >{{ item.categoryName }}
          </text
          >
        </view>
      </template>
      <view class="shrink-0 w-30rpx op-0">1</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
.img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
  width: 132rpx;
  height: 132rpx;
}

.img-selected {
  border: 4rpx solid #ce7138;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
}

.tab-img {
  width: 112rpx;
  height: 112rpx;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
