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

import SvgIcon from '@/components/SvgIcon.vue';
import { t } from '@/i18n';

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

interface Props {
  index: number;
  form: EquipmentLimitationsItem;
  equipmentType: EquipmentTypeItem[];
}
const formRef = ref<FormInstance>();

const emit = defineEmits(['deleteClick', 'addClick']);
const props = defineProps<Props>();
const rules: Record<string, Rule[]> = {
  deviceGlobalId: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  upperLimit: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
};
const deleteInterval = () => {
  emit('deleteClick', props.index);
};
const formResetFields = () => {
  formRef.value?.resetFields();
};
const formRefSubmit = () => {
  return formRef.value?.validate() || Promise.resolve();
};

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

<template>
  <div>
    <AFlex align="center">
      <div class="set-content">
        <AForm ref="formRef" :model="form" :rules="rules">
          <AFlex justify="space-between">
            <AFormItem :label="$t('setupProtocol.deviceType')" name="deviceGlobalId">
              <ASelect
                class="time-width"
                v-model:value="form.deviceGlobalId"
                :options="equipmentType"
                :field-names="{ label: 'dataName', value: 'id' }"
                :placeholder="$t('common.plzSelect')"
              />
            </AFormItem>

            <AFormItem :label="t('setupProtocol.protocolParamFields.quantity')" name="upperLimit">
              <AInputNumber
                :placeholder="t('common.pleaseEnter')"
                v-model:value="form.upperLimit"
                class="time-width"
                :addon-after="t('common.taiwan')"
              />
            </AFormItem>
          </AFlex>
        </AForm>
      </div>
      <div @click="$emit('addClick')">
        <AFlex justify="center" align="center" class="add-style">
          <SvgIcon name="plus" />
        </AFlex>
      </div>

      <div @click="deleteInterval">
        <AFlex v-if="index !== 0" justify="center" align="center" class="add-style">
          <SvgIcon name="minus" />
        </AFlex>
      </div>
    </AFlex>
  </div>
</template>

<style lang="scss">
.organization .set-content {
  .ant-form-item .ant-form-item-label {
    width: 78px;
  }
}
</style>

<style lang="scss" scoped>
.input-number {
  width: 100px;
  margin-left: 40px;
}

:deep(.time-width) {
  .ant-input-number-group .ant-input-number-group-addon {
    background-color: #fff;
  }
}

.temperature-style {
  width: 256px;
  height: 32px;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 15%);
  border-radius: 4px;
}

.add-style {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  margin-bottom: 16px;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.time-width {
  width: 256px;
}

.time-text {
  margin-right: 12px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: #666;
  text-align: left;
}

.set-content {
  width: 708px;
  height: 64px;
  padding: 16px;
  margin-right: 12px;
  margin-bottom: 16px;
  background: #f5f7fa;
  border-radius: 4px;
}
</style>
