<template>
    <div class="intrinsicParameter">
        <div class="table-title">
            <img src="../../assets/img/intrinsicParameter.png" alt="">设备固有参数
        </div>
        <div class="flex-view border-none shrink-none padding-none">
          
            <div class="input-main-80">
                <span>土壤传感器安装数量:</span>
                <input @blur="blurChange(10031, $event)" v-model="inputData[10031]" @input="change(10031, $event)"
                 type="text" placeholder="0">
            </div>
            
            <div class="input-main-80">
                <span>出水流量脉冲(P/L):</span>
                <input @blur="blurChange(10030, $event)" v-model="inputData[10030]" @input="change(10030, $event)"
                 type="text" placeholder="0">
            </div>
        </div>
        <div class="flex-view border-none shrink-none padding-none" v-for="item,index in 40" :key="index">
            <div class=" input-main-80">
                <span>{{index+1}}#灌溉组土壤温度传感器选择</span>
                  <input @blur="blurChange(10080+index, $event)" v-model="inputData[10080+index]" @input="change(10080+index, $event)"
                 type="text" placeholder="0">
                 <span>#土壤温度</span>
                <!-- <el-dropdown @command="handleCommand($event,10080+index)">
                    <div class="el-dropdown-link">
                        <input v-model="inputDataNew[10080+index]" 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-80">
                <span>{{index+1}}#灌溉组土壤湿度传感器选择</span>
                <input @blur="blurChange(10040+index, $event)" v-model="inputData[10040+index]" @input="change(10040+index, $event)"
                 type="text" placeholder="0">
                 <span>#土壤湿度</span>
                <!-- <el-dropdown @command="handleCommand($event,10040+index)">
                    <div class="el-dropdown-link">
                        <input v-model="inputDataNew[10040+index]" 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>
       
     <el-dialog title="请输入密码" class="vrcode-model confirm-psw" top="30vh" :close-on-click-modal="false" :append-to-body="true" :visible.sync="warnModel"
            width="700px">
            <div class="vrcode-model-title vrcode-model-title-282">请输入密码</div>
            <div class="warning-model" style="padding: 0 30px;">
                <div class="flex-view border-none">
                    <div class="input-main">
                        <div>密码:</div>
                        <input type="text" v-model="modelPassword">
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="modelClose">取 消</el-button>
                <el-button type="success" @click="modelConfirm">确 认</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
    warnModel: true,
            modelPassword:'',
            sensorType: '',
            typeList1: [
                // { label: '平均1#土壤湿度', value: 0 },
            { label: '1#土壤温度', value: 1 },
            { label: '2#土壤温度', value: 2 },
            { label: '3#土壤温度', value: 3 },
            { label: '4#土壤温度', value: 4 },
            { label: '5#土壤温度', value: 5 },
            { label: '6#土壤温度', value: 6 },
            { label: '7#土壤温度', value: 7 },
            { label: '8#土壤温度', value: 8 },
            { label: '9#土壤温度', value: 9 },
            { label: '10#土壤温度', value: 10 },
            { label: '11#土壤温度', value: 11 },
            { label: '12#土壤温度', value: 12 },
            { label: '13#土壤温度', value: 13 },
            { label: '14#土壤温度', value: 14 },],
            list1:40,
            typeList2: [
                // { label: '平均1#土壤湿度', value: 0 },
            { label: '1#土壤湿度', value: 1 },
            { label: '2#土壤湿度', value: 2 },
            { label: '3#土壤湿度', value: 3 },
            { label: '4#土壤湿度', value: 4 },
            { label: '5#土壤湿度', value: 5 },
            { label: '6#土壤湿度', value: 6 },
            { label: '7#土壤湿度', value: 7 },
            { label: '8#土壤湿度', value: 8 },
            { label: '9#土壤湿度', value: 9 },
            { label: '10#土壤湿度', value: 10 },
            { label: '11#土壤湿度', value: 11 },
            { label: '12#土壤湿度', value: 12 },
            { label: '13#土壤湿度', value: 13 },
            { label: '14#土壤湿度', value: 14 },],
            list2:40,
            typeList3: [
            { label: '加热模式', value: 1 },
            { label: '制冷模式', value: 2 },],
            inputData:[],
            inputDataNew:[],
      loading:null,
        }
    },
    watch: {
   
   '$store.state.equipmentIndex'(newVal, oldVal) {
this.dataInit();
},
},
    mounted() { 
       
        this.dataInit()
        //input获取焦点后全选
        let inputList = document.querySelectorAll('input');
        for (let index = 0; index < inputList.length; index++) {
            inputList[index].onfocus = this.selectValue;//input放入焦点，全选文本
        }
    },
    methods: {
                modelClose(){
            this.$router.go(-1); // 返回前一页
        },
modelConfirm(){
        if(this.modelPassword=='230509'){
            this.warnModel=false
        }else{
            this.$message('密码错误');
        }
},
          //失去焦点 计算公式 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
            }
        },
        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
        },
        getData3(data) {
            var name=''
            this.typeList3.forEach((el, index) => {
                if (el.value == data) {
                   name=el.label
                }
            })
            return name
        },
        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.readFi_intrinsicparameterfi(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))
                    
                    // for (let i = 0; i < 40; i++) {
                    //     this.inputDataNew[10080+i]=this.getData1(this.inputData[10080+i])
                    //     this.inputDataNew[10040+i]=this.getData2(this.inputData[10040+i])
                        
                        
                    //     }
                    // this.list1.forEach((el,index)=>{
                    //     this.inputDataNew[el]=this.getData1(this.inputData[el])
                    // })
                    // this.list2.forEach((el,index)=>{
                    //     this.inputDataNew[el]=this.getData2(this.inputData[el])
                    // })
                    // this.inputDataNew[20726]=this.getData3(this.inputData[20726])
                    console.log(this.inputData, this.inputDataNew);
                }
                
            })
        },
             //二进制转换后的补全
             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);
        },
        //类型选择
        handleCommand(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);
        },

         //类型选择
         handleCommand1(command,code) {
            this.typeList3.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);
        },
        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.dataInit();
                } else {
                    this.inputData[data.regAddress] = store.nowInput
                    this.$message.error(res.data.msg);
                }
                this.timer = null
            });
        },
    },

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