<template>
    <div class="payment-settings">
        <s-header :name="$t('remote.C28')" :noback="false" />

        <!-- 设备名称标题 -->
        <div class="device-header">
            <div class="vertical-indicator"></div>
            <h3 class="device-name">{{ $t('device.equipmentName') }}：{{ deviceName }}</h3>
        </div>

        <!-- 支付方式列表 -->
        <div class="settings-card">
            <!-- Nayax/Z1 -->
            <div class="payment-item">
                <div class="payment-info">
                    <van-icon name="card" class="payment-icon" />
                    <div class="payment-detail">
                        <h3 class="payment-title">Nayax</h3>
                    </div>
                </div>
                <van-switch v-model="activeZ1" size="22px" />
            </div>

            <!-- WMDB/Z2 -->
            <div class="payment-item">
                <div class="payment-info">
                    <van-icon name="card" class="payment-icon" />
                    <div class="payment-detail">
                        <h3 class="payment-title">WMDB</h3>
                    </div>
                </div>
                <van-switch v-model="activeZ2" size="22px" />
            </div>

            <!-- Mixed/Z3 -->
            <div class="payment-item">
                <div class="payment-info">
                    <van-icon name="card" class="payment-icon" />
                    <div class="payment-detail">
                        <h3 class="payment-title">Mixed</h3>
                    </div>
                </div>
                <van-switch v-model="activeZ3" size="22px" />
            </div>
        </div>

        <!-- 提交按钮 -->
        <div class="submit-footer">
            <van-button round type="primary" class="submit-btn" @click="handleSubmit">
                <van-icon name="success" class="btn-icon" />
                {{ $t('device.modify')}}
            </van-button>
        </div>
    </div>
</template>

<script>
import sHeader from "@/components/SimpleHeader";
import { showConfirmDialog } from "vant";
import { useRoute } from 'vue-router';
import { ref } from "vue";
import { useI18n } from 'vue-i18n';
import { onMounted } from "vue";


export default {
    components: { sHeader },
    setup() {
        const { t } = useI18n();
        const route = useRoute();
        const deviceName = ref(route.query.name);
        const activeZ1 = ref(false);
        const activeZ2 = ref(false);
        const activeZ3 = ref(false);

        onMounted(() => {
            console.log(route.query.payment)
            if (route.query.payment) {
                const payment = route.query.payment.split(',')
                if (payment.includes('Z1')) activeZ1.value = true
                if (payment.includes('Z2')) activeZ2.value = true
                if (payment.includes('Z3')) activeZ3.value = true
            }
        });

        const handleSubmit = () => {
            showConfirmDialog({
                title: t('device.operationConfirmation'),
                message: t('device.pleaseConfirmAgainWhetherToOperate'),
            }).then(() => {
                // on confirm
                const activePayments = [];
                if (activeZ1.value) activePayments.push("Z1");
                if (activeZ2.value) activePayments.push("Z2");
                if (activeZ3.value) activePayments.push("Z3");
                const result = activePayments.join(',')
                console.log(result)
            }).catch(() => {
                // on cancel
            });
        }


        return {
            deviceName,
            activeZ1,
            activeZ2,
            activeZ3,
            handleSubmit
        }
    }
}
</script>

<style lang="less" scoped>
.payment-settings {
    --payment-bg: #ffffff;
    --border-color: #ebedf0;
    --active-color: #2c87c8;
    --text-primary: #323233;
    --text-secondary: #969799;

    background: #f7f8fa;
    min-height: 100vh;


    .device-header {
        display: flex;
        align-items: center;
        padding: 12px 15px;
        background: #fff;
        margin: 12px 16px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

        .vertical-indicator {
            width: 4px;
            height: 15px;
            background: var(--active-color, #2c87c8);
            border-radius: 2px;
            margin-right: 10px;
        }

        .device-name {
            margin: 0;
            font-size: 15px;
            color: #404d74;
            font-weight: 550;

            // 长名称处理
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 70vw;
        }
    }

    .settings-card {
        margin: 16px;
        padding: 8px 16px;
        background: var(--payment-bg);
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    }

    .payment-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0;
        border-bottom: 1px solid var(--border-color);

        &:last-child {
            border-bottom: none;
        }

        .payment-info {
            display: flex;
            align-items: center;
            flex: 1;
        }

        .payment-icon {
            font-size: 22px;
            color: var(--active-color);
            margin-right: 12px;
        }

        .payment-detail {
            flex: 1;

            .payment-title {
                margin: 0;
                font-size: 16px;
                color: var(--text-primary);
            }

            .payment-desc {
                margin: 4px 0 0;
                font-size: 12px;
                color: var(--text-secondary);
            }
        }
    }

    .submit-footer {
        padding: 24px 16px;

        .submit-btn {
            width: 100%;
            height: 44px;
            font-size: 16px;

            .btn-icon {
                margin-right: 8px;
                vertical-align: -2px;
            }
        }
    }
}
</style>