<template>
  <el-container>
    <el-main>
      <div class="filemanager-cropper">
        <img ref="cropperRef" :src="checkUrl(modal.params.cropper.url)" />
      </div>
      <div class="wh">
        <div class="sa-m-b-10"
          >宽：{{ cropperWh.width }} <span class="sa-m-l-4 sa-m-r-4"></span> 高：{{
            cropperWh.height
          }}</div
        >
        <div>
          质量：
          <el-select v-model="imageSmoothingQuality" placeholder="Select">
            <el-option label="默认" value="low" />
            <el-option label="中" value="medium" />
            <el-option label="高" value="high" />
          </el-select>
        </div>
      </div>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button @click="callback" type="primary">确定</el-button>
    </el-footer>
  </el-container>
</template>

<script>
  export default {
    name: 'FileCropper',
  };
</script>

<script setup>
  import { nextTick, onMounted, ref, unref } from 'vue';
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';
  import Cropper from 'cropperjs';
  import { cloneDeep } from 'lodash';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps(['modal']);

  const cropperRef = ref(null);
  const saCropper = ref(null);
  const cropperWh = ref({});
  const imageSmoothingQuality = ref('low');
  async function callback() {
    if (props.modal.params.type == 'select') {
      const files = dataURLtoFile(
        saCropper.value
          .getCroppedCanvas({
            imageSmoothingQuality: imageSmoothingQuality.value,
          })
          .toDataURL(props.modal.params.cropper.mimetype),
        props.modal.params.cropper.filename || `${props.modal.params.cropper.url.split('/').pop()}`,
      );
      emit('modalCallBack', { event: 'confirm', data: files });
    }
    if (props.modal.params.type == 'upload') {
      const upCropper = cloneDeep(props.modal.params.cropper);
      upCropper.url = saCropper.value
        .getCroppedCanvas({
          imageSmoothingQuality: imageSmoothingQuality.value,
        })
        .toDataURL(props.modal.params.cropper.raw.type);
      upCropper.raw = dataURLtoFile(upCropper.url, props.modal.params.cropper.name);
      upCropper.url = URL.createObjectURL(upCropper.raw);
      emit('modalCallBack', { event: 'confirm', data: upCropper });
    }
  }
  // base64 转文件
  function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1];
    var bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
  }
  onMounted(() => {
    nextTick(() => {
      const image = unref(cropperRef);
      saCropper.value = new Cropper(image, {
        viewMode: 1,
        crop: (e) => {
          cropperWh.value = {
            width: e.detail.width.toFixed(0),
            height: e.detail.height.toFixed(0),
          };
        },
      });
    });
  });
</script>

<style lang="scss">
  .filemanager-cropper {
    width: auto;
    height: 300px;
    .cropper-container {
      width: auto;
      height: 300px;
    }
  }
  .wh {
    line-height: 20px;
    margin-top: 10px;
    font-size: 14px;
    color: var(--sa-subfont);
  }
</style>
