<template>
    <div class="formula irrigateSet systemSet">
        <set-params></set-params>
        <div class="page-content ">
            <div class="table-title">
                <img src="../../assets/image/system.png" alt=""> 系统参数设置
            </div>
            <div class="flex-view">
                <div class="input-main">
                    <span>信号质量</span>
                    <input  @blur="blurChange('65', $event)" v-model="inputData['65']" @input="change('65', $event)" type="number" placeholder="0">
                </div>
                <div class="input-main">
                    <span>SIM</span>
                    <input @blur="blurChange('66', $event)" v-model="inputData['66']" @input="change('66', $event)" type="number" placeholder="0">
                </div>
                <div class="input-main">
                    <span>4G</span>
                    <input @blur="blurChange('67', $event)" v-model="inputData['67']" @input="change('67', $event)" type="number" placeholder="0">
                </div>
                <br>
                <div class="input-main-80" style="width: 100%;">
                    <span>IP</span>
                    <input @blur="blurChange('68', $event)" v-model="inputData['68']" @input="change('68', $event)" type="number" placeholder="0">
                    <input @blur="blurChange('69', $event)" v-model="inputData['69']" @input="change('69', $event)" type="number" placeholder="0">
                    <input @blur="blurChange('70', $event)" v-model="inputData['70']" @input="change('70', $event)" type="number" placeholder="0">
                    <input @blur="blurChange('71', $event)" v-model="inputData['71']" @input="change('71', $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('55', $event)" v-model="inputData['55']" @input="change16to10('55', $event)" type="text" placeholder="0">
                    <input @blur="blurChange('56', $event)" v-model="inputData['56']" @input="change16to10('56', $event)" type="text" placeholder="0">
                    <input @blur="blurChange('57', $event)" v-model="inputData['57']" @input="change16to10('57', $event)" type="text" placeholder="0">
                    <input @blur="blurChange('58', $event)" v-model="inputData['58']" @input="change16to10('58', $event)" type="text" placeholder="0">
                    <input @blur="blurChange('59', $event)" v-model="inputData['59']" @input="change16to10('59', $event)" type="text" placeholder="0">
                    <input @blur="blurChange('60', $event)" v-model="inputData['60']" @input="change16to10('60', $event)" type="text" placeholder="0">
                    <input @blur="blurChange('61', $event)" v-model="inputData['61']" @input="change16to10('61', $event)" type="text" placeholder="0">
                    <input @blur="blurChange('62', $event)" v-model="inputData['62']" @input="change16to10('62', $event)" type="text" placeholder="0">
                    <input @blur="blurChange('63', $event)" v-model="inputData['63']" @input="change16to10('63', $event)" type="text" placeholder="0">
                    <input @blur="blurChange('64', $event)" v-model="inputData['64']" @input="change16to10('64', $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<11 信很差;11<CSQ<18,信号不稳定;CSQ>18,信号稳定,最大是31.
                </div>
            </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 = {
                equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                pattern: 0, //需要根据文档填写 //6目标ph-数值
                regNum: 72,
            };
            this.api.postState(data).then((res) => {
                console.log(res, 11);
                if (res.data.code == 200) {
                    this.inputData = res.data.data;
                    this.inputData['55']=  this.fliter2(this.inputData['55'].toString(16))
                    this.inputData['56']=  this.fliter2(this.inputData['56'].toString(16))
                    this.inputData['57']=  this.fliter2(this.inputData['57'].toString(16))
                    this.inputData['58']=  this.fliter2(this.inputData['58'].toString(16))
                    this.inputData['59']=  this.fliter2(this.inputData['59'].toString(16))
                    this.inputData['60']=  this.fliter2(this.inputData['60'].toString(16))
                    this.inputData['61']=  this.fliter2(this.inputData['61'].toString(16))
                    this.inputData['62']=  this.fliter2(this.inputData['62'].toString(16))
                    this.inputData['63']=  this.fliter2(this.inputData['63'].toString(16))
                    this.inputData['64']=  this.fliter2(this.inputData['64'].toString(16))
                  
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
            //全选文本
selectValue(e) {
	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(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) {
            this.api.postWriteFs(data).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: "success",
                    });
                    this.dataInit();
                } else {
                    this.$message.error("请求出错");
                }
                 this.timer=null
            });
        },
    },

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