<template>
  <div class="tag-filter" v-show="visible">
    <div class="filter-mask" @click="close"></div>
    <div class="filter-container">
      <div class="filter-header">
        <span class="filter-title">类型筛选</span>
        <van-icon name="close" class="close-icon" @click="close" />
      </div>
      <div class="filter-content">
        <div class="tag-list">
          <span
            v-for="tag in tagList"
            :key="tag.value"
            class="tag-item"
            :class="{ active: tempSelectedTag === tag.value }"
            @click="selectTag(tag.value)"
          >
            {{ tag.label }}
          </span>
        </div>
      </div>
      <div class="filter-footer">
        <van-button class="reset-btn" size="small" @click="resetFilter">重置</van-button>
        <van-button type="primary" class="confirm-btn" size="small" @click="confirmFilter">确定</van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { Icon as VanIcon, Button as VanButton } from 'vant'

const props = defineProps({
  // 筛选选中的值（支持 v-model）
  modelValue: {
    type: String,
    default: 'all'
  },
  // 控制显示隐藏
  visible: {
    type: Boolean,
    default: false
  },
  // 标签列表
  tags: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue', 'update:visible', 'confirm'])

// 临时选中的标签（用于确认前暂存）
const tempSelectedTag = ref(props.modelValue)

// 标签列表
const tagList = computed(() => props.tags)

// 监听 modelValue 变化，同步临时选中值
watch(() => props.modelValue, (newVal) => {
  tempSelectedTag.value = newVal
})

// 监听 visible 变化，打开时同步临时选中值
watch(() => props.visible, (newVal) => {
  if (newVal) {
    tempSelectedTag.value = props.modelValue
  }
})

// 选择标签（临时）
const selectTag = (value) => {
  tempSelectedTag.value = value
}

// 重置筛选
const resetFilter = () => {
  tempSelectedTag.value = null
  emit('update:modelValue', tempSelectedTag.value)
}

// 确认筛选
const confirmFilter = () => {
  emit('update:modelValue', tempSelectedTag.value)
  emit('confirm', tempSelectedTag.value)
  close()
}

// 关闭筛选弹窗
const close = () => {
  emit('update:visible', false)
}
</script>

<style scoped lang="scss">
.tag-filter {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

.filter-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.filter-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-radius: 0 0 16px 16px;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #ebedf0;

  .filter-title {
    font-size: 16px;
    font-weight: 500;
    color: #323233;
  }

  .close-icon {
    font-size: 22px;
    color: #969799;
    cursor: pointer;

    &:active {
      opacity: 0.6;
    }
  }
}

.filter-content {
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tag-item {
  padding: 6px 16px;
  background-color: #f7f8fa;
  border-radius: 24px;
  font-size: 14px;
  color: #646566;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;

  &:active {
    transform: scale(0.96);
  }

  &.active {
    background-color: #1989fa;
    color: #fff;
  }
}

.filter-footer {
  display: flex;
  gap: 12px;
  padding: 12px 16px 20px;
  border-top: 1px solid #ebedf0;

  .reset-btn,
  .confirm-btn {
    flex: 1;
    height: 40px;
    border-radius: 24px;
    font-size: 14px;
  }

  .reset-btn {
    background-color: #f7f8fa;
    border: none;
    color: #646566;

    &:active {
      opacity: 0.8;
    }
  }
}
</style>