import Modal from "@/components/Provider/Modal";
import UploadFile from "@/modules/components/UploadFile";
import { css } from "@linaria/core";
import { Button, Form, Input } from "ant-design-vue";
import { defineComponent, reactive } from "vue";
import { any } from "vue-types";

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};

export default defineComponent({
  props: {
    data: any(),
  },
  setup(props) {
    const modal = Modal.use();
    const formState: { [name: string]: any } = reactive({
      formData: {
        ...{
          title: "",
          content: "",
          cover: "",
          summary: "",
          sort: 0,
        },
        ...props.data,
      },
    });

    const rules = reactive({
      title: [{ required: true, message: "名称不能为空", trigger: "change" }],
      summary: [{ required: true, message: "文件不能为空", trigger: "change" }],
    });

    const { validate, validateInfos } = Form.useForm(formState.formData, rules);

    function submit() {
      validate().then(async () => {
        modal.submit(formState.formData);
      });
    }
    const changeFile = (v: string) => {
      formState.formData.summary = v;
    };

    return () => {
      return (
        <div class={EditStyle}>
          <Form {...layout} onSubmit={submit}>
            <Form.Item {...validateInfos.title} label={"文件名称"}>
              <Input
                placeholder={"请输入文件名称"}
                v-model={[formState.formData.title, "value"]}
                maxlength={30}
              />
            </Form.Item>
            <Form.Item {...validateInfos.summary} label={"文件"}>
              <UploadFile
                data={formState.formData.summary}
                text={"上传文件"}
                onChange={changeFile}
              ></UploadFile>
            </Form.Item>
            <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ span: 24 }}>
              <Button type="primary" htmlType="submit" block>
                保存
              </Button>
            </Form.Item>
          </Form>
        </div>
      );
    };
  },
});
const EditStyle = css`
  width: 500px;
`;
