<template>
    <view class="container">
        <div class="header">
            <div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
                <view class="searchBox_add">
                    <u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
                </view>
                <div class="iptBox">
                    <image src="http://192.168.0.172:5500/com_communitySearchIcon.png"></image>
                    <u--input placeholder="请输入内容" border="none" v-model="value" @change="change"></u--input>
                </div>
            </div>
            <div class="Filter">
                <div class="Filter_left">
                    <div class="FilterItem" @click="show1 = !show1">
                        附近
                        <image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
                    </div>

                    <div class="FilterItem">
                        综合
                        <image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
                    </div>

                    <div class="FilterItem">
                        排序
                        <image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
                    </div>

                    <div class="FilterItem">
                        分类
                        <image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
                    </div>

                    <div class="FilterItem">
                        地区
                        <image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
                    </div>
                </div>

                <div class="Filter_right">
                    筛选
                    <image src="http://192.168.0.172:5500/homeServer_filter.png"></image>
                </div>
            </div>
            <!-- 位置筛选 -->
            <div class="FilterMore" v-if="show1">
                <div class="local">距离 <span>上海公馆</span></div>
                <div class="filterMore1">
                    <div class="filterMoreItem">附近</div>
                    <div class="filterMoreItem">500m</div>
                    <div class="filterMoreItem">1km</div>
                    <div class="filterMoreItem">3km</div>
                    <div class="filterMoreItem">5km</div>
                    <div class="filterMoreItem">10km</div>
                </div>
            </div>

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

            <!-- 分类筛选 -->
            <div class="FilterMore3" v-if="show4">
                <div class="filterMore3Item" v-for="(item, index) in 9" :key="index">家电维修</div>
            </div>
        </div>

        <div class="main">
            <!-- 遮罩 -->
            <div class="dialogBox" v-if="show1"></div>

            <div class="MasterList">
                <div class="MasterItem" v-for="(item, index) in 3" :key="index">
                    <div class="MasterItem_left">
                        <image src="http://192.168.0.172:5500/community_providentFund_Group_1444.png"></image>
                        <image v-if="false" src="http://192.168.0.172:5500/community_providentFund_Ellipse_160.png">
                        </image>
                    </div>
                    <div class="MasterItem_right">
                        <div class="MasterItem_info">
                            <div class="MasterItem_Info_left">
                                <image src="http://192.168.0.172:5500/home_icon12.png"></image>
                                <div class="state state1">待服务</div>
                                <div class="state state2" v-if="false">休息中</div>
                                <div class="state state3" v-if="false">服务中</div>
                            </div>
                            <div class="MasterItem_Info_right">
                                <div class="MasterItem_Info_right_1">
                                    林师傅
                                    <image class="Medal" src="http://192.168.0.172:5500/homeServer_Champion.png">
                                    </image>
                                    <image class="Medal" v-if="false"
                                        src="http://192.168.0.172:5500/homeServer_RunnerUp.png">
                                    </image>
                                    <image class="star" src="http://192.168.0.172:5500/local_start1.png"></image>
                                    <span>4.8</span>
                                </div>
                                <div class="MasterItem_Info_right_2">52岁 广东梅州人 5-10年</div>
                                <div class="MasterItem_Info_right_3">
                                    <span>500+</span>预定 <span>100+</span>评价
                                </div>
                                <div class="MasterItem_Info_right_4">
                                    <div class="tagItem tag1">积极主动</div>
                                    <div class="tagItem tag2">技术精湛</div>
                                    <div class="tagItem tag3">技术精湛</div>
                                </div>

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

                                <div class="MasterItem_Info_right_6">
                                    <image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
                                    <image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
                                    <image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
                                </div>
                            </div>
                        </div>
                        <div class="MasterItem_more" @click="masterInfo">
                            查看资料
                        </div>
                    </div>
                </div>
            </div>

            <div class="Btn">
                确定
            </div>
        </div>

    </view>
</template>

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

export default {
    data() {
        return {
            top: "",
            localHeight: "",
            show1: false,
            show2: false,
            show3: false,
            show4: false,
        }
    },
    methods: {
        masterInfo() {
            NavgateTo("../masterInfo/index")
        },
        back() {
            NavgateTo("1")
        },
    },
    onReady() {

    },

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

    },

    /**
    * 页面上拉触底事件的处理函数
    */
    onReachBottom() {

    },

}
</script>

<style>
@import url("./index.css");
</style>