<template>
    <view class="container">
        <div class="banner">
            <swiper>
                <swiper-item>
                    <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_banner.png"></image>
                </swiper-item>
            </swiper>
            <div class="dotList">
                <div class="dot active"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </div>
        <div class="line"></div>
        <div class="serverTitBox">
            <div class="serverTit">
                <div class="serverTit_left">
                    <div class="tit">空调清洗</div>
                    <div class="msg">
                        平台保障
                    </div>
                </div>
                <div class="serverTit_right">已预约100+</div>
            </div>
            <div class="serverCon">专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所还您清新居所</div>
        </div>
        <div class="line"></div>
        <div class="priceSelect">
            <div class="tit">价格范围</div>

            <div class="range">
                <div class="minPrice">￥10</div>
                <slider-range style="flex: 1;" :value="rangeValue" :min="rangeMin" :max="rangeMax" :step="5" :bar-height="3"
                    :block-size="26" background-color="#EEEEF6" active-color="#FF6B00" :format="format"
                    :decorationVisible="true" @change="handleRangeChange"></slider-range>
                <div class="maxPrice">￥39</div>
            </div>
        </div>

        <div class="serverList">
            <div class="serverListTit">匹配的服务商(3)</div>

            <div class="serverItem" @click="selectVendor">
                <div class="serverItem_left">
                    <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png"></image>
                </div>
                <div class="serverItem_right">
                    <div class="serverItem_right_msg">
                        <div class="msg_tit">安心家政</div>
                        <div class="msg_price">价格范围： <span>￥80-￥150</span></div>
                    </div>

                    <div class="serverItem_right_btn" @click="selectMaster">
                        选择师傅
                        <div class="more">
                            <u-icon name="arrow-right" color="#fff" size="28"></u-icon>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </view>
</template>

<script>
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
import { apiArr } from '../../../api/reservation';
import SliderRange from '@/components/primewind-sliderrange/components/primewind-sliderrange/index.vue'

export default {
    components: {
        // 注册组件
        SliderRange
    },
    data() {
        return {
            top: "",
            localHeight: "",
            rangeMin: 5,
            rangeMax: 200,
            rangeValue: [10, 50]
        }
    },
    methods: {
        format(val) {
            return val + '%'
        },
        handleRangeChange(e) {
            this.rangeValue = e
        },
        selectVendor(){
            NavgateTo("../vendor/index")
        },
        selectMaster(){
            NavgateTo("../chooseMaster/index")
        },
    },
    onReady() {

    },

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

    },

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

    },

}
</script>

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