import Empty from "@/components/Empty";
import { useEditor } from "@/modules/editor";
import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
import { useResource } from "@/modules/resource";
import { css } from "@linaria/core";
import { Loadmore } from "@queenjs/ui";
import { Button } from "ant-design-vue";
import { defineUI } from "queenjs";
import { CompList } from "./CompList";
export default defineUI({
  setup() {
    const editor = useEditor();

    const resource = useResource();
    const { sysTextListCtrl } = resource.controls;
    sysTextListCtrl.loadPage(1);

    return () => {
      const dataSource = sysTextListCtrl.state.list;
      return (
        <div class="pt-20px">
          <Button
            block
            type="primary"
            onClick={() => editor.actions.clickCompToDesign("Text")}
          >
            添加文本框
          </Button>
          <div class={"pt-20px"}>
            <div>默认</div>
            <div class={[ButtonStyle, "space-y-10px mt-16px"]}>
              <div
                class={"btn_item text-16px font-600"}
                onClick={() => {
                  const h2 =
                    '<h2 style="line-height:1.5;text-align:center;">请输入标题</h2>';
                  editor.actions.clickCompToDesign(
                    "Text",
                    (comp: DesignComp) => {
                      editor.actions.updateCompData(comp, "value", h2);
                    }
                  );
                }}
              >
                添加标题
              </div>
              <div
                class={"btn_item font-600"}
                onClick={() => {
                  const h3 =
                    '<h3 style="line-height:1.5;text-align:center;">请输入副标题</h3>';
                  editor.actions.clickCompToDesign(
                    "Text",
                    (comp: DesignComp) => {
                      editor.actions.updateCompData(comp, "value", h3);
                    }
                  );
                }}
              >
                添加副标题
              </div>
              <div
                class={"btn_item text-12px"}
                onClick={() => {
                  const text =
                    '<p style="text-align:center;line-height:1.5;">请输入正文</p>';
                  editor.actions.clickCompToDesign(
                    "Text",
                    (comp: DesignComp) => {
                      editor.actions.updateCompData(comp, "value", text);
                    }
                  );
                }}
              >
                添加一段正文
              </div>
            </div>
          </div>
          <div class="my-20px">组合</div>
          <CompList dataSource={dataSource} columns={1} isSys={true} />
          {dataSource.length == 0 ? (
            <Empty />
          ) : (
            <Loadmore
              class="mt-20px"
              loading={sysTextListCtrl.state.loading}
              canLoad={sysTextListCtrl.state.canLoadNext}
              onChange={sysTextListCtrl.loadNextPage}
            />
          )}
        </div>
      );
    };
  },
});
const ButtonStyle = css`
  .btn_item {
    line-height: 46px;
    background-color: #303030;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    &:hover {
      background-color: rgba(48, 48, 48, 0.8);
    }
    &:active {
      background-color: rgba(48, 48, 48, 1);
    }
    .inficon {
      font-size: 30px;
    }
  }
`;