<template>
    <div class="systemSet-con">
        <div class="table-title">
            <img src="../../assets/image/system.png" alt=""> 系统参数设置
        </div>
        <div class="flex-view border-none padding-none">
            <div class="input-main-80" style="width: auto;">
                <span>软件版本号</span>
                <input v-model="inputData['1163']" disabled type="text" placeholder="0">

                <span></span>
            </div>
            <div class="input-main">
                <span>控制器状况</span>
                <input v-model="inputData['1164']" disabled type="text" placeholder="0">
                <span></span>

            </div>
            <div class="input-main-80" style="width: auto;">
                <span>控制器剩余使用时间</span>
                <input v-model="inputData['1165']" disabled type="text" placeholder="0">
                <span>天</span>
            </div>
        </div>
        <div class="flex-view">
          
            <div class="input-main">
                <span>信号质量</span>
                <input @blur="blurChange('1061', $event)" v-model="inputData['1061']" @input="change('1061', $event)"
                    type="number" placeholder="0">
            </div>
            <div class="input-main">
                <span>SIM</span>
                <input @blur="blurChange('1062', $event)" v-model="inputData['1062']" @input="change('1062', $event)"
                    type="number" placeholder="0">
            </div>
            <div class="input-main">
                <span>4G</span>
                <input @blur="blurChange('1063', $event)" v-model="inputData['1063']" @input="change('1063', $event)"
                    type="number" placeholder="0">
            </div>
            <br>
            <div class="input-main-80" style="width: 100%;">
                <span>IP</span>
                <input @blur="blurChange('1064', $event)" v-model="inputData['1064']" @input="change('1064', $event)"
                    type="number" placeholder="0">
                <input @blur="blurChange('1065', $event)" v-model="inputData['1065']" @input="change('1065', $event)"
                    type="number" placeholder="0">
                <input @blur="blurChange('1066', $event)" v-model="inputData['1066']" @input="change('1066', $event)"
                    type="number" placeholder="0">
                <input @blur="blurChange('1067', $event)" v-model="inputData['1067']" @input="change('1067', $event)"
                    type="number" placeholder="0">
            </div>

        </div>
        <div class="flex-view" style="border: none;">

            <div class="input-main-80">
                <span>ICCID</span>
                <input @blur="blurChange('1051', $event)" v-model="inputData['1051']" @input="change16to10('1051', $event)"
                    type="text" placeholder="0">
                <input @blur="blurChange('1052', $event)" v-model="inputData['1052']" @input="change16to10('1052', $event)"
                    type="text" placeholder="0">
                <input @blur="blurChange('1053', $event)" v-model="inputData['1053']" @input="change16to10('1053', $event)"
                    type="text" placeholder="0">
                <input @blur="blurChange('1054', $event)" v-model="inputData['1054']" @input="change16to10('1054', $event)"
                    type="text" placeholder="0">
                <input @blur="blurChange('1055', $event)" v-model="inputData['1055']" @input="change16to10('1055', $event)"
                    type="text" placeholder="0">
                <input @blur="blurChange('1056', $event)" v-model="inputData['1056']" @input="change16to10('1056', $event)"
                    type="text" placeholder="0">
                <input @blur="blurChange('1057', $event)" v-model="inputData['1057']" @input="change16to10('1057', $event)"
                    type="text" placeholder="0">
                <input @blur="blurChange('1058', $event)" v-model="inputData['1058']" @input="change16to10('1058', $event)"
                    type="text" placeholder="0">
                <input @blur="blurChange('1059', $event)" v-model="inputData['1059']" @input="change16to10('1059', $event)"
                    type="text" placeholder="0">
                <input @blur="blurChange('1060', $event)" v-model="inputData['1060']" @input="change16to10('1060', $event)"
                    type="text" placeholder="0">
            </div>
            <div class="system-tips">
                说明:4G:=0,无网络;=2,2G网络;=4,4G网络 <br>
                SIM:=0,SIM卡正常;=1,无SIM卡;=2,SIM卡异常(网络注册失败)<br>
                信号质量:CSQ&lt;11 信号很差;11&lt;CSQ&lt;18,信号不稳定;CSQ&gt;18,信号稳定,最大是31.
            </div>
        </div>
    </div>
</template>
<script>
import setParams from '../../components/setParams.vue';
export default {
    components: {
        setParams
    },
    data() {
        return {
            inputData: []
        }
    },
    mounted() {
        this.dataInit()
        //input获取焦点后全选
        let inputList = document.querySelectorAll('input');
        for (let index = 0; index < inputList.length; index++) {
            inputList[index].onfocus = this.selectValue;//input放入焦点，全选文本
        }
    },
    methods: {
        change16to10(code, el) {
            var num = parseInt(el.target.value, 16)
            var dataNum = {
                target: {
                    value: num
                }
            }
            this.change(code, dataNum)
        },
        fliter2(string) {
            var data = ''
            if (string.length < 2) {
                data = '0' + string
            } else {
                data = string
            }
            return data
        },
        dataInit() {
            var store = this.$store.state
            var data = {
                deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
            };
            this.api.getControlGetState(data).then((res) => {
                if (res.data.code == 200) {
                    this.inputData = res.data.data;
                    this.inputData['1051'] = this.fliter2(this.inputData['1051'].toString(16))
                    this.inputData['1052'] = this.fliter2(this.inputData['1052'].toString(16))
                    this.inputData['1053'] = this.fliter2(this.inputData['1053'].toString(16))
                    this.inputData['1054'] = this.fliter2(this.inputData['1054'].toString(16))
                    this.inputData['1055'] = this.fliter2(this.inputData['1055'].toString(16))
                    this.inputData['1056'] = this.fliter2(this.inputData['1056'].toString(16))
                    this.inputData['1057'] = this.fliter2(this.inputData['1057'].toString(16))
                    this.inputData['1058'] = this.fliter2(this.inputData['1058'].toString(16))
                    this.inputData['1059'] = this.fliter2(this.inputData['1059'].toString(16))
                    this.inputData['1060'] = this.fliter2(this.inputData['1060'].toString(16))
                    this.inputData['1163'] = 'REV:' + this.inputData['1163']
                    this.inputData['1164'] = this.getType(this.inputData['1164'])
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
        getType(index) {
            if (index == 0) {
                return '施肥机正常'
            } else if (index == 1) {
                return '施肥机待锁机'
            } else if (index == 2) {
                return '施肥机已锁机'
            } else {
                return ' '
            }
        },
        //全选文本
        selectValue(e) {
            var store = this.$store.state
            store.nowInput = e.target.value
            e.currentTarget.select();
        },
        //失去焦点
        blurChange(code, el) {
            var store = this.$store.state;
            var data = {
                equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                regAddress: code,
                num: el.target.value,
            }; //避免开启多个计时器
            if (store.nowInput != el.target.value) {
                this.changeData(data);
            }
            // if (this.timer) {
            //     this.timer && clearInterval(this.timer);
            //     this.changeData(data);
            // }

        },
        change(code, el) {
            var store = this.$store.state
            var data = {
                equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                regAddress: code,
                num: el.target.value,
            };
            this.delayTimer(0, data);
        },
        //限制 写入停止后j*100毫秒调取函数
        delayTimer(i, data) {
            // const that = this;
            // //整体接口
            // let j = this.$store.state.lateSend;
            // //避免开启多个计时器
            // this.timer && clearInterval(this.timer);

            // this.timer = setInterval(() => {
            //     ++i;
            //     if (i == j) {
            //         that.changeData(data);
            //         clearInterval(this.timer);
            //     }
            // }, 100);
        },
        changeData(data) {
            var store = this.$store.state;
            this.api.postControlWrite(data).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: "success",
                    });
                    store.nowInput = "";
                    // this.dataInit();
                } else {
                    this.inputData[data.regAddress] = store.nowInput;
                    this.$message.error(res.data.msg);
                }
                this.timer = null;
            });
        },
    },

}
</script>
<style lang="scss"></style>
    