<template>
    <NavBar v-if="showTab" :showIcon="true" :showTitle="false" title="" backgroundBox="#FFFFFF"></NavBar>
    <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 || pinias.formData.address || "请选择工作地址" }}
                    </view>
                    <view class="arrow"></view>
                </view>
            </view>
        </view>
        <wd-tabbar
            @tap="next"
            custom-style="display: flex;justify-content: center !important;"
            fixed
            placeholder
            safeAreaInsetBottom
        >
            <view class="foot-btn">下一步</view>
        </wd-tabbar>
    </div>
</template>

<script setup>
import { ref } from "vue";

import { useReleasePostionStore } from "./store";
/* tab */
const pinias = useReleasePostionStore();
const showTab = ref(true);
const address = ref("");
import { validateForm } from "@/utils/utils";

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

const next = () => {
    if (validateForm(pinias.formData, ["address"])) {
        uni.navigateTo({
            url: "/pages/recommend/releasePostion/step4"
        });
    }
};
</script>

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

:deep(#u-a-c .uni-system-choose-location .nav) {
    top: 20px !important;
    background-image: none;
}
:deep(#u-a-c .uni-system-choose-location .nav-btn) {
    background-color: #007aff;
    border-radius: 10px;
}
:deep(#u-a-c .uni-system-choose-location .nav-btn.back) {
    background-color: #007aff;
    border-radius: 10px;
    top: 50px;
    left: 10px;
}
:deep(#u-a-c .uni-system-choose-location .nav-btn.confirm) {
    background-color: #007aff;
    border-radius: 10px;
    top: 50px;
    right: 10px;
}
.foot-btn {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 622rpx;
    height: 80rpx;
    color: #ffffff;
    background: #1f86ff;
    border-radius: 12rpx;
}
</style>
