<template>
  <div class="tenant">
    <div style="border-left: 3px solid #0084ff; padding-left: 8px">Logo 配置</div>
    <div style="padding: 32px 0 16px 0">
      <el-upload
        class="avatar-uploader"
        action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
        :data="uploadData"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="uploadFile"
        accept=".png">
        <el-button type="primary">点击上传</el-button>
        <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
        <!-- <el-image v-if="imageUrl" style="width: 120px; height: 30px" :src="imageUrl" fit="scale-down" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
      </el-upload>
    </div>
    <div style="color: #999999; font-size: 12px; padding: 8px 0 16px 0">请上传 120px * 30px 或同等比例的背景透明 png 格式图片</div>
    <div style="padding: 16px 0">预览</div>
    <div style="padding: 16px 0; display: flex">
      <div style="padding: 0 20px; background-color: black; width: 180px; height: 50px; display: flex; align-items: center; justify-content: center">
        <el-image v-if="imageUrl" style="width: 120px; height: 30px" :src="imageUrl" fit="scale-down" />
        <img v-else :src="'/img/logo2.png'" />
      </div>
      <div style="height: 50px; background-color: black; list-style-type: none">
        <li class="header-bar-hover-warp nav-li active">
          <div>
            <i class="iconfont icon-icomx_gongndh" style="margin: 0 5px 0 0"></i>
            功能导览
            <i class="iconfont icon-iconm_xialan1" style="margin: 0 0 0 3px"></i>
          </div>
        </li>
      </div>
    </div>
    <div>
      <el-button @click="clickCancel">重 置</el-button>
      <el-button type="primary" @click="clickSubmit()">提 交</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const imageUrl = ref("");
const fileList = ref([
  {
    id: "11111111111",
    fileName: "logo2.png",
    fileUrl: "/img/logo2.png",
  },
]);
const getLogo = () => {
  proxy.post("/tenantInfo/getLogo", {}).then((res) => {
    if (res && res.length > 0 && res[0].fileUrl) {
      imageUrl.value = res[0].fileUrl;
      fileList.value[0].fileUrl = res[0].fileUrl;
    } else {
      imageUrl.value = "/img/logo2.png";
    }
    console.log(fileList.value);
  });
};
getLogo();
const uploadData = ref({});
const uploadFile = async (file) => {
  if (file.type !== "image/png") {
    ElMessage.error("请上传png格式图片!");
    return false;
    // } else if (rawFile.size / 1024 / 1024 > 2) {
    //   ElMessage.error('Avatar picture size can not exceed 2MB!')
    //   return false
  }
  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  uploadData.value = res.uploadBody;
  file.id = res.id;
  file.fileName = res.fileName;
  file.fileUrl = res.fileUrl;
  return true;
};
const handleAvatarSuccess = (response, uploadFile) => {
  imageUrl.value = uploadFile.raw.fileUrl;
  fileList.value = [
    {
      id: uploadFile.raw.id,
      fileName: uploadFile.raw.fileName,
      fileUrl: uploadFile.raw.fileUrl,
    },
  ];
};
const clickCancel = () => {
  imageUrl.value = "/img/logo2.png";
  fileList.value = [
    {
      id: "11111111111",
      fileName: "logo2.png",
      fileUrl: "/img/logo2.png",
    },
  ];
};
const clickSubmit = () => {
  if (fileList.value && fileList.value.length > 0) {
    proxy.post("/tenantInfo/editLogo", { fileList: fileList.value }).then(() => {
      ElMessage({
        message: "保存成功",
        type: "success",
      });
      clickCancel();
    });
  } else {
    ElMessage("请上传logo图片");
  }
};
</script>

<style lang="scss" scoped>
.tenant {
  margin: 20px;
  padding: 20px;
  background-color: white;
}
// ::v-deep(.el-upload) {
//   // border: 2px dashed #eeeeee;
// }
.avatar-uploader .avatar {
  width: 120px;
  height: 30px;
  display: block;
  background-color: black;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 30px;
  text-align: center;
}
.nav-li.active {
  background: #0084ff;
  color: #fff;
  height: 50px;
  padding: 15px 20px;
  a {
    color: #fff;
  }
}
</style>
