<template>
  <basic-container>
    <el-container style="margin: 200px auto">
      <el-main style="text-align: center">
        <el-row type="flex" justify="center">
          <el-col :span="8" style="display: flex">
            <el-tooltip class="item" effect="dark" content="LOGO" placement="left">
              <el-upload style="display: inline-block"
                         class="avatar-uploader"
                         action="/api/upload/putfile"
                         :show-file-list="false"
                         :on-success="handleAvatarSuccess"
                         :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="标题" placement="right">
              <el-input size="medium" v-model="indexTitle" style="font-size: 38px;margin-left: 2px"></el-input>
            </el-tooltip>
          </el-col>
        </el-row>
        <el-row style="margin-top: 30px">
          <el-button type="primary" @click="save()" >保存</el-button>
          <el-button style="margin-left: 30px" @click="reset()" >重置</el-button>
          <el-button type="danger" style="margin-left: 30px" @click="logoDelete()" >删除LOGO</el-button>
        </el-row>
      </el-main>
    </el-container>
  </basic-container>
</template>

<style scoped>
  >>> .avatar-uploader .el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  >>> .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  >>> .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    line-height: 67px;
    text-align: center;
  }
  >>> .avatar {
    width: 100px;
    display: block;
  }

  >>> .el-input__inner{
    height: 70px;
  }
</style>

<script>
  import {update,getByTenantId} from "@/api/system/setting";
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
        options: {},
        indexTitle: '',
        imageUrl: '',
        query: {},
        loading: true,
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          editBtn: this.vaildData(this.permission.options_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    created() {
      this.onLoad()
    },
    methods: {
      handleAvatarSuccess(res, file) {
        console.log(JSON.stringify(res.data))
        // this.imageUrl = URL.createObjectURL(file.raw);
        this.imageUrl = res.data;
      },
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        /*if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }*/
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
      save(){
        let isUpdate = false;
        let row = this.options;
        if(this.indexTitle != row.indexTitle){
          row.indexTitle = this.indexTitle;
          isUpdate = true;
        }
        if(this.imageUrl != row.indexLogo){
          row.indexLogo = this.imageUrl;
          isUpdate = true;
        }
        if (isUpdate){
          update(row).then(() => {
            let options = JSON.parse(sessionStorage.getItem("index-options"));
            if (options.indexTitle != row.indexTitle || options.indexLogo != row.indexLogo){
              this.$addStorageEvent(2,"index-options",JSON.stringify(row))
            }
          }, error => {
            console.log(error);
          });
        }
      },
      reset(){
        this.indexTitle = this.options.indexTitle;
        this.imageUrl = this.options.indexLogo;
      },
      logoDelete(){
        this.imageUrl = '';
        // this.options.indexLogo = '';
      },
      onLoad() {
        this.loading = true;
        getByTenantId(JSON.parse(sessionStorage.getItem("saber-tenantId")).content).then(res =>{
          this.options = res.data.data ? res.data.data : res.data;
          this.indexTitle = this.options.indexTitle;
          this.imageUrl = this.options.indexLogo;
        });
      }
    }
  };
</script>
