import ItemObject from "@/modules/list/objects/item";
import { css } from "@linaria/core";
import { defineComponent, onMounted, reactive, ref } from "vue";
import { any, object } from "vue-types";
import { useCtx } from "../../context";
import SwiperImage from "./swiperImage";

import Quill from "quill";
export default defineComponent({
  props: {
    data: object<ItemObject>(),
    dialogId: any(),
  },
  emits: ["close", "move", "touch"],
  setup(props, { emit }) {
    // const ctx = useCtx();
    // const state = reactive({
    //   descShow: false,
    //   loaded: false,
    //   spin: false,
    // });
    const moveRef = ref<HTMLElement>();
    // const editorRef = ref<HTMLElement>();
    onMounted(() => {
      // if (props.data.desc) {
      //   initQuillEditor();
      // }
      moveRef.value?.addEventListener("touchstart", (e) => {
        let targetTouch = e.targetTouches[0];
        emit("touch", { x: targetTouch.clientX, y: targetTouch.clientY });
      });

      moveRef.value?.addEventListener("mousedown", (e) => {
        emit("move", true);
      });
    });
    // const descTigger = () => {
    //   state.descShow = !state.descShow;
    // };

    // const initQuillEditor = () => {
    //   let quill = new Quill(editorRef.value, {
    //     theme: "snow",
    //     readOnly: true,
    //     modules: {
    //       toolbar: false,
    //     },
    //   });
    //   let delta = JSON.parse(props.data.desc);
    //   quill.setContents(delta);
    //   quill.update();
    // };
    // const getExt = (url: string) => {
    //   const nameIndex = url.lastIndexOf("/") + 1;
    //   const name = url.substring(nameIndex);
    //   const ext = name.substring(name.indexOf(".") + 1);
    //   return ext;
    // };

    return () => {
      const { data } = props;
      return (
        <div class={ItemStyle}>
          {/* <div class={"name"}>{data?.name}</div>
          {data?.subName && <div class={"sub_name"}>{data?.subName}</div>}
          {data?.type == "img" && (
            <div class={"images"}>
              {data?.images && data?.images.length > 0 ? (
                <SwiperImage images={data?.images} />
              ) : (
                <img class={"img"} src={data?.thumbnail} />
              )}
            </div>
          )}
          {data?.type == "video" && (
            <div class={"video_view"}>
              <video
                controls
                style={{ width: "100%", height: "100%", objectFit: "cover" }}
              >
                <source
                  src={data.videoUrl}
                  type={`video/${getExt(data.videoUrl)}`}
                />
                您的浏览器不支持 video 标签。
              </video>
            </div>
          )} */}

          <div class={"view_3d"}>
            <iframe
              src={
                "./frame3d.html#/?id=" +
                props.data.meshId +
                "&dialogid=" +
                props.dialogId
              }
              allowtransparency="true"
              style={{ backgroundColor: "transparent" }}
              frameborder="0"
              width="100%"
              height="100%"
              scrolling="no"
            />
          </div>

          {/* {data?.desc && (
            <div class={"desc_view"}>
              <div class={`desc_editor ${state.descShow ? "show" : ""}`}>
                <div ref={editorRef}></div>
              </div>
              {!state.descShow && (
                <div
                  key={Math.random()}
                  class={"desc_show"}
                  onClick={descTigger}
                >
                  <img src={require("@/assets/btn_more.png")} />
                </div>
              )}
            </div>
          )} */}

          <div class={"btm_btn_view"}>
            {/* {state.descShow && (
              <div class={"btn"} onClick={descTigger}>
                <img src={require("@/assets/btn_back.png")} />
              </div>
            )} */}
            <div class={"btn"} ref={moveRef}>
              <img src={require("@/assets/btn_move.png")} />
            </div>
            <div
              class={"btn"}
              onClick={() => {
                emit("close");
              }}
            >
              <img src={require("@/assets/btn_close.png")} />
            </div>
          </div>
        </div>
      );
    };
  },
});
const CanvasStyle = css`
  width: 100%;
  height: 100%;
  visibility: hidden;
  &.loaded {
    visibility: inherit;
  }
`;
const ItemStyle = css`
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  text-align: center;
  .name {
    padding: 0 0.8rem;
    font-size: 0.18rem;
    color: #fdf8f8;
  }
  .sub_name {
    margin-top: 0.12rem;
    font-size: 0.14rem;
    color: #fdf8f8;
    font-weight: 400;
    color: #ffedab;
  }
  .images {
    margin-top: 0.4rem;
    height: 3.4rem;
    .img {
      width: 4.5rem;
      height: 3.4rem;
      object-fit: cover;
    }
  }
  .video_view {
    margin: 0 auto;
    width: 4.5rem;
    height: 3.4rem;
  }
  .view_3d {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 4rem;
    .loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .desc_view {
    margin: 0.1rem auto 0;
    width: 4.5rem;
    .desc_editor {
      height: 0;
      padding: 0 0.15rem;
      font-size: 0.16rem;
      font-weight: 400;
      color: #ffedab;
      line-height: 0.24rem;
      text-align: left;
      overflow-y: hidden;
      word-break: break-all;
      &.show {
        height: auto;
        max-height: 1.6rem;
        overflow-y: auto;
      }
      .ql-container.ql-snow {
        border: none;
      }
      ::-webkit-scrollbar {
        width: 0.1rem;
      }
      ::-webkit-scrollbar-track {
        background: rgba(255, 237, 171, 0.2);
      }
      ::-webkit-scrollbar-thumb {
        background: rgba(255, 237, 171, 0.8);
        width: 0.1rem;
        border-radius: 0;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 237, 171, 1);
      }
      img {
        max-width: 100%;
      }
    }
    .desc_show {
      text-align: center;
      cursor: pointer;
      img {
        height: 0.4rem;
        object-fit: contain;
      }
    }
  }
  .btm_btn_view {
    display: flex;
    justify-content: center;
    margin-top: 0.2rem;
    .btn {
      margin: 0 0.2rem;
      cursor: pointer;
      img {
        width: 0.3rem;
        height: 0.3rem;
        object-fit: contain;
        user-select: none;
        -webkit-user-drag: none;
      }
    }
  }
`;
