<script setup lang="ts">
  import { CollapseContainer } from '/@/components/Container';
  import { Icon } from '/@/components/Icon';
  import { Tooltip, Button } from 'ant-design-vue';
  import { BasicForm, FormActionType, ThingsModelForm } from '/@/components/Form';
  import { getFormSchemas, FormFieldsEnum } from './config';
  import { FlipFlop } from '../FlipFlop';
  import { ComponentPublicInstance, ref, unref, watch } from 'vue';
  import { ExecutionActionListRefItemType } from './type';
  import { useExecutionActionData } from './useExecutionActionData';
  import { createNewExecutionActionItem } from '.';
  import { useSceneLinkageDrawerContext } from '../SceneLinkageDrawer/sceneLinkageDrawerContext';
  import { FlipFlopComponentTypeEnum } from '../FlipFlop/types';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n(); // 加载国际化

  const { disabledDrawer } = useSceneLinkageDrawerContext();

  const hasAlarmNotify = ref(false);

  const formSchemas = getFormSchemas(hasAlarmNotify);

  const executionActionListRef = ref<ExecutionActionListRefItemType[]>([
    createNewExecutionActionItem(),
  ]);

  const handleAdd = () => {
    executionActionListRef.value.push(createNewExecutionActionItem());
  };

  const handleDelete = (executionActionItem: ExecutionActionListRefItemType) => {
    const index = unref(executionActionListRef).findIndex(
      (item) => item.key === executionActionItem.key
    );
    ~index && unref(executionActionListRef).splice(index, 1);
  };

  const setExecutionActionRef = (
    el: Nullable<Element | ComponentPublicInstance>,
    executionActionItem: ExecutionActionListRefItemType
  ) => {
    executionActionItem.ref = el as unknown as FormActionType;
  };

  const setAlarmClearRuleRef = (
    el: Nullable<Element | ComponentPublicInstance>,
    executionActionItem: ExecutionActionListRefItemType
  ) => {
    executionActionItem.alarmClearRuleElRef = el as unknown as InstanceType<typeof FlipFlop>;
  };

  const handleClearRuleDelete = (_executionActionItem: ExecutionActionListRefItemType) => {
    //
  };

  const setThingsModelFormRef = (
    el: Nullable<Element | ComponentPublicInstance>,
    executionActionItem: ExecutionActionListRefItemType
  ) => {
    executionActionItem.thingsModelFormRefl = el as unknown as InstanceType<typeof ThingsModelForm>;
  };

  const { getFieldsValue, setFieldsValue, validate, resetFieldsValue } = useExecutionActionData(
    executionActionListRef,
    hasAlarmNotify
  );

  const { organizationId } = useSceneLinkageDrawerContext();

  /**
   * @description on organization change
   */
  watch(organizationId, () => {
    unref(executionActionListRef).forEach((flipFlopItem) =>
      flipFlopItem.ref?.setFieldsValue({
        [FormFieldsEnum.ENTITY_ID]: [],
        [FormFieldsEnum.ALARM_PROFILED]: null,
      })
    );
  });

  defineExpose({
    getFieldsValue,
    setFieldsValue,
    validate,
    resetFieldsValue,
  });
</script>

<template>
  <section>
    <CollapseContainer
      class="mb-4"
      v-for="(executionActionItem, index) in executionActionListRef"
      :title="`${t('rule.linkedge.index.executeAction')}${index + 1}`"
      :key="executionActionItem.key"
    >
      <template #action>
        <Tooltip :title="t('rule.linkedge.index.singleDelete')">
          <Icon
            v-if="!disabledDrawer && executionActionListRef.length > 1"
            class="ml-2 cursor-pointer"
            icon="fluent:delete-off-20-regular"
            size="20"
            @click="handleDelete(executionActionItem)"
          />
        </Tooltip>
      </template>
      <BasicForm
        :ref="(el) => setExecutionActionRef(el, executionActionItem)"
        :disabled="disabledDrawer"
        :show-action-button-group="false"
        :baseColProps="{ span: 6, xxl: 6, xl: 8, lg: 12, sm: 24 }"
        :schemas="formSchemas"
      >
        <template #alarmClearRule>
          <FlipFlop
            :ref="(el) => setAlarmClearRuleRef(el, executionActionItem)"
            :panel-title="(index) => `${t('rule.linkedge.index.clearAlarms')}${index}`"
            :disabled="disabledDrawer"
            :addButtonName="t('rule.linkedge.index.addClearAlarms')"
            @delete="handleClearRuleDelete(executionActionItem)"
            :type="FlipFlopComponentTypeEnum.ALARM_CLEAR"
          />
        </template>

        <template #serviceCommand="{ field, model }">
          <ThingsModelForm
            :ref="(el) => setThingsModelFormRef(el, executionActionItem)"
            :value="model[field]"
            :identifier="model[FormFieldsEnum.CALL_SERVICE_IDENTIFIER]"
            :input-data="model[FormFieldsEnum.CALL_SERVICE]?.functionJson?.inputData"
            :title="model[FormFieldsEnum.CALL_SERVICE]?.functionName"
            :disabled="disabledDrawer"
            :transport-type="model[FormFieldsEnum.TRANSPORT_TYPE]"
          />
        </template>
      </BasicForm>
    </CollapseContainer>
    <Button v-if="!disabledDrawer" class="w-full" type="primary" @click="handleAdd">
      <Icon icon="ant-design:plus-outlined" />
      {{ t('rule.linkedge.index.executeAction') }}
    </Button>
  </section>
</template>