<template>
    <ul class="ipAdress">
        <template v-for="(item,index) in ipAdress">
            <li class="saga-border bg-write" :key="index">
                <input type="text" @input="checkIpVal(item,index)" @keyup="turnIpPOS(item,index,$event)" v-model="item.value" ref="ipInput" @blur="setDefaultVal(item)">
            </li>
            <span v-if="!!value && index == 3" :key="index">：</span>
            <li v-if="!!value && index == 3" class="saga-border bg-write" :key="index">
                <input type="text" @input="checkIpVal(value[0],4)" @keyup="turnIpPOS(value[0],4,$event)" v-model="value[0].value" ref="ipInput" @blur="setDefaultVal(value)">
            </li>
        </template>
    </ul>
</template>
<script>
    export default {
        name: "ipInput",
        props: {
            ip: {
                type: [Object, String],
                default: ""
            },
            port: {
                type: [Number, String],
                default: ""
            }
        },
        data() {
            return {
                ipAdress: [{
                    value: ''
                }, {
                    value: ''
                }, {
                    value: ''
                }, {
                    value: ''
                }],
                value: [{
                    value: ''
                }]
            }
        },
        created() {},
        mounted() {},
        methods: {
            //methods
            changeData() {
                if (this.ip == '') {
                    this.ipAdress = [{
                        value: ''
                    }, {
                        value: ''
                    }, {
                        value: ''
                    }, {
                        value: ''
                    }]
                } else {
                    this.ipAdress = this.ip.split(".").map(item => {
                        return {
                            value: item
                        }
                    })
                }
                if (this.port == "") {
                    this.$set(this.value[0], `value`, '')
                } else {
                    this.$set(this.value[0], `value`, this.port)
                }
                console.log(this.value)
            },
            checkIpVal(item, index) {
                let self = this;
                //确保每个值都处于0-255
                let val = item.value
                console.log(val,item)
                //当输入的是空格时，值赋为空
                val = val.trim();
                val = parseInt(val, 10);
                if (isNaN(val)) {
                    val = ''
                } else {
                    if (index == 4) {
                        val = val < 0 ? 0 : val;
                        val = val > 65535 ? 65535 : val;
                    } else {
                        val = val < 0 ? 0 : val;
                        val = val > 255 ? 255 : val;
                    }
                }
                if (index != 4) {
                    item.value = val;
                } else {
                    this.value[0].value = val
                }
                this.changeEmit()
            },
            turnIpPOS(item, index, event) {
                let self = this;
                let e = event || window.event;
                //左箭头向左跳转，左一不做任何措施
                if (e.keyCode == 37) {
                    if (index == 0) {} else {
                        self.$refs.ipInput[index - 1].focus();
                    }
                }
                //删除键把当前数据删除完毕后会跳转到前一个input，左一不做任何处理
                if (e.keyCode == 8) {
                    let val = item.value;
                    if (!!val && val != 0) {
                        return false
                    }
                    if (index == 0) {} else {
                        self.$refs.ipInput[index - 1].focus();
                    }
                }
                //右箭头、回车键、空格键、冒号均向右跳转，右一不做任何措施
                if (e.keyCode == 39 || e.keyCode == 13 || e.keyCode == 32 || e.keyCode == 190) {
                    if (index == 4) {} else {
                        self.$refs.ipInput[index + 1].focus();
                    }
                }
                this.changeEmit()
            },
            setDefaultVal(item) {
                //当input失去焦点，而ip没有赋值时，会自动赋值为0
                let self = this;
                let val = item.value;
                if (val == '') {
                    item.value = '0';
                }
                this.changeEmit()
            },
            changeEmit() {
                let returnData = this.ipAdress.map(item => {
                    return item.value
                }).join(".")
                this.$emit("change", returnData, this.value[0].value)
            }
        },
        watch: {
            ip: function() {
                this.changeData()
            }
        }
    }
</script>
<style lang="scss" scoped>
    .ipAdress {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        margin-right: 10px;
        width: 280px;
        justify-content: space-around;
    }
    .ipAdress li {
        position: relative; //   height: 23px;
        margin: 2px;
    }
    ul[class="ipAdress"] input[type="text"] {
        border: none;
        width: 100%; //   height: 23px;
        text-align: center;
        background: transparent;
    }
    .bg-write{
        background-color: #fff;
    }
    .ipAdress li div {
        position: absolute;
        bottom: 2px;
        right: 0;
        border-radius: 50%;
        background: #0190fe;
        width: 2px;
        height: 2px;
    }
    /*只需要3个div*/
    .ipAdress li:last-child div {
        display: none;
    }
    /*取消掉默认的input focus状态*/
    .ipAdress input:focus {
        outline: none;
    }
</style>
