<template>
  <div class="main_root">
    <div class="require">替换后的logo效果与预览效果一致</div>
    <div class="require">logo 尺寸： 236px * 32px</div>
    <div class="require">
      注意：图片尺寸过大图片将会被压缩显示，图片尺寸过小将会被放大显示，都会影响显示效果
    </div>
    <div class="logo_bg">
      <img src="@/assets/img/setting/logobg.png" />
      <div class="logo_box">
        <img
          v-if="logoInfo.logoPath"
          :src="$api.showImageUrl + logoInfo.logoPath"
        />
        <img v-else src="@/assets/img/setting/LOGO.png" />
      </div>
    </div>
    <div class="bottom_btns">
      <Button
        type="primary"
        class="primary_btn reset_btn"
        v-if="logoInfo.llevel === 3 && logoInfo.logoPath"
        @click="toReset()"
        >重置</Button
      >
      <Upload
        action
        :show-upload-list="false"
        :before-upload="
          (file) => {
            upLoadLogo(file);
            return false;
          }
        "
        accept=".png,.jpeg,.jpg,.gif"
      >
        <Button type="primary" class="primary_btn upload_logo">上传LOGO</Button>
      </Upload>
    </div>
    <Spin fix v-if="showLoading" style="background-color: transparent">
      <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
      <div>加载中</div>
    </Spin>
  </div>
</template>

<script>
import axios from "axios";
import { logo_detail, logo_edit, logo_delete } from "@/api/setting";
export default {
  data() {
    return {
      showLoading: false,
      logoInfo: {
        logoPath: ""
      }
    };
  },
  created() {
    this.getLogoDetail();
  },
  computed: {
    powerParams() {
      return this.$store.getters.powerParams;
    }
  },
  methods: {
    getLogoDetail() {
      logo_detail({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        llevel: 3
      }).then((data) => {
        if (data.code === 0) {
          this.logoInfo = data.obj || {};
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    toReset() {
      if (!this.logoInfo.logoid) {
        this.$Message.error("请先上传LOGO");
        return;
      }
      logo_delete({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        logoid: this.logoInfo.logoid,
        rversion: this.logoInfo.rversion
      }).then((data) => {
        if (data.code === 0) {
          this.getLogoDetail();
          this.$Message.success(data.msg);
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    upLoadLogo(file) {
      let size = file.size / 1024 / 1024;
      let str = file.name.split(".");
      let suffix = str[str.length - 1];
      suffix = suffix.toLowerCase();
      if (
        suffix !== "png" &&
        suffix !== "jpeg" &&
        suffix !== "jpg" &&
        suffix !== "gif"
      ) {
        this.$Message.warning("请上传png、jpeg、jpg、gif类型的图片");
        return false;
      }
      if (size > 1) {
        this.$Message.error("图片太大，不能超过1M！");
        return false;
      }
      let formData = new FormData();
      formData.append("file", file);
      formData.append("savefolder", "logo");
      formData.append("isrename", "1");
      this.showLoading = true;
      axios
        .post(this.$api.baseImageUrl + "up/upfile", formData, {
          timeout: 1000 * this.$api.axiosFileTimeout
        })
        .then((res) => {
          this.showLoading = false;
          if (res.data.code === 0) {
            this.logoInfo.logoPath = res.data.obj;
            this.toUploadLogo();
          } else {
            this.$Message.error(res.data.msg);
          }
        })
        .catch(() => {
          this.showLoading = false;
          this.$Message.error("上传失败");
        });
    },
    toUploadLogo() {
      logo_edit({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        logoPath: this.logoInfo.logoPath,
        llevel: 3,
        logoid: this.logoInfo.logoid,
        rversion: this.logoInfo.rversion
      }).then((data) => {
        if (data.code === 0) {
          this.getLogoDetail();
          this.$Message.success(data.msg);
        } else {
          this.$Message.error(data.msg);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.require {
  margin: 20px 100px;
  font-size: 16px;
  line-height: 1.6;
  &::before {
    content: "*" !important;
    display: inline-block;
    margin-right: 4px;
    line-height: 1;
    font-family: SimSun;
    font-size: 14px;
    color: #ed4014;
  }
}
.logo_bg {
  position: relative;
  margin: 0 100px;
  height: 200px;
  overflow: hidden;
  img {
    height: 100%;
  }
  .logo_box {
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 24px;
    margin-top: 29px;
    width: 275px;
    height: 50px;
    background-color: #fff;
    img {
      margin-top: 9px;
      margin-left: 24px;
      width: 236px;
      height: 32px;
    }
  }
}
.reset_btn {
  margin-right: 20px;
}
.bottom_btns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 100px;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
