import { defineComponent } from "vue";
import { any, string } from "vue-types";
import { PlusOutlined } from "@ant-design/icons-vue";
import { css } from "@linaria/core";
import Image from "@/components/Image";
import { uploader } from "../objects";

import { message } from "ant-design-vue";
export default defineComponent({
  props: {
    text: string(),
    data: string(),
  },
  emits: ["change"],
  setup(props, { emit }) {
    const uploadImage = async () => {
      const [file] = await uploader.selectFile();
      const exts = ["jpg", "png", "jpeg"];
      if (!exts.includes(uploader.getFileExt(file))) {
        message.warn(`图片格式只支持${exts.join("/")}`);
        return false;
      }
      if (file.size > 5 * 1024 * 1024) {
        message.warn("图片不能超过5M!");
        return false;
      }
      emit("change", uploader.createObjectURL(file));
    };

    return () => (
      <div class={ImageStyle} onClick={uploadImage}>
        <div class={"wapper"}>
          {props.data ? (
            <Image src={props.data} />
          ) : (
            <div class={"no_value"}>
              <PlusOutlined />
              <div class={"up_txt"}>{props.text}</div>
            </div>
          )}
        </div>
      </div>
    );
  },
});
const ImageStyle = css`
  width: 100%;
  height: 100%;
  color: #343434;
  background-color: #f2f2f2;
  font-size: 24px;
  border-radius: 2px;
  cursor: pointer;
  .wapper {
    width: 100%;
    height: 100%;
    max-height: 300px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .no_value {
    padding: 24px 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    .up_txt {
      margin-top: 10px;
      font-size: 14px;
      color: #343434;
    }
  }
  img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    object-fit: cover;
  }
`;
