<template>
  <div class="from-clues">
    <!-- 表单部分 -->
    <div class="from-clues-header">
      <el-form :model="ruleForm" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="用户名称：">
              {{ruleForm.name}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="组织机构：">
              {{ruleForm.organizationName}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="部门：">
              {{ruleForm.departmentName}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="签名路径：">
            <div class="signature-image">
              <img :src="ruleForm.dzqmurl" v-if="ruleForm.dzqmurl">
              <el-empty description="暂无签名" v-else></el-empty>
              <i class="el-icon-circle-close" @click="handleDel" v-if="ruleForm.dzqmurl"></i>
            </div>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

    <el-upload
      class="upload-demo"
      action=""
      :limit="1"
      multiple
      :key="key"
      :auto-upload="false"
      accept=".jpg, .png, .jpeg"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :show-file-list="false"
      drag>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过5MB</div>
    </el-upload>
    <!-- 表格 -->
  </div>
</template>
<script>
  import { dzqmUpload, dzqmDelete } from '@/api/dzqm'
  import { getUserInfo } from '@/api/user'
  export default {
    name: "dzqm",
    data () {
      return {
        ruleForm: {},
        key: 0,
      }
    },
    mounted () {
      this.getUserInfo()
    },
    methods: {
      async getUserInfo () {
        let res = await getUserInfo()
        this.ruleForm = res.result
      },
      beforeUpload (file) {
        this.files = file;
        const allowedExtensions = ['jpg', 'jpeg', 'png'];
        const maxFileSizeMB = 5;

        const extension = allowedExtensions.includes(file.name.split('.').pop().toLowerCase());
        const isLt5M = file.size / 1024 / 1024 < maxFileSizeMB;

        if (!extension) {
          this.$message.warning('上传模板只能是 jpg、jpeg、png 格式!');
        } else if (!isLt5M) {
          this.$message.warning(`上传模板大小不能超过 ${maxFileSizeMB}MB!`);
        }

        return extension && isLt5M;
      },
      async handleChange (file) {
        var formdata = new FormData();
        formdata.append("file", file.raw);
        dzqmUpload(formdata).then(res => {
          if (res.code == 200) {
            this.$message({
              message: '上传成功！',
              type: 'success'
            })
            this.key++
            this.ruleForm.dzqmurl = res.message
          }
        })
      },
      async handleDel () {
        let res = await dzqmDelete(this.ruleForm.dzqbsm)
        if (res.code == 200) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          this.ruleForm.dzqmurl = ''
        }
      }
    }
  };
  </script>
<style scoped lang="scss">
  @import "~@/styles/public.scss";
  .signature-image {
    position: relative;
    min-height: 200px;
    img {
      width: 100%;
      max-height: 350px;
      object-fit: contain;
    }
    .el-icon-circle-close {
      position: absolute;
      right: 0;
      top: 0;
      cursor: pointer;
      font-size: 26px;
    }
  }
</style>