<template>
    <div class="systemSet-con">
        <div class="export">
                <label for="upInput">
                    <div class="export-btn">{{ $t('systemSet.importSettings') }}</div>
                </label>
                <div class="export-btn" @click="downLoadData">{{ $t('systemSet.exportSettings') }}</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=""> {{ $t('systemSet.title') }}
        </div>
        <div class="flex-view border-none padding-none">
            <div class="input-main" style="width: auto;">
                <span>{{ $t('systemSet.softwareVersion') }}</span>
                <input disabled v-model="inputData['1163']"  type="text" placeholder="0">

                <span></span>
            </div>
            <div class="input-main">
                <span>{{ $t('systemSet.controllerStatus') }}</span>
                <input disabled v-model="inputData['1164']"  type="text" placeholder="0">
                <span></span>

            </div>
            <div class="input-main-60 h-44" style="width: auto;">
                <span>{{ $t('systemSet.remainingUsageTime') }}</span>
                <input disabled v-model="inputData['1165']"  type="text" placeholder="0">
                <span>{{ $t('systemSet.daysUnit') }}</span>
            </div>
        </div>
        <div class="flex-view flex">
          
            <div class="input-main-60" style="width: auto;">
                <span>{{ $t('systemSet.signalQuality') }}</span>
                <input disabled @blur="blurChange('1061', $event)" v-model="inputData['1061']" @input="change('1061', $event)"
                    type="number" placeholder="0">
            </div>
            <div class="input-main-60" style="width: auto;">
                <span>SIM</span>
                <input disabled @blur="blurChange('1062', $event)" v-model="inputData['1062']" @input="change('1062', $event)"
                    type="number" placeholder="0">
            </div>
            <div class="input-main-60" style="width: auto;">
                <span>4G</span>
                <input disabled @blur="blurChange('1063', $event)" v-model="inputData['1063']" @input="change('1063', $event)"
                    type="number" placeholder="0">
            </div>
            <br>
            <div class="input-main-60" style="width: 100%;">
                <span>IP</span>
                <input disabled @blur="blurChange('1064', $event)" v-model="inputData['1064']" @input="change('1064', $event)"
                    type="number" placeholder="0">
                <input disabled @blur="blurChange('1065', $event)" v-model="inputData['1065']" @input="change('1065', $event)"
                    type="number" placeholder="0">
                <input disabled @blur="blurChange('1066', $event)" v-model="inputData['1066']" @input="change('1066', $event)"
                    type="number" placeholder="0">
                <input disabled @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-60">
                <span>ICCID</span>
                <input disabled @blur="blurChange('1051', $event)" v-model="inputData['1051']" @input="change16to10('1051', $event)"
                    type="text" placeholder="0">
                <input disabled @blur="blurChange('1052', $event)" v-model="inputData['1052']" @input="change16to10('1052', $event)"
                    type="text" placeholder="0">
                <input disabled @blur="blurChange('1053', $event)" v-model="inputData['1053']" @input="change16to10('1053', $event)"
                    type="text" placeholder="0">
                <input disabled @blur="blurChange('1054', $event)" v-model="inputData['1054']" @input="change16to10('1054', $event)"
                    type="text" placeholder="0">
                <input disabled @blur="blurChange('1055', $event)" v-model="inputData['1055']" @input="change16to10('1055', $event)"
                    type="text" placeholder="0">
                <input disabled @blur="blurChange('1056', $event)" v-model="inputData['1056']" @input="change16to10('1056', $event)"
                    type="text" placeholder="0">
                <input disabled @blur="blurChange('1057', $event)" v-model="inputData['1057']" @input="change16to10('1057', $event)"
                    type="text" placeholder="0">
                <input disabled @blur="blurChange('1058', $event)" v-model="inputData['1058']" @input="change16to10('1058', $event)"
                    type="text" placeholder="0">
                <input disabled @blur="blurChange('1059', $event)" v-model="inputData['1059']" @input="change16to10('1059', $event)"
                    type="text" placeholder="0">
                <input disabled @blur="blurChange('1060', $event)" v-model="inputData['1060']" @input="change16to10('1060', $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">
                {{ $t('systemSet.instructions.network') }} <br>
                {{ $t('systemSet.instructions.sim') }}<br>
                {{ $t('systemSet.instructions.signal') }}
            </div>
            <div class="input-main">
                    <span>{{ $t('systemSet.memo') }}</span>
                </div>
                <textarea v-model="memoDetail.memo" @blur="blurMemo()" :placeholder="$t('systemSet.memo')"
                    class="system-tips system-textarea" maxlength="1200">
                </textarea>
        </div>
    </div>
</template>
<script>
import setParams from '../../components/setParams.vue';
export default {
    components: {
        setParams
    },
    data() {
        return {
            inputData: [],
      loading:null,
      ICCID:'',
      memoDetail: {
                memo: ''
            },
        }
    },
    watch: {
   
   '$store.state.equipmentIndex'(newVal, oldVal) {
this.dataInit();
},
},
    mounted() {
      
        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: this.$t('message.loading'),
                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.controlReadValuedownload(devicecode).then(res => {
                // 创建一个blob对象
                this.loading.close()
                console.log(res,111);
                const blob = new Blob([res.data], { type: 'text/txt' });
                console.log(blob,111);
                // 创建一个a标签
                const url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;

                // 设置文件名
                link.setAttribute('download', `${this.$t('deviceManagement.deviceTypes.controller')}-${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: this.$t('message.loading'),
                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.upLoadControlWriteValue(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() {
            this.loading = this.$loading({
    lock: true,
    text: this.$t('message.loading'),
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
            var store = this.$store.state
            var data = {
                deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
            };
            this.api.getControlGetState(data).then((res) => {
                this.loading.close()
                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);
                }
            });
              this.api.getIccid(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 this.$t('deviceManagement.deviceTypes.controller')+this.$t('systemSet.normal')
            } else if (index == 1) {
                return this.$t('deviceManagement.deviceTypes.controller')+this.$t('systemSet.pendingLock')
            } else if (index == 2) {
                return this.$t('deviceManagement.deviceTypes.controller')+this.$t('systemSet.locked')
            } 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.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>
    