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

<script setup>
import { defineProps } from 'vue';
const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']);
const selectedItem = ref(null);
const props = defineProps({
  width: {
    type: String,
    default: '100%',
  },
});
const selectItem = (selectItem) => {
  selectedItem.value = selectItem;
};
</script>

<style lang="scss" scoped>
.sort {
  position: absolute;
  top: 100%;
  // width: 100%;
  //   min-height: 212rpx;
  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;
  .ul {
    padding-left: 60rpx;
    li {
      list-style-type: none;
      font-size: 22rpx;
      color: #3d3d3d;
      margin-top: 20rpx;
    }
    .active {
      color: #fa5151;
    }
  }
}
</style>
