<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'}`">
                    <wd-col-picker
                        v-model="cityValue"
                        :columns="cityOpstion"
                        style="width: 100%"
                        value-key="code"
                        label-key="name"
                        :column-change="columnChangeCity"
                        @confirm="handleConfirmCity"
                        use-default-slot
                    >
                        <p :class="{ placeholder: !cityText }" class="text-single" style="width: 100%">
                            {{ cityText || "请选择岗位工作地点" }}
                        </p>
                    </wd-col-picker>
                    <view class="arrow"></view>
                </view>
            </view>
        </view>

        <wd-tabbar
            @tap="next"
            custom-style="display: flex;justify-content: center !important;z-index:9;"
            fixed
            placeholder
            safeAreaInsetBottom
        >
            <view class="foot-btn">下一步</view>
        </wd-tabbar>
    </div>
</template>

<script setup>
import { ref } from "vue";
import AddressSelect from "@/components/form/address-select.vue";
import { getTreeListApi, getAreaListApi } from "@/api/common";
import { useReleasePostionStore } from "./store";
import town from "@/assets/town.json";
/* tab */
const pinias = useReleasePostionStore();
const showTab = ref(true);
import { validateForm } from "@/utils/utils";
// 地区接口地址
const keys = ["city", "district", "street"];
/* 获取省市区 */
const cityOpstion = ref([]);
const cityValue = ref([]);

const cityText = ref("");
let citySelectedItems = [];

getAreaListApi({ type: "province", code: "" }).then(res => {
    cityOpstion.value.push(res.data);
});
const columnChangeCity = ({ selectedItem, resolve, index, finish }) => {
    const type = keys[index];
    if (type) {
        getAreaListApi({ type, code: selectedItem.code }).then(res => {
            resolve(res.data);
        });
    } else {
        finish();
    }
};
/* getTreeListApi({ provinceName: "贵州省" }).then(res => {
    cityOpstion.value.push(res.data[0].children);
});
const columnChangeCity = ({ selectedItem, resolve, finish }) => {
    console.log(selectedItem);
    if (selectedItem.children) {
        resolve(selectedItem.children);
    } else {
        // 加载街道
        if (!town[selectedItem.code]) {
            console.log("code:", selectedItem.code, "名字:", selectedItem.name);
        }
        if (selectedItem.children === null && town[selectedItem.code]) {
            if (!town[selectedItem.code]) {
                console.log("code:", selectedItem.code, "名字:", selectedItem.name);
            }
            resolve(town[selectedItem.code].map((v, i) => ({ ...v, code: i })));
        } else {
            finish();
        }
    }
}; */
const handleConfirmCity = ({ selectedItems }) => {
    cityText.value = selectedItems.map(v => v.name || "").join("-");
    citySelectedItems = selectedItems;
    const [province, city, district, street] = selectedItems;
    pinias.formData.address = selectedItems.map(v => v.name || "").join("");
    // pinias.formData.provinceCode = 520000;
    pinias.formData.provinceCode = province.code;
    pinias.formData.cityCode = city.code;
    pinias.formData.cityName = district.name;
    pinias.formData.districtCode = district.code;
    pinias.formData.street = street ? street.name : "";
};
// 数据回显
const reviewData = () => {
    if (pinias.formData.id) cityText.value = pinias.formData.address;
};
onLoad(() => {
    reviewData();
});
const next = () => {
    if (validateForm(pinias.formData, ["address"])) {
        uni.redirectTo({
            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;
    }
    .uni-system-choose-location .nav-btn {
        background-color: #007aff;
        border-radius: 10px;
    }
    .uni-system-choose-location .nav-btn.back {
        top: 50px;
        left: 10px;
        background-color: #007aff;
        border-radius: 10px;
    }
    .uni-system-choose-location .nav-btn.confirm {
        top: 50px;
        right: 10px;
        background-color: #007aff;
        border-radius: 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>
