<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">
        <Row>
          <Col style="text-align: center">
            <Input :value="str" style="text-align: center; width: 40px" />
          </Col>
          <Col style="text-align: center">{{ index + 1 }}</Col>
        </Row>
      </div>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner, BasicForm, useForm } from '@jdlinker/ui';
  import { checkRuleInput } from './check.rule.data';
  import { ref } from 'vue';
  import { Row, Col, Input } from 'ant-design-vue';

  let realTestValue = ref('');
  const okButtonProps = {
    style: { display: 'none' }
  };
  const [registerForm, { resetFields, setFieldsValue }] = useForm({
    schemas: checkRuleInput,
    showActionButtonGroup: false,
    labelCol: {
      span: 24
    },
    wrapperCol: {
      span: 24
    }
  });

  //表单赋值
  const [registerModal, { setModalProps }] = 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>
