import { css } from "@linaria/core";
import { defineComponent, reactive } from "vue";

import { Button, Form, Input } from "ant-design-vue";

import { useModal } from "queenjs";
const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};
export default defineComponent({
  setup() {
    const modal = useModal();
    const formState = reactive({
      label: "",
      value: "",
    });
    const rules = {
      label: [
        { required: true, message: "分类名称不能为空", trigger: "change" },
      ],
      value: [{ required: true, message: "分类值不能为空", trigger: "change" }],
    };

    const { validate, validateInfos } = Form.useForm(formState, rules);
    const submit = () => {
      validate().then(() => {
        modal.submit(formState);
      });
    };
    return () => (
      <div class={ViewStyle}>
        <Form {...layout}>
          <Form.Item label="分类名称" {...validateInfos.label}>
            <Input v-model={[formState.label, "value"]} />
          </Form.Item>
          <Form.Item label="分类值" {...validateInfos.value}>
            <Input v-model={[formState.value, "value"]} />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
            <Button type="primary" onClick={submit}>
              保存
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  },
});

const ViewStyle = css`
  width: 400px;
`;
