<template>
    <div class="wetFan">
        <div class="table-title">
            <img src="../../assets/img/wetFan.png" alt="">{{pageName}}
        </div>
     
        <template v-if="indexs==1">
            <div class="title-tips">{{$t('text.selection')}}
            <div class="input-btn">
                <div class="btn btn-tips"  @click="changeOpen(0,21950)" :class="inputData[21950] == 0 ? 'green' : 'blue'">
                    {{ inputData[21950] == 0 ? $t('text.invalid') : $t('text.valid') }}
                </div>
            </div>
        </div>
            <div class="flex-view">
            <div class="input-btn ">
                <div class="btn" @click="changeOpen(1,21950)" :class="inputData[21950] == 1 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet2.png" alt="" />{{$t('text.autoRun')}}
                </div>
                <div class="btn" @click="changeOpen(2,21950)" :class="inputData[21950] == 2 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet3.png" alt="" />{{$t('text.manualOn')}}
                </div>
                <div class="btn" @click="changeOpen(3,21950)" :class="inputData[21950] == 3 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet1.png" alt="" />{{$t('text.manualOff')}}
                </div>
            </div>
        </div>
        <div class="text-tips">{{$t('wetFan.manualHint')}}</div>
        <div class="flex-view border-none">
            <div class="input-btn ">
                <div class="btn btn-w70" @click="changeIndexOpen(0)" :class="actList1[0] == '1' ? 'blue' : 'off'">
                    1#
                </div>
                <div class="btn btn-w70" @click="changeIndexOpen(1)" :class="actList1[1] == '1' ? 'blue' : 'off'">
                    2#
                </div>
                <div class="btn btn-w70" @click="changeIndexOpen(2)" :class="actList1[2] == '1' ? 'blue' : 'off'">
                    3#
                </div>
                <div class="btn btn-w70" @click="changeIndexOpen(3)" :class="actList1[3] == '1' ? 'blue' : 'off'">
                    4#
                </div>
                <div class="btn btn-w70" @click="changeIndexOpen(4)" :class="actList1[4] == '1' ? 'blue' : 'off'">
                    5#
                </div>
            </div>
        </div>
        <div class="text-tips">{{$t('wetFan.workingHours')}}</div>
        <div class="flex-view border-none">
            <div class="input-main-60">
                <input @blur="blurChange(21952, $event)" v-model="inputData[21952]" @input="change(21952, $event)"
                 type="text" placeholder="0">
                <span>:</span>
                <input @blur="blurChange(21953, $event)" v-model="inputData[21953]" @input="change(21953, $event)"
                 type="text" placeholder="0">
                <span>-</span>
                <input @blur="blurChange(21954, $event)" v-model="inputData[21954]" @input="change(21954, $event)"
                 type="text" placeholder="0">
                <span>:</span>
                <input @blur="blurChange(21955, $event)" v-model="inputData[21955]" @input="change(21955, $event)"
                 type="text" placeholder="0">
            </div>
        </div>
        <div class="text-tips">{{$t('wetFan.modeSelection')}}</div>
        <div class="flex-view shrink-none">
            <div class="input-btn">
               <div class="btn btn-w70" @click="changeOpen(1,21956)" :class="inputData[21956] == 1 ? 'blue' : 'off'">
                    {{inputData[21956] == 1 ? $t('text.valid') : $t('text.invalid')}}
                </div>
            </div>
            <div class="input-main-60">
                <span>{{$t('wetFan.mode1')}}</span>
            </div>
            <div class="input-btn">
                 <div class="btn btn-w70" @click="changeOpen(2,21956)" :class="inputData[21956] == 2 ? 'blue' : 'off'">
                    {{inputData[21956] == 2 ? $t('text.valid') : $t('text.invalid')}}
                </div>
            </div>
            <div class="input-main-60">
                <span>{{$t('wetFan.mode2')}}</span>
            </div>
        </div>
        <div class="flex-view shrink-none">
            <div class="input-sel input-sel-w180">
                <span>{{$t('wetFan.mode1')}}：{{$t('wetFan.maxLevel')}}</span>
                <el-dropdown @command="handleCommand1($event, 21959)">
                    <div class="el-dropdown-link">
                        <input v-model="inputDataNew[21959]" 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 class="input-main-60">
                <span>{{$t('wetFan.adjustTime')}}</span>
                <input @blur="blurChange(21961, $event)" v-model="inputData[21961]" @input="change(21961, $event)"
                 type="text" placeholder="0">
                <span>{{$t('text.minutes')}}</span>
            </div>
        </div>
        <div class="flex-view border-none  shrink-none padding-none">
            <div class="input-btn">
                <div class="btn btn-w70" @click="changeIndexOpen1(0)" :class="actList2[0] == '1' ? 'blue' : 'off'">
                    {{actList2[0] == '1' ? $t('text.valid') : $t('text.invalid')}}
                </div>
            </div>
            <div class="input-main-60">
                <span>{{$t('wetFan.conditions.outdoorTempLimit.prefix')}}</span>
                <input @blur="blurChangeCount(21958, $event)" v-model="inputData[21958]" @input="changeCountData(21958, $event)"
                 type="text" placeholder="0">
                <span>{{$t('wetFan.conditions.outdoorTempLimit.suffix')}}</span>
            </div>
        </div>

        <div class="flex-view border-none  shrink-none padding-none">
            <div class="input-btn">
                <div class="btn btn-w70" @click="changeIndexOpen1(1)" :class="actList2[1] == '1' ? 'blue' : 'off'">
                    {{actList2[1] == '1' ? $t('text.valid') : $t('text.invalid')}}
                </div>
            </div>
            <div class="input-main-60">
                <span>{{$t('wetFan.conditions.tempExceed.prefix')}}</span>
                <input @blur="blurChange10(21960, $event)" v-model="inputData[21960]" @input="changeCount10(21960, $event)"
                 type="text" placeholder="0">
                <span>{{$t('wetFan.conditions.tempExceed.suffix')}}</span>
            </div>
        </div>
        <div class="flex-view border-none shrink-none padding-none">
            <div class="input-btn">
                <div class="btn btn-w70" @click="changeIndexOpen1(2)" :class="actList2[2] == '1' ? 'blue' : 'off'">
                    {{actList2[2] == '1' ? $t('text.valid') : $t('text.invalid')}}
                </div>
            </div>
            <div class="input-main-60">
                <span>{{$t('wetFan.conditions.maxCooling')}}</span>
            </div>
        </div>
        <div class="flex-view shrink-none padding-none">
            <div class="input-btn">
                <div class="btn btn-w70" @click="changeIndexOpen1(3)" :class="actList2[3] == '1' ? 'blue' : 'off'">
                    {{actList2[3] == '1' ? $t('text.valid') : $t('text.invalid')}}
                </div>
            </div>
            <div class="input-main-60">
                <span>{{$t('wetFan.conditions.dryDelay')}}</span>
                <input @blur="blurChange(21962, $event)" v-model="inputData[21962]" @input="change(21962, $event)"
                 type="text" placeholder="0">
                 <span>{{$t('text.minutes')}}</span>
            </div>
        </div>

        <div class="flex-view  shrink-none">
            <div class="input-main-60">
                <span>{{$t('wetFan.mode2')}}：{{$t('wetFan.conditions.tempPrecision')}}</span>
                <input @blur="blurChange10(21964, $event)" v-model="inputData[21964]" @input="changeCount10(21964, $event)"
                type="text" placeholder="0">
            </div>
        </div>

        <div class="flex-view padding-none border-none shrink-none">
            <div class="input-btn">
                <div class="btn btn-w70" @click="changeIndexOpen2(0)" :class="actList3[0] == '1' ? 'blue' : 'off'">
                    {{actList3[0] == '1' ? $t('text.valid') : $t('text.invalid')}}
                </div>
            </div>
            <div class="input-main-60">
                <span>{{$t('wetFan.conditions.fanStartCondition.prefix')}}</span>
        <input @blur="blurChangeCount(21965, $event)" v-model="inputData[21965]" @input="changeCountData(21965, $event)"
                 type="text" placeholder="0">
                <span>{{$t('wetFan.conditions.fanStartCondition.middle')}}1#{{$t('wetFan.conditions.fanStartCondition.suffix')}}</span>
            </div>
            <div class="input-btn">
                <div class="btn btn-w70" @click="changeIndexOpen2(1)" :class="actList3[1] == '1' ? 'blue' : 'off'">
                    {{actList3[1] == '1' ? $t('text.valid') : $t('text.invalid')}}
                </div>
            </div>
            <div class="input-main-60">
                <span>{{$t('wetFan.conditions.fanStartCondition.prefix')}}</span>
        <input @blur="blurChangeCount(21966, $event)" v-model="inputData[21966]" @input="changeCountData(21966, $event)"
                 type="text" placeholder="0">
                <span>{{$t('wetFan.conditions.fanStartCondition.middle')}}2#{{$t('wetFan.conditions.fanStartCondition.suffix')}}</span>
            </div>
        </div>
        <div class="flex-view padding-none border-none shrink-none">
            <div class="input-btn">
                <div class="btn btn-w70" @click="changeIndexOpen2(2)" :class="actList3[2] == '1' ? 'blue' : 'off'">
                    {{actList3[2] == '1' ? $t('text.valid') : $t('text.invalid')}}
                </div>
            </div>
            <div class="input-main-60">
                <span>{{$t('wetFan.conditions.fanStartCondition.prefix')}}</span>
        <input @blur="blurChangeCount(21967, $event)" v-model="inputData[21967]" @input="changeCountData(21967, $event)"
                 type="text" placeholder="0">
                <span>{{$t('wetFan.conditions.fanStartCondition.middle')}}3#{{$t('wetFan.conditions.fanStartCondition.suffix')}}</span>
            </div>
            <div class="input-btn">
                <div class="btn btn-w70" @click="changeIndexOpen2(3)" :class="actList3[3] == '1' ? 'blue' : 'off'">
                    {{actList3[3] == '1' ? $t('text.valid') : $t('text.invalid')}}
                </div>
            </div>
            <div class="input-main-60">
                <span>{{$t('wetFan.conditions.fanStartCondition.prefix')}}</span>
        <input @blur="blurChangeCount(21968, $event)" v-model="inputData[21968]" @input="changeCountData(21968, $event)"
                 type="text" placeholder="0">
                <span>{{$t('wetFan.conditions.fanStartCondition.middle')}}4#{{$t('wetFan.conditions.fanStartCondition.suffix')}}</span>
            </div>
        </div>
        <div class="flex-view padding-none border-none shrink-none">
            <div class="input-btn">
                <div class="btn btn-w70" @click="changeIndexOpen2(4)" :class="actList3[4] == '1' ? 'blue' : 'off'">
                    {{actList3[4] == '1' ? $t('text.valid') : $t('text.invalid')}}
                </div>
            </div>
            <div class="input-main-60">
                <span>{{$t('wetFan.conditions.fanStartCondition.prefix')}}</span>
        <input @blur="blurChangeCount(21969, $event)" v-model="inputData[21969]" @input="changeCountData(21969, $event)"
                 type="text" placeholder="0">
                <span>{{$t('wetFan.conditions.fanStartCondition.middle')}}5#{{$t('wetFan.conditions.fanStartCondition.suffix')}}</span>
            </div>
        </div>
        </template>

        <template  v-if="indexs==2">
            <div class="flex-view border-none shrink-none">
            <div class="input-main">
                <span>{{$t('wetFan.pump.pump1')}}:</span>
            </div>
            <div class="input-btn ">
                <div class="btn" @click="changeOpen(0,21970)" :class="inputData[21970] == 0 ? 'blue' : 'green'">
              {{ $t('text.invalid')}}
                </div>
                <div class="btn" @click="changeOpen(1,21970)" :class="inputData[21970] == 1 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet2.png" alt="" />{{$t('text.autoRun')}}
                </div>
                <div class="btn" @click="changeOpen(2,21970)" :class="inputData[21970] == 2 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet3.png" alt="" />{{$t('text.manualOn')}}
                </div>
                <div class="btn" @click="changeOpen(3,21970)" :class="inputData[21970] == 3 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet1.png" alt="" />{{$t('text.manualOff')}}
                </div>

            </div>
        </div>
        <div class="flex-view shrink-none">
            <div class="input-main-60">
                <span>{{$t('wetFan.pump.prefix')}}</span>
                <input @blur="blurChange(21971, $event)" v-model="inputData[21971]" @input="change(21971, $event)"
                 type="text" placeholder="0">
                <span>{{$t('wetFan.pump.middle')}}1{{$t('wetFan.pump.suffix')}}</span>
            </div>
        </div>

        <div class="flex-view border-none shrink-none">
            <div class="input-main">
                <span>{{$t('wetFan.pump.pump2')}}:</span>
            </div>
            <div class="input-btn ">
                <div class="btn" @click="changeOpen(0,21972)" :class="inputData[21972] == 0 ? 'blue' : 'green'">
              {{ $t('text.invalid')}}
                </div>
                <div class="btn" @click="changeOpen(1,21972)" :class="inputData[21972] == 1 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet2.png" alt="" />{{$t('text.autoRun')}}
                </div>
                <div class="btn" @click="changeOpen(2,21972)" :class="inputData[21972] == 2 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet3.png" alt="" />{{$t('text.manualOn')}}
                </div>
                <div class="btn" @click="changeOpen(3,21972)" :class="inputData[21972] == 3 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet1.png" alt="" />{{$t('text.manualOff')}}
                </div>
            </div>
        </div>
        <div class="flex-view shrink-none border-none">
            <div class="input-main-60">
                <span>{{$t('wetFan.pump.prefix')}}</span>
                <input @blur="blurChange(21973, $event)" v-model="inputData[21973]" @input="change(21973, $event)"
                 type="text" placeholder="0">
                <span>{{$t('wetFan.pump.middle')}}2{{$t('wetFan.pump.suffix')}}</span>
            </div>
        </div>
        </template>

        <template v-if="indexs==3">
            <div class="flex-view border-none shrink-none">
            <div class="input-main">
                <span>{{$t('wetFan.window.window1')}}:</span>
            </div>
            <div class="input-btn ">
                <div class="btn" @click="changeOpen(0,21974)" :class="inputData[21974] == 0 ? 'blue' : 'green'">
              {{ $t('text.invalid')}}
                </div>
                <div class="btn" @click="changeOpen(1,21974)" :class="inputData[21974] == 1 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet2.png" alt="" />{{$t('text.autoRun')}}
                </div>
                <div class="btn" @click="changeOpen(2,21974)" :class="inputData[21974] == 2 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet3.png" alt="" />{{$t('text.openWindow')}}
                </div>
                <div class="btn" @click="changeOpen(3,21974)" :class="inputData[21974] == 3 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet1.png" alt="" />{{$t('text.closeWindow')}}
                </div>
                <div class="btn" @click="changeOpen(4,21974)" :class="inputData[21974] == 4 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet1.png" alt="" />{{$t('text.stop')}}
                </div>
            </div>
        </div>
        <div class="flex-view border-none shrink-none padding-none">
            <div class="input-btn">
                <div class="btn btn-w70" @click="changeIndexOpen3(0)" :class="actList4[0] == '1' ? 'blue' : 'off'">
                    {{actList4[0] == '1' ? $t('text.valid') : $t('text.invalid')}}
                </div>
            </div>
            <div class="input-main-60">
                <span>{{$t('wetFan.window.tempTrigger.prefix')}}</span>
                <input @blur="blurChangeCount(21976, $event)" v-model="inputData[21976]" @input="changeCountData(21976, $event)"
                 type="text" placeholder="0">
                <span>{{$t('wetFan.window.tempTrigger.middle')}}</span>
                <input @blur="blurChange10(21977, $event)" v-model="inputData[21977]" @input="changeCount10(21977, $event)"
                 type="text" placeholder="0">
            </div>
        </div>
        <div class="flex-view shrink-none padding-none">
            <div class="input-btn">
                <div class="btn btn-w70" @click="changeIndexOpen3(1)" :class="actList4[1] == '1' ? 'blue' : 'off'">
                    {{actList4[1] == '1' ? $t('text.valid') : $t('text.invalid')}}
                </div>
            </div>
            <div class="input-main-60">
                <span>{{$t('wetFan.window.closeDelay.prefix')}}</span>
                <input @blur="blurChange(21978, $event)" v-model="inputData[21978]" @input="change(21978, $event)"
                 type="text" placeholder="0">
                <span>{{$t('wetFan.window.closeDelay.suffix')}}</span>
            </div>
        </div>
        <div class="flex-view border-none shrink-none">
            <div class="input-main">
                <span>{{$t('wetFan.window.window2')}}:</span>
            </div>
            <div class="input-btn ">
                <div class="btn" @click="changeOpen(0,21979)" :class="inputData[21979] == 0 ? 'blue' : 'green'">
               {{ $t('text.invalid')}}
                </div>
                <div class="btn" @click="changeOpen(1,21979)" :class="inputData[21979] == 1 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet2.png" alt="" />{{$t('text.autoRun')}}
                </div>
                <div class="btn" @click="changeOpen(2,21979)" :class="inputData[21979] == 2 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet3.png" alt="" />{{$t('text.openWindow')}}
                </div>
                <div class="btn" @click="changeOpen(3,21979)" :class="inputData[21979] == 3 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet1.png" alt="" />{{$t('text.closeWindow')}}
                </div>
                <div class="btn" @click="changeOpen(4,21979)" :class="inputData[21979] == 4 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet1.png" alt="" />{{$t('text.stop')}}
                </div>
            </div>
        </div>
        <div class="flex-view border-none shrink-none padding-none">
            <div class="input-btn">
                <div class="btn btn-w70" @click="changeIndexOpen4(0)" :class="actList5[0] == '1' ? 'blue' : 'off'">
                    {{actList5[0] == '1' ? $t('text.valid') : $t('text.invalid')}}
                </div>
            </div>
            <div class="input-main-60">
                <span>{{$t('wetFan.window.tempTrigger.prefix')}}</span>
                <input @blur="blurChangeCount(21981, $event)" v-model="inputData[21981]" @input="changeCountData(21981, $event)"
                 type="text" placeholder="0">
                <span>{{$t('wetFan.window.tempTrigger.middle')}}</span>
                <input @blur="blurChange10(21982, $event)" v-model="inputData[21982]" @input="changeCount10(21982, $event)"
                 type="text" placeholder="0">
            </div>
        </div>
        <div class="flex-view border-none shrink-none padding-none">
            <div class="input-btn">
                <div class="btn btn-w70" @click="changeIndexOpen4(1)" :class="actList5[1] == '1' ? 'blue' : 'off'">
                    {{actList5[1] == '1' ? $t('text.valid') : $t('text.invalid')}}
                </div>
            </div>
            <div class="input-main-60">
                <span>{{$t('wetFan.window.closeDelay.prefix')}}</span>
                <input @blur="blurChange(21983, $event)" v-model="inputData[21983]" @input="change(21983, $event)"
                 type="text" placeholder="0">
                <span>{{$t('wetFan.window.closeDelay.suffix')}}</span>
            </div>
        </div>
        </template>
    </div>
</template>
<script>
export default {
    data() {
        return {
            inputData: [],
            actList1: [],
            actList2: [],
            actList3: [],
            actList4: [],
            actList5: [],
            indexs: 1,
      loading:null,
      pageName:'湿帘风机',
      typeList1: [
         { label:this.$t('heatFan.gear0'), value: 0 },
                  { label:this.$t('heatFan.gear1',{index:1}), value: 1 },
                  { label:this.$t('heatFan.gear1',{index:2}), value: 2 },
                  { label:this.$t('heatFan.gear1',{index:3}), value: 3 },
                  { label:this.$t('heatFan.gear1',{index:4}), value: 4 },
                  { label:this.$t('heatFan.gear1',{index:5}), value: 5 },
            ],
            inputDataNew: [],
        }
    },
    watch: {
        $route(newVal, oldVal) {
            const that = this;
            this.indexs = this.$route.query.id ? this.$route.query.id : 1;
            if(this.$route.query.name){
      this.pageName=this.$route.query.name
    }
        },
        '$store.state.equipmentIndex'(newVal, oldVal) {
  this.dataInit();
},
    },
    mounted() {
        const that = this;
        this.indexs = this.$route.query.id ? this.$route.query.id : 1;
  
        setTimeout(() => {
            that.dataInit();
        }, 0);
        //input获取焦点后全选
        let inputList = document.querySelectorAll('input');
        for (let index = 0; index < inputList.length; index++) {
            inputList[index].onfocus = this.selectValue;//input放入焦点，全选文本
        }
        if(this.$route.query.name){
      this.pageName=this.$route.query.name
    }
    },
    methods: {
        getName(){
            if(this.indexs==1){
                return '风机'
            }else if(this.indexs==2){
                return '湿帘泵'
            }else if(this.indexs==3){
                return '湿帘外翻窗'
            }else{
                return '湿帘风机'
            }
        },
        //失去焦点 计算公式 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 (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
            }
        },
        //失去焦点
        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)
        },
        //开关无效
        changeIndexOpen(active) {
            if (this.actList1[active] == '1') {
                this.actList1[active] = '0'
            } else {
                this.actList1[active] = '1'
            }
            this.$forceUpdate();
            var revList = this.actList1.slice().reverse()
            var num = revList.join("");
            var dataNum = {
                target: {
                    value: parseInt(num,2),
                },
            };
            this.changeBtn(21951, dataNum);
        },
           //开关无效
           changeIndexOpen1(active) {
            if (this.actList2[active] == '1') {
                this.actList2[active] = '0'
            } else {
                this.actList2[active] = '1'
            }
            this.$forceUpdate();
            var revList = this.actList2.slice().reverse()
            var num = revList.join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.changeBtn(21957, dataNum);
        },
           //开关无效
           changeIndexOpen2(active) {
            if (this.actList3[active] == '1') {
                this.actList3[active] = '0'
            } else {
                this.actList3[active] = '1'
            }
            this.$forceUpdate();
            var revList = this.actList3.slice().reverse()
            var num = revList.join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.changeBtn(21963, dataNum);
        },
            //开关无效
            changeIndexOpen3(active) {
            if (this.actList4[active] == '1') {
                this.actList4[active] = '0'
            } else {
                this.actList4[active] = '1'
            }
            this.$forceUpdate();
            var revList = this.actList4.slice().reverse()
            var num = revList.join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.changeBtn(21975, dataNum);
        },
            //开关无效
            changeIndexOpen4(active) {
            if (this.actList5[active] == '1') {
                this.actList5[active] = '0'
            } else {
                this.actList5[active] = '1'
            }
            this.$forceUpdate();
            var revList = this.actList5.slice().reverse()
            var num = revList.join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.changeBtn(21980, dataNum);
        },
        getActive1() {
            this.actList1 = []
            var num = this.inputData[21951]

            var num1 = this.padString(num.toString(2), 5)
            var openListNew = []
            openListNew = num1.split("")
            this.actList1 = openListNew.reverse();
        },
        getActive2() {
            this.actList2 = []
            var num = this.inputData[21957]

            var num1 = this.padString(num.toString(2), 4)
            var openListNew = []
            openListNew = num1.split("")
            this.actList2 = openListNew.reverse();
        },
        getActive3() {
            this.actList3 = []
            var num = this.inputData[21963]

            var num1 = this.padString(num.toString(2), 5)
            var openListNew = []
            openListNew = num1.split("")
            this.actList3 = openListNew.reverse();
        },
        getActive4() {
            this.actList4 = []
            var num = this.inputData[21975]

            var num1 = this.padString(num.toString(2), 2)
            var openListNew = []
            openListNew = num1.split("")
            this.actList4 = openListNew.reverse();
        },
        getActive5() {
            this.actList5 = []
            var num = this.inputData[21980]

            var num1 = this.padString(num.toString(2), 2)
            var openListNew = []
            openListNew = num1.split("")
            this.actList5 = openListNew.reverse();
        },
        // 工作方式选择
        changeOpen(index,code) {
            this.inputData[code] = index;
            var dataNum = {
                target: {
                    value: index,
                },
            };
            this.changeBtn(code, dataNum);
        },
        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.fanwetcurtain(data).then(res => {
                this.loading.close()
                if (res.data.code == 200) {
                    this.inputData = res.data.data;
                    this.inputDataNew = JSON.parse(JSON.stringify(res.data.data));
                    this.inputData[21958]=this.countData(this.inputData[21958])
                    this.inputData[21960]=this.countData10(this.inputData[21960])
                    this.inputData[21964]=this.countData10(this.inputData[21964])
                    this.inputData[21965]=this.countData(this.inputData[21965])
                    this.inputData[21966]=this.countData(this.inputData[21966])
                    this.inputData[21967]=this.countData(this.inputData[21967])
                    this.inputData[21968]=this.countData(this.inputData[21968])
                    this.inputData[21969]=this.countData(this.inputData[21969])

                    this.inputData[21976]=this.countData(this.inputData[21976])
                    this.inputData[21977]=this.countData10(this.inputData[21977])
                    this.inputData[21981]=this.countData(this.inputData[21981])
                    this.inputData[21982]=this.countData10(this.inputData[21982])

                    this.getActive1()
                    this.getActive2()
                    this.getActive3()
                    this.getActive4()
                    this.getActive5()

                    this.inputDataNew[21959] = this.getData1(this.inputData[21959]);
                }
            })
        },
        getData1(data) {
            var name = "";
            this.typeList1.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;
                }
            });
            this.inputData[code] = command;
            var dataNum = {
                target: {
                    value: command,
                },
            };
            this.changeBtn(code, dataNum);
        },
        //二进制转换后的补全
        padString(str, length) {
            return str.padStart(length, '0');
        },
        //反转数组 不影响原数组
        myReverse(arr) {
            return [...arr].reverse()
        },
        //全选文本
        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);
            // }

        },
        //修改数据的函数
        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>
  