<template>
  <div>
    <Card>
      <div class="cropper-example cropper-first">
        <cropper
          ref="info"
          :src="exampleImageSrc"
          :crop-button-text="$t('submit')"
          @transmitInfo="handleCroped"
        ></cropper>
      </div>
    </Card>
  </div>
</template>

<script>
import Cropper from '@/components/cropper'
import { Upload } from '@/api/data'
import { getToken } from '@/libs/util'
export default {
  name: 'cropper_page',
  components: {
    Cropper
  },
  data () {
    return {
      token: getToken(),
      exampleImageSrc: ''
    }
  },
  created () {
  },
  methods: {
    handleCroped (fileData) {
      if (fileData.fileSize > 2097152) {
        this.$Message.warning(this.$t('doc_too_large_and_upload_again'))
      } else {
        const formdata = new FormData()
        formdata.append('access_token', this.token)
        formdata.append('file', fileData.updataFile)
        // formdata.append('file_name', fileData.name)
        Upload(formdata).then((res) => {
          if (res.ret === 200) {
            this.$Message.success(this.$t('successfully_uploaded'))
            this.$router.push({ name: 'assets_manage' })
          } else {
            this.$Message.warning(res.msg)
          }
        })
      }
    }
  }
}
</script>

<style lang="less">
// .cropper-example {
  // min-height: 500px;
// }
</style>
