<template>
  <div class="add-form">
    <el-form :model="state.form" ref="form_ref" :rules="state.rules" label-width="120px">
      <div class="add-form-item">
        <el-form-item label="预警规则名称" prop="name">
          <el-input v-model="state.form.name" :disabled="isEdit" placeholder="请输入预警规则名称"></el-input>
        </el-form-item>
        <el-form-item label="检测类型" prop="type">
          <el-button-group>
            <el-button
              v-for="(value, key) in types"
              :key="key"
              :type="state.form.type_key == key ? 'primary' : ''"
              size="small"
              @click="changeType(key)"
              :disabled="isEdit">
              {{ value }}
            </el-button>
          </el-button-group>
        </el-form-item>
      </div>
      <component
        ref="type_com_ref"
        :is="typeCom[state.form.type_key]"
        :isEdit="isEdit"
        :form="typrFormData"
        @update-duration="updateDuration"></component>
      <gap-title :hasLine="true" title="高级配置"></gap-title>
      <div class="add-form-item">
        <div class="duration">
          <el-form-item label="持续时间" prop="time">
            <el-input v-model="state.form.time" placeholder="请输入持续时间" @input="inputNum">
              <template #prepend>
                <span>当预警持续</span>
              </template>
              <template #append>
                <el-select v-model="state.form.unit" placeholder="请选择">
                  <el-option v-for="(value, key) in unitOptions" :key="key" :label="value.label" :value="key">
                  </el-option>
                </el-select>
              </template>
            </el-input>
            <span class="duration-append">
              <span> 时产生报警 </span>
              <el-popover
                :width="300"
                title=""
                content="大于等于0的正整数，等于0时代表直接报警"
                trigger="hover"
                placement="top-start">
                <template #reference>
                  <bg-icon
                    style="font-size: 12px; color: #a9b1c7; margin-left: 8px; vertical-align: middle"
                    icon="#bg-ic-s-circle-tips"></bg-icon>
                </template>
              </el-popover>
            </span>
          </el-form-item>
        </div>
        <el-form-item label="检查周期" prop="inspection_cycle">
          <el-select class="cycle-select" style="flex: 1" v-model="state.form.inspection_cycle" placeholder="请选择">
            <el-option v-for="item in inspectionCycleOptions" :key="item" :label="item" :value="item"> </el-option>
          </el-select>
          <div class="cycle-unit">分钟</div>
        </el-form-item>
      </div>
      <gap-title :hasLine="true" title="预警工单推送"></gap-title>
      <div class="add-form-item">
        <el-form-item class="no-el-label" label="" prop="push_method">
          <div style="width: 100%">
            <ManualDistributionForm
              ref="manual_distribution_form"
              class="manual-distribution-form"
              labelWidth="120px"
              :noElLabel="false"
              methodLabel="预警通知方式"
              :history="history" />
          </div>
        </el-form-item>
        <el-form-item label="消息推送次数">
          <el-input style="flex: 1" v-model="state.form.push_num" placeholder="请输入消息推送次数" clearable>
            <template #append>次</template>
          </el-input>
        </el-form-item>
        <el-form-item label="消息推送频率">
          <el-input style="flex: 1" v-model="state.form.push_frequency" placeholder="请输入消息推送频率" clearable>
            <template #append>分钟</template>
          </el-input>
        </el-form-item>
        <el-form-item label="是否立即启用" prop="">
          <el-switch
            v-model="state.form.enabled"
            inline-prompt
            active-text="是"
            inactive-text="否"
            :active-value="true"
            :inactive-value="false">
          </el-switch>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref, shallowReactive, computed, nextTick, watch } from "vue";
import gapTitle from "@/components/gap-title.vue";
import ManualDistributionForm from "@/components/manual-distribution/form.vue";
import Static from "./static.vue";
import Custom from "./custom.vue";
import { MAX_DAY } from "@/components/env.js";
import { ElMessage } from "element-plus";
const props = defineProps({
  row: {
    type: Object,
    default: null,
  },
});
const isEdit = computed(() => !!props.row);
const history = computed(() => props.row?.manual_distribution_form || null);
const typrFormData = computed(() => props.row?.type_com_ref || null);
const manual_distribution_form = ref(null);
const typeCom = shallowReactive({
  static: Static,
  custom: Custom,
});
const unitOptions = {
  s: { label: "秒", max: MAX_DAY * 24 * 3600 },
  m: { label: "分钟", max: MAX_DAY * 24 * 60 },
  h: { label: "小时", max: MAX_DAY * 24 },
};
const state = reactive({
  form: {
    name: "",
    type_key: "static",
    time: 10,
    unit: "s",
    inspection_cycle: 1,
    push_num: 1,
    push_frequency: 60,
    enabled: true,
  },
  rules: {
    name: [{ required: true, message: "请输入预警规则名称", trigger: "blur" }],
    time: [{ required: true, message: "请输入持续时间", trigger: "blur" }],
  },
});
const inputNum = () => {
  state.form.time = state.form.time.replace(/[^\d]/g, "");
  let time = +state.form.time;
  let { max } = unitOptions[state.form.unit];
  if (time > +max) {
    state.form.time = max;
  }
};

const updateDuration = (data) => {
  const { duration, duration_unit, check_period } = data;
  state.form.time = duration;
  state.form.unit = duration_unit;
  state.form.inspection_cycle = check_period;
};

const types = {
  static: "静态阈值",
  custom: "自定义",
};
const changeType = async (key) => {
  state.form.type_key = key;
  form_ref.value.clearValidate();
};
const timeOptions = [10, 20, 60, 120, 180, 300];
const inspectionCycleOptions = ref([1, 3, 5, 10, 20]);
const form_ref = ref(null);
const type_com_ref = ref(null);
const Submit = async () => {
  let form_valid = await new Promise((resolve, reject) => {
    form_ref.value.validate((res) => resolve(res));
  });
  let type_com_ref_valid = await type_com_ref.value.Submit();
  let manual_distribution_form_valid = await manual_distribution_form.value.Submit();
  if (form_valid && type_com_ref_valid && manual_distribution_form_valid) {
    let obj = {
      ...state.form,
      type_com_ref: type_com_ref.value?.form || {},
      manual_distribution_form: manual_distribution_form.value?.form || {},
    };
    return {
      res: obj,
      cb: () => {
        if (!isEdit.value) {
          setTimeout(() => {
            type_com_ref.value.form_ref.resetFields();
            manual_distribution_form.value.form_ref.resetFields();
            form_ref.value.resetFields();
          }, 100);
        }
      },
    };
  }
  ElMessage.error("有必填项没有填写");
  return {};
};
watch(
  () => props.row,
  (n) => {
    if (!n) return;
    state.form.name = n.name;
    state.form.type_key = n.type_key;
    state.form.unit = n.unit;
    state.form.time = n.time || 10;
    state.form.inspection_cycle = n.inspection_cycle || 1;
    state.form.push_num = n.push_num || 1;
    state.form.push_frequency = n.push_frequency || 60;
    state.form.enabled = n.enabled || false;
  },
  { deep: true, immediate: true }
);
defineExpose({
  Submit,
});
</script>

<style lang="scss" scoped>
.add-form {
  :deep(.gap-title) {
    margin-bottom: 16px;
  }
  &-item {
    max-width: 1080px;
    width: 100%;
    padding-left: 8px;
    .indicator-expression {
      height: 300px;
      width: 100%;
      :deep(.vue-ace-editor) {
        margin-top: 0;
      }
    }
    .duration {
      flex: 1;
      display: flex;
      align-items: center;
      :deep(.el-form-item) {
        flex: 1;
        .el-input {
          margin-right: 8px;
          flex: 1;
        }
        .el-input-group__prepend {
          width: 102px;
          border-radius: 4px;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
        .el-input-group__append {
          width: 80px;
          border-radius: 4px;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
      //   :deep(.el-form-item__content) {
      //     display: flex;
      //     align-items: center;
      //     gap: 8px;
      //     > .el-input {
      //       flex: 1;
      //       width: 80px;
      //     }
      //   }
    }
    :deep(.el-switch__inner) {
      .is-hide {
        display: none;
      }
    }
    :deep(.el-input-group__append, .el-input-group__prepend) {
      border-radius: 4px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .duration-append {
      display: flex;
      align-items: center;
      color: #404a62;
    }
    .cycle-unit {
      width: 60px;
      height: 36px;
      background-color: #f7f7f9;
      border-radius: 0px 4px 4px 0px;
      border: solid 1px #dadee7;
      text-align: center;
      border-left: 0;
    }
    .cycle-select {
      :deep(.el-input__wrapper) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
}
.no-el-label {
  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }
}
.manual-distribution-form {
  :deep(.el-form-item) {
    &:not(:last-child) {
      margin-bottom: 18px;
    }
  }
}
</style>
<style lang="scss">
.el-form-item {
  min-height: 36px;
  label {
    height: 36px;
    line-height: 36px;
  }
  .el-input__inner {
    min-height: 34px;
  }
}
</style>
