<template>
  <div class="container-cluster-form">
    <el-form :model="state.form" ref="form_ref" :rules="state.rules" label-width="110px">
      <gap-title :hasLine="true" title="预警范围"></gap-title>
      <div class="container-cluster-form-item warning-scope-form-item">
        <el-form-item :label="typeToTextJson[props.type][0]" prop="value1">
          <el-input v-model="state.form.value1" placeholder="请输入">
            <template #prepend>
              <el-select class="rule-select" v-model="state.form.value1_select" style="width: 114px">
                <el-option v-for="(value, key) in selectRule" :key="key" :label="value" :value="key" />
              </el-select>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item :label="typeToTextJson[props.type][1]" prop="value2">
          <el-input v-model="state.form.value2" placeholder="请输入">
            <template #prepend>
              <el-select class="rule-select" v-model="state.form.value2_select" style="width: 114px">
                <el-option v-for="(value, key) in selectRule" :key="key" :label="value" :value="key" />
              </el-select>
            </template>
          </el-input>
        </el-form-item>
      </div>
      <gap-title :hasLine="true" title="预警规则"></gap-title>
      <div class="container-cluster-form-item">
        <el-form-item label="风险程度" prop="risk_level">
          <el-select style="flex: 1" v-model="state.form.risk_level" placeholder="请选择" filterable>
            <el-option v-for="item in riskLevelOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
import gapTitle from "@/components/gap-title.vue";
const props = defineProps({
  type: {
    type: String,
    default: "",
  },
  form: {
    type: Object,
    default: null,
  },
});
const typeToTextJson = {
  colony: ["集群", "核心组件"],
  node: ["集群", "节点"],
  group: ["命名空间", "容器"],
};
const selectRule = ref({
  1: "遍历",
  2: "等于",
  3: "不等于",
  4: "正则匹配",
  5: "正则不匹配",
});

const state = reactive({
  form: {
    value1: "",
    value1_select: "1",
    value2: "",
    value2_select: "1",
    risk_level: "",
  },
  rules: {
    value1: [{ required: true, message: "请输入", trigger: "blur" }],
    value2: [{ required: true, message: "请输入", trigger: "blur" }],
    risk_level: [{ required: true, message: "请选择", trigger: "change" }],
  },
});
const form_ref = ref(null);
watch(
  () => props.type,
  (n) => {
    state.form.value1 = "";
    state.form.value1_select = "1";
    state.form.value2 = "";
    state.form.value2_select = "1";
    form_ref.value.clearValidate(["value1", "value2", "risk_level"]);
  }
);
watch(
  () => props.form,
  (n) => {
    if (!n) return;
    state.form.value1 = n.value1;
    state.form.value1_select = n.value1_select || "1";
    state.form.value2 = n.value2;
    state.form.value2_select = n.value2_select || "1";
    state.form.risk_level = n.risk_level;
  },
  {
    deep: true,
    immediate: true,
  }
);
const riskLevelOptions = ref([
  {
    id: 1,
    name: "重大风险",
  },
  {
    id: 2,
    name: "较大风险",
  },
  {
    id: 3,
    name: "一般风险",
  },
  {
    id: 4,
    name: "低风险",
  },
]);
const Submit = async () => {
  let form_valid = await new Promise((resolve, reject) => {
    form_ref.value.validate((res) => resolve(res));
  });
  return form_valid;
};
defineExpose({
  Submit,
  form: state.form,
  form_ref,
});
</script>

<style lang="scss" scoped>
.container-cluster-form {
  :deep(.gap-title) {
    margin-bottom: 16px;
  }
  &-item {
    max-width: 1080px;
    width: 100%;
    padding-left: 8px;
  }
  .warning-scope-form-item {
    display: flex;
    align-items: center;
    :deep(.el-form-item) {
      flex: 1;
      .el-input-group__prepend {
        border-radius: 4px !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        overflow: hidden;
      }
    }
    :deep(.el-input-group__prepend) {
      background-color: #2b4695;
      .el-input__wrapper {
        box-shadow: 1px 0 0 0 #2b4695 !important;
        &,
        .el-input__inner {
          color: #fff;
        }
        .el-input__wrapper {
          color: #fff;
        }
      }
    }
  }
}
</style>
