<template>
    <view class="flex direction-column padding gap">
        <uni-easyinput placeholder="认证地址" v-model="authUrl" :disabled="disabledInput"
            @input="inputChange"></uni-easyinput>
        <uni-easyinput placeholder="接口地址" v-model="apiUrl" :disabled="disabledInput"
            @input="inputChange"></uni-easyinput>
        <radio-group @change="radioChange">
            <label class="label" v-for="(item, index) in list" :key="item.id">
                <view>
                    <radio :value="item.id" :checked="index === current"></radio>
                </view>
                <view class="flex">
                    <view :class="'code bg-light-'+ item.type + ' text-' + item.type">{{item.text}}</view>
                    <view class="url">
                        <view class="url-item">
                            <text class="url-title">接口：</text>
                            <text>{{item.url.api}}</text>
                        </view>
                        <view class="url-item">
                            <text class="url-title">认证：</text>
                            <text>{{item.url.auth}}</text>
                        </view>
                    </view>
                </view>
            </label>
        </radio-group>
        <view class="flex margin-top">
            <button type="primary" class="grow-1" @tap="save">保存</button>
        </view>
    </view>
</template>

<script>
    import extend from '../../utils/extend.js';
    import request from '../../utils/request.js';
    import token from '../../utils/token.js';
    import url from '../../utils/url.js';
    import login from '../../utils/login.js';

    let storageKey = 'server_setting';
    let setting = {
        id: -1,
        list: [{
                id: 1,
                text: '外网',
                url: {
                    api: '',
                    auth: ''
                },
                editabled: false,
                type: 'blue'
            },
            {
                id: 3,
                text: '自定义',
                url: {
                    api: '',
                    auth: ''
                },
                editabled: true,
                type: 'red'
            }
        ],
    };

    export default {
        data() {
            return {
                authUrl: '',
                apiUrl: '',
                disabledInput: false,
                list: [],
                current: -1
            }
        },
        onLoad() {
            setting.list[0].url.auth = url.auth;
            setting.list[0].url.api = url.api;
            let res = extend.readStorage(storageKey);
            if (extend.isNull(res)) {
                this.list = setting.list;
                this.authUrl = '';
                this.apiUrl = '';
                this.disabledInput = false;
            } else {
                this.list = res.list;
                setting.id = res.id;

                for (let i = 0; i < setting.list.length; i++) {
                    if (setting.list[i].text === '自定义') {
                        setting.list[i].url = res.list[i].url;
                    }
                    if (setting.list[i].id === setting.id) {
                        this.current = i;
                        this.authUrl = setting.list[i].url.auth;
                        this.apiUrl = setting.list[i].url.api;
                    }
                }
                this.list = setting.list;
                this.disabledInput = !setting.list[this.current].editabled;
            }
        },
        methods: {
            async save() {
                extend.addStorage(storageKey, {
                    id: this.list[this.current].id,
                    list: this.list
                });
                url.set({
                    auth: this.authUrl,
                    api: this.apiUrl
                });
                let res = await login.login();
                uni.showToast({
                    icon: 'success',
                    title: '已保存'
                });
            },
            radioChange(evt) {
                for (let i = 0; i < this.list.length; i++) {
                    if (this.list[i].id === parseInt(evt.detail.value)) {
                        this.current = i;
                        this.apiUrl = this.list[i].url.api;
                        this.authUrl = this.list[i].url.auth;
                        this.disabledInput = !setting.list[i].editabled;
                        break;
                    }
                }
            },
            inputChange() {
                let _this = this;
                let timer = setTimeout(() => {
                    _this.list[_this.current].url.auth = _this.authUrl;
                    _this.list[_this.current].url.api = _this.apiUrl;
                    clearTimeout(timer);
                }, 50);
            }
        }
    }
</script>

<style lang="scss">
    .radio-group {}

    .label {
        position: relative;
        display: flex;
        padding: 10upx 0;
        margin: 20upx 0;
        align-items: center;
    }

    .code {
        display: flex;
        padding: 6upx 12upx;
        border-radius: 8upx;
        line-height: 2;
        align-items: center;
    }

    .url {
        flex-grow: 1;
        padding-left: 10upx;

        .url-item {
            .url-title {
                padding: 6upx;
                margin-right: 10upx;
                border-radius: 10upx;
                color: #4f4f4f;
                background-color: #e4fffc;
            }
        }
        
        .url-item+.url-item {
            padding-top: 12upx;
        }

        text {
            font-size: 24upx;
        }
    }
</style>