<template>
    <div class="irrigateSet sensorSet sensorSet-con">
        <div class="table-title">
            <img src="../../assets/image/sensor.png" alt=""> 传感器配置界面
        </div>
        <div class="sensor-view">
            <div class="left scroll">
                <div @click="toIndex(index)" :class="active == index ? 'active' : ''" v-for="item, index in 48"
                    :key="index">
                    <div>
                        {{ index + 1 }}#传感器通道
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="right-top">
                    <div class="right-sel">
                        <div @click="changeOpen(active)">
                            <div v-if="getOpenTrue(active)" class="no-sel"></div>
                            <div v-else class="sel"></div>
                            有效性
                        </div>

                        <!-- <div class="sensor-type">
                           <template v-for="item, index in openTypeList" >
                            <div class="sensor-type-div" v-if="active==index" >
                                <div class="sensor-sel">
                                    <div>
                                        <div @click="changeTypeOpen(index, '0')" :class="item == '1' ? 'no-sel' : 'sel'">
                                        </div>
                                        485通讯类型的传感器
                                    </div>
                                    <div>
                                        <div @click="changeTypeOpen(index, '1')" :class="item == '0' ? 'no-sel' : 'sel'">
                                        </div>
                                        4-20ma模拟量类型的传感器
                                    </div>
                                </div>
                            </div>
                           </template>
                        </div> -->
                    </div>
                    <div class="input-sel">
                        <div class="title">传感器类型 <span v-if="active>39">（4-20ma传感器）</span></div>
                        <el-dropdown @command="handleCommand">
                            <div class="el-dropdown-link">
                                <input v-model="sensorType" type="text" class="input-input" placeholder="选择传感器类型">
                                <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>标定低点AD值</div>
                            <input @blur="blurChange(20904 + (active * 5 + 1), $event)"
                                v-model="inputData[20904 + (active * 5 + 1)]"
                                @input="change(20904 + (active * 5 + 1), $event)" type="number" placeholder="0.0">
                        </div>
                        <div class="input-main">
                            <div>标定低点数据</div>
                            <input @blur="blurChange1(20904 + (active * 5 + 2), $event)"
                                v-model="inputData[20904 + (active * 5 + 2)]"
                                @input="change1(20904 + (active * 5 + 2), $event)" type="number" placeholder="0.0">
                        </div>
                    </div>
                    <div>
                        <div class="input-main">
                            <div>标定高点AD值</div>
                            <input @blur="blurChange(20904 + (active * 5 + 3), $event)"
                                v-model="inputData[20904 + (active * 5 + 3)]"
                                @input="change(20904 + (active * 5 + 3), $event)" type="number" placeholder="0.0">
                        </div>
                        <div class="input-main">
                            <div>标定高点数据</div>
                            <input @blur="blurChange1(20904 + (active * 5 + 4), $event)"
                                v-model="inputData[20904 + (active * 5 + 4)]"
                                @input="change1(20904 + (active * 5 + 4), $event)" type="number" placeholder="0.0">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- <div class="sensor-type">
            <div class="sensor-title">通道输入信号类型</div>
            <div class="sensor-type-div" v-for="item, index in openTypeList" :key="index">
                <div class="name">第{{ index + 1 }}通道</div>
                <div class="sensor-sel">
                    <div>
                        <div @click="changeTypeOpen(index, '0')" :class="item == '1' ? 'no-sel' : 'sel'"></div>
                        485通讯类型的传感器
                    </div>
                    <div>
                        <div @click="changeTypeOpen(index, '1')" :class="item == '0' ? 'no-sel' : 'sel'"></div>
                        4-20ma模拟量类型的传感器
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</template>
<script>
export default {
    data() {
        return {
            active: 0,
            sel1: true,
            sel2: false,
            sel3: false,
            inputData: [],
            sensorType: '',//当前传感器类型
            openList1: [],//当前有效的传感器
            openList2: [],//当前有效的传感器
            openList3: [],//当前有效的传感器
            openTypeList: [],//八个通道输入信号的类型
            typeList: this.$store.state.typeList
        }
    },
    watch: {
        'active'(newVal, oldVal) {
            this.getSensorType()
        },
    },
    mounted() {
        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
        },
        //反向计算提交
        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
        },

        //类型选择
        handleCommand(command) {
            this.typeList.forEach((el, index) => {
                if (el.value == command) {
                    this.sensorType = el.label
                }
            })
            var dataNum = {
                target: {
                    value: command,
                },
            };
            this.changeBtn(20904 + (this.active * 5), dataNum);
        },
        //根据类型修改数据
        getCountData() {
            for (var i = 0; i < 48; i++) {
                this.typeList.forEach((el, index) => {
                    if (el.value == this.inputData[20904 + (i * 5)]) {
                        if (el.countType == 0) {

                        } else if (el.countType == 1) {
                            this.inputData[20904 + (i * 5 + 2)] = this.countType1(this.inputData[20904 + (i * 5 + 2)])
                            this.inputData[20904 + (i * 5 + 4)] = this.countType1(this.inputData[20904 + (i * 5 + 4)])
                        } else if (el.countType == 2) {
                            this.inputData[20904 + (i * 5 + 2)] = this.countType2(this.inputData[20904 + (i * 5 + 2)])
                            this.inputData[20904 + (i * 5 + 4)] = this.countType2(this.inputData[20904 + (i * 5 + 4)])
                        } else if (el.countType == 3) {
                            this.inputData[20904 + (i * 5 + 2)] = this.countType3(this.inputData[20904 + (i * 5 + 2)])
                            this.inputData[20904 + (i * 5 + 4)] = this.countType3(this.inputData[20904 + (i * 5 + 4)])
                        }

                    }
                })
            }

        },
        getSensorType() {
            this.typeList.forEach((el, index) => {
                if (el.value == this.inputData[20904 + (this.active * 5)]) {
                    this.sensorType = el.label
                }
            })
        },
        toIndex(index) {
            this.active = index
        },
        padString(str, length) {
            return str.padStart(length, '0');
        },
        changeOpen(active) {
            if (active >= 0 && active < 16) {
                if (this.openList1[active] == '1') {
                    this.openList1[active] = '0'
                } else {
                    this.openList1[active] = '1'
                }
                var revList = this.openList1.slice().reverse()
                var num = revList.join("");
                var dataNum = {
                    target: {
                        value: parseInt(num, 2),
                    },
                };
                this.changeBtn('20901', dataNum);
            } else if (active >= 16 && active < 32) {
                if (this.openList2[active - 16] == '1') {
                    this.openList2[active - 16] = '0'
                } else {
                    this.openList2[active - 16] = '1'
                }
                var revList = this.openList2.slice().reverse()
                var num = revList.join("");
                var dataNum = {
                    target: {
                        value: parseInt(num, 2),
                    },
                };
                this.changeBtn('20902', dataNum);
            } else if (active >= 32 && active < 48) {
                if (this.openList3[active - 32] == '1') {
                    this.openList3[active - 32] = '0'
                } else {
                    this.openList3[active - 32] = '1'
                }
                var revList = this.openList3.slice().reverse()
                var num = revList.join("");
                var dataNum = {
                    target: {
                        value: parseInt(num, 2),
                    },
                };
                this.changeBtn('20903', dataNum);
            }
            this.$forceUpdate();
        },
        changeTypeOpen(index, num) {
            this.openTypeList[index] = num
            this.$forceUpdate();
            var openTypeList = this.openTypeList.slice().reverse()
            var num = openTypeList.join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };
            this.changeBtn('20900', dataNum);
        },
        getTypeOpen(active) {
            if (this.openTypeList[active] == '1') {
                return true
            } else {
                return false
            }
        },
        getOpenTrue(active) {
            if (active >= 0 && active < 16) {
                if (this.openList1[active] == '1') {
                    return false
                } else {
                    return true
                }
            } else if (active >= 16 && active < 32) {
                if (this.openList2[active - 16] == '1') {
                    return false
                } else {
                    return true
                }
            } else if (active >= 32 && active < 48) {
                if (this.openList3[active - 32] == '1') {
                    return false
                } else {
                    return true
                }
            }


        },
        getOpen() {
            this.openList1 = []
            this.openList2 = []
            this.openList3 = []
            var num1 = this.inputData['20901']
            var num11 = this.padString(num1.toString(2), 16)
            var openList1New
            openList1New = num11.split("")
            openList1New.forEach((el, index) => {
                this.openList1.push(openList1New[openList1New.length - index - 1])
            })

            var num2 = this.inputData['20902']
            var num22 = this.padString(num2.toString(2), 16)
            var openList2New
            openList2New = num22.split("")
            openList2New.forEach((el, index) => {
                this.openList2.push(openList2New[openList2New.length - index - 1])
            })

            var num3 = this.inputData['20903']
            var num33 = this.padString(num3.toString(2), 16)
            var openList3New
            openList3New = num33.split("")
            openList3New.forEach((el, index) => {
                this.openList3.push(openList3New[openList3New.length - index - 1])
            })

            this.openTypeList = []
            var num4 = this.inputData['20900']
            var num44 = this.padString(num4.toString(2), 8)
            var openList4New
            openList4New = num44.split("")
            openList4New.forEach((el, index) => {
                this.openTypeList.push(openList4New[openList4New.length - index - 1])
            })
        },
        dataInit() {
            var store = this.$store.state
            var data = {
                deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,

            };
            this.api.getReadControlSensorChannel(data).then((res) => {
                if (res.data.code == 200) {
                    this.inputData = res.data.data;
                    // this.getData272()
                    this.getOpen()
                    this.getSensorType()
                    this.getCountData()
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
        //全选文本
        selectValue(e) {
            e.currentTarget.select();
        },
        getSendData(number) {
            var number1 = number
            this.typeList.some((el, index) => {
                if (el.value == this.inputData[20904 + (this.active * 5)]) {
                    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)
                    }
                }
            })
            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 (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 (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) {
            this.api.postControlWrite(data).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: "success",
                    });
                    this.dataInit();
                } else {
                    this.$message.error("请求出错");
                }
                this.timer = null
            });
        },
    },

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