<template>
  <a-modal
    title="修改头像"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    :width="800"
    @cancel="cancelHandel">
    <!-- 使用a-row和a-col布局，左边是裁剪框，右边是预览框 -->
    <a-row>
      <a-col :xs="24" :md="12" :style="{height: '350px'}">
        <!-- 使用vue-cropper组件，设置图片、是否显示信息、自动裁剪、自动裁剪宽度、自动裁剪高度、固定框 -->
        <vue-cropper
          ref="cropper"
          :img="options.img"
          :info="true"
          :autoCrop="options.autoCrop"
          :autoCropWidth="options.autoCropWidth"
          :autoCropHeight="options.autoCropHeight"
          :fixedBox="options.fixedBox"
          @realTime="realTime"
        >
        </vue-cropper>
      </a-col>
      <a-col :xs="24" :md="12" :style="{height: '350px'}">
        <!-- 预览框，显示裁剪后的图片 -->
        <div class="avatar-upload-preview">
          <img :src="previews.url" :style="previews.img"/>
        </div>
      </a-col>
    </a-row>

    <!-- 底部按钮 -->
    <template slot="footer">
      <a-button key="back" @click="cancelHandel">取消</a-button>
      <a-button key="submit" type="primary" :loading="confirmLoading" @click="okHandel">保存</a-button>
    </template>
  </a-modal>
</template>
<script>
// import { VueCropper } from 'vue-cropper'

export default {
  /*
  components: {
    VueCropper
  },
  */
  data () {
    return {
      visible: false, // 弹窗是否可见
      id: null, // 头像id
      confirmLoading: false, // 确认按钮是否加载中

      options: {
        img: '/avatar2.jpg', // 默认图片
        autoCrop: true, // 是否自动裁剪
        autoCropWidth: 200, // 自动裁剪宽度
        autoCropHeight: 200, // 自动裁剪高度
        fixedBox: true // 固定框
      },
      previews: {} // 预览数据
    }
  },
  methods: {
    edit (id) {
      this.visible = true
      this.id = id
      /* 获取原始头像 */
    },
    close () {
      this.id = null
      this.visible = false
    },
    cancelHandel () {
      this.close()
    },
    okHandel () {
      const vm = this

      vm.confirmLoading = true
      setTimeout(() => {
        vm.confirmLoading = false
        vm.close()
        vm.$message.success('上传头像成功')
      }, 2000)
    },

    realTime (data) {
      this.previews = data
    }
  }
}
</script>

<style lang="less" scoped>

  .avatar-upload-preview {
    position: absolute;
    top: 50%;
    transform: translate(50%, -50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow: 0 0 4px #ccc;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
