<script lang="ts" setup>
  import { Button, Divider } from 'ant-design-vue';
  import { nextTick, ref, unref, watch } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { PlusCircleOutlined } from '@ant-design/icons-vue';
  import { getExtendDescFormSchemas } from './config';
  import { ExtendDescFormFieldsValueType } from '.';
  import { BasicModal } from '/@/components/Modal';
  import { PlusSquareOutlined, MinusSquareOutlined } from '@ant-design/icons-vue';
  import { ExtendDescOperationTypeEnum } from '/@/enums/objectModelEnum';
  import { EnumList } from '../EnumList';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const show = ref(false);

  const props = withDefaults(
    defineProps<{
      value?: ExtendDescFormFieldsValueType;
      disabled?: boolean;
    }>(),
    {
      value: () => ({} as ExtendDescFormFieldsValueType),
    }
  );

  const emit = defineEmits(['update:value', 'change']);

  const [registerForm, { setFieldsValue, getFieldsValue, setProps, validate, resetFields }] =
    useForm({
      schemas: getExtendDescFormSchemas(),
      showActionButtonGroup: false,
    });

  const infoExpandFlag = ref(false);

  const enumListRef = ref<InstanceType<typeof EnumList>>();

  const handleClick = async () => {
    show.value = true;
    await nextTick();
    resetFields();
    setProps({ disabled: props.disabled });
    setFieldsValue(props.value);
  };

  const handleSubmit = async () => {
    await validate();
    await unref(enumListRef)?.validate();
    const value = getFieldsValue() as ExtendDescFormFieldsValueType;
    const valueMapping = unref(enumListRef)?.getFieldsValue();
    value.valueMapping = valueMapping;
    emit('update:value', value);
    emit('change', value);
    show.value = false;
  };

  const handleDelete = () => {
    emit('update:value', {});
    emit('change', {});
  };

  watch(show, async (value) => {
    if (value) {
      await nextTick();
      setFieldsValue({ ...props.value });
    }
  });

  const getOperationTypeName = (operationType: ExtendDescOperationTypeEnum) => {
    const key = Object.keys(ExtendDescOperationTypeEnum).find(
      (key) => ExtendDescOperationTypeEnum[key] === operationType
    );

    return key ? t(`enum.actionType.${key}`) : key;
  };
</script>

<template>
  <section>
    <Button v-if="!value?.operationType" type="link" @click="handleClick">
      <PlusCircleOutlined />
      {{ t('deviceManagement.product.createExtensionDescText') }}
    </Button>
    <main v-if="value?.operationType" class="flex">
      <div class="flex-auto flex text-gray-400 bg-blue-50 text-xs p-2 border gap-2 border-gray-100">
        <div text-base>
          <PlusSquareOutlined
            v-if="!infoExpandFlag"
            class="cursor-pointer"
            @click="infoExpandFlag = !infoExpandFlag"
          />
          <MinusSquareOutlined
            v-else
            class="cursor-pointer"
            @click="infoExpandFlag = !infoExpandFlag"
          />
        </div>
        <div>
          <div class="mb-2">
            <span class="text-gray-400">{{ t('deviceManagement.product.actionTypeText') }}</span>
            <span class="ml-2">{{ getOperationTypeName(value.operationType) }}</span>
          </div>
          <section
            class="flex flex-col gap-2 overflow-hidden transition"
            :class="infoExpandFlag ? '' : 'h-0'"
          >
            <div>
              <span>{{ t('deviceManagement.product.registerAddressText') }}:</span>
              <span class="ml-2">{{ value.registerAddress }}</span>
            </div>
            <div>
              <span>{{ t('deviceManagement.product.originalDataTypeText') }}:</span>
              <span class="ml-2">{{ t(`enum.originalDataType.${value.originalDataType}`) }}</span>
            </div>
            <div v-if="value.scaling">
              <span>{{ t('deviceManagement.product.scalingFactorText') }}:</span>
              <span class="ml-2">{{ value.scaling }}</span>
            </div>
            <div v-if="value.valueRange">
              <span>{{ t('deviceManagement.product.valueRangeText') }}:</span>
              <span class="ml-2">{{ value.valueRange?.min }} ~ {{ value.valueRange?.max }}</span>
            </div>
          </section>
        </div>
      </div>
      <div class="ml-2">
        <Button class="!px-0" @click="handleClick" type="link">
          {{ disabled ? t('common.detailText') : t('common.editText') }}
        </Button>
        <Divider v-if="!disabled" type="vertical" />
        <Button class="!px-0" @click="handleDelete" type="link" v-if="!disabled">
          {{ t('common.delText') }}
        </Button>
      </div>
    </main>

    <BasicModal
      :title="t('deviceManagement.product.extensionDescText')"
      v-model:visible="show"
      @ok="handleSubmit"
      :show-ok-btn="!disabled"
      :width="480"
    >
      <BasicForm class="extension-form" @register="registerForm">
        <template #valueMapping="{ model, field }">
          <EnumList
            ref="enumListRef"
            v-model:value="model[field]"
            :disabled="disabled"
            :required="false"
            :add-button-name="t('deviceManagement.product.createValueMappingText')"
          />
        </template>
      </BasicForm>
    </BasicModal>
  </section>
</template>

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