<template>
    <view
        class="container"
        :class="[`${themeInfo.theme}-theme`, `${themeInfo.language}`]"
    >
        <nav-bar></nav-bar>
        <view class="content">
            <view class="info">
                <view class="i-header">
                    <view class="tabbox">
                        <view class="li">
                            {{ $t("home.reserve") }}
                        </view>
                    </view>
                </view>
                <view class="infobox">
                    <view class="personal">
                        <view class="select">
                            <view class="label"> * {{ $t("reserve.FULLNAME") }} </view>
                            <view class="inputBox">
                                <view class="value">
                                    <input
                                        type="text"
                                        v-model="state.formData.userName"
                                    />
                                </view>
                            </view>
                        </view>

                        <view class="select">
                            <view class="label"> * {{ $t("reserve.REGION") }} </view>
                            <view class="inputBox" @click="openRegionPicker">
                                <view class="value">
                                    <uv-input
                                        type="text"
                                        v-model="state.formData.region"
                                        border="none"
                                        readonly
                                    />
                                </view>
                                <uv-icon
                                    class="arrow"
                                    name="arrow-down-fill"
                                    color="#000000"
                                    size="14"
                                ></uv-icon>
                            </view>
                        </view>

                        <view class="select">
                            <view class="label"> * {{ $t("reserve.TYPE") }} </view>
                            <view class="inputBox">
                                <view class="value">
                                    <uv-radio-group
                                        v-model="state.formData.type"
                                        placement="row"
                                        size="12"
                                        iconSize="14"
                                        :activeColor="themeInfo.activeColor"
                                    >
                                        <uv-radio
                                            :customStyle="{
                                                margin: '8px 8px 8px 0',
                                            }"
                                            :name="$t('reserve.Individual & Family')"
                                            :label="$t('reserve.Individual & Family')"
                                        ></uv-radio>
                                        <uv-radio
                                            :customStyle="{
                                                margin: '8px 8px 8px 0',
                                            }"
                                            :name="$t('reserve.Business & E-commerce')"
                                            :label="$t('reserve.Business & E-commerce')"
                                        ></uv-radio>
                                        <uv-radio
                                            :customStyle="{ margin: '8px 0' }"
                                            :name="$t('reserve.Retail & Store')"
                                            :label="$t('reserve.Retail & Store')"
                                        ></uv-radio>
                                    </uv-radio-group>
                                </view>
                            </view>
                        </view>

                        <view class="select">
                            <view class="label"> * {{ $t("reserve.PHONE NUMBER") }} </view>
                            <view class="inputBox">
                                <view class="value">
                                    <input
                                        type="text"
                                        v-model="state.formData.phone"
                                    />
                                </view>
                                <!-- #ifdef MP-WEIXIN -->
                                <uv-button
                                    size="small"
                                    :text="$t('validation.bind')"
                                    open-type="getPhoneNumber"
                                    @getphonenumber="getPhoneNumber"
                                >
                                </uv-button>
                                 <!-- #endif -->
                            </view>
                        </view>
                        <view class="select">
                            <view class="label"> * {{ $t("common.Requirement")}} </view>
                            <view class="inputBox">
                                <view class="value">
                                    <uv-radio-group
                                        v-model="state.formData.tag"
                                        placement="row"
                                        size="12"
                                        iconSize="14"
                                        :activeColor="themeInfo.activeColor"
                                    >   
                                        <uv-radio
                                            :customStyle="{ margin: '8px 0' }"
                                            :name="2"
                                            :label="$t('common.ConsultationQuotation')"
                                        ></uv-radio>
                                        <uv-radio
                                            :customStyle="{
                                                margin: '8px',
                                            }"
                                            :name="1"
                                            :label="$t('common.OnSiteAssessment')"
                                        ></uv-radio>
                                    </uv-radio-group>
                                </view>
                            </view>
                        </view>

                        <view class="btn">
                            <button class="next-btn" @click="submit">
                                {{ $t("common.submit") }}
                            </button>
                        </view>

                        <!-- 选择地区 -->
                        <uv-picker
                            ref="regionPickerRef"
                            :columns="state.columns"
                            keyName="label"
                            :confirmText="$t('common.confirm')"
                            :cancelText="$t('common.cancel')"
                            @confirm="selectRegion"
                            @change="changeRegion"
                        ></uv-picker>
                    </view>
                </view>
            </view>
        </view>
        <!-- 是否验证成功 -->
        <myModal
            v-model="state.showAuthModal"
            :content="state.contentTips"
            :cancelShow="false"
        ></myModal>
        <uv-popup ref="typeSelectRef" mode="center" :safeAreaInsetTop="false" :safeAreaInsetBottom="false" :close-on-click-overlay="false">
               <view style="min-width:450rpx;padding: 40rpx;display: flex;flex-direction: column;justify-content: center;">
                <view class="typeSelectBox">
                    <button @click="typeSelect(2)">{{ $t('common.ConsultationQuotation')}}</button>
                </view>
                <view style="margin-top: 40rpx;" class="typeSelectBox">
                    <button @click="typeSelect(1)" >{{ $t('common.OnSiteAssessment')}}</button>
                </view>
               </view>
        </uv-popup>
		
    </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import navBar from "@/components/navBar.vue";
import myModal from "@/components/myModal.vue";
import { useMainStore } from "@/store/index.js";
import { useI18n } from "vue-i18n";
import { useLoginApi } from "@/Apis/login.js";
import { useLoginApi as homeApi } from "/Apis/home.js";
import { ClientSite } from "@/Apis/book.js";
import { isXiaohongshu } from '@/config/index.js';

const { themeInfo } = useMainStore();
const { t } = useI18n();

const getLoginApi = useLoginApi();
const getHomeApi = homeApi();
const getSiteApi = ClientSite();

const regionPickerRef = ref();
const typeSelectRef = ref();
const state = reactive({
    contentTips: t("reserve.contentTips"), // 验证成功提示
    formData: {
        tag: 2,
        userName: "",
        phone: "",
        type: "",
        region: "",     // 区域
    },
	showTypeSelectModal:false,
    columns: [],
});

const typeSelect = (num)=>{
    state.formData.tag = num;
    typeSelectRef.value?.close();
}

const getPhoneNumber = (e) => {
    uni.showLoading();
    if (e.code) {
        getLoginApi.GetPhoneNumberNoUpdate(e.code).then((res) => {
            if (res.code == 200) {
                uni.hideLoading();
                state.formData.phone = res.data;
            }
        });
    } else {
        uni.hideLoading();
        uni.showToast({
            title: t("validation.getPhoneFail"),
            icon: "none",
            duration: 2000,
        });
    }
};

const submit = () => {
    // todo 提交
    verifyPerson();
};

// 提交个人认证信息
const verifyPerson = () => {
    if (!state.formData.userName)
        return uni.showToast({
            title: t("common.placeInputAll"),
            icon: "none",
        });
    if (!state.formData.region)
        return uni.showToast({
            title: t("common.placeInputAll"),
            icon: "none",
        });
    if (!state.formData.phone)
        return uni.showToast({
            title: t("common.placeInputAll"),
            icon: "none",
        });

    uni.showLoading({
        mask: true,
    });
    getHomeApi
        .CreateReservation({
            userName: state.formData.userName,
            phone: state.formData.phone,
            remark: state.formData.region,
            type: state.formData.type,
            channel: isXiaohongshu ? 17 : 1,
            tag: state.formData.tag,
        })
        .then((res) => {
            uni.hideLoading();
            if (res.code == 200) {
                state.showAuthModal = true;
                state.formData = {
                    userName: "",
                    phone: "",
                    type: "",
                    region: "",
                    tag: 2,
                };
                
            }
        });
};

const openRegionPicker = () => {
    regionPickerRef.value?.open();
};

const selectRegion = (e) => {
    state.formData.region = `${e.value[0]},${e.value[1]}`;
};

const changeRegion = (e) => {
    const { columnIndex, index } = e;
    if (columnIndex === 0) {
        selectCity(state.columns[0][index], index);
    }
}

const getCityData = () => {
    getSiteApi.GetCityAll().then(res => {
        if(res.code === 200) {
            state.columns[0] = res.data;
            if (res.data?.length) {
                selectCity(res.data[0],0);
            } else {
                state.columns[1] = [];
            }
        }
    });
}

const selectCity = (city, parentIndex) => {
    if (!city) return;
    getSiteApi.GetDistrictByCity(city).then(res => {
        if (res.code === 200) {
            let district = res.data;
            district.push("其他(other)");
            state.columns[1] = district;
            if (parentIndex !== undefined) regionPickerRef.value?.setIndexs([parentIndex, 0], true);
        }
    });
}

onMounted(() => {
    getCityData();
	setTimeout(()=>{
		typeSelectRef.value?.open();
	},500)
});
</script>
<style lang="scss" scoped>
@import "@/static/style/theme.scss";
.typeSelectBox{
     button {
                font-size: 32rpx;
                padding: 12rpx 0;
                color: var(--text-color);
                background: var(--active-color);
                border-radius: 10rpx;
                box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.13);
            }
}

.container {
    margin: 0;
    padding: 0 20upx;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 80rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(
        to bottom,
        var(--right-linear),
        var(--left-linear2)
    );
    background-attachment: fixed;
    .content {
        width: 100%;
        .infobox {
            width: 100%;
            padding: 10upx 6% 60upx;
            background-color: #ffffff;
            position: relative;
            &::before {
                content: "";
                z-index: 9;
                position: absolute;
                bottom: -7px;
                left: 0;
                width: 100%;
                height: 14px;
                background: radial-gradient(
                    var(--left-linear2) 0px,
                    var(--left-linear2) 5px,
                    transparent 5px,
                    transparent
                );
                background-size: 14px 14px;
            }
        }
        .btn {
            margin-top: 60rpx;
            margin-bottom: 20rpx;
            button {
                font-size: 28rpx;
                padding: 12rpx 0;
                color: var(--text-color);
                background: var(--active-color);
                border-radius: 10rpx;
                box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.13);
            }
        }
        .select {
            border-bottom: 1px solid #bec2ce;
            margin: 30rpx 0;
            .label {
                color: #bec2ce;
                font-size: 26rpx;
                font-weight: bold;
            }
            .info {
                color: #242e42;
                font-size: 22rpx;
                display: flex;
                justify-content: space-between;
                font-weight: bold;
                padding: 0 18rpx;
                opacity: 0.7;
                &.Total {
                    margin-top: 10rpx;
                    color: #242e42;
                    opacity: 1;
                }
            }
            .garyBox {
                background-color: rgba(216, 216, 216, 0.3);
                border-radius: 8rpx;
                padding: 2rpx 10rpx;
                font-size: 20rpx;
                font-weight: bold;
                color: rgb(36, 46, 66);
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 10rpx 4rpx;
            }
            .inputBox {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10rpx;
                margin-left: 5px;

                .ImgUpload {
                    display: flex;
                    margin: 10upx 0;
                    ::v-deep .uv-upload {
                        margin-right: 40rpx;
                        border-radius: 18rpx;
                        border: 2px solid #9797974f;
                        .uv-upload__wrap__preview {
                            margin: 0;
                        }
                    }
                    .upLoadText {
                        font-size: 28upx;
                        text-align: center;
                        padding: 10upx 0;
                        background: var(--active-color);
                        border-radius: 0 0 18upx 18upx;
                        margin: -1px;
                    }
                }
                .value {
                    flex: 1;
                    display: flex;
                    flex-wrap: wrap;
                    color: #242e42;
                    font-size: 30rpx;
                    font-weight: bold;
                }
                .arrow {
                    width: auto;
                    font-size: 24rpx;
                    .codeBtn {
                        font-size: 24rpx;
                        background-color: #d1cbcb2d;
                    }
                }
                image {
                    width: 20rpx;
                    height: 12rpx;
                }
            }
        }
    }
    .i-header {
        position: relative;
        &::before {
            content: "";
            position: absolute;
            top: -7px;
            left: 0;
            width: 100%;
            height: 14px;
            background: radial-gradient(
                var(--right-linear) 0px,
                var(--right-linear) 5px,
                transparent 5px,
                transparent
            );
            background-size: 14px 14px;
            z-index: 9;
        }
        padding: 40upx 0;
        width: 100%;
        background-color: #f7f7f7;
        color: #242e42;
        .tabbox {
            position: relative;
            padding-top: 10upx;
            display: flex;
            justify-content: space-around;
            .li {
                width: 50%;
                background-color: transparent;
                font-size: 34upx;
                outline: none;
                text-align: center;
            }
            .li.active {
                font-weight: bold;
            }
            .bottom-line {
                position: absolute;
                left: calc(50% - 220rpx);
                bottom: 0;
                width: 160rpx;
                height: 2.5px;
                border-radius: 20px;
                background: var(--main-color);
                transition: left 0.5s ease;

                &.right {
                    left: calc(50% + 60rpx);
                }
            }
        }
    }
}
</style>
