<template>
  <div id="paramSetting">
    <el-main>

      <div style="margin-bottom: 10px">
        <el-button size="medium" icon="el-icon-back" type="text" @click="back">返回</el-button>
        <span style="margin-left: 20px; font-size: 18px">参数设定</span>
      </div>

      <div style="display: flex;flex-direction: row">
        <div class="divdiv">
          <el-header style="margin-top: 20px">参数修正</el-header>
          <el-form label-position="left" label-width="120px" :model="formData">
            <el-form-item label="排风温度修正">
              <el-input v-model="formData.WD1_XZ" readonly style="width: 240px;" @click.native="dialog1"></el-input>
            </el-form-item>

            <el-form-item label="排风湿度修正">
              <el-input v-model="formData.SD1_XZ" readonly style="width: 240px;" @click.native="dialog2"></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="divdiv">
          <el-header style="margin-top: 20px">PID控制参数</el-header>
          <el-form label-position="left" label-width="80px" :model="formData">
            <el-form-item label="加热比例">
              <el-input v-model="formData.JR_P" readonly @click.native="dialogA"></el-input>
            </el-form-item>
            <el-form-item label="加热积分">
              <el-input v-model="formData.JR_I" readonly @click.native="dialogB"></el-input>
            </el-form-item>
            <el-form-item label="降温比例">
              <el-input v-model="formData.ZL_P" readonly @click.native="dialogC"></el-input>
            </el-form-item>
            <el-form-item label="降温积分">
              <el-input v-model="formData.ZL_I" readonly @click.native="dialogD"></el-input>
            </el-form-item>
            <el-form-item label="加湿比例">
              <el-input v-model="formData.JS_P" readonly @click.native="dialogE"></el-input>
            </el-form-item>
            <el-form-item label="加湿积分">
              <el-input v-model="formData.JS_I" readonly @click.native="dialogF"></el-input>
            </el-form-item>
            <el-form-item label="除湿比例">
              <el-input v-model="formData.CS_P" readonly @click.native="dialogG"></el-input>
            </el-form-item>
            <el-form-item label="除湿积分">
              <el-input v-model="formData.CS_I" readonly @click.native="dialogH"></el-input>
            </el-form-item>
          </el-form>

          <div>
            <el-button type="primary" class="button" :class="{'Active_button' :formData.HF_CC == 0}"
                       @click="updateHFCC">恢复出厂设置
            </el-button>
          </div>
        </div>
      </div>

    </el-main>

    <!-- 输入框1 -->
    <div>
      <el-dialog
          title="（输入范围：-50.0至50.0）"
          :visible.sync="dialogVisible1"
          width="25%"
          style="margin-left: 160px;margin-top: 120px"
      >
        <div class="dialog">
          排风温度修正：
          <el-input v-model="objectWD_XZ" placeholder="请输入内容" size="small"
                    style="width: 160px;"></el-input>&nbsp;℃
        </div>
        <div class="dialog">
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="dialogConfirm1">确 定</el-button>
  </span>
        </div>
      </el-dialog>
    </div>

    <!-- 输入框2 -->
    <div>
      <el-dialog
          title="（输入范围：-100至100）"
          :visible.sync="dialogVisible2"
          width="25%"
          style="margin-left: 160px;margin-top: 120px"
      >
        <div class="dialog">
          排风湿度修正：
          <el-input v-model="objectSD_XZ" placeholder="请输入内容" size="small"
                    style="width: 160px;"></el-input>&nbsp;℃
        </div>
        <div class="dialog">
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="dialogConfirm2">确 定</el-button>
  </span>
        </div>
      </el-dialog>
    </div>

    <!-- 输入框JRP -->
    <div>
      <el-dialog
          title="（输入范围：-999至999）"
          :visible.sync="dialogVisibleA"
          width="25%"
          style="margin-left: 160px;margin-top: 120px"
      >
        <div class="dialog">
          加热比例：
          <el-input v-model="objecJRP" placeholder="请输入内容" size="small"
                    style="width: 160px;"></el-input>&nbsp;℃
        </div>
        <div class="dialog">
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleA = false">取 消</el-button>
    <el-button type="primary" @click="dialogConfirmA">确 定</el-button>
  </span>
        </div>
      </el-dialog>
    </div>

    <!-- 输入框JRI -->
    <div>
      <el-dialog
          title="（输入范围：0至999）"
          :visible.sync="dialogVisibleB"
          width="25%"
          style="margin-left: 160px;margin-top: 120px"
      >
        <div class="dialog">
          加热积分：
          <el-input v-model="objectJRI" placeholder="请输入内容" size="small"
                    style="width: 160px;"></el-input>&nbsp;℃
        </div>
        <div class="dialog">
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleB = false">取 消</el-button>
    <el-button type="primary" @click="dialogConfirmB">确 定</el-button>
  </span>
        </div>
      </el-dialog>
    </div>

    <!-- 输入框ZLP -->
    <div>
      <el-dialog
          title="（输入范围：-999至999）"
          :visible.sync="dialogVisibleC"
          width="25%"
          style="margin-left: 160px;margin-top: 120px"
      >
        <div class="dialog">
          降温比例：
          <el-input v-model="objectZLP" placeholder="请输入内容" size="small"
                    style="width: 160px;"></el-input>&nbsp;℃
        </div>
        <div class="dialog">
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleC = false">取 消</el-button>
    <el-button type="primary" @click="dialogConfirmC">确 定</el-button>
  </span>
        </div>
      </el-dialog>
    </div>

    <!-- 输入框ZLI -->
    <div>
      <el-dialog
          title="（输入范围：0至999）"
          :visible.sync="dialogVisibleD"
          width="25%"
          style="margin-left: 160px;margin-top: 120px"
      >
        <div class="dialog">
          降温积分：
          <el-input v-model="objectZLI" placeholder="请输入内容" size="small"
                    style="width: 160px;"></el-input>&nbsp;℃
        </div>
        <div class="dialog">
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleD = false">取 消</el-button>
    <el-button type="primary" @click="dialogConfirmD">确 定</el-button>
  </span>
        </div>
      </el-dialog>
    </div>

    <!-- 输入框JSP -->
    <div>
      <el-dialog
          title="（输入范围：-999至999）"
          :visible.sync="dialogVisibleE"
          width="25%"
          style="margin-left: 160px;margin-top: 120px"
      >
        <div class="dialog">
          加湿比例：
          <el-input v-model="objectJSP" placeholder="请输入内容" size="small"
                    style="width: 160px;"></el-input>&nbsp;℃
        </div>
        <div class="dialog">
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleE = false">取 消</el-button>
    <el-button type="primary" @click="dialogConfirmE">确 定</el-button>
  </span>
        </div>
      </el-dialog>
    </div>

    <!-- 输入框JSI -->
    <div>
      <el-dialog
          title="（输入范围：0至999）"
          :visible.sync="dialogVisibleF"
          width="25%"
          style="margin-left: 160px;margin-top: 120px"
      >
        <div class="dialog">
          加湿积分：
          <el-input v-model="objectJSI" placeholder="请输入内容" size="small"
                    style="width: 160px;"></el-input>&nbsp;℃
        </div>
        <div class="dialog">
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleF = false">取 消</el-button>
    <el-button type="primary" @click="dialogConfirmF">确 定</el-button>
  </span>
        </div>
      </el-dialog>
    </div>

    <!-- 输入框CSP -->
    <div>
      <el-dialog
          title="（输入范围：-999至999）"
          :visible.sync="dialogVisibleG"
          width="25%"
          style="margin-left: 160px;margin-top: 120px"
      >
        <div class="dialog">
          除湿比例：
          <el-input v-model="objectCSP" placeholder="请输入内容" size="small"
                    style="width: 160px;"></el-input>&nbsp;℃
        </div>
        <div class="dialog">
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleG = false">取 消</el-button>
    <el-button type="primary" @click="dialogConfirmG">确 定</el-button>
  </span>
        </div>
      </el-dialog>
    </div>

    <!-- 输入框CSI -->
    <div>
      <el-dialog
          title="（输入范围：0至999）"
          :visible.sync="dialogVisibleH"
          width="25%"
          style="margin-left: 160px;margin-top: 120px"
      >
        <div class="dialog">
          除湿积分：
          <el-input v-model="objectCSI" placeholder="请输入内容" size="small"
                    style="width: 160px;"></el-input>&nbsp;℃
        </div>
        <div class="dialog">
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleH = false">取 消</el-button>
    <el-button type="primary" @click="dialogConfirmH">确 定</el-button>
  </span>
        </div>
      </el-dialog>
    </div>


  </div>

</template>

<script>
export default {
  name: 'paramSetting',
  data() {
    return {
      dialogVisible1: false,
      dialogFormVisible1: false,
      dialogVisible2: false,
      dialogFormVisible2: false,

      dialogVisibleA: false,
      dialogFormVisibleA: false,
      dialogVisibleB: false,
      dialogFormVisibleB: false,

      dialogVisibleC: false,
      dialogFormVisibleC: false,
      dialogVisibleD: false,
      dialogFormVisibleD: false,
      dialogVisibleE: false,
      dialogFormVisibleE: false,
      dialogVisibleF: false,
      dialogFormVisibleF: false,
      dialogVisibleG: false,
      dialogFormVisibleG: false,
      dialogVisibleH: false,
      dialogFormVisibleH: false,

      objectWD_XZ: '',
      objectSD_XZ: '',

      objectZLP: '',
      objectZLI: '',
      objecJRP: '',
      objectJRI: '',
      objectJSP: '',
      objectJSI: '',
      objectCSP: '',
      objectCSI: '',

      formData: {
        ZL_P: '0.0', //制冷回路增益P
        ZL_I: '0.0', //制冷积分时间I
        CS_P: '0.0', //除湿回路增益P
        CS_I: '0.0', //除湿积分时间I
        JR_P: '0.0', //加热回路增益P
        JR_I: '0.0', //加热积分时间I
        JS_P: '0.0', //加湿回路增益P
        JS_I: '0.0', //加湿积分时间I

        WD1_XZ: '0.0', //排风温度修正(单位为℃)
        SD1_XZ: '0.0', //排风湿度修正(单位为%RH)

        HF_CC: '0', //恢复出厂
      }


    }
  },

  created: function () {
    this.getWDXZ()
    this.getSDXZ()
    this.getJR_I()
    this.getJR_P()
    this.getJW_I()
    this.getJW_P()
    this.getJS_I()
    this.getJS_P()
    this.getCS_I()
    this.getCS_P()

    this.getHF_CC()
  },

  methods: {
    //两个修正
    getWDXZ() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '235'
        }
      }).then((res) => {
        this.formData.WD1_XZ = res.data.data.deviceParam.value;
      })
    },
    getSDXZ() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '287'
        }
      }).then((res) => {
        this.formData.SD1_XZ = res.data.data.deviceParam.value;
        console.log(this.formData.SD1_XZ)
      })
    },

    getHF_CC() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '237'
        }
      }).then((res) => {
        this.formData.HF_CC = res.data.data.deviceParam.value;
        console.log(this.formData.HF_CC)
      })
    },

    //8个比例积分
    getJR_P() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '226'
        }
      }).then((res) => {
        this.formData.JR_P = res.data.data.deviceParam.value;
      })
    },
    getJR_I() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '220'
        }
      }).then((res) => {
        this.formData.JR_I = res.data.data.deviceParam.value;
      })
    },
    getJW_P() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '275'
        }
      }).then((res) => {
        this.formData.ZL_P = res.data.data.deviceParam.value;
      })
    },
    getJW_I() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '236'
        }
      }).then((res) => {
        this.formData.ZL_I = res.data.data.deviceParam.value;
      })
    },
    getJS_P() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '304'
        }
      }).then((res) => {
        this.formData.JS_P = res.data.data.deviceParam.value;
      })
    },
    getJS_I() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '299'
        }
      }).then((res) => {
        this.formData.JS_I = res.data.data.deviceParam.value;
      })
    },
    getCS_P() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '240'
        }
      }).then((res) => {
        this.formData.CS_P = res.data.data.deviceParam.value;
      })
    },
    getCS_I() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.detail, {
        params: {
          id: '217'
        }
      }).then((res) => {
        this.formData.CS_I = res.data.data.deviceParam.value;
      })
    },

    dialog1() {
      this.dialogVisible1 = true;

      this.objectWD_XZ = this.formData.WD1_XZ
    },
    dialogConfirm1() {
      this.dialogVisible1 = false;
      this.updateWDXZ()
    },
    updateWDXZ() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.updateParam, {
        params: {
          id: '235',
          value: this.objectWD_XZ,
          name: "WD1_XZ",
          sn: "CK1"
        }
      }).then((res) => {
        this.getWDXZ()
        console.log(res)
      })
    },

    dialog2() {
      this.dialogVisible2 = true;

      this.objectSD_XZ = this.formData.SD1_XZ
    },
    dialogConfirm2() {
      this.dialogVisible2 = false;
      this.updateSDXZ()
    },
    updateSDXZ() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.updateParam, {
        params: {
          id: '287',
          value: this.objectSD_XZ,
          name: "SD1_XZ",
          sn: "CK1"
        }
      }).then((res) => {
        this.getSDXZ()
        console.log(res)
      })
    },

    dialogA() {
      this.dialogVisibleA = true;

      this.objecJRP = this.formData.JR_P
    },
    dialogConfirmA() {
      this.dialogVisibleA = false;
      this.updateJRP()
    },
    updateJRP() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.updateParam, {
        params: {
          id: '226',
          value: this.objecJRP,
          name: "JR_P",
          sn: "CK1"
        }
      }).then((res) => {
        this.getJR_P()
        console.log(res)
      })
    },

    dialogB() {
      this.dialogVisibleB = true;

      this.objectJRI = this.formData.JR_I
    },
    dialogConfirmB() {
      this.dialogVisibleB = false;
      this.updateJRI()
    },
    updateJRI() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.updateParam, {
        params: {
          id: '220',
          value: this.objectJRI,
          name: "JR_I",
          sn: "CK1"
        }
      }).then((res) => {
        this.getJR_I()
        console.log(res)
      })
    },

    //ZLP
    dialogC() {
      this.dialogVisibleC = true;

      this.objectZLP = this.formData.ZL_P
    },
    dialogConfirmC() {
      this.dialogVisibleC = false;
      this.updateZLP()
    },
    updateZLP() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.updateParam, {
        params: {
          id: '275',
          value: this.objectZLP,
          name: "ZL_P",
          sn: "CK1"
        }
      }).then((res) => {
        this.getJW_P()
        console.log(res)
      })
    },

    //ZLI
    dialogD() {
      this.dialogVisibleD = true;

      this.objectZLI = this.formData.ZL_I
    },
    dialogConfirmD() {
      this.dialogVisibleD = false;
      this.updateZLI()
    },
    updateZLI() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.updateParam, {
        params: {
          id: '236',
          value: this.objectZLI,
          name: "ZL_I",
          sn: "CK1"
        }
      }).then((res) => {
        this.getJW_I()
        console.log(res)
      })
    },

    //JSP
    dialogE() {
      this.dialogVisibleE = true;

      this.objectJSP = this.formData.JS_P
    },
    dialogConfirmE() {
      this.dialogVisibleE = false;
      this.updateJSP()
    },
    updateJSP() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.updateParam, {
        params: {
          id: '304',
          value: this.objectJSP,
          name: "JS_P",
          sn: "CK1"
        }
      }).then((res) => {
        this.getJS_P()
        console.log(res)
      })
    },

    //JSI
    dialogF() {
      this.dialogVisibleF = true;

      this.objectJSI = this.formData.JS_I
    },
    dialogConfirmF() {
      this.dialogVisibleF = false;
      this.updateJSI()
    },
    updateJSI() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.updateParam, {
        params: {
          id: '299',
          value: this.objectJSI,
          name: "JS_I",
          sn: "CK1"
        }
      }).then((res) => {
        this.getJS_I()
        console.log(res)
      })
    },

    //CSP
    dialogG() {
      this.dialogVisibleG = true;

      this.objectCSP = this.formData.CS_P
    },
    dialogConfirmG() {
      this.dialogVisibleG = false;
      this.updateCSP()
    },
    updateCSP() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.updateParam, {
        params: {
          id: '240',
          value: this.objectCSP,
          name: "CS_P",
          sn: "CK1"
        }
      }).then((res) => {
        this.getCS_P()
        console.log(res)
      })
    },

    //CSI
    dialogH() {
      this.dialogVisibleH = true;

      this.objectCSI = this.formData.CS_I
    },
    dialogConfirmH() {
      this.dialogVisibleH = false;
      this.updateCSI()
    },
    updateCSI() {
      const vm = this;
      vm.$http.get(vm.$api.deviceParam.updateParam, {
        params: {
          id: '217',
          value: this.objectCSI,
          name: "CS_I",
          sn: "CK1"
        }
      }).then((res) => {
        this.getCS_I()
        console.log(res)
      })
    },

    updateHFCC() {
      this.formData.HF_CC == 1 ? this.formData.HF_CC = 0 : this.formData.HF_CC = 1;

      const vm = this;
      vm.$http.get(vm.$api.deviceParam.updateParam, {
        params: {
          id: '237',
          value: this.formData.HF_CC,
          name: "HF_CC",
          sn: "CK1"
        }
      }).then((res) => {
        this.getHF_CC()
        console.log(res)
      })
    },

    back() {
      let vm = this;
      vm.$router.back()
    },
  }
}
</script>

<style scoped>
.el-form-item {
  width: 350px;
}

.divdiv {
  margin-top: 20px;
  text-align: center;
  width: 420px;
  height: 640px;

  margin-left: 240px;
  border: solid 3px gray;
}

.dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.button {
  background-color: #545c64;
  color: white;
  border: 0px
}

.Active_button {
  background-color: crimson;
}
</style>
