<template>
  <PageWrapper
    title="图片裁剪示例"
    content="适用于，头像上传，图片上传之前需要进行裁剪，简单说就是，需要图片上传并且需要裁剪，就可以用这个组件快速实现，需要真实接口才能进行上传测试！"
  >
    <el-card shadow="never" class="mt-3 proCard">
      <template #header>
        <div class="card-header">
          <span>圆形裁剪</span>
        </div>
      </template>
      <!--圆形裁剪-->
      <Cropper
        ref="cropperCircled"
        :circled="true"
        :src="src"
        :uploadApi="upload"
        title="圆形头像上传"
      />
      <el-space>
        <el-button class="mt-3 ml-12" @click="cropperCircledImg">选择图片</el-button>
      </el-space>
    </el-card>

    <el-card shadow="never" class="mt-3 proCard">
      <template #header>
        <div class="card-header">
          <span>矩形裁剪</span>
        </div>
      </template>
      <!--矩形裁剪-->
      <Cropper ref="cropperRectangle" :src="src" title="矩形头像上传" />
      <el-space>
        <el-button class="mt-3 ml-12" @click="cropperRectangleImg">选择图片</el-button>
      </el-space>
    </el-card>

    <el-card shadow="never" class="mt-3 proCard">
      <template #header>
        <div class="card-header">
          <span>自定义内容，选择权交给您</span>
        </div>
      </template>
      <!--圆形裁剪-->
      <Cropper ref="cropperCircled" :src="src" :uploadApi="upload" title="矩形头像上传">
        <el-button class="mt-3 ml-12" @click="cropperCircledImg">自定义裁剪图片</el-button>
      </Cropper>
    </el-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Cropper } from '@/components/Cropper';
  import { upload } from '@/api/common/';

  const src = ref('https://img.naiveadmin.com/assets/avatar/avatar-2.jpg');

  const cropperCircled = ref();

  const cropperRectangle = ref();

  function cropperCircledImg() {
    cropperCircled.value.openCropper();
  }

  function cropperRectangleImg() {
    cropperRectangle.value.openCropper();
  }
</script>

<style lang="scss"></style>
