<template>
  <el-dialog :visible="innerVisible" width="500px" title="上传预付付款凭证" center :close-on-click-modal="false" @close="handleClose">
    <credentials-node :loading="loading" is-amount @confirm="onSubmit" />
  </el-dialog>
</template>

<script>
import asyncRequest from "@/apis/service/customerService/demandOrder"
/***
 *
  prepay_amount //预付总金额
  prepay_image //付款凭证图
 */

export default {
  props:['visible','sitem'],
  computed:{
    innerVisible:{
      get(){
        return this.visible
      },
      set(newVal){
        this.$emit('update:visible',newVal)
      }
    }
  },
  data(){
    return {
      loading:false,
      ruleForm:{
        prepay_amount:"", //预付总金额
        prepay_image:"", //付款凭证图
      },
      rules:{
         prepay_amount:[
          {
            required:true,
            trigger:'change',
            message:'请输入预付总金额'
          }
         ],
        certificateImag:[
          {
            required:true,
            trigger:'change',
            message:'请上传凭证图片'
          }
        ]
      }
    }
  },
  methods:{
     handleClose(){
      this.ruleForm = {
        prepay_amount: "", //预付总金额
        prepay_image: ""  //付款凭证图
      }

       this.innerVisible = false
     },
     beforeAvatarUpload(file) {
        let isJPG = false;
        if (
          file.type === "image/jpg" ||
          file.type === "image/png" ||
          file.type === "image/jpeg"
          ) {
            isJPG = true;
          }
          const isLt2M = file.size / 1024 / 1024 < 1;
          if (!isJPG) {
            this.$message.error("图片格式不正确！");
          }
          if (!isLt2M) {
          this.$message.error("图片大小不能超过 1MB!");
         }
          return isJPG && isLt2M;
        },
        closeImg(index, key) {
            this.ruleForm[key].splice(index, 1);
            this.$refs.ruleForm.validateField(key);
        },
        async UploadSuccessEvent(data, key) {
          const { url } = data;
          if (url === "noToken") {
            await this.logout();
          } else {
            if (key === "good_thumb_img") {
              this.ruleForm[key] = url;
            } else {
              if (this.ruleForm[key].length < 10) {
                this.ruleForm[key].push(url);
              }
            }
            this.$refs.ruleForm.validateField(key);
            
          }
        },
        UploadErrorEvent(res, key) {
          if (res !== "break") {
            this.$message.error("图片上传失败!");
            this.$refs.ruleForm.validateField(key);
          }
        },
        async onSubmit({amount:prepay_amount,credentials:prepay_image}){
          this.loading = true
          const { code } = await asyncRequest.prepayOrder({ 
            id: this.sitem.id, prepay_amount, prepay_image:prepay_image.join(',') 
          })
          this.loading = false
          if(code !== 1) return
          this.innerVisible = false
          this.$emit('refresh')
      }
    }
}
</script>


<style lang="scss" scoped>
  // position: relative;
  .good_info_img_div {
    ul {
      width: 100%;
      li {
        float: left;
        width: 55px;
        height: 55px;
        padding: 0 5px 0 0;
        .img-show-li-div {
          width: 50px;
          height: 50px;
          border: 1px solid #dfe4ed;
          background: #dfe4ed;
          position: relative;
          img.img-show {
            width: 100%;
            height: 100%;
            position: relative;
            display: inline-block;
          }
          i.el-icon-close {
            position: absolute;
            z-index: 2;
            top: 0;
            right: 0;
            color: #dfe4ed;
          }
          &:hover {
            i.el-icon-close {
              cursor: pointer;
              color: #6954f0;
            }
          }
        }
      }
    }
  }

  .goodsCostAdd-title {
    border-top: 1px solid #ebeef5;
    span {
      height: 50px;
      line-height: 50px;
      font-family: "微软雅黑", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 16fpx;
      text-align: left;
    }
  }
</style>
