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

import Modal from "@/components/Provider/Modal";
import UploadImage from "@/modules/components/UploadImage";

import { css } from "@linaria/core";
import { object } from "vue-types";
import WangEditor from "../../components/WangEditor";
import { useArticle } from "@/modules";
import { uploader } from "@/modules/objects";

export default defineComponent({
  props: {
    data: object<ArticleItem>(),
  },
  setup(props) {
    const modal = Modal.use();
    const artStore = useArticle();
    const state = reactive({
      formData: {
        ...{
          title: "",
          cover: "",
          content: "",
          summary: "",
          sort: 0,
        },
        ...props.data,
      },
    });

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

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

    const editorChange = ({ html, text }: any) => {
      state.formData.content = html;
      state.formData.summary = text;
    };
    const submit = () => {
      validate().then(async () => {
        if (!state.formData.cover) {
          state.formData.cover = artStore.getContentFirstImage(
            state.formData.content
          );
        } else {
          await uploader.uploadBlobImages(state.formData);
        }

        let summary = state.formData.summary.substring(0, 60);
        summary = summary.replace(/\n/g, "");
        state.formData.summary = summary;
        modal.submit(state.formData);
      });
    };
    const changeThumb = (v: string) => {
      state.formData.cover = v;
    };
    return () => {
      return (
        <div>
          <div class={ModalPage}>
            <div class={"form_box"}>
              <Form>
                <Form.Item
                  {...validateInfos.title}
                  labelCol={{ span: 24 }}
                  wrapperCol={{ span: 24 }}
                  label={"名称"}
                >
                  <Input
                    placeholder={"请输入名称"}
                    v-model={[state.formData.title, "value"]}
                  />
                </Form.Item>
                <Form.Item {...validateInfos.cover} wrapperCol={{ span: 24 }}>
                  <UploadImage
                    data={state.formData.cover}
                    text={"上传封面图"}
                    onChange={changeThumb}
                  ></UploadImage>
                </Form.Item>
                <div class={"tips"}>
                  未上传封面图，封面图将是内容中第一张图片
                </div>
              </Form>
              <WangEditor
                content={state.formData.content}
                onChange={editorChange}
              />
            </div>
            <div class={"footer"}>
              <Button type="primary" onClick={submit}>
                保存
              </Button>
            </div>
          </div>
        </div>
      );
    };
  },
});
const ModalPage = css`
  padding: 20px;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .form_box {
    flex: 1;
    width: 100%;
    display: flex;
    overflow: hidden;
    .ant-form {
      width: 260px;
      padding-right: 20px;
    }
    .tips {
      font-size: 12px;
      color: #666;
    }
  }
  .footer {
    padding-top: 20px;
    text-align: center;
    button {
      width: 200px;
    }
  }
`;
