<script setup lang="ts">
import { ref } from 'vue';

import { t } from '@/i18n';

import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import type { ChillersItem, DictValue } from '@/types';

interface Props {
  form: ChillersItem;
  algWtTempCtrlMode: DictValue[];
  algAlways: DictValue[];
  algWtTempSetStep: DictValue[];
}
const formRef = ref<FormInstance>();
const rules: Record<string, Rule[]> = {
  waterTempControlMode: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  continuous: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  stopCompensate: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  restartCompensate: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  safeDiffPressureLower: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  safeLoadLower: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  waterTempStep: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
};
defineProps<Props>();
const formResetFields = () => {
  formRef.value?.resetFields();
};
const formRefSubmit = () => {
  return formRef.value?.validate() || Promise.resolve();
};

defineExpose({
  formRefSubmit,
  formResetFields,
});
</script>

<template>
  <div>
    <AForm ref="formRef" class="algorithm-form" :model="form" label-align="left" layout="vertical" :rules="rules">
      <AFlex class="flex-bottom" wrap="wrap" :gap="38">
        <AFormItem :label="t('algorithmManage.waterTemperatureControlMode')" name="waterTempControlMode">
          <ASelect
            class="select-width"
            v-model:value="form.waterTempControlMode"
            :options="algWtTempCtrlMode"
            :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
            :placeholder="$t('common.plzSelect')"
          />
        </AFormItem>
        <AFormItem :label="t('algorithmManage.continuousOperation')" name="continuous">
          <ASelect
            class="select-width"
            v-model:value="form.continuous"
            :options="algAlways"
            :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
            :placeholder="$t('common.plzSelect')"
          />
        </AFormItem>
        <AFormItem :label="$t('algorithmManage.shutdownCompensationValue')" name="stopCompensate">
          <AInputNumber
            :placeholder="t('common.pleaseEnter')"
            class="select-width"
            v-model:value="form.stopCompensate"
            addon-after="℃"
          />
        </AFormItem>
        <AFormItem :label="t('algorithmManage.reEnableCompensationValue')" name="restartCompensate">
          <AInputNumber
            :placeholder="t('common.pleaseEnter')"
            class="select-width"
            v-model:value="form.restartCompensate"
            addon-after="℃"
          />
        </AFormItem>
        <AFormItem :label="t('algorithmManage.lowerLimitSafeDifferentialPressure')" name="safeDiffPressureLower">
          <AInputNumber
            :placeholder="t('common.pleaseEnter')"
            class="select-width"
            v-model:value="form.safeDiffPressureLower"
            addon-after="kpa"
          />
        </AFormItem>
        <AFormItem :label="t('algorithmManage.lowerLimitSafeLoad')" name="safeLoadLower">
          <AInputNumber
            :placeholder="t('common.pleaseEnter')"
            class="select-width"
            v-model:value="form.safeLoadLower"
            addon-after="%"
          />
        </AFormItem>
        <AFormItem :label="t('algorithmManage.stepSizeForWaterTemperatureSetting') + '（℃）'" name="continuous">
          <ASelect
            class="select-width"
            v-model:value="form.waterTempStep"
            :options="algWtTempSetStep"
            :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
            :placeholder="$t('common.plzSelect')"
          />
        </AFormItem>
      </AFlex>
    </AForm>
  </div>
</template>

<style lang="scss" scoped>
.algorithm-form :deep(.ant-form-item-label > label) {
  color: #666;
}

.flex-bottom {
  row-gap: 0 !important;
}

.select-width {
  width: 192px;
}
</style>
