<template>
    <div class="irrigateSet sensorSet">
        <div class="table-title">
            <img src="../../assets/image/sensor.png" alt=""> {{$t('sensorSet.pageTitle')}}
            <div class="tips" @click="model = true">{{$t('sensorSet.sensorDescription')}}</div>
        </div>
        <div class="sensor-view">
            <div class="left scroll">
                <div @click="toIndex(index)" :class="active == index ? 'active' : ''" v-for="item, index in 96"
                    :key="index">
                    <div>
                         {{$t('sensorSet.sensorChannel', {index:index + 1})}}
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="right-top">
                    <div class="right-sel">
                        <div @click="changeOpen()">
                            <div v-if="openList.indexOf(active) == -1" class="no-sel"></div>
                            <div v-else class="sel"></div>
                             {{$t('sensorSet.validity')}}
                        </div>
                    </div>
                    <div class="input-sel">
                        <div class="title">{{$t('sensorSet.sensorType')}}</div>
                        <el-dropdown @command="handleCommand">
                            <div class="el-dropdown-link">
                                <input v-model="sensorType" type="text" class="input-input" :placeholder="$t('sensorSet.selectSensorType')">
                                <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="item, index in typeList" :key="index" :command="item.value">{{
                item.label }}</el-dropdown-item>

                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <!-- <div class="right-sel">
                            <div @click="sel2 = !sel2">
                                <div v-if="!sel2" class="no-sel"></div>
                                <div v-else class="sel"></div>
                                通讯类传感器
                            </div>
                            <div @click="sel3 = !sel3">
                                <div v-if="!sel3" class="no-sel"></div>
                                <div v-else class="sel"></div>
                                模拟量传感器
                            </div>
                        </div> -->
                </div>
                <div class="right-bottom">
                    <div>
                        <div class="input-main">
                            <div>{{$t('sensorSet.calibration.lowAD')}}</div>
                            <input @blur="blurChange(numberList[active] + 1, $event)"
                                v-model="inputDataNew[numberList[active] + 1]"
                                @input="change(numberList[active] + 1, $event)" type="number" placeholder="0.0">
                        </div>
                        <div class="input-main">
                            <div>{{$t('sensorSet.calibration.lowData')}}</div>
                            <input @blur="blurChange1(numberList[active] + 2, $event)"
                                v-model="inputDataNew[numberList[active] + 2]"
                                @input="change1(numberList[active] + 2, $event)" type="number" placeholder="0.0">
                        </div>
                    </div>
                    <div>
                        <div class="input-main">
                            <div>{{$t('sensorSet.calibration.highAD')}}</div>
                            <input @blur="blurChange(numberList[active] + 3, $event)"
                                v-model="inputDataNew[numberList[active] + 3]"
                                @input="change(numberList[active] + 3, $event)" type="number" placeholder="0.0">
                        </div>
                        <div class="input-main">
                            <div>{{$t('sensorSet.calibration.highData')}}</div>
                            <input @blur="blurChange1(numberList[active] + 4, $event)"
                                v-model="inputDataNew[numberList[active] + 4]"
                                @input="change1(numberList[active] + 4, $event)" type="number" placeholder="0.0">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :modal-append-to-body="false" :show-close="false" :close-on-click-modal="true" :visible.sync="model"
            width="760px">
            <div class="page-title title-402">{{$t('sensorSet.intelligentIrrigationTitle')}}</div>
            <div class="tips-model">
                <div class="tips-model-title">{{$t('sensorSet.greenhouseChannels')}}</div>
            
                <div class="tips-model-text">
                    1. {{$t('sensorSet.channelExample', {num1:'1#-2#',num2:'1#',num3:'1#'})}}
                </div>
                <div class="tips-model-text">
                    2. {{$t('sensorSet.channelExample', {num1:'3#-4#',num2:'2#',num3:'2#'})}}
                </div>
                <div class="tips-model-text">
                    3. {{$t('sensorSet.channelExample', {num1:'5#-6#',num2:'3#',num3:'3#'})}}
                </div>
                <div class="tips-model-text">
                    4. ......
                </div>
                <div class="tips-model-text">
                    5. {{$t('sensorSet.channelExample', {num1:'79#-80#',num2:'40#',num3:'40#'})}}
                </div>
                <div class="">
                   {{$t('sensorSet.sensorMatchingRelation')}}
                </div>
                <div class="tips-model-table">
                    <div class="tips-model-th">
                    <div></div>
                    <div class="tips-model-text">{{$t('sensorSet.calibration.lowAD1')}}</div>
                    <div class="tips-model-text">{{$t('sensorSet.calibration.lowData1')}}</div>
                    <div class="tips-model-text">{{$t('sensorSet.calibration.highAD1')}}</div>
                    <div class="tips-model-text">{{$t('sensorSet.calibration.highData1')}}</div>
                </div>
                <div class="tips-model-tr">
                  <div class="tips-model-text">{{$t('sensorSet.sensorInstructions.soilTemp')}}</div>
                    <div class="tips-model-text">0</div>
                    <div class="tips-model-text">-40</div>
                    <div class="tips-model-text">1000</div>
                    <div class="tips-model-text">60</div>
                </div>
                <div class="tips-model-tr">
                 <div class="tips-model-text">{{$t('sensorSet.sensorInstructions.soilMoisture')}}</div>
                    <div class="tips-model-text">0</div>
                    <div class="tips-model-text">0</div>
                    <div class="tips-model-text">1000</div>
                    <div class="tips-model-text">100</div>
                </div>
                </div>
                <div class="">
                   &nbsp;
                </div>
                <div class="tips-model-title">{{$t('sensorSet.analogChannels')}}</div>
                <div class="">
                       {{$t('sensorSet.sensorInstructions.matchRelation')}}
                </div>
                <div class="tips-model-text">
                    {{$t('sensorSet.sensorInstructions.analogRange')}}
                </div>
            </div>

            <div class="model-return">
                <div @click="model = false" class="btn green">
                    <img src="../../assets/image/return.png" alt="" />{{$t('text.return')}}
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            active: 0,
            sel1: true,
            sel2: false,
            sel3: false,
            numberList: [],
            inputData: [],
            inputDataNew: [],
            sensorType: '',//当前传感器类型
            openList: [],//当前有效的传感器
            loading: null,
            list1: '',
            list2: '',
            list3: '',
            list4: '',
            list5: '',
            list6: '',
            model: false,
        }
    },
    watch: {
        'active'(newVal, oldVal) {
            console.log(newVal,'active');
            
            this.getSensorType()
            // this.getCountData()
        },
    },
    created() {
        for (let i = 0; i < 96; i++) {
            this.numberList.push(10206 + (i * 5))
        }
    },
       computed: {
  typeList() {
    return this.$store.state.typeList.map(item => {
      return {
        ...item,
        label: this.$t(`types.${item.value}`) // 假设你为每个value创建了对应的翻译key
      }
    })
  }
},
    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: {
        //countType计算类型 
        //0是原数据 
        //1是原数据-400 
        //2是原数据/10 
        //3是(原数据-400) / 10
        countType1(data) {
            var num = data - 400
            return num
        },
        countType2(data) {
            var num = data / 10
            return num
        },
        countType3(data) {

            var num = (data - 400) / 10
            return num
        },
        countType4(data) {

            var num = (data - 1000) / 10
            return num
        },
        //反向计算提交
        sendCountType1(data) {
            var num = data + 400
            return num
        },
        sendCountType2(data) {
            var num = data * 10
            return num
        },
        sendCountType3(data) {

            var num = (data * 10) + 400
            return num
        },
        sendCountType4(data) {

            var num = (data * 10) + 1000
            return num
        },
        //类型选择
        handleCommand(command) {
            this.typeList.forEach((el, index) => {
                if (el.value == command) {
                    this.sensorType = el.label
                }
            })
            var dataNum = {
                target: {
                    value: command,
                },
            };
            this.changeBtn(this.numberList[this.active], dataNum);
        },
        //根据类型反向计算赋值给inputData
        getSaveCountData() {
            for (var i = 0; i < 96; i++) {
                this.typeList.forEach((el, index) => {
                    if (el.value == this.inputData[this.numberList[i]]) {
                        if (el.countType == 0) {
                            this.inputData[this.numberList[i] + 2] = this.inputDataNew[this.numberList[i] + 2]
                            this.inputData[this.numberList[i] + 4] = this.inputDataNew[this.numberList[i] + 4]
                        } else if (el.countType == 1) {
                            this.inputData[this.numberList[i] + 2] = this.sendCountType1(this.inputDataNew[this.numberList[i] + 2])
                            this.inputData[this.numberList[i] + 4] = this.sendCountType1(this.inputDataNew[this.numberList[i] + 4])
                        } else if (el.countType == 2) {
                            this.inputData[this.numberList[i] + 2] = this.sendCountType2(this.inputDataNew[this.numberList[i] + 2])
                            this.inputData[this.numberList[i] + 4] = this.sendCountType2(this.inputDataNew[this.numberList[i] + 4])
                        } else if (el.countType == 3) {
                            this.inputData[this.numberList[i] + 2] = this.sendCountType3(this.inputDataNew[this.numberList[i] + 2])
                            this.inputData[this.numberList[i] + 4] = this.sendCountType3(this.inputDataNew[this.numberList[i] + 4])
                        } else if (el.countType == 4) {
                            this.inputData[this.numberList[i] + 2] = this.sendCountType4(this.inputDataNew[this.numberList[i] + 2])
                            this.inputData[this.numberList[i] + 4] = this.sendCountType4(this.inputDataNew[this.numberList[i] + 4])
                        }

                    }
                })
            }
        },
        //根据类型修改数据
        getCountData() {
            for (var i = 0; i < 96; i++) {
                this.typeList.forEach((el, index) => {
                    if (el.value == this.inputData[this.numberList[i]]) {
                        if (el.countType == 0) {
                            this.inputDataNew[this.numberList[i] + 2] = this.inputData[this.numberList[i] + 2]
                            this.inputDataNew[this.numberList[i] + 4] = this.inputData[this.numberList[i] + 4]
                        } else if (el.countType == 1) {
                            this.inputDataNew[this.numberList[i] + 2] = this.countType1(this.inputData[this.numberList[i] + 2])
                            this.inputDataNew[this.numberList[i] + 4] = this.countType1(this.inputData[this.numberList[i] + 4])
                        } else if (el.countType == 2) {
                            this.inputDataNew[this.numberList[i] + 2] = this.countType2(this.inputData[this.numberList[i] + 2])
                            this.inputDataNew[this.numberList[i] + 4] = this.countType2(this.inputData[this.numberList[i] + 4])
                        } else if (el.countType == 3) {
                            this.inputDataNew[this.numberList[i] + 2] = this.countType3(this.inputData[this.numberList[i] + 2])
                            this.inputDataNew[this.numberList[i] + 4] = this.countType3(this.inputData[this.numberList[i] + 4])
                        } else if (el.countType == 4) {
                            this.inputDataNew[this.numberList[i] + 2] = this.countType4(this.inputData[this.numberList[i] + 2])
                            this.inputDataNew[this.numberList[i] + 4] = this.countType4(this.inputData[this.numberList[i] + 4])
                        }

                    }
                })
            }
        },
        getSensorType() {
       
            var text=this.$t('types.meaningless')
            this.typeList.forEach((el, index) => {
                if (el.value == this.inputData[this.numberList[this.active]]) {
                    text = el.label
                }
            })
           setTimeout(() => {
            this.sensorType = text
           }, 10);
        },
        toIndex(index) {
            this.active = index
        },
        padString(str, length) {
            return str.padStart(length, '0');
        },
        changeOpen() {
            var inputData = this.inputData
            var num = 10200
            var listIndex = 16
            var listnum = Math.floor(this.active / listIndex) + 1

            console.log(this['list' + listnum], 123, 'list' + listnum);

            var listData = this['list' + listnum].split('')

            if (Number(listData[listIndex - 1 - (this.active % listIndex)])) {
                listData[listData.length - 1 - (this.active % listIndex)] = '0'
                this['list' + listnum] = listData.join('')
                this.openList.splice(this.openList.indexOf(this.active), 1)
            } else {
                listData[listData.length - 1 - (this.active % listIndex)] = '1'
                this['list' + listnum] = listData.join('')
                this.openList.push(this.active)
            }

            this.$forceUpdate()
            var listNew = listData.join("");
            var dataNum = {
                target: {
                    value: parseInt(listNew, 2),
                },
            };
            // console.log(num + listnum, dataNum);

            this.changeBtn(10200 + listnum - 1, dataNum);
        },
        getData272() {
            var inputData = this.inputData
            // 96个传感器
            this.openList = []
            this.list1 = this.padString(inputData['10200'].toString(2), 16)
            this.list2 = this.padString(inputData['10201'].toString(2), 16)
            this.list3 = this.padString(inputData['10202'].toString(2), 16)
            this.list4 = this.padString(inputData['10203'].toString(2), 16)
            this.list5 = this.padString(inputData['10204'].toString(2), 16)
            this.list6 = this.padString(inputData['10205'].toString(2), 16)
            var number = 16
            for (var i = 0; i < number; i++) {
                if (Number(this.list1[this.list1.length - 1 - i])) {
                    this.openList.push(i)
                }
            }
            for (var j = 0; j < number; j++) {
                if (Number(this.list2[this.list2.length - 1 - j])) {
                    this.openList.push(j + 16)
                }
            }
            for (var k = 0; k < number; k++) {
                if (Number(this.list3[this.list3.length - 1 - k])) {
                    this.openList.push(k + 32)
                }
            }
            for (var l = 0; l < number; l++) {
                if (Number(this.list4[this.list4.length - 1 - l])) {
                    this.openList.push(l + 48)
                }
            }
            for (var m = 0; m < number; m++) {
                if (Number(this.list5[this.list5.length - 1 - m])) {
                    this.openList.push(m + 64)
                }
            }
            for (var n = 0; n < number; n++) {
                if (Number(this.list6[this.list6.length - 1 - n])) {
                    this.openList.push(n + 80)
                }
            }
        },
        dataInit() {
            var store = this.$store.state
            var data = {
                deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
            };
            this.api.readFi_sensorchannelfi(data).then((res) => {
                this.loading.close()
                if (res.data.code == 200) {
                    this.inputData = JSON.parse(JSON.stringify(res.data.data));
                    this.inputDataNew = res.data.data;
                    this.getData272()
                    this.getSensorType()
                    this.getCountData()
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
        //全选文本
        selectValue(e) {
            var store = this.$store.state
            store.nowInput = e.target.value
            e.currentTarget.select();
        },
        getSendData(number) {
            var number1 = number
            this.typeList.some((el, index) => {
                if (el.value == this.inputData[this.numberList[this.active]]) {
                    if (el.countType == 0) {
                        number1 = number
                    } else if (el.countType == 1) {
                        number1 = this.sendCountType1(number)
                    } else if (el.countType == 2) {
                        number1 = this.sendCountType2(number)
                    } else if (el.countType == 3) {
                        number1 = this.sendCountType3(number)
                    } else if (el.countType == 4) {
                        number1 = this.sendCountType4(number)
                    }
                }
            })
            return number1
        },
        //需要反向计算提交
        change1(code, el) {
            // var store = this.$store.state
            // var data = {
            //     equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
            //     regAddress: code,
            //     num: this.getSendData(el.target.value),
            // };
            // this.delayTimer(0, data);
        },
        //需要反向计算提交
        blurChange1(code, el) {
            var store = this.$store.state
            var data = {
                equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                regAddress: code,
                num: this.getSendData(el.target.value),
            }; //避免开启多个计时器
            if (data.num != this.inputData[code]) {
                // this.timer && clearInterval(this.timer);
                this.changeData(data);
            }
            // if (this.timer) {
            //     this.timer && clearInterval(this.timer);
            //     this.changeData(data);
            // }

        },
        //失去焦点
        blurChange(code, el) {
            var store = this.$store.state
            var data = {
                equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                regAddress: code,
                num: el.target.value,
            }; //避免开启多个计时器
            if (data.num != this.inputData[code]) {
                // this.timer && clearInterval(this.timer);
                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.postwriteFi_write(data).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: "success",
                    });
                    store.nowInput = ''
                    this.getSaveCountData()
                    // this.dataInit();
                    for (var i = 0; i < 96; i++) {
                        if (this.numberList[i] == data.regAddress) {
                            this.inputData[this.numberList[i]] = data.num

                        }
                    }


                    this.getCountData()
                } else {
                    this.inputData[data.regAddress] = store.nowInput
                    this.$message.error(res.data.msg);
                }
                this.timer = null
            });
        },
    },

}
</script>
<style lang="scss"></style>