<template>
    <div class="all">
        <div class="table-title">
            <img src="../../assets/img/alarmSettings.png" alt="">报警设置
        </div>
        <div class="flex-view shrink-none border-none">
            <div class="input-sel input-sel-w180">
                <span>报警温度1的实时温度选择</span>
                <el-dropdown @command="handleCommand1($event, 20080)">
                    <div class="el-dropdown-link">
                        <input v-model="inputDataNew[20080]" type="text" class="input-input" placeholder="无">
                        <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
                    </div>
                    <el-dropdown-menu class="input-menu-180" slot="dropdown">
                        <el-dropdown-item v-for="item, index in typeList1" :key="index" :command="item.value">{{
                            item.label }}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div class="flex-view border-none">
            <div class="flex-sel padding-none"  @click="changeOpenTrue(0, 20081)">
                <div v-if="inputDataNew[20081][0] == 0" class="no-sel margin-none"></div>
                <div v-else class="sel margin-none"></div>
            </div>
            <div class="input-main input-main-w80">
                <span>选项一:温度高于目标值</span>
                <input @blur="blurChange10('20082', $event)" v-model="inputData['20082']"
                    @input="changeCount10('20082', $event)" type="text" value="60" placeholder="60" />
                <span>℃，高温报警。</span>
            </div>
        </div>
        <div class="flex-view border-none">
            <div class="flex-sel padding-none"  @click="changeOpenTrue(1, 20081)">
                <div v-if="inputDataNew[20081][1] == 0" class="no-sel margin-none"></div>
                <div v-else class="sel margin-none"></div>
            </div>
            <div class="input-main input-main-w80">
                <span>选项二:温度低于目标值</span>
                <input @blur="blurChange10('20083', $event)" v-model="inputData['20083']"
                    @input="changeCount10('20083', $event)" type="text" value="60" placeholder="60" />
                <span>℃，低温报警。</span>
            </div>
        </div>
        <div class="flex-view border-none">
            <div class="flex-sel padding-none"  @click="changeOpenTrue(2, 20081)">
                <div v-if="inputDataNew[20081][2] == 0" class="no-sel margin-none"></div>
                <div v-else class="sel margin-none"></div>
            </div>
            <div class="input-main input-main-w80">
                <span>选项三:温度高于</span>
                <input @blur="blurChangeCount('20084', $event)" v-model="inputData['20084']"
                    @input="changeCountData('20084', $event)" type="text" value="60" placeholder="60" />
                <span>℃，高温报警。报警通道</span>
                <input @blur="blurChange(20104, $event)" v-model="inputData[20104]" @input="change(20104, $event)"
                    type="text" placeholder="0">
            </div>
        </div>
        <div class="flex-view">
            <div class="flex-sel padding-none"  @click="changeOpenTrue(3, 20081)">
                <div v-if="inputDataNew[20081][3] == 0" class="no-sel margin-none"></div>
                <div v-else class="sel margin-none"></div>
            </div>
            <div class="input-main input-main-w80">
                <span>选项四:温度低于</span>
                <input @blur="blurChangeCount('20085', $event)" v-model="inputData['20085']"
                    @input="changeCountData('20085', $event)" type="text" value="60" placeholder="60" />
                <span>℃，低温报警。报警通道</span>
                <input @blur="blurChange(20105, $event)" v-model="inputData[20105]" @input="change(20105, $event)"
                    type="text" placeholder="0">
            </div>
        </div>
        <div class="flex-view shrink-none border-none">
            <div class="input-sel input-sel-w180">
                <span>报警温度2的实时温度选择</span>
                <el-dropdown @command="handleCommand1($event, 20086)">
                    <div class="el-dropdown-link">
                        <input v-model="inputDataNew[20086]" type="text" class="input-input" placeholder="无">
                        <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
                    </div>
                    <el-dropdown-menu class="input-menu-180" slot="dropdown">
                        <el-dropdown-item v-for="item, index in typeList1" :key="index" :command="item.value">{{
                            item.label }}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div class="flex-view border-none">
            <div class="flex-sel padding-none" @click="changeOpenTrue(0, 20087)">
                <div v-if="inputDataNew[20087][0] == 0" class="no-sel margin-none"></div>
                <div v-else class="sel margin-none"></div>
            </div>
            <div class="input-main input-main-w80">
                <span>选项一:温度高于目标值</span>
                <input @blur="blurChange10('20088', $event)" v-model="inputData['20088']"
                    @input="changeCount10('20088', $event)" type="text" value="60" placeholder="60" />
                <span>℃，高温报警。</span>
            </div>
        </div>
        <div class="flex-view border-none">
            <div class="flex-sel padding-none" @click="changeOpenTrue(1, 20087)">
                <div v-if="inputDataNew[20087][1] == 0" class="no-sel margin-none"></div>
                <div v-else class="sel margin-none"></div>
            </div>
            <div class="input-main input-main-w80">
                <span>选项二:温度低于目标值</span>
                <input @blur="blurChange10('20089', $event)" v-model="inputData['20089']"
                    @input="changeCount10('20089', $event)" type="text" value="60" placeholder="60" />
                <span>℃，低温报警。</span>
            </div>
        </div>
        <div class="flex-view border-none">
            <div class="flex-sel padding-none" @click="changeOpenTrue(2, 20087)">
                <div v-if="inputDataNew[20087][2] == 0" class="no-sel margin-none"></div>
                <div v-else class="sel margin-none"></div>
            </div>
            <div class="input-main input-main-w80">
                <span>选项三:温度高于</span>
                <input @blur="blurChangeCount('20090', $event)" v-model="inputData['20090']"
                    @input="changeCountData('20090', $event)" type="text" value="60" placeholder="60" />
                <span>℃，高温报警。报警通道</span>
                <input @blur="blurChange(20106, $event)" v-model="inputData[20106]" @input="change(20106, $event)"
                    type="text" placeholder="0">
            </div>
        </div>
        <div class="flex-view">
            <div class="flex-sel padding-none"  @click="changeOpenTrue(3, 20087)">
                <div v-if="inputDataNew[20087][3] == 0" class="no-sel margin-none"></div>
                <div v-else class="sel margin-none"></div>
            </div>
            <div class="input-main input-main-w80">
                <span>选项四:温度低于</span>
                <input @blur="blurChangeCount('20091', $event)" v-model="inputData['20091']"
                    @input="changeCountData('20091', $event)" type="text" value="60" placeholder="60" />
                <span>℃，低温报警。报警通道</span>
                <input @blur="blurChange(20107, $event)" v-model="inputData[20107]" @input="change(20107, $event)"
                    type="text" placeholder="0">
            </div>
        </div>
        <div class="flex-view shrink-none border-none">
            <div class="input-sel input-sel-w180">
                <span>报警湿度1的实时湿度选择</span>
                <el-dropdown @command="handleCommand2($event, 20092)">
                    <div class="el-dropdown-link">
                        <input v-model="inputDataNew[20092]" type="text" class="input-input" placeholder="无">
                        <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
                    </div>
                    <el-dropdown-menu class="input-menu-180" slot="dropdown">
                        <el-dropdown-item v-for="item, index in typeList2" :key="index" :command="item.value">{{
                            item.label }}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>

        <div class="flex-view border-none">
            <div class="flex-sel padding-none" @click="changeOpenTrue(0, 20093)">
                <div v-if="inputDataNew[20093][0] == 0" class="no-sel margin-none"></div>
                <div v-else class="sel margin-none"></div>
            </div>
            <div class="input-main input-main-w80">
                <span>选项一:湿度高于目标值</span>
                <input @blur="blurChange10('20094', $event)" v-model="inputData['20094']"
                    @input="changeCount10('20094', $event)" type="text" value="60" placeholder="60" />
                <span>%RH，高湿报警。</span>
            </div>
        </div>
        <div class="flex-view border-none">
            <div class="flex-sel padding-none" @click="changeOpenTrue(1, 20093)">
                <div v-if="inputDataNew[20093][1] == 0" class="no-sel margin-none"></div>
                <div v-else class="sel margin-none"></div>
            </div>
            <div class="input-main input-main-w80">
                <span>选项二:湿度低于目标值</span>
                <input @blur="blurChange10('20095', $event)" v-model="inputData['20095']"
                    @input="changeCount10('20095', $event)" type="text" value="60" placeholder="60" />
                <span>%RH，低湿报警。</span>
            </div>
        </div>
        <div class="flex-view border-none">
            <div class="flex-sel padding-none" @click="changeOpenTrue(2, 20093)">
                <div v-if="inputDataNew[20093][2] == 0" class="no-sel margin-none"></div>
                <div v-else class="sel margin-none"></div>
            </div>
            <div class="input-main input-main-w80">
                <span>选项三:湿度高于</span>
                <input @blur="blurChange10('20096', $event)" v-model="inputData['20096']"
                    @input="changeCount10('20096', $event)" type="text" value="60" placeholder="60" />
                <span>%RH，高湿报警。报警通道</span>
                <input @blur="blurChange(20108, $event)" v-model="inputData[20108]" @input="change(20108, $event)"
                    type="text" placeholder="0">
            </div>
        </div>
        <div class="flex-view">
            <div class="flex-sel padding-none" @click="changeOpenTrue(3, 20093)">
                <div v-if="inputDataNew[20093][3] == 0" class="no-sel margin-none"></div>
                <div v-else class="sel margin-none"></div>
            </div>
            <div class="input-main input-main-w80">
                <span>选项四:湿度低于</span>
                <input @blur="blurChange10('20097', $event)" v-model="inputData['20097']"
                    @input="changeCount10('20097', $event)" type="text" value="60" placeholder="60" />
                <span>%RH，低湿报警。报警通道</span>
                <input @blur="blurChange(20109, $event)" v-model="inputData[20109]" @input="change(20109, $event)"
                    type="text" placeholder="0">
            </div>
        </div>
        <div class="flex-view shrink-none border-none">
            <div class="input-sel input-sel-w180">
                <span>报警湿度2的实时湿度选择</span>
                <el-dropdown @command="handleCommand2($event, 20098)">
                    <div class="el-dropdown-link">
                        <input v-model="inputDataNew[20098]" type="text" class="input-input" placeholder="无">
                        <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
                    </div>
                    <el-dropdown-menu class="input-menu-180" slot="dropdown">
                        <el-dropdown-item v-for="item, index in typeList2" :key="index" :command="item.value">{{
                            item.label }}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div class="flex-view border-none">
            <div class="flex-sel padding-none"  @click="changeOpenTrue(0, 20099)">
                <div v-if="inputDataNew[20099][0] == 0" class="no-sel margin-none"></div>
                <div v-else class="sel margin-none"></div>
            </div>
            <div class="input-main input-main-w80">
                <span>选项一:湿度高于目标值</span>
                <input @blur="blurChange10('20100', $event)" v-model="inputData['20100']"
                    @input="changeCount10('20100', $event)" type="text" value="60" placeholder="60" />
                <span>%RH，高湿报警。</span>
            </div>
        </div>
        <div class="flex-view border-none">
            <div class="flex-sel padding-none"  @click="changeOpenTrue(1, 20099)">
                <div v-if="inputDataNew[20099][1] == 0" class="no-sel margin-none"></div>
                <div v-else class="sel margin-none"></div>
            </div>
            <div class="input-main input-main-w80">
                <span>选项二:湿度低于目标值</span>
                <input @blur="blurChange10('20101', $event)" v-model="inputData['20101']"
                    @input="changeCount10('20101', $event)" type="text" value="60" placeholder="60" />
                <span>%RH，低湿报警。</span>
            </div>
        </div>
        <div class="flex-view border-none">
            <div class="flex-sel padding-none"  @click="changeOpenTrue(2, 20099)">
                <div v-if="inputDataNew[20099][2] == 0" class="no-sel margin-none"></div>
                <div v-else class="sel margin-none"></div>
            </div>
            <div class="input-main input-main-w80">
                <span>选项三:湿度高于</span>
                <input @blur="blurChange10('20102', $event)" v-model="inputData['20102']"
                    @input="changeCount10('20102', $event)" type="text" value="60" placeholder="60" />
                <span>%RH，高湿报警。报警通道</span>
                <input @blur="blurChange(20110, $event)" v-model="inputData[20110]" @input="change(20110, $event)"
                    type="text" placeholder="0">
            </div>
        </div>
        <div class="flex-view border-none">
            <div class="flex-sel padding-none" @click="changeOpenTrue(3, 20099)">
                <div v-if="inputDataNew[20099][3] == 0" class="no-sel margin-none"></div>
                <div v-else class="sel margin-none"></div>
            </div>
            <div class="input-main input-main-w80">
                <span>选项四:湿度低于</span>
                <input @blur="blurChange10('20103', $event)" v-model="inputData['20103']"
                    @input="changeCount10('20103', $event)" type="text" value="60" placeholder="60" />
                <span>%RH，低湿报警。报警通道</span>
                <input @blur="blurChange(20111, $event)" v-model="inputData[20111]" @input="change(20111, $event)"
                    type="text" placeholder="0">
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            inputDataNew: {20099:[],20093:[],20087:[],20081:[],},
            inputData: [],
            typeList1: [
                { label: '1#平均温度', value: 0 },
                { label: '2#平均温度', value: 1 },
                { label: '1#温度传感器', value: 2 },
                { label: '2#温度传感器', value: 3 },
                { label: '3#温度传感器', value: 4 },
                { label: '4#温度传感器', value: 5 },
                { label: '5#温度传感器', value: 6 },
                { label: '6#温度传感器', value: 7 },
                { label: '7#温度传感器', value: 8 },
                { label: '8#温度传感器', value: 9 },
                { label: '9#温度传感器', value: 10 },
                { label: '10#温度传感器', value: 11 },
                { label: '11#温度传感器', value: 12 },
                { label: '12#温度传感器', value: 13 },
                { label: '13#温度传感器', value: 14 },
                { label: '14#温度传感器', value: 15 },
                { label: '15#温度传感器', value: 16 },],
            typeList2: [
                { label: '1#平均湿度', value: 0 },
                { label: '2#平均湿度', value: 1 },
                { label: '1#湿度传感器', value: 2 },
                { label: '2#湿度传感器', value: 3 },
                { label: '3#湿度传感器', value: 4 },
                { label: '4#湿度传感器', value: 5 },
                { label: '5#湿度传感器', value: 6 },
                { label: '6#湿度传感器', value: 7 },
                { label: '7#湿度传感器', value: 8 },
                { label: '8#湿度传感器', value: 9 },
                { label: '9#湿度传感器', value: 10 },
                { label: '10#湿度传感器', value: 11 },
                { label: '11#湿度传感器', value: 12 },
                { label: '12#湿度传感器', value: 13 },
                { label: '13#湿度传感器', value: 14 },
                { label: '14#湿度传感器', value: 15 },
                { label: '15#湿度传感器', value: 16 },],
      loading:null,
        }
    },
    watch:{
        '$store.state.equipmentIndex'(newVal, oldVal) {
  this.dataInit();
},
    },
    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: {
        getData1(data) {
            var name = ''
            this.typeList1.forEach((el, index) => {
                if (el.value == data) {
                    name = el.label
                }
            })
            return name
        },
        getData2(data) {
            var name = ''
            this.typeList2.forEach((el, index) => {
                if (el.value == data) {
                    name = el.label
                }
            })
            return name
        },
        //类型选择温度
        handleCommand1(command, code) {
            this.typeList1.forEach((el, index) => {
                if (el.value == command) {
                    this.inputDataNew[code] = el.label
                }
            })
            var dataNum = {
                target: {
                    value: command,
                },
            };
            this.changeBtn(code, dataNum);
        },
        //类型选择湿度
        handleCommand2(command, code) {
            this.typeList2.forEach((el, index) => {
                if (el.value == command) {
                    this.inputDataNew[code] = el.label
                }
            })
            var dataNum = {
                target: {
                    value: command,
                },
            };
            this.changeBtn(code, dataNum);
        },
        //失去焦点 计算公式 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,
            }; //避免开启多个计时器
            console.log(store.nowInput, el.target.value, 111);
            if (store.nowInput != el.target.value) {
                this.changeData(data);
            }
            // 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
            }
        },
           //失去焦点
           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);
            }

        },
        //失去焦点
        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 (store.nowInput != el.target.value) {
                this.changeData(data);
            }
            // 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)
        },
        padString(str, length) {
            return str.padStart(length, '0');
        },
        //反转数组 不影响原数组
        myReverse(arr) {
            return [...arr].reverse()
        },
        changeOpenTrue(index, code) {
            if (this.inputDataNew[code][index] == 0) {
                this.inputDataNew[code][index] = 1
            } else {
                this.inputDataNew[code][index] = 0
            }
            this.$forceUpdate();
            var num = this.myReverse(this.inputDataNew[code]).join("")

            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.changeBtn(code, dataNum);
        },
        dataInit() {
            this.loading = this.$loading({
    lock: true,
    text: '加载中',
    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.targetValue(data).then(res => {
                this.loading.close()
                if (res.data.code == 200) {
                    this.inputData = JSON.parse(JSON.stringify(res.data.data));
                    this.inputDataNew = JSON.parse(JSON.stringify(res.data.data))
                    this.inputDataNew[20080] = this.getData1(this.inputData[20080])
                    this.inputDataNew[20086] = this.getData1(this.inputData[20086])

                    this.inputData[20082] = this.countData10(this.inputData[20082])
                    this.inputData[20083] = this.countData10(this.inputData[20083])
                    this.inputData[20084] = this.countData(this.inputData[20084])
                    this.inputData[20085] = this.countData(this.inputData[20085])

                    this.inputData[20088] = this.countData10(this.inputData[20088])
                    this.inputData[20089] = this.countData10(this.inputData[20089])
                    this.inputData[20090] = this.countData(this.inputData[20090])
                    this.inputData[20091] = this.countData(this.inputData[20091])

                    this.inputDataNew[20092] = this.getData2(this.inputData[20092])
                    this.inputDataNew[20098] = this.getData2(this.inputData[20098])

                    this.inputData[20094] = this.countData10(this.inputData[20094])
                    this.inputData[20095] = this.countData10(this.inputData[20095])
                    this.inputData[20096] = this.countData10(this.inputData[20096])
                    this.inputData[20097] = this.countData10(this.inputData[20097])

                    this.inputData[20100] = this.countData10(this.inputData[20100])
                    this.inputData[20101] = this.countData10(this.inputData[20101])
                    this.inputData[20102] = this.countData10(this.inputData[20102])
                    this.inputData[20103] = this.countData10(this.inputData[20103])

                    this.getOpenData(20081)
                    this.getOpenData(20087)
                    this.getOpenData(20093)
                    this.getOpenData(20099)
                }
            })
        },
        getOpenData(code) {
            var num1 = this.inputData[code] ? this.inputData[code] : 0
            var num11 = this.padString(num1.toString(2), 4)
            var openList1New
            openList1New = num11.split("")
            this.inputDataNew[code] = openList1New.reverse()
            console.log(this.inputDataNew[code],code);
        },
        //全选文本
        selectValue(e) {
            var store = this.$store.state
            store.nowInput = e.target.value
            e.currentTarget.select();
        },
        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);
        },
        //修改数据的函数
        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);
        },
        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>
  
  