<template>
  <div>
    <el-dialog title="上传文件" :visible="true" width="500px" append-to-body :close-on-click-modal="false"
               @close="handleClose">
      <div class="dialog-content dialog-office-batch">
        <div class="p-16 pr-40">
          <el-form ref="ruleFormRepayment"
                   :model="repaymentObj"
                   :rules="rulesClientRule"
                   label-width="100px">
            <el-form-item label="材料类型:" prop="materialType">
              <el-select v-model="repaymentObj.materialType" placeholder="请选择" class="width100">
                <el-option
                    v-for="(item,index) in materialTypeOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="文件上传:" prop="url">
              <upload-file :file-list="fileList" :max-count="1"
                           :show-file-name="false"
                           uploadName=""
                           accept=".jpg,.png,.jpeg,.pdf"
                           :span="6"
                           :fileSize="50"
                           @handleUploadFile="handleUploadFile">
              </upload-file>
            </el-form-item>
            <el-form-item label="上传要求:">
              <div style="line-height: 20px;padding-top: 10px">
                <div>请知悉！</div>
                <div>请上传图片或pdf材料，单个文件需要在0KB以上，50MB以内;文件名称中请勿包含换行符、空格、tab&V:?"#*|&"<>%+'等特色字符。</div>
                <div>文件名称不超过45个字</div>
              </div>
            </el-form-item>
          </el-form>

        </div>

      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose()">取消</el-button>
          <el-button type="primary" @click="handleSubmit()">完成</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import caseMaterial from "@/services/caseMaterial";
export default {
  components: {
    uploadFile: () => import('@/components/uploadFile.vue'),//上传
  },
  props: {
    eventDialog: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      materialTypeOptions: [
        { label: '身份证件', value: 'IDENTITY' },
        { label: '金融许可证', value: 'FINANCIAL_LICENSES' },
        { label: '营业执照', value: 'BUSINESS_LICENSES' },
        { label: '法定代表人身份证明', value: 'IDENTITY_LEGAL' },
        { label: '起诉状', value: 'COMPLAINTS' },
        { label: '证据清单', value: 'EVIDENCE' },
        { label: '合约', value: 'CONTRACTS' },
        { label: '申领表', value: 'APPLICATION_FORMS' },
        { label: '交易明细', value: 'TRANSACTION_DETAILS' },
        { label: '其他证据', value: 'OTHER' },
      ],
      repaymentObj: {
        caseId: '',
        materialType: '',
        category: 'EVIDENTIAL',
        name: '',
        url: '',
      },
      rulesClientRule: {
        materialType: [
          {required: true, message: '请选择', trigger: 'change',},
        ],
        url: [
          { required: true, message: '请上传', trigger: 'change',},
        ],
      },
      fileList: [],
    };
  },
  mounted() {
    // console.log(1231)
  },
  methods: {
    handleUploadFile(fileList){
      // console.log('获取上传文件信息',fileList)
      fileList = JSON.parse(JSON.stringify(fileList))
      this.fileList = fileList.map((item,i) => {
        return {
          url: item.url,
          fileName: item.fileName,
          previewUrl:item.previewUrl,
          objectName: item.objectName
        }
      })
      this.repaymentObj.name = this.fileList.length?this.fileList[0].objectName : '';
      this.repaymentObj.url = this.fileList.length?this.fileList[0].fileName : '';
    },
    handleClose() {
      this.$emit('update:eventDialog', null)
    },
    handleSubmit() {
      if(!this.$clickThrottle()) { return }//防止重复点击
      this.$refs.ruleFormRepayment.validate((valid) => {
        if (valid) {
          this.repaymentObj.caseId = this.eventDialog.caseId;
          caseMaterial.addCaseFile(this.repaymentObj).then(res => {
            this.$parent.getFileCaseList()
            this.handleClose()
            this.$message.success("操作成功");
          })
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">

</style>