<template>
    <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" size="mini" :label-width="readonly ? '0px' :'95px'">
      <el-form-item label="付款总金额" :prop="amountProp"  v-if="isAmount">
        <digital-input
          style="width:100%"
          size="default"
          :values="ruleForm[amountProp]"
          :placeholder="'付款总金额'"
          :min="0"
          :max="1000000"
          :position="'right'"
          :precision="2"
          :controls="false"
          :append="'元'"
          @reschange="numberChange($event, amountProp)"
        />
      </el-form-item>

      <el-form-item :label="readonly ? '' : '凭证图片'" :prop="imageProp">
        <div class="good_info_img_div">
          <ul v-if="ruleForm[imageProp]" class="clear">
            <li
              class="img-show-li"
              v-viewer
              v-for="(img, iindex) in ruleForm[imageProp]"
              :key="img + iindex"
            >
              <div class="img-show-li-div">
                <img :src="img" class="img-show" alt="" />
                <i
                  v-if="!readonly"
                  class="el-icon-close"
                  @click="closeImg(iindex, imageProp)"
                ></i>
              </div>
            </li>
            <li
              class="img-show-li"
              v-if="ruleForm[imageProp].length < 11"
            >
              <div class="activity-upload">
                <div class="btnupload" style="position: relative" v-if="!readonly">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                  <file-upload
                    class="Upload"
                    :disabled="type === 'view' || type === 'editCoin'"
                    :accept="'.jpg,.png,.jpeg'"
                    :multiple="true"
                    :uploadcondition="beforeAvatarUpload"
                    @UploadErrorEvent="UploadErrorEvent($event, imageProp)"
                    @UploadSuccessEvent="UploadSuccessEvent($event, imageProp)"
                  ></file-upload>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </el-form-item>

      <el-form-item class="flex-end" style="width:100%" v-if="!readonly">
        <el-button :loading="loading" type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
</template>

<script>
export default {
  name:'CredentialsNode',
  props:{
    readonly:{
      type:Boolean
    },
    url:{
      type:Array,
    },
    imageProp:{
      type:String,
      default:() => 'credentials'
    },
    amountProp:{
      type:String,
      default:() => 'amount'
    },
    isAmount:{
      type:Boolean,
      default:() => false
    },
    loading:{
      type:Boolean,
      default:() => false
    },
    status:{
      type:Number
    }
  },
  watch:{
    url:{
      handler(){
        if(!this.url) return
        this.ruleForm[this.imageProp] = [...this.url]
      },
      immediate:true
    }
  },
  data(){
    const validateAmount = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("付款金额不能为空!"));
      } else {
        if (Number(value) === 0) {
          callback(new Error("付款金额不能为0!"));
        } else {
          callback()
        }
      }
    };

    return {
      ruleForm:{
        [this.imageProp]:[],
        [this.amountProp]:''
      },
      rules:{
        [this.imageProp]:[
          {
            required:true,
            trigger:'change',
            message:'请上传凭证图片'
          }
        ],
        [this.amountProp]:[
          {
            required:true,
            trigger:'change',
            validator:validateAmount
          }
        ]
      }
    }
  },
  methods:{
    numberChange(e){
      this.ruleForm[this.amountProp] = e || 0
    },
     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);
            }
        },
        UploadErrorEvent(res, key) {
            if (res !== "break") {
                this.$message.error("图片上传失败!");
                this.$refs.ruleForm.validateField(key);
            }
        },
        async onSubmit(){
          try {
            await this.$refs.ruleForm.validate()
            this.$emit('confirm',this.ruleForm)
          }catch(err){
            console.log(err)
          }
      }
    }
}
</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>
