<template>
    <div class="exitSettings">
        <div class="table-title">
            <img src="../../assets/img/alarmSettings.png" alt="">通道报警设置
        </div>
        <div class="flex-view border-none padding-none">
            <div class="input-main-80">
                <span>温度高于目标1</span>
                <input @blur="blurChange(20620, $event)" v-model="inputData[20620]" @input="change(20620, $event)"
                    type="text" placeholder="0">
                <span>℃，高温报警输出通道</span>
            </div>
        </div>
        <div class="flex-view border-none padding-none">
            <div class="input-main-80">
                <span>温度低于目标1</span>
                <input @blur="blurChange(20621, $event)" v-model="inputData[20621]" @input="change(20621, $event)"
                    type="text" placeholder="0">
                <span>℃，低温报警输出通道</span>
            </div>
        </div>
        <div class="flex-view border-none padding-none">
            <div class="input-main-80">
                <span>温度高于目标2</span>
                <input @blur="blurChange(20622, $event)" v-model="inputData[20622]" @input="change(20622, $event)"
                    type="text" placeholder="0">
                <span>℃，高温报警输出通道</span>
            </div>
        </div>
        <div class="flex-view padding-none">
            <div class="input-main-80">
                <span>温度低于目标2</span>
                <input @blur="blurChange(20623, $event)" v-model="inputData[20623]" @input="change(20623, $event)"
                    type="text" placeholder="0">
                <span>℃，低温报警输出通道</span>
            </div>
        </div>
        <div class="flex-view border-none padding-none">
            <div class="input-main-80">
                <span>湿度高于目标1</span>
                <input @blur="blurChange(20624, $event)" v-model="inputData[20624]" @input="change(20624, $event)"
                    type="text" placeholder="0">
                <span>%RH，高湿报警输出通道</span>
            </div>
        </div>
        <div class="flex-view border-none padding-none">
            <div class="input-main-80">
                <span>湿度低于目标1</span>
                <input @blur="blurChange(20625, $event)" v-model="inputData[20625]" @input="change(20625, $event)"
                    type="text" placeholder="0">
                <span>%RH，低湿报警输出通道</span>
            </div>
        </div>
        <div class="flex-view border-none padding-none">
            <div class="input-main-80">
                <span>湿度高于目标2</span>
                <input @blur="blurChange(20626, $event)" v-model="inputData[20626]" @input="change(20626, $event)"
                    type="text" placeholder="0">
                <span>%RH，高湿报警输出通道</span>
            </div>
        </div>
        <div class="flex-view border-none padding-none">
            <div class="input-main-80">
                <span>湿度低于目标2</span>
                <input @blur="blurChange(20627, $event)" v-model="inputData[20627]" @input="change(20627, $event)"
                    type="text" placeholder="0">
                <span>%RH，低湿报警输出通道</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            inputData: [],
        }
    },
    mounted() {
        const that = this;
        setTimeout(() => {
            that.dataInit();
        }, 0);
        //input获取焦点后全选
        let inputList = document.querySelectorAll('input');
        for (let index = 0; index < inputList.length; index++) {
            inputList[index].onfocus = this.selectValue;//input放入焦点，全选文本
        }
    },
    methods: {
        //失去焦点 计算公式 x/10
        blurChange10(code, el) {
            var store = this.$store.state
            var data = {
                equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                regAddress: code,
                num: el.target.value * 10,
            }; //避免开启多个计时器
            if (this.timer) {
                this.timer && clearInterval(this.timer);
                this.changeData(data);
            }

        },
        //反向计算 计算公式 x/10
        changeCount10(code, el) {
            var data = el.target.value * 10
            var sendData = {
                target: {
                    value: data
                }
            }
            this.change(code, sendData)
        },
        // 计算展示值 计算公式 x/10
        countData10(data) {
            if (data) {
                return data / 10
            } else {
                return 0
            }
        },
        // 计算展示值 计算公式 (x - 400) / 10
        countData(data) {
            if (data) {
                return (data - 400) / 10
            } else {
                return 0
            }
        },
        //失去焦点
        blurChangeCount(code, el) {
            var store = this.$store.state
            var data = {
                equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                regAddress: code,
                num: (el.target.value * 10) + 400,
            }; //避免开启多个计时器
            if (this.timer) {
                this.timer && clearInterval(this.timer);
                this.changeData(data);
            }
        },
        changeCountData(code, el) {
            var data = (el.target.value * 10) + 400
            var sendData = {
                target: {
                    value: data
                }
            }
            this.change(code, sendData)
        },
        dataInit() {
            var store = this.$store.state
            var data = {
                deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
            };
            this.api.readalarmSetting(data).then(res => {
                if (res.data.code == 200) {
                    this.inputData = res.data.data;

                }
            })
        },
        //全选文本
        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 (this.timer) {
                this.timer && clearInterval(this.timer);
                this.changeData(data);
            }

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

            this.timer = setInterval(() => {
                ++i;
                if (i == j) {
                    that.changeData(data);
                    clearInterval(this.timer);
                }
            }, 100);
        },
        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>