<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { doBatchChangeRuleChain, doQueryRuleChainList } from '/@/api/device/deviceConfigApi';
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();

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

  const deviceProfileIds = ref<string[]>([]);
  const [registerModal, { closeModal }] = useModalInner((data: ModalParamsType<string[]>) => {
    resetFields();
    deviceProfileIds.value = data.record;
  });

  const [register, { getFieldsValue, resetFields, validate }] = useForm({
    layout: 'horizontal',
    showActionButtonGroup: false,
    schemas: [
      {
        field: 'targetRuleChainId',
        component: 'ApiSelect',
        label: t('deviceManagement.product.ruleChainText'),
        required: true,
        componentProps: {
          api: async () => {
            const result = await doQueryRuleChainList();
            return result.map((item) => ({ ...item, value: item.id.id }));
          },
          labelField: 'name',
          valueFiled: 'value',
          getPopupContainer: () => document.body,
        },
      },
    ],
  });

  const { createMessage } = useMessage();

  async function handleSubmit() {
    await validate();
    const result = getFieldsValue() as Record<'targetRuleChainId', string>;

    await doBatchChangeRuleChain({
      ...result,
      deviceProfileIds: unref(deviceProfileIds),
    });

    createMessage.success(t('layout.setting.operatingTitle'));

    emit('success');

    closeModal();
  }
</script>

<template>
  <BasicModal
    :title="t('deviceManagement.product.updateRuleChain')"
    :min-height="100"
    :width="300"
    @ok="handleSubmit"
    @register="registerModal"
  >
    <BasicForm @register="register" />
  </BasicModal>
</template>