<template>
    <view class="main">
        <!-- nav -->
        <navigation>{{ i18n.Language }}</navigation>
			<!-- #ifdef APP-PLUS -->
			<view class="body-app">
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="body">
					<!-- #endif -->
			
            <radio-group class="radioGroup" @change="changeLanguage" v-model="language">
                <label class="checkBox" v-for="(item, index) in languageData" :key="index">
                    <view class="name">{{ item.title }}</view>
                    <radio class="radio" color="#00E8A2" shape="square" :value="`${index}`"
                        :checked="language === item.language">
                    </radio>
                </label>
            </radio-group>
        </view>
    </view>
</template>

<script>
import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue';
import languageData from '@/utils/language/config'
export default {
    components: { KeyValueRow },
    name: "donateRecord",
    data() {
        return {
            languageData,
            language: languageData[0].language || 'en_US',
            langTrue: languageData[0].title || 'English',
        };
    },
    computed: {
        i18n() {
            return this.$t("me");
        },
    },
    onLoad() {
    },
    onShow() {
        if (uni.getStorageSync('langTrue')) {
            this.langTrue = uni.getStorageSync('langTrue')
            this.language = this._i18n.locale

        }
    },
    methods: {
        changeLanguage(e) {
            const index = e.target.value || 0
            const current = this.languageData[index]
            // console.log(current);
            this._i18n.locale = current.language
            this.$store.commit('setLanguage', current.language)
            this.langTrue = current.title
            uni.setStorageSync('langTrue', current.title)
        }
    },
}
</script>

<style lang="scss" scoped>
.main {

    .body {
        overflow: hidden;
        margin-top: 200rpx;

        .radioGroup {
            margin-top: 60rpx;
            height: 432rpx;
            padding: 0 48rpx;

            .checkBox {
                position: relative;
                height: 112rpx;
                line-height: 112rpx;
                display: flex;
                align-items: center;
                border-bottom: 2rpx solid #323045;
                font-size: 32rpx;

                .radio {
                    position: absolute;
                    right: 0;
                }

                /deep/.uni-radio-input {
                    // width: 48rpx;
                    // height: 48rpx;
                    // border-radius: 48rpx;
                    background: transparent;
                }

                // /deep/.uni-radio-input-checked::before {
                //     font-size: 36rpx;
                // }
            }

        }

    }
.body-app{
        overflow: hidden;
        margin-top: 200rpx !important;

        .radioGroup {
            margin-top: 60rpx;
            height: 432rpx;
            padding: 0 48rpx;

            .checkBox {
                position: relative;
                height: 112rpx;
                line-height: 112rpx;
                display: flex;
                align-items: center;
                border-bottom: 2rpx solid #323045;
                font-size: 32rpx;

                .radio {
                    position: absolute;
                    right: 0;
                }

                /deep/.uni-radio-input {
                    // width: 48rpx;
                    // height: 48rpx;
                    // border-radius: 48rpx;
                    background: transparent;
                }

                // /deep/.uni-radio-input-checked::before {
                //     font-size: 36rpx;
                // }
            }

        }

    }

}
</style>
