<template>
  <view class="sort" :style="{ width: width }">
    <view class="date">出发日期</view>
    <ul class="ul">
      <li
        v-for="(item, index) in items"
        :key="index"
        :class="{ active: selectedItem === index }"
        @tap="selectItem(index)"
      >
        {{ item }}
      </li>
      <li>选择日期</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 {
  width: 710rpx;
  height: 192rpx;
  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;
  overflow: auto;
  .date {
    width: 96rpx;
    height: 28rpx;
    font-family: Source Han Sans;
    font-size: 24rpx;
    font-weight: normal;
    line-height: 28rpx;
    letter-spacing: 0em;
    font-variation-settings: 'opsz' auto;
    font-feature-settings: 'kern' on;
    color: #fa5151;
    margin-left: 44rpx;
    margin-top: 20rpx;
  }
  .ul {
    padding-left: 20rpx;
    display: flex;
    flex-flow: wrap;
    li {
      width: 154rpx;
      height: 20rpx;
      border-radius: 8rpx;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 6rpx 26rpx;
      margin-left: 20rpx;
      background: #f3f3f3;
      font-size: 24rpx;
      line-height: 20rpx;
      text-align: center;
      list-style-type: none;
      margin-top: 20rpx;
    }
    .active {
      color: #fa5151;
      background: #feeeee;
    }
  }
}
</style>
