<template>
  <div class="main_root">
    <div class="comm">替换后的logo效果与预览效果一致</div>
    <div class="comm">logo 尺寸： 236px * 32px</div>
    <div class="comm">
      注意：图片尺寸过大图片将会被压缩显示，图片尺寸过小将会被放大显示，都会影响显示效果
    </div>
    <div class="content">
      <div class="header">
        <div class="LOGO">
          <img v-if="form.logoPath" :src="$api.showImageUrl + form.logoPath" />
          <img v-else src="../../../assets/img/setting/LOGO.png" />
        </div>
      </div>
      <div class="navigation">
        <div class="navigation_item"><span>首页</span></div>
        <div class="navigation_item">
          <span>区域管理</span>
          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
        </div>
        <div class="navigation_item">
          <span>应用管理</span>
          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
        </div>
        <div class="navigation_item">
          <span>网络管理</span>
          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
        </div>
        <div class="navigation_item active">
          <span>设置</span>
          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
        </div>
        <div class="navigation_item">
          <span>搜索</span>
          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
        </div>
        <div class="navigation_item">
          <span>日志</span>
          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
        </div>
        <div class="navigation_item"><span>公告</span></div>
      </div>
    </div>
    <div class="up">
      <Button
        @click="resetting()"
        style="margin-right: 20px"
        class="primary_btn"
        type="primary"
        >重置</Button
      >
      <Upload
        class="Upload"
        action
        :show-upload-list="false"
        :before-upload="
          (file) => {
            upLoad(file);
            return false;
          }
        "
        accept=".png,.jpeg,.jpg,gif"
      >
        <Button class="primary_btn" type="primary">上传LOGO</Button>
      </Upload>
    </div>
    <div class="footer">
      <Button style="margin-right: 20px" @click="Refresh()">取消</Button>
      <Button @click="saveInfo()" class="primary_btn" type="primary"
        >保存</Button
      >
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { logo_delete, logo_detail, logo_edit } from "@/api/setting";
export default {
  data() {
    return {
      userInfo: {},
      form: {
        logoPath: "",
        rversion: "",
        objectid: "",
        logoid: ""
      }
    };
  },
  created() {
    this.userInfo = JSON.parse(
      localStorage.getItem("xh_control_userInfo")
    ).content;
    this.init();
  },
  methods: {
    init() {
      logo_detail({ objectid: this.userInfo.regionid, llevel: 2 }).then(
        (res) => {
          this.showLoading = false;
          if (res.code === 0) {
            if (res.obj) {
              this.form = {
                logoPath: res.obj.logoPath,
                rversion: res.obj.rversion,
                objectid: res.obj.objectid,
                logoid: res.obj.logoid
              };
            }
          } else {
            this.$Message.error(res.msg);
          }
        }
      );
    },
    upLoad(file) {
      let str = file.name.split(".");
      let suffix = str[str.length - 1];
      suffix = suffix.toLowerCase();
      if (suffix !== "png" && suffix !== "jpeg" && suffix !== "jpg") {
        this.$Message.warning("请上传png、jpeg、jpg类型的文件");
        return false;
      }
      let formData = new FormData();
      formData.append("file", file);
      formData.append("savefolder", "app");
      formData.append("isrename", "1");
      let Url = this.$api.baseImageUrl + "up/upfile";
      this.showLoading = true;
      axios
        .post(Url, formData, {
          timeout: 1000 * this.$api.axiosFileTimeout
        })
        .then((res) => {
          this.showLoading = false;
          if (res.data.code === 0) {
            console.log(res.data);
            this.form.logoPath = res.data.obj;
            this.$Message.success(res.data.msg);
          } else {
            this.$Message.error(res.data.msg);
          }
        })
        .catch(() => {
          this.showLoading = false;
          this.$Message.error("图片上传失败");
        });
    },
    //重置
    resetting() {
      this.showLoading = true;
      logo_delete({
        rversion: this.form.rversion,
        logoid: this.form.logoid
      }).then((res) => {
        this.showLoading = false;
        if (res.code === 0) {
          this.form.logoPath = "";
          console.log(res.obj);
          this.$Message.success(res.msg);
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    saveInfo() {
      let form = {
        logoPath: this.form.logoPath,
        llevel: 2,
        objectid: this.userInfo.regionid
      };
      console.log(form);
      this.showLoading = true;
      logo_edit(form).then((res) => {
        this.showLoading = false;
        if (res.code === 0) {
          console.log(res.obj);
          this.$Message.success(res.msg);
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    //刷新页面
    Refresh() {
      location.reload();
    }
  }
};
</script>

<style lang="less" scoped>
.main_root {
  padding: 40px 100px 40px;
  position: relative;
  .comm {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #253a70;
    &::before {
      content: "*" !important;
      display: inline-block;
      margin-right: 4px;
      line-height: 1;
      font-family: SimSun;
      font-size: 14px;
      color: #ed4014;
    }
  }
  .content {
    margin-top: 10px;
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 8px;
    border: 1px dashed #ced9f2;
    background-color: #f1f6fc;
    .header {
      height: 50px;
      width: calc(100% - 40px);
      position: absolute;
      top: 30px;
      left: 20px;
      background-color: white;
      .LOGO {
        width: 272px;
        height: 100%;
        border: 1px dashed #ced9f2;
        padding: 6px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
    .navigation {
      height: 72px;
      width: calc(100% - 80px);
      display: flex;
      align-items: center;
      border-radius: 16px;
      border: 1px solid #e9f0f9;
      position: absolute;
      top: 100px;
      left: 40px;
      background-color: white;
      .navigation_item {
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        font-size: 16px;
        color: #253a70;
        margin-left: 40px;
        span {
          flex: none;
        }
      }
      .active {
        background-color: #339dff;
        color: white;
      }
    }
  }
  .up {
    margin-top: 20px;
    display: flex;
  }
  .footer {
    position: absolute;
    bottom: 40px;
    width: 100%;
    height: 32px;
    text-align: center;
    left: 0;
  }
}
</style>
