<template>
  <a-modal
    v-model:visible="visible"
    title="添加"
    @ok="handleOk"
    width="600px"
    :bodyStyle="{ padding: '20px' }"
  >
    <a-row>
      <a-col :span="24">
        <div class="left">
          基础信息
          <a-form
            :model="formState"
            name="basic"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
          >
            <a-row>
              <a-col :span="12">
                <a-form-item
                  label="指标名称"
                  name="username"
                  :rules="[{ required: true, message: 'Please input your username!' }]"
                >
                  <a-input v-model:value="formState.username" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="指标编码"
                  name="username"
                  :rules="[{ required: true, message: 'Please input your username!' }]"
                >
                  <a-input v-model:value="formState.username" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item
                  label="指标简称"
                  name="username"
                  :rules="[{ required: true, message: 'Please input your username!' }]"
                >
                  <a-input v-model:value="formState.username" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="指标类型"
                  name="username"
                  :rules="[{ required: true, message: 'Please input your username!' }]"
                >
                  <a-input v-model:value="formState.username" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item
                  label="采集频率"
                  name="username"
                  :rules="[{ required: true, message: 'Please input your username!' }]"
                >
                  <a-input v-model:value="formState.username" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="模式"
                  name="username"
                  :rules="[{ required: true, message: 'Please input your username!' }]"
                >
                  <a-input v-model:value="formState.username" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item
                  label="指标分组"
                  name="username"
                  :rules="[{ required: true, message: 'Please input your username!' }]"
                >
                  <a-input v-model:value="formState.username" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="指标标签"
                  name="username"
                  :rules="[{ required: true, message: 'Please input your username!' }]"
                >
                  <a-input v-model:value="formState.username" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item
                  label="分组序号"
                  name="username"
                  :rules="[{ required: true, message: 'Please input your username!' }]"
                >
                  <a-input v-model:value="formState.username" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="指标序号"
                  name="username"
                  :rules="[{ required: true, message: 'Please input your username!' }]"
                >
                  <a-input v-model:value="formState.username" />
                </a-form-item>
              </a-col>
            </a-row>
            监测值配置
            <a-row>
              <a-col :span="12">
                <a-form-item
                  label="购买时间"
                  name="username"
                  :rules="[{ required: true, message: 'Please input your username!' }]"
                >
                  <a-input v-model:value="formState.username" />
                </a-form-item>
              </a-col>
            </a-row>
            设备绑定
            <a-row>
              <a-col :span="12">
                <a-form-item
                  label="设备绑定"
                  name="username"
                  :rules="[{ required: true, message: 'Please input your username!' }]"
                >
                  <a-input v-model:value="formState.username" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item
                  label="备注"
                  name="username"
                  :rules="[{ required: true, message: 'Please input your username!' }]"
                >
                  <a-input v-model:value="formState.username" />
                </a-form-item>
              </a-col>
              <a-col :span="12" />
            </a-row>
          </a-form>
        </div>
      </a-col>
    </a-row>
  </a-modal>
</template>
<script setup lang="ts">
  import { ref, reactive } from 'vue';
  const visible = ref(false);
  const handleOk = (e) => {
    console.log(e);
    visible.value = false;
  };
  //
  const formState = reactive({
    username: '',
    password: '',
    remember: true,
  });
  const onFinish = (values) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  //
  function show() {
    visible.value = true;
  }
  //   编译器宏,暴露出方法
  defineExpose({
    show,
  });
</script>
<style lang="less" scoped></style>
