<template>
  <div class="box">
    <h1>上传头像</h1>
    <div class="center">
      <div class="center-left">
        <div class="center-left__box">
          <div v-if="!restart" @click="up" class="false_box">
            <div class="false-box__imgbox">
              <img src="../../assets/images/userCenter/add.png" />
            </div>
            <p class="false-box__p">上传图片</p>
          </div>
          <VueCropper
            v-else
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="true"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :fixedBox="option.fixedBox"
            @realTime="realTime"
            fixed
            centerBox
            @imgLoad="imgLoad"
          ></VueCropper>
        </div>
        <div class="center-left__btn">
          <span @click="restartUp">重新上传</span>
          <!-- <span @click="up" v-else>上传图片</span> -->
          <input
            ref="inputDom"
            type="file"
            accept="image/jpeg, image/png"
            @click.stop
            @change.stop="fileChange"
            hidden
          />
          <div class="i-box">
            <i class="iconfont iconsuoxiao" @click="changeScale(-1)"></i>
            <i class="iconfont iconfangda" @click="changeScale(1)"></i>
            <i class="iconfont iconxuanzhuan" @click="rotateRight"></i>
          </div>
        </div>
        <p class="center-left__tip">只支持JPG/PNG,大小不超过5M</p>
      </div>
      <div class="center-right">
        <div
          class="preview"
          :style="{
            width: previews.w + 'px',
            height: previews.h + 'px',
            overflow: 'hidden',
          }"
        >
          <div :style="previews.div">
            <img :src="previews.url" :style="previews.img" />
          </div>
        </div>
        <p>头像预览</p>
      </div>
    </div>
    <!-- 按钮部分 -->
    <div class="btn-box">
      <div class="btn" @click="cancel">取消</div>
      <div class="btn" @click="Confirm">确定</div>
    </div>
  </div>
</template>
<script>
import { VueCropper } from "vue-cropper";
import { GO_URLS } from "@/config/URLS";
export default {
  //   引入组件
  components: {
    VueCropper,
  },
  data() {
    return {
      previews: {}, // 图片预览
      option: {
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "jpeg", // 裁剪生成图片的格式
        autoCrop: true, // 是否默认生成截图框
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: false, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        canMove: true,
        autoCropWidth: 120,
        autoCropHeight: 120,
      },
      restart: false,
    };
  },
  methods: {
    //右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    //放大/缩小
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    // 图片上传请求
    async imageUpload(formData) {
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.upload + `?file_type=png`,
        params: formData,
      });
      if (res) {
        // 后续操作，干掉弹窗，把值带出去
        this.$emit("logoUrl", res.data);
        this.cancel();
      }
    },
    // 上传图片
    Confirm() {
      if (this.previews.url === "") {
        this.$message({
          message: "请先上传图片",
          type: "warning",
        });
        return;
      }
      //  let blob = this.dataURLtoFile(element.img, "image/png");
      //   var fileOfBlob = new Blob([blob], { type: "image/png" });
      //   formData.append("file_data", fileOfBlob, new Date() + ".png");
      const formData = new FormData();
      this.$refs.cropper.getCropBlob((data) => {
        formData.append("file_data", data, new Date() + ".jpg");
      });
      setTimeout(() => {
        this.imageUpload(formData);
      }, 300);
    },
    cancel() {
      this.$emit("close");
    },
    // 图片预览
    realTime(data) {
      this.previews = data;
    },
    imgLoad(msg) {
      if (msg === "error") {
        setTimeout(() => {
          this.previews.url = "";
        }, 300);
      }
      if (msg === "success") {
        this.restart = true;
      }
    },
    // 图片-本地上传
    fileChange(e) {
      this.previews.url = "";
      this.option.img = " ";
      const file = e.target.files[0];
      this.restart = true;
      if (file?.size > 1000 * 1000 * 5) {
        this.$message.error('大小不超过5M');
        return;
      }
      if (file) this.option.img = URL.createObjectURL(file);
    },
    // 上传图片
    up() {
      this.$refs.inputDom.click();
    },
    restartUp() {
      this.$refs.inputDom.click();
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  width: 600px;
  height: 457px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 20px 0px rgba(61, 118, 249, 0.18);
  h1 {
    height: 30px;
    font-size: 22px;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 30px;
    margin: 0;
    padding-top: 34px;
    padding-left: 44px;
    // border-bottom: 1px solid #000;
  }
  .center {
    width: 100%;
    height: 262px;
    border-bottom: 1px solid #e9e9e9;
    overflow: hidden;
    margin-top: 28px;
    .center-left,
    .center-right {
      float: left;
      box-sizing: border-box;
      width: 50%;
      height: 100%;
    }
    .center-right {
      .preview {
        width: 120px !important;
        height: 120px !important;
        margin: 0 auto;
        background: rgba(244, 244, 244, 1);
        border-radius: 50%;
        // border: 1px solid #797d84;
      }
      p {
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 12px;
        margin-top: 6px;
        font-weight: 400;
        color: rgba(53, 53, 53, 1);
      }
    }
    .center-left {
      .center-left__box {
        width: 204px;
        height: 204px;
        border-radius: 4px;
        margin: 0 auto;
        .false_box {
          // height: 100%;
          height: 156px;
          cursor: pointer;
          background: rgba(244, 244, 244, 1);
          padding-top: 48px;
          text-align: center;
          .false-box__imgbox {
            width: 60px;
            height: 60px;
            margin: 0 auto;
            // margin-top: 48px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .false-box__p {
            font-size: 14px;
            font-weight: 400;
            color: rgba(53, 53, 53, 1);
            margin: 0;
            margin-top: 8px;
            line-height: 20px;
          }
        }
      }
      .center-left__btn {
        margin: 0 auto;
        margin-top: 6px;
        width: 220px;
        margin-bottom: 12px;
        span {
          color: #3175ff;
          font-size: 14px;
          font-weight: 400;
          cursor: pointer;
        }
        .i-box {
          float: right;
          i {
            color: gray;
            cursor: pointer;
            &:last-child {
              margin-left: 24px;
            }
            &:nth-child(2) {
              margin-left: 20px;
            }
          }
        }
      }
      .center-left__tip {
        text-align: center;
        color: #797d84;
        margin: 0;
        font-size: 12px;
        line-height: 1;
      }
    }
  }
  .btn-box {
    text-align: center;
    overflow: hidden;
    margin-top: 30px;
    margin-bottom: 30px;
    float: right;
    margin-right: 30px;
    .btn {
      width: 120px;
      height: 40px;
      background: rgba(236, 236, 236, 1);
      border-radius: 4px;
      color: #5c6476;
      float: left;
      font-size: 14px;
      cursor: pointer;
      text-align: center;
      background: white;
      line-height: 40px;
      &:last-child {
        // margin-left: 10px;
        background: rgba(63, 121, 254, 1);
        color: white;
      }
    }
  }
}
</style>
