<template>
  <view class="classification" :style="{ width: width }">
    <ul class="ul">
      <li
        v-for="(item, index) in category"
        :key="index"
        :class="{ active: selectedItem === index }"
        @tap="selectItem(index, item.categoryId)"
      >
        {{ item.categoryName }}
      </li>
    </ul>
  </view>
</template>

<script setup>
import { defineProps } from 'vue';
const selectedItem = ref(null);
const props = defineProps({
  width: {
    type: String,
    default: '100%',
  },
  category: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(['foodCategory']);
const selectItem = (index, categoryId) => {
  selectedItem.value = index;
  emit('foodCategory', categoryId);
};
</script>

<style lang="scss" scoped>
.classification {
  position: absolute;
  top: 100%;
  // width: 100%;
  max-height: 780rpx;
  border-radius: 0rpx 0rpx 16rpx 16rpx;
  background: #ffffff;
  box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
  margin: 0 auto;
  z-index: 99;
  display: flex;
  padding-bottom: 20rpx;
  box-sizing: border-box;
  overflow-y: scroll;
  .ul {
    padding-left: 60rpx;
    li {
      list-style-type: none;
      font-size: 22rpx;
      color: #3d3d3d;
      margin-top: 20rpx;
    }
    .active {
      color: #fa5151;
    }
  }
}
</style>
