<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.133980,
                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
            uni.getLocation({
                type: 'gcj02',
                success: function(res) {
                    const {
                        longitude,
                        latitude
                    } = res
                    _this.latitude = latitude
                    _this.longitude = longitude
                    _this.getList(longitude, latitude).then((covers) => {
                        _this.$refs.uMap.addFeature(covers)
                    })
                },
                fail: function(err) {
                    _this.$api.msg('无法获得周边信息')
                },
                complete: function(e) {}
            })
        },
        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('成功获得周边信息')
            //         _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() {
                uni.getLocation({
                    type: 'gcj02',
                    success: function(res) {
                        const {
                            longitude,
                            latitude
                        } = res
                        _this.latitude = latitude
                        _this.longitude = longitude
                        _this.getList(longitude, latitude).then((covers) => {
                            _this.$refs.uMap.addFeature(covers)
                        })
                    },
                    fail: function(err) {
                        _this.$api.msg('无法获得周边信息')
                    },
                    complete: function(e) {}
                })
                // this.getList(this.longitude, this.longitude).then((covers) => {
                //     this.covers = 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;
                    }

                    /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>