<template>
  <div class="person-edit">
    <el-form
      ref="ruleFormRef"
      :model="ruleFormPer"
      :rules="rulesPer"
      label-position="left"
      label-width="150px"
      class="rule-form-orange company-form"
    >
      <el-form-item label="姓名" style="width: 100%" prop="name">
        <el-input
          v-model.trim="ruleFormPer.name"
          placeholder="请输入姓名"
          disabled
        />
      </el-form-item>
      <el-form-item label="证件类型" style="width: 100%" prop="documentType">
        <el-select
          v-model="ruleFormPer.documentType"
          style="width: 100%"
          placeholder="请选择证件类型"
          :disabled="type==='view'"
        >
          <el-option
            label="身份证"
            value="1"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码" style="width: 100%" prop="cardNo">
        <el-input
          v-model.trim="ruleFormPer.cardNo"
          placeholder="请输入证件号码"
          disabled
        />
      </el-form-item>
      <el-form-item label="手机号" style="width: 100%" prop="phone">
        <el-input
          v-model.trim="ruleFormPer.phone"
          placeholder="请输入手机号"
          :disabled="type==='view'"
        />
      </el-form-item>
      <el-form-item label="证照正面" prop="cardPhoto" style="width: 100%">
        <cy-upload
          ref="cardPhoto"
          :upload-params="{
            fileType: 'creditCardPhoto'
          }"
          :file-data="ruleFormPer.cardPhotoFile"
          :upload-from-orange-status="true"
          placeholder="请上传证照正面"
          :disabled="type==='view'"
        />
      </el-form-item>
      <el-form-item label="证照反面" prop="cardRevPhoto" style="width: 100%">
        <cy-upload
          ref="cardRevPhoto"
          :upload-params="{
            fileType: 'creditCardRevPhoto'
          }"
          :file-data="ruleFormPer.cardRevPhotoFile"
          :upload-from-orange-status="true"
          placeholder="请上传证照反面"
          :disabled="type==='view'"
        />
      </el-form-item>

      <div v-for="(item,index) in creditDetails" :key="index" style="width: 100%;margin-right: 20px;padding: 20px;border: 1px solid #ccc;border-radius: 5px;">
        <el-form-item label="征信查询日期" style="width: 100%;margin-bottom: 0px;">
          <el-date-picker :value="item.searchDate" value-format="yyyy-MM-dd" type="date" placeholder="选择征信查询日期" style="width: 100%;" disabled />
        </el-form-item>
        <el-form-item label="征信报告" style="width: 100%;margin-bottom: 0px;">
          <cy-upload
            :upload-params="{}"
            :file-data="item.creditAddressFile?[item.creditAddressFile]:[]"
            :upload-from-orange-status="true"
            placeholder="请上传征信报告"
            :can-download="true"
            download-power="personDownload"
            disabled
          />
        </el-form-item>
      </div>

      <p v-if="creditDetails && type!=='view'" class="operate" @click="operationShow=true">+增加</p>

      <template v-if="operationShow">
        <el-form-item label="征信查询日期" prop="searchDate" style="width: 100%;">
          <el-date-picker v-model="ruleFormPer.searchDate" value-format="yyyy-MM-dd" type="date" placeholder="选择征信查询日期" style="width: 100%;" :disabled="type==='view'" />
        </el-form-item>
        <el-form-item label="征信报告" prop="creditReport" style="width: 100%">
          <cy-upload
            ref="creditReport"
            :upload-params="{
              fileType: 'creditReport'
            }"
            :file-data="ruleFormPer.creditAddressFile"
            :upload-from-orange-status="true"
            placeholder="请上传征信报告"
            :disabled="type==='view'"
          />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
import { creditDetail } from '@/api/creditInfoManage/index'
import { download } from '@/api/creditManage/supplierManage'
export default {
  props: {
    detailId: {
      type: Number,
      default: null
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ruleFormPer: {
        id: '',
        name: '',
        documentType: '1',
        cardNo: '',
        phone: '',
        searchDate: '',
        cardPhotoFile: [],
        cardRevPhotoFile: [],
        creditReport: []
      },
      rulesPer: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        documentType: [
          { required: true, message: '请选择证件类型', trigger: 'change' }
        ],
        cardNo: [
          { required: true, message: '请输入证件号码', trigger: 'blur' }
        ]
      },
      creditDetails: [],
      operationShow: false
    }
  },
  created() {
    this.getDetails()
  },
  methods: {
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleFormRef.validate(valid => {
          if (valid) {
            const creditCardPhoto = this.$refs.cardPhoto.getFileLists
            const cardRevPhoto = this.$refs.cardRevPhoto.getFileLists
            let creditFile = []
            if (this.operationShow) {
              creditFile = this.$refs.creditReport.getFileLists
            }

            const postData = {
              id: this.ruleFormPer.id,
              Loading: true,
              type: 0,
              name: this.ruleFormPer.name,
              cardNo: this.ruleFormPer.cardNo,
              documentType: this.ruleFormPer.documentType,
              phone: this.ruleFormPer.phone,
              searchDate: this.ruleFormPer.searchDate !== '' ? this.ruleFormPer.searchDate + ' 00:00:00' : '',
              cardPhoto: creditCardPhoto.length ? creditCardPhoto.map(item => item.id)[0] : '',
              cardRevPhoto: cardRevPhoto.length ? cardRevPhoto.map(item => item.id)[0] : '',
              creditAddress: creditFile.length ? creditFile.map(item => item.id)[0] : ''
            }
            return resolve(postData)
          } else {
            reject()
            return false
          }
        })
      })
    },
    // 详情
    getDetails() {
      if (this.detailId) {
        creditDetail({ id: this.detailId }).then((res) => {
          if (res.success) {
            this.ruleFormPer.id = res.data.id
            this.ruleFormPer.name = res.data.name
            this.ruleFormPer.cardNo = res.data.cardNo
            this.ruleFormPer.phone = res.data.phone
            this.ruleFormPer.cardPhotoFile = res.data.cardPhotoFile ? [res.data.cardPhotoFile] : []
            this.ruleFormPer.cardRevPhotoFile = res.data.cardRevPhotoFile ? [res.data.cardRevPhotoFile] : []
            this.creditDetails = res.data.creditDetails
            if (this.creditDetails) {
              this.operationShow = false
            } else {
              this.operationShow = true
            }
          } else {
            this.$message.warning(res.msg)
          }
        })
      }
    }

  }
}
</script>

    <style lang="scss" scoped>
    .person-edit {
      .company-form {
        max-height: 60vh;
        overflow: auto;
        .el-form-item {
          margin-bottom: 20px;
        }
      }
      .operate {
          cursor: pointer;
          color: #FE7D0B;
        }
    }
    </style>
