<template>
  <div class="page-wrapper">
    <!-- 预警配置 -->
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :wrapper-col="{ span: 24 }"
    >
      <a-collapse
        default-active-key="a"
        expand-icon-position="right"
        class="collapse-header-divide"
      >
        <a-collapse-panel
          key="a"
          :header="$t('SMALL_DOWNTIME_CONFIG')"
          :show-arrow="false"
          disabled
        >
          <a-row :gutter="24" type="flex">
            <a-col :span="24" class="warn-col">
              <a-form-model-item prop="duration">
                <div style="display: flex">
                  <div class="label-prefix mr-1">单次宕机持续时间在</div>
                  <a-input-number
                    v-model="form.duration"
                    :disabled="!isEdit"
                    :min="1"
                    :max="10000"
                    :placeholder="$t('PLACEENTER')"
                  />
                  <div class="label-suffix ml-1">min及以内为小宕机</div>
                </div>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-collapse-panel>
      </a-collapse>
    </a-form-model>
    <div class="page-bottom-op">
      <a-button v-show="isEdit" type="primary" @click="handleSubmit">
        <i class="iconfont icon-baocun" />
        {{ $t("SAVE") }}
      </a-button>
      <a-button v-show="isEdit" @click="handleCancel">
        <i class="iconfont icon-quxiao" />
        {{ $t("CANCEL") }}
      </a-button>
      <a-button v-show="!isEdit" type="primary" @click="handleEdit">
        <i class="iconfont icon-baocun" />
        {{ $t("EDIT") }}
      </a-button>
    </div>
  </div>
</template>

<script>
import { cloneDeep } from "lodash";
import ApiConstant from "@/api/ApiConstant";

export default {
  data() {
    return {
      // 编辑状态
      isEdit: false,
      form: {
        oeeLimit: null,
      },
    };
  },
  computed: {
    rules() {
      return {};
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epm/erm/repair-allow-config`)
        .then((res) => {
          this.form = { ...res.data?.data };
        });
    },
    // 取消
    handleCancel() {
      this.isEdit = false;
      this.form = cloneDeep(this.formOld);
    },
    // 编辑
    handleEdit() {
      this.isEdit = true;
      this.formOld = cloneDeep(this.form);
    },
    // 保存
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const options = this.form;
          this.$axios
            .put(
              `${ApiConstant.PREFIX_CORE}/api/epm/erm/repair-allow-config`,
              options
            )
            .then(() => {
              this.isEdit = false;
              this.$message.success(this.$t("EDIT_SUCCESS"));
              this.init();
            });
        }
      });
    },
  },
};
</script>

<style lang="less">
.warn-col .ant-input-affix-wrapper {
  width: 180px;
}
</style>
