<template>
  <basicModal
    ref="modalRef"
    class="cropperModal"
    @register="modalRegister"
    @ok="handleOk"
    @cancel="handleClose"
  >
    <template #default>
      <div class="cropper-box">
        <div class="cropper-box-left">
          <div class="cropper-box-left-cropper">
            <CropperImage
              v-if="src"
              :circled="circled"
              :src="src"
              height="300px"
              @cropend="handleCropend"
              @ready="handleReady"
            />
          </div>
          <div class="cropper-box-left-toolbar">
            <a-upload
              :showUploadList="false"
              accept="image/*"
              :before-upload="beforeUpload"
              :customRequest="customRequest"
            >
              <a-tooltip placement="bottom" trigger="hover">
                <template #title> 上传图片 </template>
                <a-button size="small" type="primary">
                  <template #icon>
                    <UploadOutlined />
                  </template>
                </a-button>
              </a-tooltip>
            </a-upload>
            <a-space>
              <a-tooltip placement="bottom" trigger="hover">
                <template #title> 重置 </template>
                <a-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('reset')"
                >
                  <template #icon>
                    <ReloadOutlined />
                  </template>
                </a-button>
              </a-tooltip>
              <a-tooltip placement="bottom" trigger="hover">
                <template #title> 逆时针旋转 </template>
                <a-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('rotate', -45)"
                >
                  <template #icon>
                    <RotateLeftOutlined />
                  </template>
                </a-button>
              </a-tooltip>
              <a-tooltip placement="bottom" trigger="hover">
                <template #title> 顺时针旋转 </template>
                <a-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('rotate', 45)"
                >
                  <template #icon>
                    <RotateRightOutlined />
                  </template>
                </a-button>
              </a-tooltip>
              <a-tooltip placement="bottom" trigger="hover">
                <template #title> 水平翻转 </template>
                <a-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('scaleX')"
                >
                  <template #icon>
                    <SwapOutlined />
                  </template>
                </a-button>
              </a-tooltip>
              <a-tooltip placement="bottom" trigger="hover">
                <template #title> 垂直翻转 </template>
                <a-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('scaleY')"
                >
                  <template #icon>
                    <VerticalAlignMiddleOutlined />
                  </template>
                </a-button>
              </a-tooltip>
              <a-tooltip placement="bottom" trigger="hover">
                <template #title> 放大 </template>
                <a-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('zoom', 0.1)"
                >
                  <template #icon>
                    <ZoomInOutlined />
                  </template>
                </a-button>
              </a-tooltip>
              <a-tooltip placement="bottom" trigger="hover">
                <template #title> 缩小 </template>
                <a-button
                  :disabled="!src"
                  size="small"
                  type="primary"
                  @click="handlerToolbar('zoom', -0.1)"
                >
                  <template #icon>
                    <ZoomOutOutlined />
                  </template>
                </a-button>
              </a-tooltip>
            </a-space>
          </div>
        </div>
        <div class="cropper-box-right">
          <div
            :class="{ 'cropper-box-right-preview-radius': circled }"
            class="cropper-box-right-preview"
          >
            <img v-if="previewSource" :src="previewSource" />
          </div>
          <template v-if="previewSource">
            <div class="cropper-box-right-group">
              <a-avatar :src="previewSource" size="large" />
              <a-avatar :size="48" :src="previewSource" />
              <a-avatar :size="64" :src="previewSource" />
              <a-avatar :size="80" :src="previewSource" />
            </div>
          </template>
        </div>
      </div>
    </template>
  </basicModal>
</template>

<script lang="ts" setup>
  import type { CropendResult, Cropper } from './typing';
  import { ref } from 'vue';
  import { message } from 'ant-design-vue';
  import { basicModal, useModal } from '@/components/Modal';
  import type { UploadProps } from 'ant-design-vue';
  import CropperImage from './CropperImage.vue';
  import { dataURLtoBlob, base64ToFile } from '@/utils/file/base64Conver';
  import { isFunction } from '@/utils/is';
  import {
    UploadOutlined,
    ReloadOutlined,
    RotateLeftOutlined,
    RotateRightOutlined,
    SwapOutlined,
    VerticalAlignMiddleOutlined,
    ZoomInOutlined,
    ZoomOutOutlined,
  } from '@ant-design/icons-vue';

  const props = defineProps({
    title: { type: String, default: '图片上传' },
    circled: { type: Boolean, default: false },
    uploadApi: {
      type: Function as PropType<(params) => Promise<any>>,
    },
    name: { type: String, default: 'name' },
  });

  const emit = defineEmits(['uploadSuccess', 'register']);

  const modalRef = ref(null);

  let filename = '';
  const src = ref('');
  const previewSource = ref('');
  const cropper = ref<Cropper>();
  let scaleX = 1;
  let scaleY = 1;

  const [modalRegister, { openModal, closeModal, setSubLoading }] = useModal({
    title: props.title,
    width: 800,
  });
  function customRequest() {
    // 自定义上传逻辑，这里暂时不做处理
  }

  // 上传图片
  const beforeUpload = async (file) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    src.value = '';
    previewSource.value = '';
    reader.onload = function (e) {
      src.value = (e.target?.result as string) ?? '';
      filename = file.name;
    };
    return false;
  };

  function handleCropend({ imgBase64 }: CropendResult) {
    previewSource.value = imgBase64;
  }

  function handleReady(cropperInstance: Cropper) {
    cropper.value = cropperInstance;
  }

  function handlerToolbar(event: string, arg?: number) {
    if (event === 'scaleX') {
      scaleX = arg = scaleX === -1 ? 1 : -1;
    }
    if (event === 'scaleY') {
      scaleY = arg = scaleY === -1 ? 1 : -1;
    }
    cropper?.value?.[event]?.(arg);
  }

  async function handleOk() {
    if (!src.value) {
      setSubLoading(false);
      return message.error('请先上传图片');
    }
    const uploadApi = props.uploadApi;
    const name = props.name
    if (uploadApi && isFunction(uploadApi)) {
      const file = base64ToFile(previewSource.value, filename);
      try {
        setSubLoading(true);
        const formData = new FormData();
        formData.append('file', file);
        formData.append('name', name);
        const result = await uploadApi(formData);
        emit('uploadSuccess', result);
        closeModal();
      } finally {
        setSubLoading(false);
      }
    }
  }
  function handleClose() {
    src.value = '';
    previewSource.value = '';
  }

  defineExpose({
    openModal,
  });
</script>

<style lang="less" scoped>
  .cropper-box {
    display: flex;

    &-left,
    &-right {
      height: 340px;
    }

    &-left {
      width: 55%;

      &-cropper {
        height: 300px;
        background: #eee;
        background-image: linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.25) 25%,
            transparent 0,
            transparent 75%,
            rgba(0, 0, 0, 0.25) 0
          ),
          linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.25) 25%,
            transparent 0,
            transparent 75%,
            rgba(0, 0, 0, 0.25) 0
          );
        background-position: 0 0, 12px 12px;
        background-size: 25px 25px;
      }

      &-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
      }
    }

    &-right {
      width: 45%;

      &-preview {
        width: 220px;
        height: 220px;
        margin: 0 auto;
        overflow: hidden;
        border: 1px solid #ddd;

        img {
          width: 100%;
          height: 100%;
        }
      }

      &-preview-radius {
        border-radius: 50%;
      }

      &-group {
        display: flex;
        padding-top: 8px;
        margin-top: 8px;
        border-top: 1px solid #d9d9d9;
        justify-content: space-around;
        align-items: center;
      }
    }
  }
</style>
