<template>
    <div>
        <el-dialog
            title="编辑凭证"
            :visible="true"
            width="480px"
            append-to-body
            :close-on-click-modal="false"
            @close="handleClose"
        >
        
            <div class="dialog-content">
                <el-form ref="ruleFormEffect"
                    :model="Effectobj" 
                    :rules="rulesClientRepayment" 
                    label-width="130px">
                    <el-form-item label="凭证金额" prop="amount" style="margin-bottom: 10px;">
                        <el-input class="inputpaddingtop2" 
                            size="small"
                            placeholder="请输入凭证金额"
                            v-model="Effectobj.amount">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="还款日期" prop="paybackTime" style="margin-bottom: 10px;">
                        <el-date-picker class="width100" size="small"
                            v-model="Effectobj.paybackTime"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="备注说明" prop="remark" style="margin-bottom: 10px;">
                        <el-input 
                            size="small"
                            clearable
                            placeholder="请输入备注说明"
                            v-model="Effectobj.remark">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="凭证" prop="mediaPath">
                        <upload-file :file-list="fileList" :max-count="1"
                                    :show-file-name="false"
                                    uploadName="支持图片大小不超过10M"
                                    accept=".jpg,.png,.jpeg"
                                    :span="6"
                                    :fileSize="10"
                                    @handleUploadFile="handleUploadFile">
                        </upload-file>
                    </el-form-item>
                </el-form>

            </div>
        
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose()">取消</el-button>
            <el-button type="primary" @click="handleSubmitUpdate()">确认保存</el-button>
        </span>
        </el-dialog>
        
    </div>
</template>
<script>
import api from "@/services/caseManagement";
    export default {
        components: {
            uploadFile: () => import('@/components/uploadFile.vue'),//上传
        },
        props: {
            EffectDialog: {
                type: Object,
                default: () => {
                    return {}
                },
            },
        },
        data() {
            return {
                Effectobj:{
                    mediaPath:[]
                },
                rulesClientRepayment:{
                    amount: [
                        { required: true, message: '请输入还款金额', trigger: 'change',},
                        { pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/, message: '请输入2位小数金额', trigger: ['blur', 'change']}
                    ], 
                    paybackTime: [
                        { required: true, message: '请选择还款日期', trigger: 'change',},
                    ], 
                    mediaPath: [
                        { required: true, message: '请上传文件', trigger: 'change',},
                    ], 
                },
                fileList:[]
            };
        },
        mounted () {
            this.Effectobj = JSON.parse(JSON.stringify(this.EffectDialog))
            this.Effectobj.mediaPath = JSON.parse(JSON.stringify(this.EffectDialog)).proofUrl
            this.fileList = [{url: this.Effectobj.proofUrl,fileName:'上传'}]
        },
        methods: {
            // 修改
            handleSubmitUpdate(){
                if(this.Effectobj.mediaPath.length == 0){return false}
                this.$refs.ruleFormEffect.validate((valid) => {
                    if (valid){
                        this.Effectobj.createAt =undefined
                        this.Effectobj.createBy =undefined
                        this.Effectobj.delFlag =undefined
                        this.Effectobj.planId =undefined
                        this.Effectobj.status =undefined
                        this.Effectobj.updateAt =undefined
                        this.Effectobj.updateBy =undefined
                        this.Effectobj.uploaderName =undefined
                        this.Effectobj.proofUrl = this.Effectobj.mediaPath[0]
                        api.gettraceProof_edit(this.Effectobj).then(res => {
                            if(!res.code){
                                this.$parent.getProofList(1)
                                this.$message.success('编辑成功!')
                                this.handleClose()
                            }
                        })
                    }
                })
            },
            handleUploadFile(fileList){
                // console.log('获取上传文件信息',fileList)
                fileList = JSON.parse(JSON.stringify(fileList))
                this.fileList = fileList.map((item,i) => {
                    return {
                        url: item.url,
                        fileName:'上传',
                        previewUrl:item.previewUrl
                    }
                })
                this.Effectobj.mediaPath = this.fileList.map((item) => item.url);
            },
            handleClose() {
                this.$emit('update:EffectDialog', null)
            },
        }
    };
</script>
<style scoped lang="scss">
.dialog-content{
    padding: 16px 24px;
    max-height:500px
}
.department-wrap{
    padding: 16px 24px;
    max-height: 250px;
    .department-wrap-list{
        margin-bottom:32px;
    }
    .department-wrap-list:last-child{
        margin-bottom:0;
    }
}
.min-height350{min-height: 350px;}
.department-dept ::v-deep .el-checkbox__label {color: $color-000000}
</style>