<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('OPERATION_EFFICIENCY_REALTIME_MONITORING')"
          :show-arrow="false"
        >
          <a-row :gutter="24" type="flex">
            <a-col
              v-for="item in warnConfig"
              :key="item.value"
              :span="13"
              class="warn-col"
            >
              <a-form-model-item :prop="item.value">
                <div style="display: flex">
                  <div class="label-prefix mr-1">
                    {{ `${$t(item.labelPrefix)}${$t("BELOW")}` }}
                  </div>
                  <a-input
                    v-model="form[item.value]"
                    :disabled="!isEdit"
                    suffix="%"
                    :placeholder="$t('PLACEENTER')"
                    @change="
                      form[item.value] = form[item.value].match(
                        /\d+(\.\d{0,2})?/
                      )
                        ? form[item.value]
                            .match(/\d+(\.\d{0,2})?/)[0]
                            .replace('e', '')
                        : ''
                    "
                    @blur="(e) => handleBlur(e, item.value)"
                  />
                  <div class="label-suffix ml-1">
                    {{ $t("SHOWN_IN_RED") }}
                  </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";
import FieldExtendMixin from "@/mixins/fieldExtend";

export default {
  mixins: [FieldExtendMixin],
  data() {
    return {
      // 编辑状态
      isEdit: false,
      warnConfig: [
        {
          value: "oeeLimit",
          labelPrefix: "OEE",
        },
        {
          value: "timeLimit",
          labelPrefix: "TIME_UTILIZATION",
        },
        {
          value: "performanceLimit",
          labelPrefix: "PERFORMANCE_VIBRATION_RATE",
        },
        {
          value: "goodLimit",
          labelPrefix: "YIELD",
        },
        {
          value: "achievementLimit",
          labelPrefix: "YIELD_RATE",
        },
        {
          value: "productionLimit",
          labelPrefix: "PRODUCTION_EFFICIENCY",
        },
      ],
      form: {
        oeeLimit: null,
        timeLimit: null,
        performanceLimit: null,
        goodLimit: null,
        achievementLimit: null,
        productionLimit: null,
      },
      formOld: {},
    };
  },
  computed: {
    extandParams() {
      const {
        id,
        oeeLimit,
        timeLimit,
        performanceLimit,
        goodLimit,
        achievementLimit,
        productionLimit,
      } = this.form;
      return {
        id,
        oeeLimit,
        timeLimit,
        performanceLimit,
        goodLimit,
        achievementLimit,
        productionLimit,
      };
    },
    rules() {
      return {};
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epm/iot/iot-warn-limit`)
        .then((res) => {
          const form = this.fieldExResDataFn(res.data?.data);
          this.form = cloneDeep(form);
          this.formOld = {
            ...this.form,
            ...this.formOld,
          };
        });
    },
    handleBlur(e, key) {
      const val = +e.target.value;
      if (val > 100) {
        this.form[key] = 100;
      } else {
        this.form[key] = Number(val);
      }
    },
    // 取消
    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.extandParams;
          this.$axios
            .put(
              `${ApiConstant.PREFIX_CORE}/api/epm/iot/iot-warn-limit`,
              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>
