<template>
    <view class="page-container">
        <!-- <u-navbar title="编辑地址" :autoBack="true" placeholder border></u-navbar> -->

        <view class="content-body">
            <view class="header-row">
                <text class="section-title">地址信息</text>
                <view class="default-switch" @click="isDefault = !isDefault">
                    <view class="radio-circle" :class="{ active: isDefault }">
                        <u-icon v-if="isDefault" name="checkmark" color="#fff" size="12"></u-icon>
                    </view>
                    <text class="switch-text">默认地址</text>
                </view>
            </view>

            <u--form ref="uForm" 
                labelWidth="140rpx" 
				:model="form" :rules="rules"
			>
                <view v-if="!form.address" class="location-box empty-state" @click="chooseLocation">
                    <text>选择地址</text>
                    <u-icon name="arrow-right" color="#00e0b5" size="14" style="margin-left: 6rpx;"></u-icon>
                </view>

                <view v-else class="location-box filled-state">
                    <view class="addr-info">
                        <view class="addr-name">{{ form.name }}</view>
                        <view class="addr-detail">{{ form.address }}</view>
                    </view>
                    <view class="edit-btn" @click="chooseLocation">
                        修改地址
                    </view>
                </view>

                <view class="form-section">
                    <!-- 隐藏的表单项，用于校验 -->
                    <u-form-item prop="address" style="display: none;"></u-form-item>

                    <u-form-item label="详细地址" prop="atlasAdd">
                        <view class="input-wrapper">
                            <u-input v-model="form.atlasAdd" placeholder="小区、写字楼、门牌号等" border="none"
                                fontSize="14px"></u-input>
                        </view>
                    </u-form-item>
                    
                    <u-form-item label="姓名" prop="userName">
                        <view class="input-wrapper">
                            <u-input v-model="form.userName" placeholder="输入您的姓名" border="none" fontSize="14px"></u-input>
                        </view>
                    </u-form-item>

                    <u-form-item label="手机号" prop="phone">
                        <view class="input-wrapper">
                            <u-input v-model="form.phone" placeholder="手机号" type="number" border="none"
                                fontSize="14px"></u-input>
                        </view>
                    </u-form-item>
                </view>
            </u--form>
        </view>

        <view class="footer-bar">
            <u-button text="保存地址" color="#00e0b5" shape="circle"
                customStyle=""
                @click="onSubmit"
            ></u-button>
        </view>
    </view>
</template>

<script>
import {
    getAddrById,
    netAddressAdd,
    netAddressUpdate,
} from '@/api/address';
export default {
    data() {
        return {
            query: {},
            isDefault: false, // 是否默认地址
            form: {
                phone: '',
                userName: '',
                atlasAdd: '',
            },
            rules: {
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
                    {
                        pattern: /^1([3589]\d|4[01456879]|6[0-9]|7[0-8])\d{8}$/, 
                        message: '请输入正确的手机号格式', 
                        trigger: ['blur', 'change']
					}
				],
				userName: [
					{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}
				],
				// 针对隐藏表单项的校验规则
				address: [{ required: true, message: '请选择地址信息', trigger: ['change'] }],
            }
        };
    },
    onLoad(query) {
        this.query = query;
        if (query.id) this.getData(); else this.isDefault = true;
    },
	onReady() {
		// 页面加载完成后为表单设置规则
		this.$refs.uForm.setRules(this.rules);
	},
    methods: {
        getData() {
            getAddrById({
                id: this.query.id
            }).then(res => {
                this.form = res.data.data;
                this.isDefault = this.form.type == 1;
            });
        },
        // 选择地图定位
        chooseLocation() {
            uni.chooseLocation({
                success: (res) => {
                    // form赋值
                    this.form = {
                        ...this.form,
                        name: res.name,
                        address: res.address || res.name,
                        latitude: res.latitude,
                        longitude: res.longitude,
                    }
                }
            });
        },
        onSubmit() {
            this.$refs.uForm.validate().then(res => {
                let api = netAddressAdd;
                let params = {
                    ...this.form,
                    type: this.isDefault ? 1: 0,
                    openid: uni.getStorageSync('wx_copenid'),
                };
                // console.log('保存', params);
                if (this.query.id) api = netAddressUpdate;
                api(params).then(res => {
                    uni.$u.toast(res.data.msg);
                    if (res.data.code == 200) {
                        setTimeout(() => {
                            uni.navigateBack();
                        }, 500);
                    }
                });
			}).catch(errors => {
                // console.log(errors)
                let f = errors.some(item => ['address'].indexOf(item.field) !== -1);
				if (f) uni.$u.toast(errors[0].message);
			})
        }
    }
};
</script>

<style lang="scss" scoped>
.page-container {
    min-height: 100vh;
    padding-bottom: 130rpx;
    background-color: #fff;

    .content-body {
        padding: 30rpx 40rpx;
    }

    .header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24rpx;

        .section-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
        }

        .default-switch {
            display: flex;
            align-items: center;
            cursor: pointer;

            .radio-circle {
                width: 32rpx;
                height: 32rpx;
                border: 2rpx solid #ccc;
                border-radius: 50%;
                margin-right: 10rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.2s;

                &.active {
                    background-color: #00e0b5; // 选中青色
                    border-color: #00e0b5;
                }
            }

            .switch-text {
                font-size: 26rpx;
                color: #666;
            }
        }
    }

    .location-box {
        padding: 30rpx;
        margin-bottom: 20rpx;
        border-radius: 16rpx;

        background-color: #eefdfa;
        border: 2rpx solid #ccf5ee; 

        &.empty-state {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100rpx;
            color: #00e0b5;
            font-size: 30rpx;
            font-weight: 500;
        }

        &.filled-state {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .addr-info {
                flex: 1;
                margin-right: 20rpx;

                .addr-name {
                    font-size: 30rpx;
                    font-weight: bold;
                    color: #333;
                    margin-bottom: 8rpx;
                }

                .addr-detail {
                    font-size: 24rpx;
                    color: #666;
                }
            }

            .edit-btn {
                color: #fff;
                font-size: 24rpx;
                padding: 10rpx 24rpx;
                border-radius: 30rpx;
                flex-shrink: 0;
                background-color: #00e0b5;
            }
        }
    }

    .form-section {
        .input-wrapper {
            flex: 1;
            border: 1px solid #eee; // 独立边框
            border-radius: 8rpx;
            padding: 4rpx 16rpx;
            background-color: #fff;
        }
    }
}
</style>