<script lang="ts" setup>
  import { CopyOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { Tooltip, Button } from 'ant-design-vue';
  import { useForm } from '/@/components/Form';
  import { basicSchema, dataSourceSchema } from '../config/basicConfiguration';
  import BasicForm from '/@/components/Form/src/BasicForm.vue';
  import { ref, unref } from 'vue';

  const dataSource = ref([{ id: 1 }]);

  const [basicRegister, basicMethod] = useForm({
    schemas: basicSchema,
    showActionButtonGroup: false,
    labelWidth: 96,
  });

  const [dataSourceRegister, dataSourceMethod] = useForm({
    schemas: dataSourceSchema,
    showActionButtonGroup: false,
    layout: 'inline',
    labelCol: {
      span: 0,
    },
    baseColProps: {
      span: 4,
    },
  });

  const handleCopy = (data: Recordable) => {
    unref(dataSource).push({
      id: data.id + 1,
    });
  };

  const handleDelete = (data: Recordable) => {
    const index = unref(dataSource).findIndex((item) => item.id === data.id);

    ~index && unref(dataSource).splice(index, 1);
  };

  const handleAdd = () => {
    unref(dataSource).push({
      id: Math.random(),
    });
  };
</script>

<template>
  <section>
    <h3 class="w-24 text-right pr-2 my-4">基础信息</h3>
    <div class="w-3/4">
      <BasicForm @register="basicRegister" />
    </div>
    <h3 class="w-24 text-right pr-2 my-4">选择数据源</h3>
    <div v-for="item in dataSource" :key="item.id" class="flex">
      <div class="w-24 text-right">选择设备</div>
      <div class="pl-2 flex-auto">
        <BasicForm @register="dataSourceRegister" />
      </div>
      <div class="flex justify-center gap-3 w-12">
        <Tooltip title="复制">
          <CopyOutlined @click="handleCopy(item)" class="cursor-pointer text-lg" />
        </Tooltip>
        <Tooltip title="删除">
          <DeleteOutlined @click="handleDelete(item)" class="cursor-pointer text-lg" />
        </Tooltip>
      </div>
    </div>
    <div class="text-center">
      <Button type="primary" @click="handleAdd">添加数据源</Button>
    </div>
  </section>
</template>