<template>
  <ifbp-page>
    <ifbp-breadcrumb name="个性化定制"></ifbp-breadcrumb>
    <!-- <div class="page-title" style="font-size: 16px;">
      个性化定制
    </div> -->
    <!-- <div class="goBack">
      <el-button class="fr" type="primary" @click="backInfo">返回</el-button>
    </div> -->
    <ifbp-main-area>
      <div class="login-page">
        <p class="page-title">登录页信息定制</p>
        <div class="login-content upload">
          <span class="f13">设置登录背景</span>
          <el-upload
            class="login-uploader"
            action="/wbalone/tenantMGT/loginImgUpload"
            :show-file-list="false"
            :before-upload="handleLoginUpload"
            :on-success="function(res,file){handleUploadSuccess('loginimg',res,file)}">
            <img v-if="imageUrl.loginimg" :src="realPath.loginimg" class="login-image">
            <div v-else class="uploadInfo">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </div>
          </el-upload>
        </div>
      </div>
      <div class="first-page">
        <p class="page-title">首页信息定制</p>
        <div class="first-content">
          <el-form ref="firstPage" :model="firstPage" label-width="120px" class="user-form">
            <!-- <el-form-item label="账号">
              <el-input v-model="account" placeholder="账号" disabled></el-input>
            </el-form-item>
            <el-form-item label="显示名称">
              <el-input v-model="firstPage.tenantName" placeholder="显示名称"></el-input>
            </el-form-item> -->
            <el-form-item label="浏览器网址名称">
              <el-input v-model="firstPage.browserName" placeholder="浏览器网址名称"></el-input>
            </el-form-item>
            <el-form-item label="平台访问路径">
              <el-row>
                <el-col :span="17">
                  <el-input id="path" v-model="browserPath" disabled placeholder="平台访问路径"></el-input>
                </el-col>
                <el-col :span="6" :push="1">
                  <el-tooltip effect="dark" placement="top" content="复制平台访问路径到粘贴板">
                    <el-button class="fr" type="primary" @click="copy">复制</el-button>
                  </el-tooltip>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
          <div class="upload-group">
            <div class="upload">
              <div class="f13">设置平台标志<br/><span class="f12">(限ico/jpg/pn<br/>g,最大500kb)</span></div>
              <el-upload
                class="login-uploader-platform"
                action="/wbalone/tenantMGT/logoImgUpload"
                :show-file-list="false"
                :before-upload="handleLoginUpload"
                :on-success="function(res,file){handleUploadSuccess('logoimg',res,file)}">
                <img v-if="imageUrl.logoimg" :src="realPath.logoimg" class="login-image">
                <div v-else class="uploadInfo">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                  <div slot="tip" class="el-upload__tip"></div>
                </div>
              </el-upload>
            </div>

            <div class="upload">
              <div class="f13">浏览器网址图标<br/><span class="f12">(限ico/jpg/pn<br/>g,最大100kb)</span></div>
              <el-upload
                class="login-uploader-brower"
                action="/wbalone/tenantMGT/browserIconImgUpload"
                :show-file-list="false"
                :before-upload="handleLoginUpload"
                :on-success="function(res,file){handleUploadSuccess('browserimg',res,file)}">
                <img v-if="imageUrl.browserimg" :src="realPath.browserimg" class="login-image">
                <div v-else class="uploadInfo">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                  <div slot="tip" class="el-upload__tip"></div>
                </div>
              </el-upload>
            </div>
          </div>
        </div>
        <!-- <el-button class="submit" type="primary" @click="submit">保存</el-button> -->
      </div>
    </ifbp-main-area>
    <ifbp-footer>
      <el-button type="primary" @click="submit">保存</el-button>
    </ifbp-footer>
  </ifbp-page>
</template>
<script>
  export default {
    data() {
      return {
        realPath: {
          loginimg: '',
          logoimg: '',
          browserimg: ''
        },
        imageUrl: {
          loginimg: '',
          logoimg: '',
          browserimg: ''
        },
        firstPage: {
          tenantName: '',
          browserName: '',
        },
        account: '',
        browserPath: '',
        tenantid: '',
        isEdit: false
      };
    },
    methods: {
      copy(){
        const input = document.createElement('input');
        const currentFocus = document.activeElement;
        input.setAttribute('value',this.browserPath);
        input.style.display = 'absolute';
        input.style.left = '-400';
        input.style.bottom = '-400';
        document.body.appendChild(input);
        input.focus();
        input.select();
        if(document.execCommand){
          document.execCommand('copy',true);
          this.$message({
            type: 'success',
            message: '复制路径成功，请粘贴使用'
          });
        } else{
          this.$message({
            type: "error",
            message: '浏览器不支持复制到剪切板'
          });
        }
        currentFocus.focus();
        document.body.removeChild(input);
      },
      backInfo() {
        this.$router.push('/appArea');
      },
      handleUploadSuccess(id, res) {
        this.$set(this.imageUrl, id, res.data);
        this.getRealPath(id, res.data);
      },
      getRealPath(id, num) {
        if (id !== '') {
          this.$set(this.realPath, id, '/ifbp-app-bd/bd/psn/psndoc/avatarImgDownLoad?avatar=' + num);
        }
      },
      getCookie() {
        var reg = new RegExp("(^| )tenantid=([^;]*)(;|$)");
        var arr = document.cookie.match(reg);
        if (arr) {
          this.tenantid = arr[2];
        }
      },
      initBackImage() {
        const self = this;
        this.$http({
          url: '/wbalone/tenantMGT/getTenantInfo',
          method: 'GET',
          dataType: 'json'
        }).then((res) => {
          var resData = res.data.data[0];
          if(res.data.data.length !== 0){
            this.isEdit = true;
          } else {
            this.isEdit = false;
          }
          if (res.data.success === true) {
            if(res.data.data.length !== 0){
              this.$set(this.imageUrl, 'loginimg', resData.loginimg);
              this.$set(this.imageUrl, 'logoimg', resData.logoimg);
              this.$set(this.imageUrl, 'browserimg', resData.browserimg);
              this.$set(this.realPath, 'loginimg', '/ifbp-app-bd/bd/psn/psndoc/avatarImgDownLoad?avatar=' + resData.loginimg);
              this.$set(this.realPath, 'logoimg', '/ifbp-app-bd/bd/psn/psndoc/avatarImgDownLoad?avatar=' + resData.logoimg);
              this.$set(this.realPath, 'browserimg', '/ifbp-app-bd/bd/psn/psndoc/avatarImgDownLoad?avatar=' + resData.browserimg);
              this.firstPage.browserName = resData.browserName;
              this.firstPage.tenantName = resData.tenantName;
              this.browserPath = resData.loginurl;
              // this.firstPage.tenantName = res.data.data.user_company;
            }else{
              return;
            }
          }
        }).catch((res) => {
          self.$message.error("请求失败");
        });
      },
      getInfo (){
        var reg = new RegExp("(^| )_A_P_loginName=([^;]*)(;|$)");
        var arr = document.cookie.match(reg);
        if (arr) {
          this.account = arr[2];
        }
      },
      submit() {
        this.$refs.firstPage.validate((valid) => {
          if (valid) {
            const self = this;
            var submitData = {
              id: '',
              logoimg: this.imageUrl.logoimg,
              loginimg: this.imageUrl.loginimg,
              browserimg: this.imageUrl.browserimg,
              browserName: self.firstPage.browserName,
              tenantName: self.firstPage.tenantName,
              loginurl: self.browserPath
            };
            if(this.isEdit === true){
              submitData.id = this.tenantid;
            }
            this.$http({
              url: '/wbalone/tenantMGT/setTenantInfo',
              method: 'post',
              dataType: 'json',
              data: submitData
            }).then((res) => {
              if (res.data.success === true) {
                self.$message('保存成功');
              } else {
                self.$message('保存失败');
              }
            }).catch(() => {
              self.$message('验证失败');
            });
          }
        });
      },
      handleLoginUpload() {
        console.log(1);
      }
    },
    created() {
      this.getInfo();
      this.getCookie();
      this.initBackImage();
    },
  };
</script>
<style>
  #customization .el-form-item {
    margin-bottom: 22px;
  }

  #customization input.el-input__inner {
    height: 28px !important;
  }

  #customization .el-upload__input {
    display: none;
  }

  #customization .el-form-item__label {
    font-size: 13px;
    color:#000;
  }

  #customization .save {
    width: 100px;
    margin-left: calc(50% - 50px);
  }

  #customization .group .save {
    width: 100px;
    margin-left: 10px;
    border-radius: 4px;
  }

  #customization .group {
    width: 220px;
    margin-left: calc(50% - 110px);
    margin-bottom: 20px;
  }

  #customization .el-upload.el-upload--text {
    height: 100%;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
  }

  #customization .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

  #customization .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  /*#customization .el-table td.is-left, .el-table th.is-left {
    text-align: center;
  }*/
</style>
<style scoped>
  #customization {
    margin: 25px;
  }

  .f13{
    font-size:13px;
  }
.f12{
    font-size:12px;
    color:#888;
  }
  .goBack {
    /*height: 56px;*/
    padding: 10px 20px;
    background-color: #FFFFFF;
  }

  .login-page {
    margin-top: 20px;
    border: none;
    border-bottom: 1px solid #eee;
    background-color: #FFFFFF;
    padding: 20px;
  }

  .page-title {
    margin-bottom: 10px;
    font-size:16px;
  }

  .login-content {
    height: 200px;
    margin-left: 20px;

  }

  .user-form {
    width: 40%;
    margin-right: 200px;
  }

  .upload-group {
    width: 30%;
  }

  .upload {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
  }

  .login-uploader {
    margin-left: 10px;
    width: 300px;
    height: 180px;
    border: 1px dashed #eee;
  }

  .login-uploader-platform {
    margin-bottom: 30px;
    margin-left: 10px;
    width: 140px;
    height: 80px;
    border: 1px dashed #eee;
  }

  .login-image {
    width: 100%;
    height: 100%;
  }

  .login-uploader-brower {
    margin-left: 10px;
    width: 80px;
    height: 80px;
    border: 1px dashed #eee;
  }

  .first-page {
    background-color: #FFFFFF;
    padding: 20px;
  }

  .first-content {
    padding: 10px;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
  }

  .submit {
    margin-bottom: 15px;
    margin: 15px 50%;
  }
</style>
