<template>
  <div class="app-wrapper">
    <nav-bar></nav-bar>
    <app-main></app-main>
    <visual-config ref="visualConfig" @openCropper="openCropper"></visual-config>
    <image-cropper :open.sync="showCropper" :img="uploadImageUrl" :show-preview="false" @onCropped="onCropped"></image-cropper>
  </div>
</template>

<script>
import NavBar from "@/views/layout/NavBar.vue";
import AppMain from "@/views/layout/AppMain.vue";
import visualConfig from "@/components/visualConfig/index.vue";
import imageCropper from "@/components/imageCropper/index.vue";
import { mapGetters } from "vuex";

export default {
  name: "layout",
  components: {
    NavBar,
    AppMain,
    visualConfig,
    imageCropper,
  },
  data() {
    return {
      showCropper: false,
      uploadImageUrl: "",
    };
  },
  computed: {
    ...mapGetters(["settings"]),
  },
  methods: {
    openCropper(url) {
      this.uploadImageUrl = url;
      this.showCropper = true;
    },
    onCropped(data) {
      this.uploadImageUrl = window.URL.createObjectURL(data);
      this.showCropper = false;
      const { logo } = this.settings;
      const spliceLength2 = logo.lastIndexOf("/");
      const imageFullName = logo.slice(spliceLength2 + 1);
      const imageName = imageFullName.split(".")[0];
      //blob转file
      const file = new File([data], `${imageName}-剪裁-${new Date()}.jpg`, {
        type: "contentType",
        lastModified: Date.now(),
      });
      this.$refs.visualConfig.uploadAvatar({ file: file });
    },
  },
};
</script>

<style scoped></style>
