<template>
    <scroll-view :scroll-y="true" class="nearby-scroll">
        <view class="nearby-map" @touchmove.stop.prevent>
            <zhuo-tianditu-MultiPoint-Mapper
                ref="tMap"
                :showLabel="false"
                :showCirle="true"
                api-key="e122b0518f43b32dcc256edbae20a5d1"
                @onLoad="LoadComplite"
            ></zhuo-tianditu-MultiPoint-Mapper>
        </view>
        <view class="nearby-list">
            <view class="list-head" @touchmove.stop.prevent>
                <view class="tab-options">
                    <view class="tab-scroll" ref="progress">
                        <view class="tab-scr-d" :style="`width: ${state.progressWidth}`">
                            <view class="">1km</view>
                            <view class="">5km</view>
                            <view class="">10km</view>
                        </view>
                        <bingProgressComponent
                            strokeWidth="7px"
                            :max="10"
                            activeColor="#13C57C"
                            handleWidth="10px"
                            handleHeight="10px"
                            handleBorderRadius="5px"
                            handleColor="#4778EC"
                            @change="progressChange"
                            :showInfo="false"
                            :width="state.progressWidth"
                        ></bingProgressComponent>
                    </view>
                    <view class="tab-op-right">
                        <view class="tab-recommend">推荐</view>
                        <view class="tab-filter">
                            <view class="tab-number">1000+</view>
                            <image class="image" src="/static/icon/filter.png"></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class="one-cards">
                <view class="card-box" v-for="(item, index) in 20" :key="index">
                    <view class="box-row mar_top0">
                        <view class="row-left">销售工程师-高级销售经理</view>
                        <view class="row-right">1万-2万</view>
                    </view>
                    <view class="box-row">
                        <view class="row-left">
                            <view class="row-tag">本科</view>
                            <view class="row-tag">1-5年</view>
                        </view>
                    </view>
                    <view class="box-row mar_top0">
                        <view class="row-item mineText">2024.1.8</view>
                        <view class="row-item mineText">8人</view>
                        <view class="row-item mineText textblue">匹配度93%</view>
                        <view class="row-item">
                            <uni-icons type="star" size="28"></uni-icons>
                            <!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
                        </view>
                    </view>
                    <view class="box-row">
                        <view class="row-left mineText">湖南沃森电气科技有限公司</view>
                        <view class="row-right mineText">青岛 青岛经济技术开发区 550m</view>
                    </view>
                </view>
            </view>
        </view>
    </scroll-view>
</template>

<script setup>
import bingProgressComponent from '/components/bing-progress/bing-progress.vue';
import { reactive, inject, watch, ref, onMounted, onBeforeUnmount } from 'vue';
const tMap = ref();
const progress = ref();
const state = reactive({
    progressWidth: '150px',
});

onMounted(() => {
    const query = uni.createSelectorQuery().in(this);
    query
        .select('.tab-scroll')
        .boundingClientRect((data) => {
            state.progressWidth = data.width - 50 + 'px';
        })
        .exec();
    tMap.value.open(104.397894, 31.126855);
});

// 初始化
function LoadComplite() {
    console.log('天地图加载完成');
    const list = [
        {
            id: 0,
            label: '',
            lat: 31.126855,
            lon: 104.397894,
        },
    ];
    tMap.value.addFeature(list);
}
function progressChange(e) {
    tMap.value.changeRange(e.value);
}
</script>

<style lang="stylus" scoped>
.nearby-scroll
    overflow: hidden;
    .nearby-map
        height: 467rpx;
        background: #e8e8e8;
    .nearby-list
        background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
        .list-head
            height: 77rpx;
            background-color: #FFFFFF;
            border-radius: 17rpx 17rpx 0rpx 0rpx;
            position: relative;
            top: -17rpx;
            z-index: 9999;
    .tab-options
        margin-top: -15rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 77rpx;
        background: #FFFFFF;
        border-radius: 17rpx 17rpx 0rpx 0rpx;
        padding: 0 24rpx;
        overflow: hidden;
        .tab-scroll
            height: 77rpx;
            flex: 1;
            padding-right: 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            .tab-scr-d
                display: flex;
                justify-content: space-between;
                font-weight: 400;
                font-size: 21rpx;
                color: #000000;
            .tab-op-left
                display: flex;
                align-items: center;
                flex-wrap: nowrap;
                .tab-list
                    text-align: center;
                    white-space: nowrap;
                    margin-right: 30rpx;
                    font-size: 28rpx;
                    color: #606060;
        .tab-op-right
            display: flex;
            align-items: center;
            .tab-recommend
                white-space: nowrap;
                width: 92rpx;
                height: 42rpx;
                background: #4778EC;
                border-radius: 17rpx 17rpx 0rpx 17rpx;
                text-align: center;
                color: #FFFFFF;
                font-size: 21rpx;
                line-height: 42rpx;
                margin-right: 12rpx;
            .tab-number
                font-size: 21rpx;
                color: #606060;
                line-height: 25rpx;
                text-align: center;
            .tab-filter
                display: flex;
                .image
                    width: 28rpx;
                    height: 27rpx;

    .one-cards
        display: flex;
        flex-direction: column;
        padding: 0 20rpx;
        .card-box
            width: calc(100% - 36rpx - 36rpx);
            border-radius: 0rpx 0rpx 0rpx 0rpx;
            background: #FFFFFF;
            border-radius: 17rpx;
            padding: 15rpx 36rpx;
            margin-top: 24rpx;
            .box-row
                display: flex;
                justify-content: space-between;
                margin-top: 8rpx;
                align-items: center;
                .mineText
                    font-weight: 400;
                    font-size: 21rpx;
                    color: #606060;
                .textblue
                    color: #4778EC;
                .row-left
                    display: flex;
                    justify-content: space-between;
                    .row-tag
                        background: #13C57C;
                        border-radius: 17rpx 17rpx 17rpx 17rpx;
                        font-size: 21rpx;
                        color: #FFFFFF;
                        line-height: 25rpx;
                        text-align: center;
                        padding: 4rpx 8rpx;
                        margin-right: 23rpx;
        .card-box:first-child
            margin-top: 6rpx;
</style>
