<template>
  <el-dialog title="视觉配置" :visible.sync="visible" width="440px" top="10%" @close="onClose" @opened="onOpened">
    <div class="tip">左上角LOGO配置</div>
    <el-image v-show="imageUrl" class="preview" :src="imageUrl" fit="fill" :preview-src-list="[imageUrl]"></el-image>
    <el-upload
      v-show="!imageUrl"
      ref="upload"
      class="upload-logo"
      action="/upload/posts/"
      list-type="picture-card"
      :file-list="fileList"
      :auto-upload="true"
      :http-request="uploadAvatar"
      :limit="1"
      :multiple="false"
      :show-file-list="false"
      :on-success="handleUploadSuccess"
      :before-upload="beforeUpload"
    >
      <!--      <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="" />-->
      <div class="tips">
        <i class="icon-upload"></i>
        <div class="el-upload__text">上传图片到此处</div>
      </div>
      <!--      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
    </el-upload>
    <div>
      <el-button style="margin-top: 14px; margin-bottom: 24px" size="small" type="primary" plain @click="reUpload"
        >替换图片</el-button
      >
      <el-button
        v-if="imageUrl"
        style="margin-top: 14px; margin-bottom: 24px"
        size="small"
        type="primary"
        plain
        @click="openCropper"
        >剪裁图片</el-button
      >
    </div>
    <div class="tip">文字标题</div>
    <el-input v-model="title" :minlength="1" :maxlength="13"></el-input>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="saveConfig">保存配置</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import { uploadFileApi, visualSave } from "@/api/common";

export default {
  name: "VisualConfig",
  data() {
    return {
      visible: false,
      imageUrl: "",
      file: null,
      fileList: [],
      logo: "",
      title: "",
    };
  },
  computed: {
    ...mapState({ visualVisible: (state) => state.visualVisible }),
    ...mapGetters(["settings"]),
  },
  watch: {
    visualVisible(value) {
      this.visible = value;
    },
  },
  methods: {
    closeDialog() {
      this.$store.commit("SET_VISUAL_VISIBLE", false);
    },
    saveConfig() {
      if (this.logo && this.title) {
        visualSave({
          logo: this.logo,
          title: this.title,
        })
          .then(() => {
            this.$message.success("保存成功");
            this.$store.commit("SET_APP_SETTING", {
              logo: this.logo,
              title: this.title,
            });
          })
          .catch((err) => {
            this.$message.error("保存失败");
            throw new Error(err);
          })
          .finally(() => {
            this.closeDialog();
          });
      }
    },
    onClose() {
      this.closeDialog();
    },
    onOpened() {
      console.log("on opened===" + process.env.NODE_ENV);
      const { logo, title } = this.settings;
      const url = process.env.NODE_ENV === "production" ? "https://v5qy.baibaodun.cn" : "https://v5qy.te.baibaodun.com.cn";
      this.imageUrl = logo;
      this.logo = logo.split(`${url}/obpm`)[1];
      this.title = title;
    },
    reUpload() {
      if (this.imageUrl) {
        this.$refs.upload.clearFiles();
        this.$refs.upload.$children[0].handleClick();
      }
    },
    openCropper() {
      this.$emit("openCropper", this.imageUrl);
    },
    onUploadChange(file, fileList) {
      console.log("on change", file, fileList);
    },
    handleUploadSuccess(response, file, fileList) {
      console.log("on success", response, file, fileList);
    },
    beforeUpload(file) {
      this.file = file;
      // let isSize = getImgInfo(file, 88, 92);
      // isSize.catch(() => {
      //   this.$message({
      //     message: "注意:88*92！",
      //     type: "warning",
      //   });
      // });
      // return isSize;
      return true;
    },
    uploadAvatar({ file }) {
      //必须
      const formData = new FormData();
      if (file) {
        formData.append("file", file);
      } else {
        formData.append("file", this.file);
      }
      // console.log(formData);
      uploadFileApi(formData).then((response) => {
        const { data } = response;
        if (data.status === 200) {
          this.logo = data.data;
          const url = process.env.NODE_ENV === "production" ? "https://v5qy.baibaodun.cn" : "https://v5qy.te.baibaodun.com.cn";
          this.imageUrl = url + "/obpm" + data.data;
          // this.frontPhoto = response.data; /uploads/2023/07-12/0f02f06f-b6ec-4ee3-9d11-4dc5064eb1b7/警徽-2.png
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.tip {
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 0.88);
  margin-bottom: 14px;
}
.preview {
  width: 104px;
  height: 108px;
}
::v-deep .upload-logo {
  .el-upload.el-upload--picture-card {
    width: 104px;
    height: 108px;
    border-radius: 4px 4px 4px 4px;
    display: flex;
    .tips {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      .icon-upload {
        display: block;
        width: 30px;
        height: 30px;
        background: url("~@/assets/images/layout/添加icon.png") no-repeat;
        background-size: 100% 100%;
        //margin-right: 15px;
      }
      .el-upload__text {
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        line-height: 1;
      }
    }
  }
}
</style>
