<template>
    <div class="page">
        <view class="title">
            <view class="t1">3/5工作地点</view>
            <view class="t2">添加准确的就职工作地址</view>
        </view>
        <view class="content">
            <view class="form-item">
                <view class="form-item-title">工作地址</view>
                <view :class="`inner flex-between ${address ? '' : 'placeholder'}`" @tap="getLocaltion">
                    <view class="flex-align-center">
                        <image src="@/static/image/icon/position.png" />
                        {{ address || "请选择工作地址" }}
                    </view>
                    <view class="arrow"></view>
                </view>
            </view>
        </view>

        <view class="btn-wrap">
            <button class="bottom-btn" @tap="next">下一步</button>
        </view>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useReleasePostionStore } from "./store";

const address = ref("");
const { formData, setFormDataKey } = useReleasePostionStore();

const getLocaltion = () => {
    xma.chooseLocation({
        success: res => {
            console.log(res);
            if (res.errMsg == "chooseLocation:ok") {
                address.value = res.name;
            }
            setFormDataKey("locationLongitude", res.longitude || 106.647169);
            setFormDataKey("locationLatitude", res.latitude || 26.615808);
            setFormDataKey("address", res.name || "华贵保险大厦");
            /* 
            address: "长岭南路178号"
            distance: 124
            errMsg: "chooseLocation:ok"
            latitude: 26.615808
            longitude: 106.647169
            name: "华贵保险大厦"
            */
        }
    });
};

const next = () => {
    uni.navigateTo({
        url: "/pages/recommend/releasePostion/step4"
    });
};
</script>

<style lang="scss" scoped>
@import "./common.scss";
image {
    width: 12px;
    height: 13px;
}
</style>
