<template>
  <BasicModal v-bind="$attrs" :okButtonProps="okButtonProps" @register="registerModal" destroyOnClose>
    <BasicForm @register="registerForm" />
    <div style="display: flex; flex-flow: row wrap">
      <div style="padding: 0 4px" v-for="(str, index) of realTestValue" :key="index">
        <a-row>
          <a-col style="text-align: center">
            <a-input :value="str" style="text-align: center; width: 40px" />
          </a-col>
          <a-col style="text-align: center">{{ index + 1 }}</a-col>
        </a-row>
      </div>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { checkRuleInput } from '/@/views/system/checkRule/check.rule.data';
  import { ref } from 'vue';
  let realTestValue = ref('');
  const okButtonProps = {
    style: { display: 'none' },
  };
  const [registerForm, { resetFields, setFieldsValue, validate, getFieldsValue }] = useForm({
    schemas: checkRuleInput,
    showActionButtonGroup: false,
    labelCol: {
      span: 24,
    },
    wrapperCol: {
      span: 24,
    },
  });

  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    await resetFields();
    realTestValue.value = '';
    setModalProps({
      confirmLoading: false,
      cancelText: '关闭',
      title: '功能测试',
      width: '1000px',
    });
    await setFieldsValue({
      ruleCode: data.ruleCode,
      testValue: realTestValue,
    });
  });
</script>

<style scoped></style>