<template>
    <div class="irrigateSet systemSet">
        <div class="">
            <div class="export">
                <label for="upInput">
                    <div class="export-btn">{{ $t('systemSet.importSettings') }}</div>
                </label>
                <div class="export-btn" @click="downLoad">{{ $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-60 input-main-100" style="width: auto;">
                         <span>{{ $t('systemSet.softwareVersion') }}</span>
                    <input disabled v-model="inputData['76']" type="text" placeholder="0">

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

                </div>
                <div class="input-main-60" style="width: auto;">
                   <span>{{ $t('systemSet.fertilizerUsageTime') }}</span>
                    <input disabled v-model="inputData['78']" type="text" placeholder="0">
                     <span>{{ $t('systemSet.daysUnit') }}</span>
                </div>
            </div>
            <div class="flex-view">
                <div class="input-main">
                    <span>{{ $t('systemSet.signalQuality') }}</span>
                    <input disabled @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 disabled @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 disabled @blur="blurChange('67', $event)" v-model="inputData['67']"
                        @input="change('67', $event)" type="number" placeholder="0">
                </div>
                <br>
                <div class="input-main-60" style="width: 100%;">
                    <span>IP</span>
                    <input disabled @blur="blurChange('68', $event)" v-model="inputData['68']"
                        @input="change('68', $event)" type="number" placeholder="0">
                    <input disabled @blur="blurChange('69', $event)" v-model="inputData['69']"
                        @input="change('69', $event)" type="number" placeholder="0">
                    <input disabled @blur="blurChange('70', $event)" v-model="inputData['70']"
                        @input="change('70', $event)" type="number" placeholder="0">
                    <input disabled @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-60">
                    <span>ICCID</span>
                    <input disabled @blur="blurChange('55', $event)" v-model="inputData['55']"
                        @input="change16to10('55', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('56', $event)" v-model="inputData['56']"
                        @input="change16to10('56', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('57', $event)" v-model="inputData['57']"
                        @input="change16to10('57', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('58', $event)" v-model="inputData['58']"
                        @input="change16to10('58', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('59', $event)" v-model="inputData['59']"
                        @input="change16to10('59', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('60', $event)" v-model="inputData['60']"
                        @input="change16to10('60', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('61', $event)" v-model="inputData['61']"
                        @input="change16to10('61', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('62', $event)" v-model="inputData['62']"
                        @input="change16to10('62', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('63', $event)" v-model="inputData['63']"
                        @input="change16to10('63', $event)" type="text" placeholder="0">
                    <input disabled @blur="blurChange('64', $event)" v-model="inputData['64']"
                        @input="change16to10('64', $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>
           <el-dialog title="" class="vrcode-model confirm-psw" top="30vh" :close-on-click-modal="false" :append-to-body="true" :visible.sync="warnModel"
            width="700px">
            <div class="vrcode-model-title vrcode-model-title-282">{{ $t('placeholder.fileName') }}</div>
            <div class="warning-model" style="padding: 0 30px;">
                <div class="flex-view border-none">
                    <div class="input-main">
                        <div>{{ $t('placeholder.fileName') }}</div>
                        <input type="text" v-model="fileName">
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="warnModel=false">{{$t('index.cancel1')}}</el-button>
                <el-button type="success" @click="downLoadData">{{$t('index.confirm1')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import setParams from '../../components/setParams.vue';
export default {
    components: {
        setParams
    },
    data() {
        return {
            inputData: [],
            loading: null,
            ICCID: '',

            memoDetail: {
                memo: ''
            },
                 warnModel:false,
      fileName:'',
        }
    },

    mounted() {
        this.loading = this.$loading({
            lock: true,
            text: this.$t('message.loading'),
            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: {
         downLoad(){
                  var store = this.$store.state
                   var index = store.equipmentIndex;
            this.fileName=store.equipmentList[index - 1].deviceTypeName
            this.warnModel=true
        },
        //文件下载导出
        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.FsdataReadValuedownload(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.fileName}.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.upLoadFsdataWriteValue(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 = {
                equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                pattern: 0, //需要根据文档填写 //6目标ph-数值
                regNum: 72,
            };
            this.api.postState(data).then((res) => {

                this.loading.close()
                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))
                    this.inputData['76'] = 'REV:' + this.inputData['76']
                    this.inputData['77'] = this.getType(this.inputData['77'])
                } else {
                    this.$message.error(res.data.msg);
                }
            });
            var data1 = {
                deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
            };
            this.api.getFsIccid(data1).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.fertilizer')+this.$t('systemSet.normal')
            } else if (index == 1) {
                return this.$t('deviceManagement.deviceTypes.fertilizer')+this.$t('systemSet.pendingLock')
            } else if (index == 2) {
                return this.$t('deviceManagement.deviceTypes.fertilizer')+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.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>