<template>
    <view class="ant-layout page">
		<page-header></page-header>
        <view class="ant-layout-header header">
            <uni-row>
                <uni-col :span="6" style="text-align: left;">
                    <view class="ant-btn" @click="back">返回</view>
                </uni-col>
                <uni-col :span="12">
                    <view class="title">
                        网络设置
                    </view>
                </uni-col>
                <uni-col :span="6"></uni-col>
            </uni-row>
        </view>
        <view class="ant-layout-content content">
            <uni-row style="margin-top: 20%;">
                <uni-col :span="16" :offset="4">
                    <uni-row class="form" :gutter="8">
                        <uni-col :span="16">
                            <view @click="onFocus('ip')" class="ant-input">
                                <text v-if="ip != ''">{{ ip }}</text>
                                <text style="color: #ccc;" v-else>ip地址</text>
                            </view>
                        </uni-col>
                        <uni-col :span="8">
                            <view @click="onFocus('port')" class="ant-input">
                                <text v-if="port != ''">{{ port }}</text>
                                <text style="color: #ccc;" v-else>端口号</text>
                            </view>
                        </uni-col>
                    </uni-row>
                    <view class="extra">输入云端IP地址，如192.168.0.1:8000</view>
                </uni-col>
            </uni-row>
            <uni-row justify="center" type="flex" style="margin-top: 40px;">
                <uni-col>
                    <input-num ref="inputNum" @backspace="backspace" @input="input"></input-num>
                </uni-col>
            </uni-row>
            <uni-row justify="center" type="flex" style="margin-top: 40px;">
                <view class="ant-btn" @click="submit">确定</view>
            </uni-row>

        </view>
        <notice ref="notice"/>
    </view>  
</template>

<script>
import InputNum from '@/components/InputNum.vue';
import PageHeader from '@/components/PageHeader.vue'
import Notice from '@/components/Notice.vue';
import storage from '@/utils/storage'
export default {
    components: {
        InputNum,PageHeader,Notice
    },
    data() {
        return {

            ip: '',
            port: '',

            focus: 'ip'
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            let server = storage.get('server', '')
            if (server) {
                this.ip = server.ip;
                this.port = server.port;
            }
        },
		back() {
			uni.navigateBack()
		},
        onFocus(val) {
            this.focus = val;
        },
        backspace() {
            if (this.focus == 'ip') {
                this.ip = this.ip.slice(0, -1)
            }          
            if (this.focus == 'port') {
                this.port = this.port.slice(0, -1)
            }
        },
        input(val) {
            if (this.focus == 'ip') {
                this.ip += val
            }
            if (this.focus == 'port') {
                this.port += val
            }
        },
        submit() {
            if (!this.isValidIP(this.ip)) {
                // this.$message.error('请输入正确的IP地址');
                return;
            }
            let data = {
                ip: this.ip,
                port: this.port ? this.port : '80'
            }
            storage.set('config', data)
            this.$store.state.apiUrl = 'http://' + data.ip + ':' + data.port
            this.$refs.notice.open({
                title: data.ip + ':' + data.port,
                content: '设置成功'
            })

        },
        isValidIP(ip) {
          const ipRegex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
          return ipRegex.test(ip);
      },
    }
}
</script>

<style scoped>
.page{
	background: transparent;
}
.ant-btn{
    line-height: 38px;
}
.ant-btn{
    background: #2F3242;
    border-color: #2F3242;
    height: 46px;
    width: 128px;
    border-radius: 50px;
    color: #fff;
    font-size: 16px;
}
.form{
    justify-content: center;
}
.ant-input{
    font-size: 18px;
}
.extra{
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    margin-top: 20px;
}
.title{
    font-size: 24px;
    color: #747A8D;
}
</style>