<template>
    <view class="con-body">
        <view class="con-bg">
            <!-- 头部 -->
            <customHeader ref="customHeaderRef" :title="'签到打卡'" :leftFlag="true" :rightFlag="false"></customHeader>

            <!-- 高度来避免头部遮挡 -->
            <view class="top-height"></view>

            <!-- 正文内容 -->
            <view class="white-bg">
                <image src="../../../../static/images/business/btn-qd.png" class="btn-image" @click="handleCheckIn" />
                <image src="../../../../static/images/business/btn-dk.png" class="btn-image" @click="handleClockIn" />
                <view class="check-desc">
                    业务人员可通过<text class="font-orange">签到</text>或<text
                        class="font-blue">打卡</text>进行行为记录，该时间会和走访报告中的时间进行关联，便于查看。
                </view>
            </view>
        </view>

        <!-- 打卡遮罩层 -->
        <!-- <view class="check-con" v-if="checkFlag">
            <view class="check-in">
                <view class="check-tip">打卡</view>
                <view class="check-title">确定要在此处打卡吗？</view>
                <view class="check-location">
                    <uni-icons type="location-filled" size="30" color="#0395E0"></uni-icons> 亚洲金融大厦
                </view>
                <view class="check-address">北京市朝阳区天辰东路1号院</view>
                <view class="check-footer">
                    <button class="btn-default" type="default" @click="handleCancel" size="mini">取 消</button>
                    <button class="btn-primary" type="primary" @click="handleSubmit" size="mini">确 定</button>
                </view>
            </view>
        </view> -->

    </view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import customHeader from '@/components/customHeader.vue'
import { addStartMapForClockIn } from '../../../../api/crm/activity/map';

let form = reactive({
    addressForStart: null,
    addressForEnd: null,
    createId: null,
    staffName: null,
    visistCode: null,
    visistId: null,
    mapId: null
})
// 签到
let handleCheckIn = () => {
    uni.navigateTo({
        url: './addRearkSignIn'
    })
}
// 打卡
let handleClockIn = () => {
    uni.getLocation({
        type: 'wgs84',
        success: (res) => {
            const latiude = res.latitude;
            const longitude = res.longitude;
            //进行解析
            inverseGeocoding(latiude, longitude);
        },
        fail: function (err) {
            console.log("获取地址失败" + err)
        }
    })
}

function isWithinRange(lat, lon, centerLat, centerLon, rangeKm) {
    const distance = haversineDistance(centerLat, centerLon, lat, lon);
    return distance <= rangeKm;
}
function haversineDistance(lat1, lon1, lat2, lon2, radius = 6371) {
    const dLat = degToRad(lat2 - lat1);
    const dLon = degToRad(lon2 - lon1);
    const a =
        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(degToRad(lat1)) * Math.cos(degToRad(lat2)) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    return radius * c; // 距离，单位：公里
}
function degToRad(deg) {
    return deg * (Math.PI / 180);
}

//解析地址
function inverseGeocoding(latiude, longitude) {
    let points = longitude + ',' + latiude
    const apiURL = 'https://tiles.geovisearth.com/geo/v1/geocode/regeo';
    const params = {
        lat: latiude,
        lng: longitude,
        radius: 1000,
        pageSize: 1,
        currentPage: 1,
        //classify: 220100
    };
    const token = '66c87c897f0251295afdc794e4fbf73046a070338a726fe04f06cece6cb1ffdf';
    uni.request({
        url: apiURL,
        method: 'GET',
        data: params,
        header: {
            'Authorization': 'Bearer ' + token
        },
        success: (res) => {
            console.log(res, "----")
            if (res.statusCode == 200 && res.data.status == 200) {
                let resdata = res.data.data.rows[0].address
                if (resdata == null) {
                    console.log(resdata.srcLat)
                    const latiude1 = 34.1360;
                    const longitude1 = 108.9126;
                    if (isWithinRange(latiude1, longitude1, latiude, longitude, 1)) {
                        form.addressForStart = "西安办事处位置打卡"
                        uni.showModal({
                            title: '确定要在此处打卡吗',
                            content: form.addressForStart,
                            success: function (res) {
                                if (res.confirm) {
                                    var data = {
                                        mapId: form.mapId,
                                        addressForStart: form.addressForStart,
                                        cusName: form.cusName,
                                        cusId: form.cusId,
                                        remark: form.remark,
                                        path: longitude1 + "," + latiude1
                                    }
                                    addStartMapForClockIn(data).then(res => {
                                        if (res.code == 200) {
                                            uni.showToast({
                                                icon: 'success',
                                                title: res.msg,
                                                duration: 1500,
                                            });
                                            setTimeout(() => {
                                                uni.navigateBack(1)
                                            }, 500)
                                        } else {
                                            uni.showToast({
                                                icon: 'none',
                                                title: res.msg,
                                            });
                                        }
                                    })
                                } else if (res.cancel) {
                                    console.log('用户点击取消');
                                }
                            }
                        });
                    }
                } else {
                    form.addressForStart = resdata;
                    uni.showModal({
                        title: '确定要在此处打卡吗',
                        content: form.addressForStart,
                        success: function (res) {
                            if (res.confirm) {
                                var data = {
                                    mapId: form.mapId,
                                    addressForStart: form.addressForStart,
                                    cusName: form.cusName,
                                    cusId: form.cusId,
                                    path: points
                                }
                                addStartMapForClockIn(data).then(res => {
                                    if (res.code == 200) {
                                        uni.showToast({
                                            icon: 'success',
                                            title: res.msg,
                                            duration: 1500,
                                        });
                                    } else {
                                        uni.showToast({
                                            icon: 'none',
                                            title: res.msg,
                                        });
                                    }
                                })
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
                }
            } else {
                form.addressForStart = "第三方维护打卡"
                uni.showModal({
                    title: '确定要在此处打卡吗',
                    content: form.addressForStart,
                    success: function (res) {
                        if (res.confirm) {
                            var data = {
                                mapId: form.mapId,
                                addressForStart: form.addressForStart,
                                cusName: form.cusName,
                                cusId: form.cusId,
                                path: points
                            }
                            addStartMapForClockIn(data).then(res => {
                                if (res.code == 200) {
                                    uni.showToast({
                                        icon: 'success',
                                        title: '第三方维护打卡',
                                        duration: 1500,
                                    });
                                } else {
                                    uni.showToast({
                                        icon: 'none',
                                        title: res.msg,
                                    });
                                }
                            })
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            }

        },
        fail(e) {
            console.log("获取位置失败", e)
        }
    })


}

</script>

<style scoped>
.white-bg {
    width: 650rpx;
    margin: 0;
    border-radius: 8px 8px 0 0;
    padding: 50rpx;
    /* #ifdef APP-PLUS */
    height: calc(100vh - 125px);
    /* #endif */
    /* #ifndef APP-PLUS */
    height: calc(100vh - 98px);
    /* #endif */


}

.btn-image {
    width: 340rpx;
    height: 340rpx;
    margin: 30rpx auto 60rpx;
    display: block;
}

.check-desc {
    background-color: #F5F5F5;
    padding: 40rpx 50rpx;
    font-size: 28rpx;
    border-radius: 10px;
    margin-top: 100rpx;
}

.check-desc .font-orange {
    color: #F5813A;
    font-size: 32rpx;
    font-weight: bold;
}

.check-desc .font-blue {
    color: #2CBAEF;
    font-size: 32rpx;
    font-weight: bold;
}

/* 弹窗处理 */
.check-con {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

/* 遮罩层内容样式 */
.check-in {
    background-color: #fff;
    padding: 40rpx 30rpx 60rpx;
    border-radius: 10px;
    /* width: 620rpx; */
    width: 560rpx;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.check-in .check-tip {
    font-weight: bold;
}

.check-in .check-title {
    font-size: 32rpx;
    padding: 20rpx 0;
}

.check-in .check-location {
    color: #0395E0;
    font-size: 42rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30rpx 0;
}

.check-in .check-location .uniui-location-filled {
    font-weight: normal;
    margin-right: 20rpx;
}

.check-in .check-address {
    color: #919191;
    font-size: 32rpx;
    margin-bottom: 80rpx;
}

.check-in .check-footer {
    display: flex;
}

.check-in .check-footer .btn-default,
.check-in .check-footer .btn-primary {
    background-color: #fff;
    border: 1px solid #05A3F4;
    color: #05A3F4;
    border-radius: 25px;
    padding: 0rpx 80rpx;
    font-size: 34rpx;
    /* margin-left: 0;
    margin-right: 20rpx; */
}

.check-in .check-footer .btn-primary {
    background-color: #05A3F4;
    border: 1px solid #05A3F4;
    color: #fff;
    /* padding: 0rpx 60rpx; */
}
</style>
