<template>
  <!-- 公司管理 -->
  <div>
    <el-card class="box-card">
      <div class="card_govern">
        <div class="card_item_ance">
          <span>公司logo</span>
          <el-upload action :limit="1" :show-file-list="false" list-type="picture-card" :http-request="selectPicUpload"
            :on-remove="handleRemove">
            <div class="image_logo center_in" v-if="dialogImageUrl">
              <!-- <img :src="dialogImageUrl" alt="" /> -->
              <el-image class="image_logo_icon" :src="dialogImageUrl" fit="contain"></el-image>
            </div>
            <i class="el-icon-plus" v-else></i>
          </el-upload>
        </div>
        <div class="card_item_ance">
          <span>打印拦截</span>
          <el-switch v-model="printIntercept" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
        </div>
        <div style="margin-top: 30px;">
          <el-button type="primary" :loading="saveFlag" @click="saveSettings">保存设置</el-button>
        </div>
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import {
    getCompanyMy,
    putCompanyMy,
    getFileToken
  } from '@/api/company'
  export default {
    data() {
      return {
        printIntercept: '',
        dialogImageUrl: '',
        dialogVisible: false,
        goverList: {},
        saveFlag: false,
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      // 获取公司信息
      getList() {
        getCompanyMy().then(res => {
          if (res.code == 200) {
            this.goverList = JSON.parse(JSON.stringify(res.data))
            this.dialogImageUrl = res.data.logo
            this.printIntercept = res.data.printIntercept
          }
        })
      },
      // 上传\修改公司logo
      selectPicUpload(file) {
        const loading = this.$loading({
          lock: true,
          text: '图片上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.file = file.file;
        let formData = new FormData();
        formData.append('file', this.file);
        getFileToken(formData).then(res => {
          if (res.code == 200) {
            this.dialogImageUrl = res.data
            this.$forceUpdate()
          } else {
            this.$message.error('上传失败');
          }
          loading.close();
        }).catch(e => {
          this.$message.error('上传失败');
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      // 保存/修改公司信息
      saveSettings() {
        if (this.dialogImageUrl != this.goverList.logo || this.printIntercept != this.goverList.printIntercept) {
          this.saveFlag = true
          putCompanyMy({
            logo: this.dialogImageUrl,
            printIntercept: this.printIntercept,
          }).then(res => {
            if (res.code == 200) {
              this.getList()
            }
            this.saveFlag = false
          }).catch(() => {
            this.saveFlag = false
          })
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  .card_govern {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .card_item_ance {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    span {
      font-size: 20px;
      margin-right: 20px;
    }
  }

  .image_logo {
    width: 148px;
    height: 148px;

    .image_logo_icon {
      width: calc(100% - 20px);
      height: calc(100% - 20px);
    }
  }
</style>
