<template>
  <view class="container2">
    <view class="header">
      <view class="Filter">
        <view class="Filter_left">
          <view
            v-for="filter in filters"
            :key="filter.id"
            class="FilterItem"
            :class="{ active: selectedFilter === filter.id }"
            @click="
              showDialog(filter.id);
            "
          >
            {{ filter.label }}
            <image
              :src="
                selectedFilter === filter.id
                  ? 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/search_up.png'
                  : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png'
              "
              :class="{ iconStyle: selectedFilter === filter.id }"
            ></image>
          </view>
        </view>

        <view class="Filter_right" @click="showDialog(6)">
          <text :class="{ activeFilter: show6 }">筛选</text>
          <image
            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filter.png"
          ></image>
        </view>
      </view>
      <!-- 位置筛选 -->
      <view class="FilterMore" v-if="show1">
        <view class="local">距离 <span>上海公馆</span> ></view>
        <view class="filterMore1">
          <view class="filterMoreItem filterMoreItem-active">附近</view>
          <view class="filterMoreItem">500m</view>
          <view class="filterMoreItem">1km</view>
          <view class="filterMoreItem">3km</view>
          <view class="filterMoreItem">5km</view>
          <view class="filterMoreItem">10km</view>
        </view>
      </view>

      <!-- 综合筛选 -->
      <view class="FilterMore" v-if="show2">
        <view class="filterMore2_item">
          <view class="filterMore2_item_left">综合</view>
          <view class="filterMore2_item_right">
            <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
          </view>
        </view>
        <view class="filterMore2_item">
          <view class="filterMore2_item_left active3">从高到低</view>
          <view class="filterMore2_item_right">
            <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
          </view>
        </view>
        <view class="filterMore2_item">
          <view class="filterMore2_item_left">从低到高</view>
          <view class="filterMore2_item_right">
            <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
          </view>
        </view>
      </view>
      <!-- 排序筛选 -->
      <view class="FilterMore" v-if="show3">
        <view class="filterMore2_item">
          <view class="filterMore2_item_left2">智能排序</view>
          <view class="filterMore2_item_right">
            <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
          </view>
        </view>
        <view class="filterMore2_item">
          <view class="filterMore2_item_left2 active3">距离优先</view>
          <view class="filterMore2_item_right">
            <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
          </view>
        </view>
        <view class="filterMore2_item">
          <view class="filterMore2_item_left2">好评优先</view>
          <view class="filterMore2_item_right">
            <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
          </view>
        </view>
        <view class="filterMore2_item">
          <view class="filterMore2_item_left2">销量优先</view>
          <view class="filterMore2_item_right">
            <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
          </view>
        </view>
      </view>

      <!-- 高级筛选面板 -->
      <view class="FilterMore" v-if="show6">
        <view class="filter-section">
          <view class="filter-title">满意度</view>
          <view class="filter-options">
            <view
              class="filter-option"
              :class="{ active: selectedSatisfaction.includes('5+') }"
              @click="toggleSatisfaction('5+')"
            >
              5分及以上
            </view>
            <view
              class="filter-option"
              :class="{ active: selectedSatisfaction.includes('4.9+') }"
              @click="toggleSatisfaction('4.9+')"
            >
              4.9分及以上
            </view>
            <view
              class="filter-option"
              :class="{ active: selectedSatisfaction.includes('4.8+') }"
              @click="toggleSatisfaction('4.8+')"
            >
              4.8分及以上
            </view>
            <view
              class="filter-option"
              :class="{ active: selectedSatisfaction.includes('4.7+') }"
              @click="toggleSatisfaction('4.7+')"
            >
              4.7分及以上
            </view>
            <view
              class="filter-option"
              :class="{ active: selectedSatisfaction.includes('4.6+') }"
              @click="toggleSatisfaction('4.6+')"
            >
              4.6分及以上
            </view>
            <view
              class="filter-option"
              :class="{ active: selectedSatisfaction.includes('4.5+') }"
              @click="toggleSatisfaction('4.5+')"
            >
              4.5分及以上
            </view>
          </view>
        </view>

        <view class="filter-section">
          <view class="filter-title">评论数量</view>
          <view class="filter-options">
            <view
              class="filter-option"
              :class="{ active: selectedReviewCount === '1-100' }"
              @click="selectedReviewCount = '1-100'"
            >
              1-100
            </view>
            <view
              class="filter-option"
              :class="{ active: selectedReviewCount === '100-500' }"
              @click="selectedReviewCount = '100-500'"
            >
              100-500
            </view>
            <view
              class="filter-option"
              :class="{ active: selectedReviewCount === '500+' }"
              @click="selectedReviewCount = '500+'"
            >
              500以上
            </view>
          </view>
        </view>

        <view class="filter-section">
          <view class="filter-title">价格范围</view>
          <view class="price-range">
            <input
              type="number"
              v-model="minPrice"
              placeholder="最低价"
              class="price-input"
              @input="validatePriceRange"
            />
            <span class="price-separator">—</span>
            <input
              type="number"
              v-model="maxPrice"
              placeholder="最高价"
              class="price-input"
              @input="validatePriceRange"
            />
          </view>
        </view>

        <view class="filter-section">
          <view class="filter-title">类别</view>
          <view class="filter-options">
            <view
              class="filter-option"
              :class="{ active: selectedCategory === 'airConditioner' }"
              @click="selectedCategory = 'airConditioner'"
            >
              空调维修
            </view>
            <view
              class="filter-option"
              :class="{ active: selectedCategory === 'refrigerator' }"
              @click="selectedCategory = 'refrigerator'"
            >
              冰箱维修
            </view>
          </view>
        </view>

        <view class="filter-buttons">
          <button class="reset-button" @click="resetFilters">重置</button>
          <button class="confirm-button" @click="applyFilters">确定</button>
        </view>
      </view>
    </view>

    <view class="main">
      <!-- 遮罩 -->
      <view class="dialogBox" v-if="isShowDia" @click="closeAllFilters"></view>

      <view class="MasterList">
        <view class="MasterItem" v-for="(item, index) in 5" :key="index">
          <view class="MasterItem_right">
            <view class="MasterItem_info">
              <view class="MasterItem_Info_left">
                <image
                  src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/home_icon12.png"
                ></image>
                <view class="state state1">待服务</view>
                <view class="state state2" v-if="false">休息中</view>
                <view class="state state3" v-if="false">服务中</view>
              </view>
              <view class="MasterItem_Info_right">
                <view class="MasterItem_Info_right_1">
                  <view class="master_info_right_left">
                    林师傅
                    <image
                      class="Medal"
                      src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_Champion.png"
                    >
                    </image>
                    <image
                      class="Medal"
                      v-if="false"
                      src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_RunnerUp.png"
                    >
                    </image>
                    <image
                      class="star"
                      src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png"
                    ></image>
                    <span>4.8</span>
                  </view>

                  <view class="master_info_right_right" @click="masterInfo">
                    查看资料
                  </view>
                </view>
                <view class="MasterItem_Info_right_2">
                  52岁 广东梅州人 5-10年
                </view>
                <view class="MasterItem_Info_right_3">
                  <span>500+</span>预定 <span>100+</span>评价
                </view>
                <view class="MasterItem_Info_right_4">
                  <view class="tagItem tag1">积极主动</view>
                  <view class="tagItem tag2">技术精湛</view>
                  <view class="tagItem tag3">技术精湛</view>
                </view>

                <view class="MasterItem_Info_right_5">
                  价格范围： <span>￥500-￥800</span>
                </view>

                <view class="MasterItem_Info_right_6">
                  <image
                    src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"
                  ></image>
                  <image
                    src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"
                  ></image>
                  <image
                    src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"
                  ></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.FilterItem.active {
  color: red;
}
</style>

<script>
import {
  request,
  picUrl,
  NavgateTo,
  menuButtonInfo,
} from "../../../utils/index";
import { apiArr } from "../../../api/reservation";

export default {
  data() {
    return {
      top: "",
      localHeight: "",
      selectedFilter: null,
      // 筛选条件数据
      filters: [
        { id: 1, label: "附近" },
        { id: 2, label: "综合" },
        { id: 3, label: "排序" },
      ],
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      isShowDia: false,
      selectedSatisfaction: [],
      selectedReviewCount: null,
      selectedCategory: null,
      minPrice: 0,
      maxPrice: "",
    };
  },
  watch: {
    // 修改watch逻辑，只在点击空白区域关闭筛选器时清除选中状态
    // 而不是在切换不同筛选器时清除
  },
  methods: {
    masterInfo() {
      NavgateTo("../masterInfo/index");
    },
    back() {
      NavgateTo("1");
    },
    toggleSatisfaction(value) {
      const index = this.selectedSatisfaction.indexOf(value);
      if (index === -1) {
        this.selectedSatisfaction.push(value);
      } else {
        this.selectedSatisfaction.splice(index, 1);
      }
    },
    validatePriceRange() {
      // 确保最小值在0-99999之间
      if (this.minPrice < 0) this.minPrice = 0;
      if (this.minPrice > 99999) this.minPrice = 99999;
      // 确保最大值在0-99999之间且不小于最小值
      if (
        this.maxPrice &&
        (this.maxPrice < this.minPrice || this.maxPrice > 99999)
      ) {
        this.maxPrice = Math.min(Math.max(this.maxPrice, this.minPrice), 99999);
      }
    },
    resetFilters() {
      this.selectedSatisfaction = [];
      this.selectedReviewCount = null;
      this.selectedCategory = null;
      this.minPrice = 0;
      this.maxPrice = "";
    },
    applyFilters() {
      const filterData = {
        satisfaction: this.selectedSatisfaction,
        reviewCount: this.selectedReviewCount,
        category: this.selectedCategory,
        priceRange: {
          min: this.minPrice || 0,
          max: this.maxPrice || 99999,
        },
      };
      console.log("筛选条件:", filterData);
      this.show6 = false;
      this.isShowDia = false;
    },
    showDialog(index) {
      // 先更新选中的过滤器ID
      this.selectedFilter = index;
      // 然后处理显示状态
      this[`show${index}`] = !this[`show${index}`];
      this.logOtherButtons(index);
      this.isShowDia = this[`show${index}`];
    },
    logOtherButtons(excludeIndex) {
      for (let i = 1; i <= 6; i++) {
        if (i !== excludeIndex) {
          this[`show${i}`] = false;
        }
      }
    },
    closeAllFilters() {
      // 关闭所有筛选面板并重置选中状态
      for (let i = 1; i <= 6; i++) {
        this[`show${i}`] = false;
      }
      this.isShowDia = false;
      this.selectedFilter = null;
    },
  },
  onReady() {},

  onLoad(options) {
    const meun = menuButtonInfo();
    this.top = meun.top;
    this.localHeight = meun.height;
  },
  onShow() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},
};
</script>
<style>
@import url("./index.css");
</style>