<template>
    <!-- <nav-bar></nav-bar> -->
    <view
        class="container"
        :class="[`${themeInfo.theme}-theme`, `${themeInfo.language}`]"
    >
         <view class="content">
            <view class="formBox card">
                <uv-form labelPosition="left" labelWidth="190rpx" :model="state.formData" ref="formRef">

                    <!-- 姓名 -->
                    <uv-form-item :label="$t('reserve.FULLNAME')" borderBottom>
                        <uv-input
                            v-model="state.formData.userName"
                            border="none"
                            placeholder="请填写"
                        />
                    </uv-form-item>

                    <!-- 区域 -->
                    <uv-form-item :label="$t('reserve.REGION')" borderBottom @click="openRegionPicker">
                        <uv-input
                            v-model="state.formData.region"
                            border="none"
                            readonly
                            placeholder="请选择"
                        />
                        <template #right>
                            <uv-icon name="arrow-right" size="16"></uv-icon>
                        </template>
                    </uv-form-item>

                    <!-- 类型 -->
                    <uv-form-item :label="$t('reserve.TYPE')" borderBottom>
                        <uv-radio-group
                            v-model="state.formData.type"
                            placement="row"
                            activeColor="#fb322e" size="40rpx" inactiveColor="#D8D8D8"
                        >
                            <uv-radio :customStyle="{
                                                margin: '4px',
                                            }" :name="$t('reserve.Individual & Family')" :label="$t('reserve.Individual & Family')" />
                            <uv-radio :customStyle="{
                                                margin: '4px',
                                            }" :name="$t('reserve.Business & E-commerce')" :label="$t('reserve.Business & E-commerce')" />
                            <uv-radio :customStyle="{
                                                margin: '4px',
                                            }" :name="$t('reserve.Retail & Store')" :label="$t('reserve.Retail & Store')" />
                        </uv-radio-group>
                    </uv-form-item>

                    <!-- 手机号 -->
                    <uv-form-item :label="$t('reserve.PHONE NUMBER')" borderBottom>
                        <view style="display:flex;align-items:center;width:100%">
                            <uv-input
                                v-model="state.formData.phone"
                                border="none"
                                placeholder="请填写"
                                style="flex:1"
                            />
                        </view>
                    </uv-form-item>

                    <!-- 需求 -->
                    <uv-form-item :label="$t('common.Requirement')">
                        <uv-radio-group
                            v-model="state.formData.tag"
                            placement="row"
                            activeColor="#fb322e" size="40rpx" inactiveColor="#D8D8D8"
                        >
                            <uv-radio :customStyle="{
                                                margin: '4px',
                                            }" :name="2" :label="$t('common.ConsultationQuotation')" />
                            <uv-radio :customStyle="{
                                                margin: '4px',
                                            }" :name="1" :label="$t('common.OnSiteAssessment')" />
                        </uv-radio-group>
                    </uv-form-item>

                </uv-form>
            </view>

            <!-- 按钮 -->
            <view class="btn">
                <uv-button
                    shape="circle"
                    color="#FB322E"
                    @click="submit"
                >
                    {{ $t("common.submit") }}
                </uv-button>
            </view>
        </view>

        <!-- 地区选择 -->
        <uv-picker
            ref="regionPickerRef"
            :columns="state.columns"
            keyName="label"
            @confirm="selectRegion"
            @change="changeRegion"
        />

        <myModal
            v-model="state.showAuthModal"
            :content="state.contentTips"
            :cancelShow="false"
        />
        <uv-popup ref="typeSelectRef" mode="center" round="24px" :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">
                    <uv-button shape="circle"
                    color="#FB322E" @click="typeSelect(2)">{{ $t('common.ConsultationQuotation')}}</uv-button>
                </view>
                <view style="margin-top: 40rpx;" class="typeSelectBox">
                    <uv-button shape="circle"
                    color="#FB322E" @click="typeSelect(1)" >{{ $t('common.OnSiteAssessment')}}</uv-button>
                </view>
               </view>
        </uv-popup>
		<view class="footer">
        <view @click="toHome">
            返回主页
        </view>
        <view @click="goOrder">
            返回订单
        </view>
        </view>
    </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,storeState } = 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: 18,
            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);
        }
    });
}
const toHome = (item) => {
  uni.switchTab({
    url: `/pages/index/index`,
  });
}

const goOrder = () => {
  navigateTo('/pages/unlock/index');
}


onMounted(() => {
    state.formData.phone = storeState.userInfo.phone;
    state.formData.userName = storeState.userInfo.customerName;
    getCityData();
	// setTimeout(()=>{
	// 	typeSelectRef.value?.open();
	// },500)
});
</script>
<style lang="scss" scoped>
@import "@/static/style/theme.scss";
.back{
    margin-bottom: 0;
}
.footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  view{
    width: 50%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #000;
    font-size: 30rpx;
    font-weight: bold;
  }
}
.container{
    min-height:100vh;
    background:#f5f6f8;
}

.formBox{
    background:#fff;
    border-radius:16rpx;
    padding:10rpx 20rpx;

    :deep(.uv-form-item__body){
        padding:20rpx 0;
    }

    :deep(.uni-input-wrapper){
        text-align:right;
        font-weight:600;
        font-size:28rpx;
        .uv-radio-group--row{
            justify-content: end;
        }
    }

    :deep(.uv-form-item__body__right__content__slot){
        text-align:right;
    }

    :deep(.uv-form-item__body__left__content__label){
        font-size:26rpx;
        font-weight:600;
    }

    :deep(.uv-line){
        border-color:#f0f0f0 !important;
    }
}

.btn{
    margin-top:40rpx;
    padding:0 20rpx;
}
</style>
