<template>
    <view class="flex direction-column padding gap">
        <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><text :class="'code bg-light-'+ item.type + ' text-' + item.type">{{item.text}}</text><text
                        style="padding-left: 8upx;">{{item.url}}</text>
                </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';

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

    export default {
        data() {
            return {
                apiUrl: '',
                disabledInput: false,
                list: [],
                current: -1
            }
        },
        onLoad() {
            let res = extend.readStorage(storageKey);
            if (extend.isNull(res)) {
                this.list = setting.list;
                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.apiUrl = setting.list[i].url;
                    }
                }
                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
                });
                let baseUrl = await request.getBaseUrl();
                request.setBaseUrl(this.apiUrl);
                if (baseUrl !== this.apiUrl && token.has()) {
                    let tokenRes = await token.getByServer();
                    if (!tokenRes.success) {
                        token.clear();
                    }
                }
                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;
                        this.disabledInput = !setting.list[i].editabled;
                        break;
                    }
                }
            },
            inputChange() {
                let _this = this;
                let timer = setTimeout(() => {
                    _this.list[_this.current].url = _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 {
        // background-color: #d0ebff;
        padding: 6upx 12upx;
        border-radius: 8upx;
        line-height: 2;
        // color: #007aff;
    }
</style>