screenShow/src/pages/website/routes/list/dialog.tsx

import { DialogItem } from "@/modules/list/objects/item";
import { css } from "@linaria/core";
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref,
} from "vue";
import { object } from "vue-types";

import Item from "./item";
import { useList } from "@/modules/list";

export default defineComponent({
  props: {
    data: object<DialogItem>().isRequired,
  },
  emits: ["move"],
  setup(props) {
    const { store, actions } = useList();
    const dialogRef = ref<HTMLElement>();
    const closeRef = ref();
    const state = reactive({
      width: props.data.width,
      height: props.data.height,
      x: props.data.x,
      y: props.data.y,
      scale: 0,
      itemData: {} as any,
      touchClient: null as any,
      dialogId: "",
    });

    const pos = computed(() => {
      return {
        x: props.data.x,
        y: props.data.y,
      };
    });

    onMounted(() => {
      state.itemData = store.list.find((e: any) => {
        return e._id == props.data.dataId;
      });

      setTimeout(() => {
        nextTick(() => {
          state.scale = 1.0;
          closeTimeStart();
        });
      }, 10);
      //@ts-ignore
      dialogRef.value.dialogId = props.data.id;
      dialogRef.value?.addEventListener("touchstart", (e) => {
        closeTimeEnd();
      });

      dialogRef.value?.addEventListener("touchmove", (e) => {
        if (state.touchClient) {
          const targetTouch = e.targetTouches[0];
          const x = targetTouch.clientX - state.touchClient.x;
          const y = targetTouch.clientY - state.touchClient.y;
          actions.moveDialog(props.data.id, x, y);
          state.touchClient.x = targetTouch.clientX;
          state.touchClient.y = targetTouch.clientY;
        }
      });
      dialogRef.value?.addEventListener("touchend", (e) => {
        state.touchClient = null;
        closeTimeStart();
      });
      dialogRef.value?.addEventListener("mousedown", (e) => {
        closeTimeEnd();
      });
      dialogRef.value?.addEventListener("mousemove", (e) => {
        if (state.dialogId) {
          actions.moveDialog(state.dialogId, e.movementX, e.movementY);
        }
      });

      dialogRef.value?.addEventListener("mouseup", (e) => {
        state.dialogId = "";
        closeTimeStart();
      });

      initEvent();
    });
    const initEvent = () => {
      window.addEventListener("message", (e) => {
        const data = JSON.parse(e.data);
        if (data.type == "start") {
          messageCloseEnd(data.dialogId);
        } else {
          messageCloseStart(data.dialogId);
        }
      });
    };

    onUnmounted(() => {
      closeTimeEnd();
    });
    const closeTimeStart = () => {
      closeTimeEnd();
      // closeRef.value = setTimeout(close, 30000);
    };
    const messageCloseStart = (dialogId?: string) => {
      if (dialogId == props.data.id) {
        closeTimeStart();
      }
    };
    const messageCloseEnd = (dialogId?: string) => {
      if (dialogId == props.data.id) {
        closeTimeEnd();
      }
    };
    const closeTimeEnd = () => {
      if (closeRef.value) {
        clearTimeout(closeRef.value);
      }
    };

    function close() {
      state.scale = 0;
      actions.closingDialog(props.data);
      setTimeout(() => {
        actions.deleteDialog(props.data);
      }, 400);
    }

    const dialogMove = (flag: boolean) => {
      if (flag) {
        state.dialogId = props.data.id;
      }
    };
    const dialogTouch = (client: any) => {
      state.touchClient = client;
    };

    return () => (
      <div
        ref={dialogRef}
        class={dialogStyle}
        style={{
          transform: `translate(-50%, -50%) scale(${state.scale})`,
          left: `${pos.value.x}px`,
          top: `${pos.value.y}px`,
          width: Math.floor(state.width / 100) + "rem",
          height: Math.floor(state.height / 100) + "rem",
        }}
      >
        <div class={"dialog_view"}>
          {state.itemData._id && (
            <Item
              data={state.itemData}
              dialogId={props.data.id}
              onClose={close}
              onMove={dialogMove}
              onTouch={dialogTouch}
            />
          )}
        </div>
      </div>
    );
  },
});

const dialogStyle = css`
  transform: scale(0);
  transition: transform 0.4s;
  transform-origin: center;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  position: absolute;
  background: url("~@/assets/dialog_bg.png") no-repeat center/cover;
  .dialog_view {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7rem;
    height: 7rem;
    transform: translate(-50%, -50%);
  }
`;