import { css } from "@linaria/core";
import { defineComponent, onMounted, ref } from "vue";
import { SettingOutlined } from "@ant-design/icons-vue";
import { useList } from "@/modules/list";
import { DialogItem } from "@/modules/list/objects/item";
import Dialog from "../list/dialog";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const { store, actions } = useList();
    const router = useRouter();
    const canvasRef = ref();

    const rootRef = ref<HTMLElement>();

    onMounted(() => {
      actions.on("getAssetList:success", async () => {
        const res = await actions.initListCanvasData(
          rootRef.value?.clientWidth as number,
          rootRef.value?.clientHeight as number
        );
        if (!res) {
          return;
        }
        actions.startListRunning(canvasRef.value);
      });

      actions.getAssetList(true);
    });

    return () => (
      <div class={rootStyle} ref={rootRef}>
        <div class={"backend"}>
          <SettingOutlined
            onClick={() => {
              router.push("/backend/setting");
            }}
          />
        </div>
        <canvas ref={canvasRef} />

        {store.dialogs.map((item: DialogItem) => (
          <Dialog data={item} key={item.id} />
        ))}
      </div>
    );
  },
});

const rootStyle = css`
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  background-color: #3f322c;
  overflow: hidden;
  user-select: none;
  flex-flow: row;
  .backend {
    position: absolute;
    top: 0;
    left: 10px;
    cursor: pointer;
    padding: 5px;
    font-size: 20px;
    line-height: 1;
    background-color: @inf-primary-color;
    color: #fff;
    border-radius: 0 0 10px 10px;
    transition: all 0.2s ease-in-out;
    &:hover {
      padding-top: 10px;
    }
  }
  canvas {
    width: 100%;
    height: 100%;
    /* background-color: #fff; */
  }
`;
