<template>
  <div>
    <div class="cum">
      <div class="earlyset">
        <div class="title">去化周期预警设置</div>
        <div class="ucard">
          <div class="earlysetitem">
            <p>初始年份</p>
            <el-date-picker v-model="state.form.del.initYear" type="year" value-format="YYYY" style="width: 100%"
              placeholder="请选择初始年份" size="default" @change="updataClick(state.form.del.type)" />
          </div>
          <div class="earlysetitem">
            <p>Ⅰ级预警上限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.del.earlyWarningUp1" placeholder="请输入Ⅰ级预警上限阈值" @blur="updataClick(state.form.del.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅰ级预警下限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.del.earlyWarningDown1" placeholder="请输入Ⅰ级预警下限阈值"
              @blur="updataClick(state.form.del.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅱ级预警上限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.del.earlyWarningUp2" placeholder="请输入Ⅱ级预警上限阈值" @blur="updataClick(state.form.del.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅱ级预警下限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.del.earlyWarningDown2" placeholder="请输入Ⅱ级预警下限阈值"
              @blur="updataClick(state.form.del.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅲ级预警上限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.del.earlyWarningUp3" placeholder="请输入Ⅲ级预警上限阈值" @blur="updataClick(state.form.del.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅲ级预警下限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.del.earlyWarningDown3" placeholder="请输入Ⅲ级预警下限阈值"
              @blur="updataClick(state.form.del.type)">
            </el-input-number>
          </div>
        </div>
        <div class="title">月环比预警设置</div>
        <div class="ucard">
          <div class="earlysetitem">
            <p>初始年份</p>
            <el-date-picker v-model="state.form.mon.initYear" type="year" value-format="YYYY" style="width: 100%"
              size="default" placeholder="请选择初始年份" />
          </div>
          <div class="earlysetitem">
            <p>Ⅰ级预警上限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.mon.earlyWarningUp1" placeholder="请输入Ⅰ级预警上限阈值" @blur="updataClick(state.form.mon.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅰ级预警下限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.mon.earlyWarningDown1" placeholder="请输入Ⅰ级预警下限阈值"
              @blur="updataClick(state.form.mon.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅱ级预警上限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.mon.earlyWarningUp2" placeholder="请输入Ⅱ级预警上限阈值" @blur="updataClick(state.form.mon.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅱ级预警下限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.mon.earlyWarningDown2" placeholder="请输入Ⅱ级预警下限阈值"
              @blur="updataClick(state.form.mon.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅲ级预警上限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.mon.earlyWarningUp3" placeholder="请输入Ⅲ级预警上限阈值" @blur="updataClick(state.form.mon.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅲ级预警下限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.mon.earlyWarningDown3" placeholder="请输入Ⅲ级预警下限阈值"
              @blur="updataClick(state.form.mon.type)">
            </el-input-number>
          </div>
        </div>
        <div class="title">半年同比预警设置</div>
        <div class="ucard">
          <div class="earlysetitem">
            <p>初始年份</p>
            <el-date-picker v-model="state.form.byear.initYear" type="year" value-format="YYYY" style="width: 100%"
              size="default" placeholder="请选择初始年份" @change="updataClick(state.form.byear.type)" />
          </div>
          <div class="earlysetitem">
            <p>Ⅰ级预警上限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.byear.earlyWarningUp1" placeholder="请输入Ⅰ级预警上限阈值"
              @blur="updataClick(state.form.byear.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅰ级预警下限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.byear.earlyWarningDown1" placeholder="请输入Ⅰ级预警下限阈值"
              @blur="updataClick(state.form.byear.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅱ级预警上限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.byear.earlyWarningUp2" placeholder="请输入Ⅱ级预警上限阈值"
              @blur="updataClick(state.form.byear.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅱ级预警下限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.byear.earlyWarningDown2" placeholder="请输入Ⅱ级预警下限阈值"
              @blur="updataClick(state.form.byear.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅲ级预警上限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.byear.earlyWarningUp3" placeholder="请输入Ⅲ级预警上限阈值"
              @blur="updataClick(state.form.byear.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅲ级预警下限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.byear.earlyWarningDown3" placeholder="请输入Ⅲ级预警下限阈值"
              @blur="updataClick(state.form.byear.type)">
            </el-input-number>
          </div>
        </div>
        <div class="title">年环比预警设置</div>
        <div class="ucard">
          <div class="earlysetitem">
            <p>初始年份</p>
            <el-date-picker v-model="state.form.year.initYear" type="year" value-format="YYYY" style="width: 100%"
              size="default" placeholder="请选择初始年份" @change="updataClick(state.form.year.type)" />
          </div>
          <div class="earlysetitem">
            <p>预警上限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.year.earlyWarningUp3" placeholder="请输入预警上限阈值" @blur="updataClick(state.form.year.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>预警下限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.year.earlyWarningDown3" placeholder="请输入预警下限阈值"
              @blur="updataClick(state.form.year.type)">
            </el-input-number>
          </div>
        </div>
        <div class="title">停工停建预警设置</div>
        <div class="ucard">
          <div class="earlysetitem">
            <p>初始年份</p>
            <el-date-picker v-model="state.form.stop.initYear" type="year" value-format="YYYY" style="width: 100%"
              size="default" placeholder="请选择初始年份" @change="updataClick(state.form.stop.type)" />
          </div>
          <div class="earlysetitem">
            <p>Ⅰ级预警上限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.stop.earlyWarningUp1" placeholder="请输入Ⅰ级预警上限阈值"
              @blur="updataClick(state.form.stop.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅰ级预警下限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.stop.earlyWarningDown1" placeholder="请输入Ⅰ级预警下限阈值"
              @blur="updataClick(state.form.stop.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅱ级预警上限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.stop.earlyWarningUp2" placeholder="请输入Ⅱ级预警上限阈值"
              @blur="updataClick(state.form.stop.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅱ级预警下限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.stop.earlyWarningDown2" placeholder="请输入Ⅱ级预警下限阈值"
              @blur="updataClick(state.form.stop.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅲ级预警上限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.stop.earlyWarningUp3" placeholder="请输入Ⅲ级预警上限阈值"
              @blur="updataClick(state.form.stop.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>Ⅲ级预警下限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.stop.earlyWarningDown3" placeholder="请输入Ⅲ级预警下限阈值"
              @blur="updataClick(state.form.stop.type)">
            </el-input-number>
          </div>
        </div>
        <div class="title">项目预警设置</div>
        <div class="ucard">
          <div class="earlysetitem">
            <p>初始年份</p>
            <el-date-picker v-model="state.form.project.initYear" type="year" value-format="YYYY" style="width: 100%"
              size="default" placeholder="请选择初始年份" @change="updataClick(state.form.project.type)" />
          </div>
          <div class="earlysetitem">
            <p>预警上限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.project.earlyWarningUp3" placeholder="请输入预警上限阈值"
              @blur="updataClick(state.form.project.type)">
            </el-input-number>
          </div>
          <div class="earlysetitem">
            <p>预警下限阈值</p>
            <el-input-number style="width: 100%" size="default" controls-position="right"
              v-model="state.form.project.earlyWarningDown3" placeholder="请输入预警下限阈值"
              @blur="updataClick(state.form.project.type)">
            </el-input-number>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, ref, reactive, onMounted } from "vue";
import { ElMessageBox, ElMessage, ElNotification, TabsPaneContext } from "element-plus";
import { getseting } from "/@/api/early/index";
const state = reactive({
  form: {
    del: {},
    mon: {},
    byear: {},
    year: {},
    stop: {},
    project: {},
  } as any,
});

// 修改信息

const updataClick = (type: number) => {
  // 判断参数 是否必填
  let _form;
  if (type == 1) _form = state.form.project;
  if (type == 2) _form = state.form.mon;
  if (type == 3) _form = state.form.byear;
  if (type == 4) _form = state.form.year;
  if (type == 5) _form = state.form.del;
  if (type == 6) _form = state.form.stop;
  if (type == 1 || type == 4) {
    if (_form.initYear == "") return ElMessage.error("请选择年份");
    if (_form.earlyWarningUp3 == "") return ElMessage.error("请输入预警上限阈值");
    if (_form.earlyWarningDown3 == "") return ElMessage.error("请输入预警下限阈值");
  } else {
    if (_form.initYear == "") return ElMessage.error("请选择年份");
    if (_form.earlyWarningUp1 == "") return ElMessage.error("请输入Ⅰ级预警上限阈值");
    if (_form.earlyWarningDown1 == "") return ElMessage.error("请输入Ⅰ级预警下限阈值");
    if (_form.earlyWarningUp2 == "") return ElMessage.error("请输入Ⅱ级预警上限阈值");
    if (_form.earlyWarningDown2 == "") return ElMessage.error("请输入Ⅱ级预警下限阈值");
    if (_form.earlyWarningUp3 == "") return ElMessage.error("请输入Ⅲ级预警上限阈值");
    if (_form.earlyWarningDown3 == "") return ElMessage.error("请输入Ⅲ级预警下限阈值");
  }
  //   // 上限一样 下限去化周期相反
  //   // Ⅰ级预警>Ⅱ级预警>Ⅲ级预警
  //   let maxnum = Math.max(
  //     _form.earlyWarningUp1,
  //     _form.earlyWarningUp2,
  //     _form.earlyWarningUp3
  //   );
  //   if (maxnum != _form.earlyWarningUp1)
  //     return ElMessage.error(
  //       "Ⅰ级预警上限阈值应该大于Ⅱ级预警上限阈值大于Ⅲ级预警上限阈值"
  //     );
  //   // 判断Ⅱ级预警
  //   let maxnums = Math.max(_form.earlyWarningUp2, _form.earlyWarningUp3);
  //   if (maxnums != _form.earlyWarningUp2)
  //     return ElMessage.error("Ⅱ级预警上限阈值应该大于Ⅲ级预警上限阈值");

  //   if (type == 5) {
  //     // 去化周期相反
  //     let maxnum = Math.max(
  //       _form.earlyWarningDown1,
  //       _form.earlyWarningDown2,
  //       _form.earlyWarningDown3
  //     );
  //     if (maxnum != _form.earlyWarningDown3)
  //       return ElMessage.error(
  //         "Ⅲ级预警下限阈值应该大于Ⅱ级预警下限阈值大于Ⅰ级预警下限阈值"
  //       );
  //     // 判断Ⅱ级预警
  //     let maxnums = Math.max(_form.earlyWarningDown2, _form.earlyWarningDown1);
  //     if (maxnums != _form.earlyWarningDown2)
  //       return ElMessage.error("Ⅱ级预警下限阈值应该大于Ⅰ级预警下限阈值");
  //   } else {
  //     let maxnum = Math.max(
  //       _form.earlyWarningDown1,
  //       _form.earlyWarningDown2,
  //       _form.earlyWarningDown3
  //     );
  //     if (maxnum != _form.earlyWarningDown1)
  //       return ElMessage.error(
  //         "Ⅰ级预警下限阈值应该大于Ⅱ级预警下限阈值大于Ⅲ级预警下限阈值"
  //       );
  //     // 判断Ⅱ级预警
  //     let maxnums = Math.max(_form.earlyWarningDown2, _form.earlyWarningDown3);
  //     if (maxnums != _form.earlyWarningDown2)
  //       return ElMessage.error("Ⅱ级预警下限阈值应该大于Ⅲ级预警下限阈值");
  //   }
  // }

  putdata(_form);
};

async function putdata(dataform: object) {
  let item = await getseting().putset(dataform);
  if (item.code == 500) return ElMessage.error(item.msg);
  else ElMessage.success(item.msg);
  loadData();
}

async function loadData() {
  let items = await getseting().getset();
  let item = items.data;
  state.form = {
    del: item.filter((res: any) => {
      return res.type == 5;
    })[0],
    mon: item.filter((res: any) => {
      return res.type == 2;
    })[0],
    byear: item.filter((res: any) => {
      return res.type == 3;
    })[0],
    year: item.filter((res: any) => {
      return res.type == 4;
    })[0],
    stop: item.filter((res: any) => {
      return res.type == 6;
    })[0],
    project: item.filter((res: any) => {
      return res.type == 1;
    })[0],
  };
}

onMounted(() => {
  loadData();
});
</script>
<style scoped lang="scss">
.cum {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-left: 50px;
  background-color: #fff;

  .earlyset {
    width: 60%;
  }
}

.ucard {
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba($color: #ccc, $alpha: 0.5);
}

.earlysetitem {
  display: flex;
  align-items: center;
  padding: 5px 0;

  p {
    font-size: 13px;
    flex: 0 0 70%;
  }
}

.title {
  margin: 20px 0;
  font-weight: bold;
  font-size: 18px;
  padding-left: 10px;
  border-left: 3px solid #409efe;
}

.demo-ruleForm {
  width: 400px;
}
</style>
