<script setup lang="ts">
import { onMounted, reactive, ref, toRaw, watch } from 'vue';

import { t } from '@/i18n';

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

interface Props {
  temperatureSettingValue: string;
}
const formRef = ref<FormInstance>();
const props = defineProps<Props>();
type MonthKey = '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10' | '11' | '12';
// 月份数组（不需要响应式）
const months: MonthKey[] = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];

// 初始化温度数据
const temperatureData = reactive<Record<MonthKey, number>>({
  '01': 0,
  '02': 0,
  '03': 0,
  '04': 0,
  '05': 0,
  '06': 0,
  '07': 0,
  '08': 0,
  '09': 0,
  '10': 0,
  '11': 0,
  '12': 0,
});

const getTemperatureData = () => {
  // 将 set 的值赋给 temperatureData
  const setValues = props.temperatureSettingValue.split(','); // 拆分字符串为数组
  setValues.forEach((value, index) => {
    const month = (index + 1).toString().padStart(2, '0') as MonthKey; // 生成两位月份键
    temperatureData[month] = Number(value); // 转换为数字并赋值
  });
};

const rules: Record<string, Rule[]> = {
  '01': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  '02': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  '03': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  '04': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  '05': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  '06': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  '07': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  '08': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  '09': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  '10': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  '11': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  '12': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
};

watch(
  () => props.temperatureSettingValue,
  (count) => {
    if (count) {
      getTemperatureData();
    }
  },
);

const formResetFields = () => {
  formRef.value?.resetFields();
};
const formRefSubmit = () => {
  return formRef.value?.validate() || Promise.resolve();
};

const stringConversion = () => {
  const keysInOrder: MonthKey[] = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];

  const rawData = toRaw(temperatureData); // 获取原始对象
  return keysInOrder.map((key) => rawData[key]).join(',');
};

defineExpose({
  formRefSubmit,
  formResetFields,
  stringConversion,
});

onMounted(() => {
  getTemperatureData();
});
</script>

<template>
  <div>
    <div class="set-time">
      <AForm ref="formRef" :model="temperatureData" :rules="rules">
        <AFlex justify="space-between" wrap="wrap">
          <AFlex v-for="(item, index) in months" :key="index" align="center" class="temperature-bottom">
            <AFormItem :name="item">
              <AFlex align="center">
                <div class="time-text">{{ item }}{{ $t('common.month') }}</div>
                <AInputNumber
                  :placeholder="t('common.pleaseEnter')"
                  v-model:value="temperatureData[item]"
                  class="input-width"
                  addon-after="℃"
                />
              </AFlex>
            </AFormItem>
          </AFlex>
        </AFlex>
      </AForm>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.input-width {
  width: 192px;
}

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

.set-time {
  width: 1114px;
  height: 180px;
  padding: 16px;
  margin-bottom: 24px;
  background: #f5f7fa;
  border-radius: 4px;
}

.temperature-bottom {
  margin-bottom: 30px;
}
</style>
