<template>
    <view class="box">
        <view class="config-info">
            <view class="title">服务器选择</view>
            <radio-group class="input-box" @change="radioChange">
                <label
                    v-for="item in options"
                    :key="item.value"
                    class="radio-item"
                >
                    <radio
                        :value="item.value"
                        :checked="item.checked"
                        color="#774e41"
                    />
                    <text class="radio-label">{{ item.name }}</text>
                </label>
            </radio-group>
            <view class="selectService">
                <view class="selectTitle">当前服务器</view>
                <view class="selectItem">{{ selectServer }}</view>
            </view>

            <view class="login-btn">
                <button class="btn" @click="confirm">确认</button>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            options: [
                { name: "单机服务器", value: "aloneServe", checked: true },
                { name: "集群服务器", value: "clusterServer", checked: false },
            ],
            selectServer: "单机服务器",
            selectValue: "",
        };
    },
    methods: {
        radioChange(e) {
            const value = e.detail.value;
            this.options = this.options.map((item) => ({
                ...item,
                checked: item.value === value,
            }));
            this.selectServer =
                this.options.find((item) => item.checked)?.name || "";
            this.selectValue =
                this.options.find((item) => item.checked)?.value || "";
        },
        confirm() {
            if (this.selectValue == "aloneServe") {
                uni.setStorageSync("sercviceChoice", "aloneServe");
            } else if (this.selectValue == "clusterServer") {
                uni.setStorageSync("sercviceChoice", "clusterServer");
            }
            uni.removeStorageSync("devId");
            uni.removeStorageSync("phone");
            uni.removeStorageSync("userId");
            uni.removeStorageSync("unionid");
            uni.removeStorageSync("openid");
            uni.reLaunch({
                url: "/pagesA/loginNew/loginNew",
            });
        },
    },
    onShow() {
        let selectedValue = uni.getStorageSync("sercviceChoice")
            ? uni.getStorageSync("sercviceChoice")
            : "aloneServe";
        this.options = this.options.map((item) => ({
            ...item,
            checked: item.value === selectedValue,
        }));
        this.selectServer =
            this.options.find((item) => item.checked)?.name || "";
        this.selectValue =
            this.options.find((item) => item.checked)?.value || "";
    },
};
</script>

<style lang="less">
// 颜色变量
.box {
    padding: 10rpx 18rpx;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    box-sizing: border-box;

    .config-info {
        background: #ffffff;
        border-radius: 16rpx;
        padding: 32rpx;
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

        .title {
            font-size: 36rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 40rpx;
            position: relative;
            padding-left: 20rpx;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 8rpx;
                height: 36rpx;
                background: #774e41;
                border-radius: 4rpx;
            }
        }

        .input-box {
            margin-bottom: 40rpx;

            .radio-item {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 24rpx;
                padding: 20rpx;
                background: fade(#8a6845, 5%);
                border-radius: 12rpx;
                transition: all 0.3s;

                &:active {
                    background: fade(#f9eee3, 10%);
                }

                .radio-label {
                    margin-left: 16rpx;
                    font-size: 30rpx;
                    color: #333;
                }
            }
        }
        .selectService {
            display: flex;
            justify-content: space-between;
            .selectTitle {
                font-size: 32rpx;
                color: #312e2e;
            }
            .selectItem {
                font-size: 32rpx;
                color: #765042;
            }
        }

        .login-btn {
            margin-top: 60rpx;

            .btn {
                width: 100%;
                height: 88rpx;
                line-height: 88rpx;
                background: #774e41;
                color: #ffffff;
                border-radius: 12rpx;
                font-size: 32rpx;
                border: none;

                &::after {
                    border: none;
                }

                &:active {
                    opacity: 0.9;
                }
            }
        }
    }
}
</style>
