<template>
  <div class="setting-block">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="当前模式" name="first">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="当前模式" prop="mode">
            <el-radio-group v-model="ruleForm.mode">
              <el-radio label="1">夏季模式</el-radio>
              <el-radio label="2">冬季模式</el-radio>
              <el-radio label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="额定人数" name="second">
        <el-tabs v-model="areaIndex" @tab-click="changeArea">
          <el-tab-pane label="业务区" name="1">
            <el-form
              :model="ruleForm1"
              :rules="rules1"
              ref="ruleForm1"
              label-width="120px"
              class="demo-ruleForm"
            >
              <el-form-item label="总人数" prop="total">
                <el-input
                  size="small"
                  v-model="ruleForm1.total"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="一号楼额定人数" prop="floorOne">
                <el-input
                  size="small"
                  v-model="ruleForm1.floorOne"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="二号楼额定人数" prop="floorTwo">
                <el-input disabled
                  size="small"
                  v-model="ruleForm1.floorTwo"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="三号楼额定人数" prop="floorThree">
                <el-input
                  size="small"
                  v-model="ruleForm1.floorThree"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="四号楼额定人数" prop="floorFour">
                <el-input
                  size="small"
                  v-model="ruleForm1.floorFour"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="五号楼额定人数" prop="floorFive">
                <el-input
                  size="small"
                  v-model="ruleForm1.floorFive"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="六号楼额定人数" prop="floorSix">
                <el-input
                  size="small"
                  v-model="ruleForm1.floorSix"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm1')"
                  >提交</el-button
                >
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="塔台" name="2">
            <el-form
              :model="towerRuleForm1"
              :rules="towerRules1"
              ref="towerRuleForm1"
              label-width="120px"
              class="demo-ruleForm"
            >
              <el-form-item label="总人数" prop="total">
                <el-input
                  size="small"
                  v-model="towerRuleForm1.total"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="塔楼额定人数" prop="floorOne">
                <el-input
                  size="small"
                  v-model="towerRuleForm1.floorOne"
                  style="width: 200px"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="辅楼额定人数" prop="floorTwo">
                <el-input
                  size="small"
                  v-model="towerRuleForm1.floorTwo"
                  style="width: 200px"
                >
                </el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm('towerRuleForm1')"
                  >提交</el-button
                >
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="园区面积" name="third">
        <el-form
          :model="areaForm"
          :rules="areaRules"
          ref="areaForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="业务区室内面积" prop="ywqAreaIn">
            <el-input
              size="small"
              v-model="areaForm.ywqAreaIn"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="业务区室外面积" prop="ywqAreaOut">
            <el-input
              size="small"
              v-model="areaForm.ywqAreaOut"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="塔台室内面积" prop="ttAreaIn">
            <el-input
              size="small"
              v-model="areaForm.ttAreaIn"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="塔台室外面积" prop="ttAreaOut">
            <el-input
              size="small"
              v-model="areaForm.ttAreaOut"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('areaForm')"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { setWarmMode, getWarmMode } from "@/api/garden/monitoring";
import { getPeople, setPeople, getArea, setArea } from "@/api/source/total";
export default {
  data() {
    return {
      activeName: "first", //模式/人数/面积
      areaIndex: "1", //业务区/塔台人数
      ruleForm: {
        //模式
        mode: "1",
      },
      towerRuleForm1: {
        //塔台人数
        total: "", //总
        floorOne: "", //塔楼
        floorTwo: "", //辅楼
      },
      ruleForm1: {
        total: "", //业务区 总
        floorOne: "", //业务区 一号楼
        floorTwo: "", //业务区 二号楼
        floorThree: "",
        floorFour: "",
        floorFive: "",
        floorSix: "",
      },
      areaForm: {
        //面积
        ywqAreaIn: "", //业务区室内面积
        ywqAreaOut: "", //业务区室外面积
        ttAreaIn: "", //塔台室内面积
        ttAreaOut: "", //塔台室外面积
      },
      rules: {
        //模式
        mode: [
          {
            required: true,
            message: "请选择当前模式",
            trigger: "change",
          },
        ],
      },
      rules1: {
        //人数 业务区
        total: [
          {
            required: true,
            message: "请输入总人数",
            trigger: "change",
          },
        ],
        floorOne: [
          {
            required: true,
            message: "请输入一号楼额定人数",
            trigger: "change",
          },
        ],
        floorTwo: [
          {
            required: true,
            message: "请输入二号楼额定人数",
            trigger: "change",
          },
        ],
        floorThree: [
          {
            required: true,
            message: "请输入三号楼额定人数",
            trigger: "change",
          },
        ],
        floorFour: [
          {
            required: true,
            message: "请输入四号楼额定人数",
            trigger: "change",
          },
        ],
        floorFive: [
          {
            required: true,
            message: "请输入五号楼额定人数",
            trigger: "change",
          },
        ],
        floorSix: [
          {
            required: true,
            message: "请输入六号楼额定人数",
            trigger: "change",
          },
        ],
      },
      towerRules1: {
        //塔台人数
        total: [
          {
            required: true,
            message: "请输入总人数",
            trigger: "change",
          },
        ],
        floorOne: [
          {
            required: true,
            message: "请输入塔楼额定人数",
            trigger: "change",
          },
        ],
        floorTwo: [
          {
            required: true,
            message: "请输入辅楼额定人数",
            trigger: "change",
          },
        ],
      },
      areaRules: {
        //面积
        ywqAreaIn: [
          {
            required: true,
            message: "请输入业务区室内面积",
            trigger: "change",
          },
        ],
        ywqAreaOut: [
          {
            required: true,
            message: "请输入业务区室外面积",
            trigger: "change",
          },
        ],
        ttAreaIn: [
          {
            required: true,
            message: "请输入塔台室内面积",
            trigger: "change",
          },
        ],
        ttAreaOut: [
          {
            required: true,
            message: "请输入塔台室外面积",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    this.getWarmMode();
  },
  methods: {
    handleClick(tab, event) {
      this.activeName = tab.name;
      if (this.activeName == "second") {
        this.getPeople();
      } else if (this.activeName == "third") {
        this.getArea();
      } else {
        this.getWarmMode();
      }
    },
    changeArea(tab, event) {
      this.areaIndex = tab.name;
      this.getPeople();
    },
    //园区人数查询
    getPeople() {
      getPeople(this.areaIndex).then((res) => {
        //获取园区人数
        if (res.data.code == 200) {
          const data = res.data.data;
          if (this.areaIndex == 1) {
            for (let i = 0; i < data.length; i++) {
              if (data[i].dictKey == "0") {
                this.ruleForm1.total = data[i].dictValue;
              } else if (data[i].dictKey == "1") {
                this.ruleForm1.floorOne = data[i].dictValue;
              } else if (data[i].dictKey == "2") {
                this.ruleForm1.floorTwo = data[i].dictValue;
              } else if (data[i].dictKey == "3") {
                this.ruleForm1.floorThree = data[i].dictValue;
              } else if (data[i].dictKey == "4") {
                this.ruleForm1.floorFour = data[i].dictValue;
              } else if (data[i].dictKey == "5") {
                this.ruleForm1.floorFive = data[i].dictValue;
              } else if (data[i].dictKey == "6") {
                this.ruleForm1.floorSix = data[i].dictValue;
              }
            }
          } else {
            this.towerRuleForm1 = {
              total: "", //总
              floorOne: "", //塔楼
              floorTwo: "", //辅楼
            };
            for (let i = 0; i < data.length; i++) {
              if (data[i].dictKey == "100") {
                this.towerRuleForm1.total = data[i].dictValue;
              } else if (data[i].dictKey == "101") {
                this.towerRuleForm1.floorOne = data[i].dictValue;
              } else if (data[i].dictKey == "102") {
                this.towerRuleForm1.floorTwo = data[i].dictValue;
              }
            }
          }
        }
      });
    },
    //园区面积
    getArea() {
      getArea().then((res) => {
        const data = res.data.data;
        for (let i = 0; i < data.length; i++) {
          if (data[i].dictKey == "10") {
            this.areaForm.ywqAreaIn = data[i].dictValue;
          } else if (data[i].dictKey == "11") {
            this.areaForm.ywqAreaOut = data[i].dictValue;
          } else if (data[i].dictKey == "20") {
            this.areaForm.ttAreaIn = data[i].dictValue;
          } else if (data[i].dictKey == "21") {
            this.areaForm.ttAreaOut = data[i].dictValue;
          }
        }
      });
    },
    //耗热模式
    getWarmMode() {
      getWarmMode().then((res) => {
        const data = res.data.data;
        this.ruleForm.mode = data.dictValue;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (formName == "ruleForm") {
            setWarmMode(this.ruleForm.mode).then((res) => {
              if (res.data.code == 200) {
                this.$message.success("提交成功！");
              }
            });
          } else {
            let arr = [];
            if (formName == "ruleForm1") {
              arr = [
                {
                  dictKey: 0,
                  dictValue: this.ruleForm1.total,
                },
                {
                  dictKey: 1,
                  dictValue: this.ruleForm1.floorOne,
                },
                {
                  dictKey: 2,
                  dictValue: this.ruleForm1.floorTwo,
                },
                {
                  dictKey: 3,
                  dictValue: this.ruleForm1.floorThree,
                },
                {
                  dictKey: 4,
                  dictValue: this.ruleForm1.floorFour,
                },
                {
                  dictKey: 5,
                  dictValue: this.ruleForm1.floorFive,
                },
                {
                  dictKey: 6,
                  dictValue: this.ruleForm1.floorSix,
                },
              ];
            } else if (formName == "towerRuleForm1") {
              arr = [
                {
                  dictKey: 100,
                  dictValue: this.towerRuleForm1.total,
                },
                {
                  dictKey: 101,
                  dictValue: this.towerRuleForm1.floorOne,
                },
                {
                  dictKey: 102,
                  dictValue: this.towerRuleForm1.floorTwo,
                },
              ];
            } else if (formName == "areaForm") {
              arr = [
                {
                  dictKey: 10,
                  dictValue: this.areaForm.ywqAreaIn,
                },
                {
                  dictKey: 11,
                  dictValue: this.areaForm.ywqAreaOut,
                },
                {
                  dictKey: 20,
                  dictValue: this.areaForm.ttAreaIn,
                },
                {
                  dictKey: 21,
                  dictValue: this.areaForm.ttAreaOut,
                },
              ];
            }
            if (this.activeName == "second") {
              setPeople(JSON.stringify(arr), this.areaIndex).then((res) => {
                if (res.data.code == 200) {
                  this.$message.success("提交成功！");
                  this.$refs[formName].resetFields();
                  this.getPeople();
                }
              });
            } else if (this.activeName == "third") {
              setArea(JSON.stringify(arr), this.areaIndex).then((res) => {
                if (res.data.code == 200) {
                  this.$message.success("提交成功！");
                  this.$refs[formName].resetFields();
                  this.getArea();
                }
              });
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.setting-block {
  width: 90%;
  margin: 40px 5%;
}
</style>
