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

export default defineComponent({
  props: {
    value: array<string>().def([]),
    cols: number().def(3),
    maxNumber: number().def(1),
    maxSize: number().def(1024 * 1024 * 20),
    gap: string().def("8px"),
  },
  emits: ["change"],
  setup(props, { emit }) {
    const ctx = useCtx();
    const state = reactive({
      loading: false,
    });
    async function selectFile() {
      if (state.loading) {
        return false;
      }
      const exts = ["png", "jpg"];
      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 = true;
      let res = await ctx.list.uploader.uploadFile2Server(oneFile.file);
      state.loading = false;
      if (res?.url) {
        emit("change", [...props.value, res.url]);
      } else {
        message.warn("上传失败");
      }
    }

    function deleteFile(i: number, e: MouseEvent) {
      e.stopPropagation();
      const files = [...props.value];
      files.splice(i, 1);
      emit("change", files);
    }

    const RenderPicItem = (item: any, i: number) => {
      return (
        <View class="picItem" ratio={1} bgSrc={item} key={i}>
          <DeleteOutlined
            class="iconDelete"
            onClick={deleteFile.bind(null, i)}
          />
        </View>
      );
    };

    const RenderAddItem = () => {
      if (props.maxNumber != 0 && props.value?.length < props.maxNumber) {
        return (
          <View class="picItem pointer" ratio={1} onClick={selectFile}>
            {state.loading ? (
              <>
                <Spin indicator={<LoadingOutlined class="icon" />} />
                <div class={"fileText"}>上传中...</div>
              </>
            ) : (
              <>
                <PlusOutlined class="iconAdd" />
                <div class={"fileText"}>上传图片</div>
              </>
            )}
          </View>
        );
      } else {
        return null;
      }
    };

    return () => {
      return (
        <List
          class={rootStyle}
          data={props.value}
          columns={props.cols}
          gap={props.gap}
        >
          {{
            item: RenderPicItem,
            afterChild: RenderAddItem,
          }}
        </List>
      );
    };
  },
});

const rootStyle = css`
  .pointer {
    cursor: pointer;
  }
  .picItem {
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    .ant-view-wrapper {
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: var(--primary-color);
    }
    .fileText {
      margin-top: 5px;
      width: 100%;
      padding: 0 5px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
    }
    .iconAdd {
      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;
      }
    }
  }
`;
