<template>
    <div class="irrigateSet systemSet">
        <div class="export">
                <label for="upInput">
                    <div class="export-btn">导入设定值</div>
                </label>
                <div class="export-btn" @click="downLoadData">导出设定值</div>
                <input ref="fileInput" style="display: none" multiple id="upInput" type="file" accept=".txt" @change="changeTxt" />
            </div>
            <div class="table-title">
                <img src="../../assets/image/system.png" alt=""> 系统参数设置
            </div>
            <div class="flex-view border-none padding-none">
            <div class="input-main-60" style="width: auto;">
                <span>软件版本号</span>
                <input disabled  v-model="inputData['3039']"  type="text" placeholder="0">

                <span></span>
            </div>
            <div class="input-main">
                <span>智能灌溉控制器</span>
                <input disabled v-model="inputData['3040']"  type="text" placeholder="0">
                <span></span>

            </div>
            <div class="input-main-60" style="width: auto;">
                <span>智能灌溉控制器</span>
                <input disabled v-model="inputData['3041']"  type="text" placeholder="0">
                <span>天</span>
            </div>
        </div>
            <div class="flex-view">
                <div class="input-main">
                    <span>信号质量</span>
                    <input disabled  @blur="blurChange('3032', $event)" v-model="inputData['3032']" @input="change('3032', $event)" type="number" placeholder="0">
                </div>
                <div class="input-main">
                    <span>SIM</span>
                    <input disabled @blur="blurChange('3033', $event)" v-model="inputData['3033']" @input="change('3033', $event)" type="number" placeholder="0">
                </div>
                <div class="input-main">
                    <span>4G</span>
                    <input disabled @blur="blurChange('3034', $event)" v-model="inputData['3034']" @input="change('3034', $event)" type="number" placeholder="0">
                </div>
                <br>
                <div class="input-main-60" style="width: 100%;">
                    <span>IP</span>
                    <input disabled @blur="blurChange('3035', $event)" v-model="inputData['3035']" @input="change('3035', $event)" type="number" placeholder="0">
                    <input disabled @blur="blurChange('3036', $event)" v-model="inputData['3036']" @input="change('3036', $event)" type="number" placeholder="0">
                    <input disabled @blur="blurChange('3037', $event)" v-model="inputData['3037']" @input="change('3037', $event)" type="number" placeholder="0">
                    <input disabled @blur="blurChange('3038', $event)" v-model="inputData['3038']" @input="change('3038', $event)" type="number" placeholder="0">
                </div>
            </div>
            <div class="flex-view" style="border: none;">

                <div class="input-main-60">
                    <span>ICCID</span>
                    <input disabled @blur="blurChange('3022', $event)" v-model="inputData['3022']" @input="change16to10('3022', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('3023', $event)" v-model="inputData['3023']" @input="change16to10('3023', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('3024', $event)" v-model="inputData['3024']" @input="change16to10('3024', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('3025', $event)" v-model="inputData['3025']" @input="change16to10('3025', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('3026', $event)" v-model="inputData['3026']" @input="change16to10('3026', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('3027', $event)" v-model="inputData['3027']" @input="change16to10('3027', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('3028', $event)" v-model="inputData['3028']" @input="change16to10('3028', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('3029', $event)" v-model="inputData['3029']" @input="change16to10('3029', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('3030', $event)" v-model="inputData['3030']" @input="change16to10('3030', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('3031', $event)" v-model="inputData['3031']" @input="change16to10('3031', $event)" type="text" placeholder="0">
                </div>
                  <div class="input-main-one">
                    <span>ICCID</span>
                    <input disabled  v-model="ICCID"  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 class="input-main">
                    <span>备忘录</span>
                </div>
                <textarea v-model="memoDetail.memo" @blur="blurMemo()" placeholder="备忘录"
                    class="system-tips system-textarea" maxlength="1200">
                </textarea>
            </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            inputData: [],
          loading:null,
          ICCID:'',
          
          memoDetail: {
                memo: ''
            },
        }
    },
    
    mounted() { 
        this.loading = this.$loading({
    lock: true,
    text: '加载中',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
        this.dataInit()
            //input获取焦点后全选
    let inputList = document.querySelectorAll('input');
   for (let index = 0; index < inputList.length; index++) {
     inputList[index].onfocus = this.selectValue;//input放入焦点，全选文本
   }
         },
    methods: {
             //文件下载导出
             downLoadData() {
            this.loading = this.$loading({
                lock: true,
                text: '加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            var store = this.$store.state
            var index = store.equipmentIndex;
            var devicecode=store.equipmentList[index - 1].deviceId
            this.api.FIreadvaluedownload(devicecode).then(res => {
                // 创建一个blob对象
                this.loading.close()
                const blob = new Blob([res.data], { type: 'text/txt' });
                // 创建一个a标签
                const url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;

                // 设置文件名
                link.setAttribute('download', `智能灌溉-${devicecode}.txt`);

                // 模拟点击下载
                document.body.appendChild(link);
                link.click();

                // 清理资源
                document.body.removeChild(link);
                window.URL.revokeObjectURL(url);
            })
        },
        // 文件上传
        changeTxt(e) {
            this.loading = this.$loading({
                lock: true,
                text: '加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            var store = this.$store.state
            var deviceId=store.equipmentList[store.equipmentIndex - 1].deviceId
        
      const files = e.target.files

      const that = this
      for (let i = 0; i < files.length; i++) {
        const formData = new FormData()
        console.log(files[i])
        formData.append('file', files[i])
        const fileContent = URL.createObjectURL(files[i])
        formData.append('devicecode', deviceId)
       this.api.upLoadFIwritevalue(formData).then((res) => {
        this.loading.close()
          if (res.data.code == 200) {
            this.$message.success(res.data.msg);
          }else{
            this.$message.error(res.data.msg);
          }
        })
      }
      setTimeout(() => {
        this.$refs.fileInput.value = ''
      }, 100)
    },
        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.getFI_getState(data).then((res) => {
                this.loading.close()
                if (res.data.code == 200) {
                    this.inputData = res.data.data;
                    this.inputData['3022']=  this.fliter2(this.inputData['3022'].toString(16))
                    this.inputData['3023']=  this.fliter2(this.inputData['3023'].toString(16))
                    this.inputData['3024']=  this.fliter2(this.inputData['3024'].toString(16))
                    this.inputData['3025']=  this.fliter2(this.inputData['3025'].toString(16))
                    this.inputData['3026']=  this.fliter2(this.inputData['3026'].toString(16))
                    this.inputData['3027']=  this.fliter2(this.inputData['3027'].toString(16))
                    this.inputData['3028']=  this.fliter2(this.inputData['3028'].toString(16))
                    this.inputData['3029']=  this.fliter2(this.inputData['3029'].toString(16))
                    this.inputData['3030']=  this.fliter2(this.inputData['3030'].toString(16))
                    this.inputData['3031']=  this.fliter2(this.inputData['3031'].toString(16))
                    this.inputData['3039'] = 'REV:' + this.inputData['3039']
                    this.inputData['3040'] = this.getType(this.inputData['3040'])
                } else {
                    this.$message.error(res.data.msg);
                }
            });
             
            
            this.api.readControl_getFIIccid(data).then(res=>{
                if(res.data.code==200){
                    this.ICCID=res.data.msg
                }else{
                    this.$message.error(res.data.msg); 
                }
            })

            this.getMemo()
        },
        getMemo() {
            var store = this.$store.state
            var data1 = {
                deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
            };
            this.api.readControl_getMemo(data1).then(res => {
                if (res.data.code == 200) {
                    if (res.data.data) {
                        this.memoDetail = res.data.data
                    } else {
                        this.memoDetail = {
                            deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                            id: "",
                            memo: "",
                        }
                    }
                } 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 ' '
            }
        },
            //备忘录失去焦点
            blurMemo() {
            var data = this.memoDetail
            this.api.readControl_setMemo(data).then(res => {
                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: "success",
                    });
                    if(!data.id){
                        this.getMemo()
                    }
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
    //全选文本
    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.postWriteFs(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>
    