<template>
  <a-upload :show-upload-list="false" :custom-request="onFileChange">
    <div class="cover-upload">
      <img v-if="cover" :src="cover" alt="" />
      <div class="cover-edit-wrap">
        <template v-if="uploading">
          <LoadingOutlined />
        </template>
        <template v-else>
          <div class="add">
            <PlusOutlined />
          </div>
        </template>
      </div>
      <p class="tip-text" v-if="tips">{{ tips }}</p>
      <a v-if="cover" herf="javavscript:;" class="pre-view" @click.stop="onPreView">预览</a>
    </div>
  </a-upload>
  <a-modal
    title="预览"
    :visible="visible"
    @cancel="onPreView"
    footer=""
  >
    <img v-if="cover" :src="cover" alt="预览图" class="pre-view-pic"/>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from "vue";
import { message } from "ant-design-vue";
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons-vue";

import { onUpload } from "@/api";

const ImageUpload = defineComponent({
  name: "ImageUpload",
  components: {
    LoadingOutlined,
    PlusOutlined
  },
  props: {
    type: {
      type: String,
      default: () => ""
    },
    name: {
      type: String,
      required: true,
      default: () => ""
    },
    value: {
      type: String,
      default: () => ""
    },
    tips: {
      type: String,
      default: () => "支持jpg、png、jpeg格式，600KB以内"
    }
  },
  emits: ["change"],
  setup(props, { emit }) {
    console.log(props.value);
    const state = reactive({
      uploading: false,
      cover: props.value ?? "",
      visible: false,
    });
    watch(
      () => props.value,
      () => {
        state.cover = props.value;
      }
    );
    const onFileChange = async (file: { file: File }) => {
      if(file.file.size / 1024 > 600) return message.error("图片大小超过600KB，请重新选择");
      try {
        state.uploading = true;
        let tempFile = file.file;
        const { data } = await onUpload(tempFile, props.type ?? "");
        state.cover = data.url;
        emit("change", { url: state.cover, type: props.name });
      } catch (error) {
        message.error(error.msg ?? "系统错误");
      } finally {
        state.uploading = false;
      }
    };
    const onPreView = () => {
      state.visible = state.visible ? false : true;
    };

    return { ...toRefs(state), onFileChange, onPreView };
  }
});

export default ImageUpload;
</script>

<style lang="scss" scoped>
.cover-upload {
  font-size: 0;
  position: relative;
  width: 128px;
  height: 128px;
  // overflow: hidden;

  img {
    width: 128px;
    height: 128px;
    border-radius: 6px;
  }

  .tip-text {
    position: absolute;
    right: 0;
    top: 0%;
    transform: translate(105%, 0%);
    font-size: 12px;
    color: #999;
    width: 250px;
  }

  .pre-view {
    position: absolute;
    right: -10px;
    bottom: 0%;
    transform: translate(105%, 0%);
    font-size: 12px;
  }

  .cover-edit-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba($color: #000, $alpha: 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.3s;
    opacity: 1;
    border-radius: 6px;

    // &:hover {
    //   opacity: 1;
    // }
  }
}
.pre-view-pic {
  width: 100%;
  max-height: 100%;
}
</style>
