// import { Sku3d_QueenTree_Conf } from "@/config/queentree";
import { useCtx } from "@/pages/website/context";
import { css } from "@linaria/core";
import { Modal } from "queenjs/ui";
import { message, Spin } from "ant-design-vue";
import {
  LoadingOutlined,
  PlayCircleOutlined,
  PlusOutlined,
  DeleteOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, reactive } from "vue";
import { any, array, number, string } from "vue-types";

export default defineComponent({
  props: {
    value: any(),
    cols: number().def(3),
    maxNumber: number().def(1),
    maxSize: number().def(1024 * 1024 * 500),
  },
  emits: ["change"],
  setup(props, { emit }) {
    const ctx = useCtx();
    const exts = ["fbx", "obj", "glb", "gltf"];
    const state = reactive({
      loading: false,
    });
    async function selectFile() {
      if (state.loading) {
        return false;
      }
      const files = await ctx.list.uploader.selectAnyFile(false, "*");
      if (files.length < 1) {
        message.warn("没有选中文件");
        return false;
      }
      const oneFile = files[0];

      if (exts.indexOf(oneFile.ext) < 0) {
        message.warn("不支持的文件格式");
        return false;
      }
      if (props.maxSize > 0 && oneFile.file.size > props.maxSize) {
        message.warn("文件过大");
        return false;
      }
      state.loading = true;
      const fileRes = await ctx.list.uploader.uploadFile(
        oneFile.file,
        "museum"
      );
      state.loading = false;
      if (fileRes) {
        emit("change", fileRes.url);
      } else {
        message.warn("上传失败");
      }
    }

    function deleteFile(e) {
      e.stopPropagation();
      emit("change", null);
    }
    const getName = (url: string) => {
      const nameIndex = url.lastIndexOf("/") + 1;
      return url.substring(nameIndex);
    };

    const RenderItem = () => {
      return (
        <div class="fileItem">
          <DeleteOutlined class="iconDelete" onClick={deleteFile} />
          <div class={"fileText"}>{getName(props.value)}</div>
        </div>
      );
    };

    const RenderAddItem = () => {
      return (
        <div class="fileItem pointer" onClick={selectFile}>
          {state.loading ? (
            <>
              <Spin indicator={<LoadingOutlined class="icon" />} />
              <div class={"fileText"}>上传中...</div>
            </>
          ) : (
            <>
              <PlusOutlined class="icon" />
              <div class={"fileText"}>上传模型</div>
              <div class={"tips"}>支持{exts.join("/")}格式</div>
            </>
          )}
        </div>
      );
    };

    return () => {
      return (
        <div class={rootStyle}>
          {props.value ? RenderItem() : RenderAddItem()}
        </div>
      );
    };
  },
});

const rootStyle = css`
  .pointer {
    cursor: pointer;
  }
  .fileItem {
    position: relative;
    width: 200px;
    height: 100px;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 14px;

    .fileText {
      margin-top: 5px;
      width: 100%;
      padding: 0 5px;
      text-align: center;
    }
    .tips {
      color: #ccc;
    }
    .icon {
      font-size: 24px;
      color: var(--primary-color);
    }
    .iconDelete {
      display: none;
      position: absolute;
      top: 4px;
      right: 4px;
      padding: 4px;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 3px;
      font-size: 12px;
      color: #fff;
    }

    &:hover {
      .iconDelete {
        display: block;
      }
    }
  }
`;
const VideoPreview = css`
  width: 800px;
`;
