<template>
  <view v-if="visible" class="popup-mask" @tap="close">
    <view class="picker-panel" @tap.stop>
      <view class="picker-header">
        <text class="picker-cancel" @tap="close">取消</text>
        <text class="picker-title">价格筛选</text>
        <text class="picker-confirm" @tap="confirm">确定</text>
      </view>
      <view class="picker-body">
        <!-- 价格区间快捷选项 -->
        <view class="price-tags">
          <view
            v-for="item in priceOptions"
            :key="item.label"
            :class="['price-tag', { active: tempMin === item.min && tempMax === item.max }]"
            @tap="selectOption(item)"
          >
            {{ item.label }}
          </view>
        </view>

        <!-- 自定义价格区间 -->
        <view class="custom-section">
          <text class="custom-title">自定义价格（元）</text>
          <view class="custom-inputs">
            <input
              class="price-input"
              type="number"
              placeholder="最低价"
              :value="tempMin"
              @input="onMinInput"
            />
            <view class="price-divider">—</view>
            <input
              class="price-input"
              type="number"
              placeholder="最高价"
              :value="tempMax"
              @input="onMaxInput"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps<{
  min?: number;
  max?: number;
}>();

const emit = defineEmits<{
  (e: 'change', min: number | undefined, max: number | undefined): void;
}>();

const visible = ref(false);
const tempMin = ref<number | undefined>(undefined);
const tempMax = ref<number | undefined>(undefined);

const priceOptions = [
  { label: '不限', min: undefined, max: undefined },
  { label: '0-150', min: 0, max: 150 },
  { label: '150-300', min: 150, max: 300 },
  { label: '300-500', min: 300, max: 500 },
  { label: '500-800', min: 500, max: 800 },
  { label: '800-1500', min: 800, max: 1500 },
  { label: '1500以上', min: 1500, max: undefined },
];

function open() {
  tempMin.value = props.min;
  tempMax.value = props.max;
  visible.value = true;
}

function close() {
  visible.value = false;
}

function selectOption(option: { min?: number; max?: number }) {
  tempMin.value = option.min;
  tempMax.value = option.max;
}

function onMinInput(e: any) {
  const v = e.detail.value;
  tempMin.value = v === '' ? undefined : Number(v);
}

function onMaxInput(e: any) {
  const v = e.detail.value;
  tempMax.value = v === '' ? undefined : Number(v);
}

function confirm() {
  emit('change', tempMin.value, tempMax.value);
  close();
}

defineExpose({ open, close });
</script>

<style lang="scss" scoped>
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: flex-end;
}

.picker-panel {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #eee;
}

.picker-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.picker-cancel {
  font-size: 28rpx;
  color: #999;
}

.picker-confirm {
  font-size: 28rpx;
  color: #FF6B35;
  font-weight: 600;
}

.picker-body {
  padding: 24rpx 32rpx;
}

.price-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.price-tag {
  padding: 16rpx 28rpx;
  font-size: 28rpx;
  color: #333;
  background: #f5f7fa;
  border-radius: 8rpx;

  &.active {
    color: #FF6B35;
    background: #fff1eb;
    font-weight: 500;
  }
}

.custom-section {
  margin-top: 32rpx;
}

.custom-title {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 20rpx;
  display: block;
}

.custom-inputs {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.price-input {
  flex: 1;
  height: 72rpx;
  background: #f5f7fa;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #333;
}

.price-divider {
  font-size: 28rpx;
  color: #ccc;
}
</style>
