<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import {
    WidgetComponentType,
    schemasMap,
    VisualOptionParams,
    visualOptionField,
    Gradient,
  } from '../config/visualOptions';
  import { useForm, BasicForm } from '/@/components/Form';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { ComponentInfo } from '/@/api/dataBoard/model';
  import { computed } from '@vue/reactivity';

  const emit = defineEmits(['close', 'register']);

  const props = defineProps<{
    value?: string;
  }>();

  const recordId = ref('');

  const getSchemas = computed(() => {
    return schemasMap.get((props.value as WidgetComponentType) || 'text-component-1');
  });

  const [registerForm, method] = useForm({
    showActionButtonGroup: false,
    labelWidth: 120,
    baseColProps: {
      span: 12,
    },
  });

  const [register, { closeModal }] = useModalInner(
    (data: { recordId: string; componentInfo: ComponentInfo }) => {
      recordId.value = data.recordId;
      const gradientInfo = data.componentInfo?.gradientInfo || [];
      let gradientRecord = {};
      if (gradientInfo && gradientInfo.length) {
        const first = gradientInfo.find((item) => item.key === Gradient.FIRST);
        const second = gradientInfo.find((item) => item.key === Gradient.SECOND);
        const third = gradientInfo.find((item) => item.key === Gradient.THIRD);
        gradientRecord = {
          [visualOptionField.FIRST_PHASE_COLOR]: first?.color,
          [visualOptionField.FIRST_PHASE_VALUE]: first?.value,
          [visualOptionField.SECOND_PHASE_COLOR]: second?.color,
          [visualOptionField.SECOND_PHASE_VALUE]: second?.value,
          [visualOptionField.THIRD_PHASE_COLOR]: third?.color,
          [visualOptionField.THIRD_PHASE_VALUE]: third?.value,
        };
      }

      method.setFieldsValue({ ...(data.componentInfo || {}), ...gradientRecord });
    }
  );

  const handleGetValue = () => {
    const value = method.getFieldsValue();
    emit('close', unref(recordId), transformValue(value));
  };

  const transformValue = (value: Partial<VisualOptionParams>) => {
    return {
      fontColor: value.fontColor || null,
      icon: value.icon || null,
      iconColor: value.iconColor || null,
      unit: value.unit || null,
      gradientInfo: [
        { key: Gradient.FIRST, value: value.firstPhaseValue, color: value.firstPhaseColor },
        { key: Gradient.SECOND, value: value.secondPhaseValue, color: value.secondPhaseColor },
        { key: Gradient.THIRD, value: value.thirdPhaseValue, color: value.thirdPhaseColor },
      ],
    };
  };

  const handleClose = () => {
    handleGetValue();
    closeModal();
  };
</script>

<template>
  <BasicModal
    v-bind="$attrs"
    destroy-on-close
    @register="register"
    @ok="handleClose"
    title="选项"
    width="40%"
  >
    <BasicForm class="form" @register="registerForm" :schemas="getSchemas" />
  </BasicModal>
</template>

<style scoped>
  .form:deep(.ant-input-number) {
    width: 100%;
  }
</style>