<template>
  <div class="crop_wrap">
      <div class="crop_main_wrap">
        <div class="title">{{title}}</div>
        <div @click="close" class="close"></div>
        <div class="crop_main">
          <cropper-main
              ref="cropper"
              :img="img"
              :outputSize="outputSize"
              :outputType="outputType"
              :info="info"
              :full="full"
              :canMove="canMove"
              :canMoveBox="canMoveBox"
              :original="original"
              :autoCrop="autoCrop"
              :fixed="fixed"
              :fixedNumber="fixedNumber"
              :fixedBox="fixedBox"
              :infoTrue="infoTrue"
              :enlarge="enlarge"
              :centerBox="centerBox"
          ></cropper-main>
          <div class="loading" v-if="loading">
            <woo-spinner filled></woo-spinner>
          </div>
        </div>
        <div class="btn_wrap">
          <!-- <div class="file_upload_wrap"> -->
            <wl-button type="default" style="margin-right:14px;" ref="btnCancel" @click="cancelHander">{{btnCancel}}</wl-button>
          <!-- </div> -->
          <wl-button  ref="btnConfirm" @click="confirmHander">{{btnConfirm}}</wl-button>
        </div>
      </div>
    </div>
</template>
<script>
import cropperMain from "./cropper_main";
import mixin from '../mixin'
import wbutton from '../wbutton'
export default {
  name: mixin.prefix+'cropper',
  components:{
    cropperMain,
    'wl-button':wbutton
  },
  data() {
    return {
      cropperShow:false,
      uploadUrl:'',
      loading:false
    }
  },
  props: {
    title: {
      type: String,
      default: ""
    },
    btnCancel: {
      type: String,
      default: "取消"
    },
    btnConfirm: {
      type: String,
      default: "确定"
    },
    img: {
      type: [String, Blob, null, File],
      default: ""
    },
    // 输出图片压缩比
    outputSize: {
      type: Number,
      default: 1
    },
    outputType: {
      type: String,
      default: "jpeg"
    },
    info: {
      type: Boolean,
      default: true
    },
    // 是否开启滚轮放大缩小
    canScale: {
      type: Boolean,
      default: true
    },
    // 是否自成截图框
    autoCrop: {
      type: Boolean,
      default: false
    },
    autoCropWidth: {
      type: [Number, String],
      default: 0
    },
    autoCropHeight: {
      type: [Number, String],
      default: 0
    },
    // 是否开启固定宽高比
    fixed: {
      type: Boolean,
      default: false
    },
    // 宽高比 w/h
    fixedNumber: {
      type: Array,
      default: () => {
        return [1, 1];
      }
    },
    // 固定大小 禁止改变截图框大小
    fixedBox: {
      type: Boolean,
      default: false
    },
    // 输出截图是否缩放
    full: {
      type: Boolean,
      default: false
    },
    // 是否可以拖动图片
    canMove: {
      type: Boolean,
      default: true
    },
    // 是否可以拖动截图框
    canMoveBox: {
      type: Boolean,
      default: true
    },
    // 上传图片按照原始比例显示
    original: {
      type: Boolean,
      default: false
    },
    // 截图框能否超过图片
    centerBox: {
      type: Boolean,
      default: false
    },
    // 是否根据dpr输出高清图片
    high: {
      type: Boolean,
      default: true
    },
    // 截图框展示宽高类型
    infoTrue: {
      type: Boolean,
      default: false
    },
    // 可以压缩图片宽高  默认不超过200
    maxImgSize: {
      type: [Number, String],
      default: 2000
    },
    // 倍数  可渲染当前截图框的n倍 0 - 1000;
    enlarge: {
      type: [Number, String],
      default: 1
    },

    // 自动预览的固定宽度
    preW: {
      type: [Number, String],
      default: 0
    },
    /*
      图片布局方式 mode 实现和css背景一样的效果
      contain  居中布局 默认不会缩放 保证图片在容器里面 mode: 'contain'
      cover    拉伸布局 填充整个容器  mode: 'cover'
      如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为auto。 mode: '50px'
      如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。 mode: '50px 60px'
    */
    mode: {
      type: String,
      default: "contain"
    },
    //限制最小区域,可传1以上的数字和字符串，限制长宽都是这么大
    // 也可以传数组[90,90] 
    limitMinSize: {
      type: [Number, Array, String],
      default: () => {
        return 10;
      }
    },
  },
  methods: {
    close(){
      this.$emit('close');
      this.remove && this.remove()
    },
    cancelHander(){
      this.$emit('cancel');
    },
    confirmHander(){
      this.$refs.cropper.getCropData((data) => {
        this.$emit('confirm',data);
      })      
    }
  },
}
</script>
<style lang="less" scoped>
@import '../mixin.less';
  .crop_wrap{
    width:100%;
    height:100%;
    position:fixed;
    background:rgba(0, 0, 0, 0.5);
    top:0;
    left:0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
  .crop_main_wrap{
    width:600px;
    height:460px;
    background:@color-light;
    border-radius:8px;
    position:relative;
    padding:0.1rem ;
    .title{
      font-size:18px;
      font-weight:bold;
      height:46px;
      display:flex;
      align-items: center;
      padding:0 20px;
      border-bottom:1px solid var(--w-color-gray-4);
      justify-content: center;
    }
    .close{
      position:absolute;
      width:30px;
      height:30px;
      top:10px;
      right:14px;
      background:url(./images/close.png) no-repeat center;
      background-size:16px;
      cursor: pointer;
    }
    .crop_main{
      width: 560px;
      height:343px;
      margin:0 auto 18px;
      position:relative;
      .loading{
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        display:flex;
        align-items: center;
        justify-content: center;
        z-index: 4;
        font-size:40px;
        background:rgba(0,0,0,0.4);
      }
    }
    .btn_wrap{
      line-height:0;
      margin:0;
      display:flex;
      justify-content: center;
    }
    .file_upload_wrap{
      margin-right:14px;
    }
  }
</style>
