<script setup lang="ts">
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Button, Form, InputNumber, Card, Tag, Space } from 'ant-design-vue';
  import { DeleteOutlined } from '@ant-design/icons-vue';
  import { ref } from 'vue';
  import { unref } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { generateUUID } from '/@/hooks/web/useGenerateUUID';
  import { reactive } from 'vue';

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

  // const formdata = ref<any[]>([{ value: '', second: '', uuid: generateUUID() }]);

  interface User {
    value: string;
    second: string;
    uuid: any;
  }

  const formref = ref();

  const formdata = reactive<{ users: User[] }>({
    users: [],
  });

  const title = ref<string>('');

  const [registerModal, { closeModal }] = useModalInner((data) => {
    const { title: propTitle } = data || {};
    title.value = propTitle;
    formdata.users = [...data.data] || [];
  });

  const { createMessage } = useMessage();

  const handleOk = async () => {
    await formref.value.validate();
    closeModal();
    emit('success', formdata.users);
  };

  const handleCreate = () => {
    if (unref(formdata).users.length >= 10) {
      createMessage.warning('添加的消息速率限制不能超过10条');
      return;
    }
    formdata.users.push({ value: '', second: '', uuid: generateUUID() });
  };

  const handleDelete = (index: number) => {
    formdata.users.splice(index, 1);
  };
</script>
<template>
  <BasicModal @register="registerModal" :title="title" @ok="handleOk">
    <div class="!w-full">
      <Form
        style="width: 100%"
        ref="formref"
        :model="formdata"
        layout="inline"
        name="basic"
        :label-col="{ style: { width: '100px' } }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <Space
          class="flex i mt-1 mb-2"
          v-for="(item, index) in formdata.users"
          :key="item.uuid"
          align="baseline"
        >
          <Form.Item
            label="消息数量"
            :rules="{ required: true, message: '消息数量必填' }"
            :name="['users', index as unknown as string, 'value']"
          >
            <InputNumber v-model:value="item.value" :min="0" />
          </Form.Item>
          <Form.Item
            label="每秒"
            :rules="{ required: true, message: '时间比例必填' }"
            :name="['users', index as unknown as string, 'second']"
          >
            <InputNumber v-model:value="item.second" :min="0" />
          </Form.Item>

          <DeleteOutlined @click="handleDelete(index)" class="ml-0.5" style="color: red" />
        </Space>
      </Form>
    </div>
    <Button class="my-2" type="primary" @click="handleCreate">添加限制</Button>
    <div class="flex flex-col justify-start items-start w-full">
      <Card title="预览" class="w-full">
        <div class="flex flex-col" v-if="formdata.users && formdata.users.length >= 1">
          <div v-for="(item, index) in formdata.users" :key="item.value">
            <Tag color="blue" v-if="index === 0 && item.value && item.second"
              >{{ item.value }}条消息每{{ item.second }}秒</Tag
            >
            <Tag color="blue" v-else v-show="item.value && item.second"
              >但小于{{ item.value }}条消息每{{ item.second }}秒</Tag
            >
          </div>
        </div>

        <div v-if="!formdata.users?.[0]?.value || !formdata.users?.[0]?.second">
          <span class="font-bold">未配置</span>
        </div>
      </Card>
    </div>
  </BasicModal>
</template>

<style lang="less" scoped>
  :deep(.ant-card-head) {
    height: 40px;

    .ant-card-head-wrapper {
      height: 40px;
    }
  }
</style>