// 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 * 200),
  },
  emits: ["change"],
  setup(props, { emit }) {
    const ctx = useCtx();

    const state = reactive({
      loading: "",
    });
    async function selectFile(key: string) {
      const exts = ["png", "jpg"];
      if (state.loading != "") {
        return false;
      }
      const files = await ctx.list.uploader.selectAnyFile(false, "image/*");
      if (files.length < 1) return { error: "没有选中图片" };
      const oneFile = files[0];

      if (exts.indexOf(oneFile.ext) < 0) {
        message.warn("不支持的文件各式！");
        return false;
      }
      if (oneFile.file.size > props.maxSize) {
        message.warn("图片大小超出限制！");
        return false;
      }

      state.loading = key;
      let res = await ctx.list.uploader.uploadFile(oneFile.file, "museum");
      state.loading = "";
      let value = { ...props.value };
      value[key] = res;
      emit("change", value);
    }

    function deleteFile(key: string) {
      let value = { ...props.value };
      value[key] = null;
      emit("change", value);
    }

    const RenderItem = (key: string) => {
      return (
        <div class="fileItem">
          <DeleteOutlined
            class="iconDelete"
            onClick={() => {
              deleteFile(key);
            }}
          />
          <img src={props.value[key].url} />
        </div>
      );
    };

    const RenderAddItem = (txt: string, key: string) => {
      return (
        <div
          class="fileItem pointer"
          onClick={() => {
            selectFile(key);
          }}
        >
          {state.loading == key ? (
            <>
              <Spin indicator={<LoadingOutlined class="icon" />} />
              <div class={"fileText"}>上传中...</div>
            </>
          ) : (
            <>
              <PlusOutlined class="icon" />
              <div class={"fileText"}>{txt}</div>
            </>
          )}
        </div>
      );
    };

    return () => {
      return (
        <div class={rootStyle}>
          {props.value?.albedo
            ? RenderItem("albedo")
            : RenderAddItem("基础贴图", "albedo")}
          {props.value?.normal
            ? RenderItem("normal")
            : RenderAddItem("法线贴图", "normal")}
          {props.value?.opacity
            ? RenderItem("opacity")
            : RenderAddItem("透明贴图", "opacity")}
        </div>
      );
    };
  },
});

const rootStyle = css`
  display: flex;
  align-items: center;
  .pointer {
    cursor: pointer;
  }
  .fileItem {
    position: relative;
    width: 100px;
    height: 100px;
    padding: 5px;
    margin-right: 10px;
    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;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .fileText {
      margin-top: 5px;
      width: 100%;
      padding: 0 5px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
    }
    .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;
`;
