<template>

    <!--签名更新 -->
    <div class="container">

        <el-form ref="form" :model="formData" label-width="80px" >
            <el-form-item label="个人签名">

                <div class="flex-box">
                    <el-upload
                        class="upload-demo"
                        :action="uploadImgUrl"
                        :on-success="handleUploadSuccess"
                        :show-file-list="false"
                        :limit="1"
                       >
                        <el-button size="small" type="primary">点击上传</el-button>
                        
                    </el-upload>
                    <signature ref="sign"  @save-success="saveSuccessHandle"></signature>
                </div>
                
            </el-form-item>
            <el-row>
                <el-form-item label="签名预览">
                    <el-image class="img"  :src="formData.qmShow"  style="width: 300px; height: 120px" fit="fill">

                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                    <div class="tip">
                        注意：只能改当前登录的账号提交或审核的记录！
                    </div>
                </el-form-item>
            </el-row>
            
            <el-row>
                <el-form-item >
                    <el-button size="small" @click="confirmSubmit" v-loading="loading">确定修改</el-button>    
                </el-form-item>
            </el-row>
            
        </el-form>
        
    </div>

</template>

<script>
  import signature from '@/components/signature/index.vue';
  import {updateSignature} from "@/api/zxj/poverty/apply";
import { Row } from 'element-ui';
export default {
    components: {
        signature
    },
    data(){
        return {
            baseurl: process.env.VUE_APP_BASE_API,
            uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
            formData:{},
            loading:false,
        }
    },
    methods:{
        //手写签名保存成功回调
        saveSuccessHandle(url){

            this.formData.qm = url;
            this.formData.qmShow = this.baseurl + url
            this.$forceUpdate();
            this.$refs.sign.clearAll();
        },
         // 上传成功回调
        handleUploadSuccess(res, file) {
      
            if (res.code === 200) {
        
                this.formData.qm = res.fileName;
                 this.formData.qmShow = this.baseurl +  res.fileName
                this.$forceUpdate()
            } else {
                this.$modal.msgError(res.msg);
            }
        },
        //提交签名
        confirmSubmit(){
            this.loading = true;
            updateSignature(this.formData).then(res=>{
                if(res.code == 200){
                    if(res.data != 0){
                        this.$message.success("操作成功，更新" + res.data + "条记录！");
                    }else{
                        this.$message.error("操作失败，未修改任何记录！");
                    }
                  
                }
                this.loading = false;
            });
        }
    }
}
</script>

<style lang="css" scoped>
    .flex-box{
        display: flex;
        flex-direction: row;
        justify-content: start;
        gap: 10px;
    }
    .img>>>.image-slot{
        width: 300px;
        height: 120px!important;
        background-color: #f5f7fa;
        color: #909399;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
    }
     .img>>>.image-slot i {
        font-size: 28px;
        line-height: 120px;
     }
     .tip{
        color: red;
        font-weight: bold;
     }
</style>