<template>
    <view class="app_container">
        <view class="app-top">
            <view class="top-search">
                <view class="top-input">
                    <input
                        class="put"
                        type="text"
                        placeholder-class="put-pla"
                        v-model="searchValue"
                        placeholder="搜索附近岗位或任务"
                    />
                    <button class="input-btn" @tap="search">搜索</button>
                </view>
            </view>
        </view>
        <view class="view-map">
            <super-map
                ref="uMap"
                style="width: 100%; height: 100%"
                :latitude="latitude"
                :longitude="longitude"
                :zoom="14"
                :min-zoom="10"
                :max-zoom="20"
                @markertap="clickmark"
                @regionchange="show = false"
                :MapUrl="$config.supperMap"
                :flag-tip="false"
            ></super-map>
            <!-- <view id="map" ></view> -->
            <!-- <map style="width: 100%;height: 100%;" scale="16" :latitude="latitude" :longitude="longitude"
                :markers="covers" @markertap="clickmark" @regionchange="show = false"></map> -->
            <view class="position-bottom" v-if="show">
                <view class="uni-margin-wrap">
                    <swiper class="swiper" circular :interval="2000" :duration="500">
                        <swiper-item class="wiperItem">
                            <view class="swiper-item uni-bg-red">
                                <view class="item-content">
                                    <view class="content-title">{{ productInfo.missionTitle }}</view>
                                    <view class="color_999999 fs_12 mar_top5">
                                        <uni-icons type="location" color="#999999" size="12"></uni-icons>
                                        {{ productInfo.cityId }} ｜ {{ productInfo.address }} ｜ 距离：{{ distance }}
                                    </view>
                                    <view class="color_999999 fs_12 mar_top5">
                                        <uni-icons type="map-pin-ellipse" color="#999999" size="12"></uni-icons>
                                        招聘时间: {{ productInfo.stime }}-{{ productInfo.etime }}
                                    </view>
                                    <view class="color_999999 fs_12 mar_top5">
                                        <uni-icons type="map-pin-ellipse" color="#999999" size="12"></uni-icons>
                                        {{ productInfo.experienceDesc }} | {{ education[productInfo.education] }}
                                    </view>
                                    <button class="btns" hover-class="active" @tap="openMap">
                                        <image class="btn-img" src="../../static/img/direction2.png" />
                                        查看详情
                                    </button>
                                </view>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { addZeroPrefix, getDistanceFromLatLonInKm } from '@/untils/tools.js';
import testData from '@/common/textdata.js';
import { geQueryJobsByNearby } from '@/api/map.js';
let taskpoint = require('../../static/img/taskpoint.png');
let gwpoint = require('../../static/img/gwpoint.png');
let mypoint = require('../../static/img/mypoint.png');
export default {
    data() {
        return {
            education: testData.education,
            show: false,
            ID: 1,
            searchValue: '',
            latitude: 31.13398,
            longitude: 104.404419,
            covers: [],
            rateValue: 2,
            productInfo: {},
        };
    },
    computed: {
        distance() {
            const { lon, lat } = this.productInfo;
            if (lon) {
                const { m, km } = getDistanceFromLatLonInKm(lat, lon, this.latitude, this.longitude);
                return m > 1000 ? `${km.toFixed(2)}km` : `${m.toFixed(2)}m`;
            }
            return '无';
        },
    },
    mounted() {
        const _this = this;
        console.log(this.$store.state.user.userLocation);
        if (this.$store.state.user.userLocation) {
            const { latitude, longitude } = this.$store.state.user.userLocation;
            _this.getList(longitude, latitude).then((covers) => {
                _this.$refs.uMap.addFeature(covers);
            });
        } else {
            _this.$api.msg('无法获得周边信息');
        }
    },
    onShow() {
        // const _this = this
        // this.mockGetLocation().then((myPoint) => {
        //     this.latitude = myPoint.latitude
        //     this.longitude = myPoint.longitude
        //     _this.getList(_this.longitude, _this.latitude).then((covers) => {
        //         _this.$api.msg('成功获得周边信息')
        //         console.log(covers)
        //         _this.$refs.uMap.addFeature(covers)
        //     })
        // })
    },
    methods: {
        openMap(lon, lat) {
            //打开地图，并将门店位置传入
            // type: post 岗位 mission 任务
            switch (this.productInfo.type) {
                case 'post':
                    const no = encodeURIComponent(1);
                    uni.navigateTo({
                        url: `/pages/projectInfo/workInfo?workId=${encodeURIComponent(no)}&isCan=${1}`,
                    });
                    break;
                case 'mission':
                    const no1 = encodeURIComponent(this.productInfo.missionNo);
                    uni.navigateTo({
                        url: `/pages/projectInfo/projectInfo?missionNo=${no1}&isCan=${1}`,
                    });
                    break;
            }
        },
        search() {
            const _this = this;
            if (this.$store.state.user.userLocation) {
                const { latitude, longitude } = this.$store.state.user.userLocation;
                _this.getList(longitude, latitude).then((covers) => {
                    _this.$refs.uMap.addFeature(covers);
                });
            } else {
                _this.$api.msg('无法获得周边信息');
            }
            // this.getList(this.longitude, this.latitude).then((covers) => {
            //     this.$api.msg('成功获得周边信息')
            //     console.log(covers)
            //     this.$refs.uMap.addFeature(covers)
            // })
        },
        clickmark(cover) {
            if (cover.markerId === 1) return;
            this.show = true;
            this.productInfo = cover.info;
        },
        mockGetLocation() {
            return new Promise((resolve) => {
                resolve({
                    longitude: 104.40632,
                    latitude: 31.122989,
                    altitude: null,
                    accuracy: 25.998,
                    altitudeAccuracy: null,
                    heading: null,
                    speed: null,
                    errMsg: 'getLocation:ok',
                    verticalAccuracy: 0,
                    horizontalAccuracy: 25.998,
                });
            });
        },
        async getList(lon, lat) {
            return new Promise(async (resolve) => {
                let params = {
                    lon,
                    lat,
                    distanceRange: 20,
                    taskTitle: this.searchValue,
                };
                let resData = await geQueryJobsByNearby(params);
                if (resData.data.code === 200) {
                    const arr = resData.data.data.map((item) => ({
                        id: item.id,
                        longitude: item.lon,
                        latitude: item.lat,
                        iconPath: item.type === 'post' ? gwpoint : taskpoint,
                        width: 20,
                        height: 20,
                        title: item.missionTitle,
                        callout: {
                            content: item.missionTitle,
                            fontSize: 10,
                            borderColor: 'blue',
                        },
                        info: item,
                    }));
                    arr.push({
                        id: 1,
                        latitude: lat,
                        longitude: lon,
                        iconPath: mypoint,
                        title: '我的位置',
                        width: 20,
                        height: 20,
                    });
                    resolve(arr);
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.color_999999 {
    color: #999999;
}

.fs_12 {
    font-size: 24rpx;
}

.mar_top5 {
    margin-top: 10rpx;
}

.active {
    background: #eaeaea !important;
    color: #afafaf;
}

.card_mark {
    .mark_l {
        width: 56rpx;
        height: 28rpx;
        border-radius: 12rpx 0 12rpx 12rpx;
        background: linear-gradient(157deg, #a043c1 0%, #4133a2 100%);
        font-size: 28rpx;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.position-bottom {
    position: absolute;
    left: 0;
    right: 0;
    height: 406rpx;
    bottom: 50rpx;

    .uni-margin-wrap {
        height: 406rpx;

        .swiper {
            height: 406rpx;

            .wiperItem {
                padding-left: 50rpx;
                height: 406rpx;
                width: 660rpx !important;

                .swiper-item {
                    width: 660rpx;
                    height: 406rpx;
                    background: #ffffff;
                    box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
                    border-radius: 27rpx;
                    overflow: hidden;

                    .item-top {
                        display: flex;
                        align-content: center;
                        justify-content: space-between;

                        .top-img {
                            width: 215rpx;
                            height: 120rpx;
                        }
                    }

                    .item-content {
                        padding: 15rpx 33rpx;

                        .content-title {
                            font-size: 32rpx;
                        }

                        .btns {
                            margin-top: 20rpx;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 223rpx;
                            height: 64rpx;
                            background: linear-gradient(to right, #a043c1 0%, #4133a2 100%);
                            border-radius: 15rpx;
                            color: #ffffff;
                            font-size: 26rpx;
                            font-weight: 800;
                            color: #ffffff;
                            line-height: 64rpx;

                            .btn-img {
                                width: 32rpx;
                                height: 32rpx;
                            }
                        }
                    }
                }
            }
        }
    }
}

.app_container {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;

    .app-top {
        display: flex;
        background: linear-gradient(to right, #e8e8e8, #e8e8e8);
        padding-bottom: 16rpx;
        padding-top: 24rpx;

        .top-search {
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .top-input {
                width: 710rpx;

                .put {
                    padding-left: 30rpx;
                    height: 72rpx;
                    background: #ffffff;
                    border-radius: 36rpx;
                }

                ::v-deep .put-pla {
                    height: 33rpx;
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #999999;
                    line-height: 33rpx;
                }

                .input-btn {
                    position: absolute;
                    right: 30rpx;
                    top: 50%;
                    transform: translate(0, -50%);
                    color: #ffffff;
                    width: 120rpx;
                    height: 56rpx;
                    line-height: 56rpx;
                    font-size: 28rpx;
                    background: linear-gradient(157deg, #a043c1 0%, #4133a2 100%);
                    border-radius: 29rpx;
                }
            }
        }
    }

    .view-map {
        flex: 1;
    }
}
</style>
