tenant-Platform/src/views/additionalOrder/additional/modules/imageData.vue

<template>
  <div class="imageData">
    <h3>车辆信息</h3>
    <el-row :gutter="20">
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!drivingLicenseHomePage" :auto-upload="false" :show-file-list="false"@change="uploadImage($event, 1)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>行驶证主页</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(1)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="drivingLicenseHomePage" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 1)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(1)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!drivingLicenseReversePage" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 2)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>行驶证副页</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(2)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="drivingLicenseReversePage" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 2)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(2)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!vehicleRegistrationCertificate" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 3)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>机动车辆登记证书</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(3)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="vehicleRegistrationCertificate" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 3)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(3)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!carCertificate" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 4)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>新车合格证</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(4)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="carCertificate" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 4)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(4)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!purchaseInvoice" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 5)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>购车发票</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(5)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="purchaseInvoice" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 5)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(5)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <h3>车主信息</h3>
    <el-row :gutter="20">
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!IDCardFront" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 6)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>车主身份证（正面）</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(6)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="IDCardFront" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 6)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(6)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!IDCardBack" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 7)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>车主身份证（反面）</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(7)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="IDCardBack" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 7)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(7)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!carBusinessLicense" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 8)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>车主营业执照</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(8)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="carBusinessLicense" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 8)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(8)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <h3>投保人信息</h3>
    <el-row :gutter="20">
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!insuredIDCardFront" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 9)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>投保人身份证（正面）</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(9)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="insuredIDCardFront" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 9)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(9)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!insuredIDCardBack" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 10)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>投保人身份证（反面）</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(10)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="insuredIDCardBack" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 10)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(10)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!insuredCarBusinessLicense" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 11)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>投保人营业执照</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(11)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="insuredCarBusinessLicense" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 11)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(11)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <h3>被保人信息</h3>
    <el-row :gutter="20">
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!insuredPersonIDCardFront" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 12)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>被投保人身份证（正面）</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(12)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="insuredPersonIDCardFront" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 12)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(12)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!insuredPersonIDCardBack" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 13)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>被投保人身份证（反面）</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(13)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="insuredPersonIDCardBack" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 13)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(13)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!insuredPersonCarBusinessLicense" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 14)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>被投保人营业执照</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(14)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="insuredPersonCarBusinessLicense" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 14)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(14)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <h3>关系证明</h3>
    <el-row :gutter="20">
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!relationship" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 15)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>关系证明</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(15)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="relationship" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 15)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(15)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <h3>验车照</h3>
    <el-row :gutter="20">
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!vehicleCarFrame" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 16)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>验车照（车架）</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(16)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="vehicleCarFrame" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 16)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(16)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!vehicleCarBL" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 17)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>验车照（后左）</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(17)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="vehicleCarBL" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 17)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(17)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!vehicleCarBR" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 18)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>验车照（后右）</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(18)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="vehicleCarBR" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 18)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(18)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!vehicleCarFR" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 19)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>验车照（前右）</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(19)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="vehicleCarFR" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 19)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(19)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!vehicleCarFL" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 20)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>验车照（前左）</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(20)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="vehicleCarFL" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 20)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(20)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!vehicleCarFrant" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 21)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>验车照（正前）</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(21)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="vehicleCarFrant" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 21)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(21)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!vehicleCarBack" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 22)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>验车照（正后）</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(22)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="vehicleCarBack" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 22)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(22)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!vehicleCarPC" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 23)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>验车照（人车合影）</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(23)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="vehicleCarPC" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 23)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(23)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!vehicleCarLogo" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 24)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>验车照（地标合影）</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(24)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="vehicleCarLogo" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 24)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(24)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!vehicleCarWork" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 25)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>验车照（工作台）</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(25)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="vehicleCarWork" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 25)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(25)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!vehicleCarWindow" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 26)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>验车照（天窗）</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(26)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="vehicleCarWindow" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 26)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(26)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <h3>上年商业险保单</h3>
    <el-row :gutter="20">
      <el-col class="col-m-b-16" :span="8">
        <el-upload v-if="!insuranceFile" :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 27)">
          <div class="upload-box">
            <div class="icon-box">
              <el-icon style="font-size: 20px"><Camera /></el-icon>
              <p>上年商业险保单</p>
            </div>
          </div>
        </el-upload>
        <div class="fileInfo" v-else>
          <div class="file-box">
            <div class="btn-top">
              <img class="image-close" @click="deleteImage(27)" src="@/assets/images/close.png" />
            </div>
            <img class="file-img" :src="insuranceFile" />
            <div class="btn-bottom">
              <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 27)" style="display: flex; align-items: center; justify-content: center; color: white">
                <el-icon><Upload /></el-icon>重新上传
              </el-upload>
              <div class="width-50" style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;" @click="downloadImage(27)">
                <el-icon><Download /></el-icon>下载资料
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="footer">
      <el-button plain @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import api from "@/api";
import { ElMessage } from "element-plus";

let fileForm = ref({})

const emits = defineEmits(['close'])

// 车辆信息
let drivingLicenseHomePage = ref('') // 行驶证主页
let drivingLicenseHomePageUrl = ref('') // 行驶证主页地址
let drivingLicenseReversePage = ref('') // 行驶证副页
let drivingLicenseReversePageUrl = ref('') // 行驶证副页地址
let vehicleRegistrationCertificate = ref('') // 机动车辆登记证书
let vehicleRegistrationCertificateUrl = ref('') // 机动车辆登记证书地址
let carCertificate = ref('') // 新车合格证
let carCertificateUrl = ref('') // 新车合格证地址
let purchaseInvoice = ref('') // 购车发票
let purchaseInvoiceUrl = ref('') // 购车发票地址
// 车主信息
let IDCardFront = ref('') // 身份证正面
let IDCardFrontUrl = ref('') // 身份证正面地址
let IDCardBack = ref('') // 身份证反面
let IDCardBackUrl = ref('') // 身份证反面地址
let carBusinessLicense = ref('') // 车主营业执照
let carBusinessLicenseUrl = ref('') // 车主营业执照地址
// 投保人信息
let insuredIDCardFront = ref('') // 身份证正面
let insuredIDCardFrontUrl = ref('') // 身份证正面地址
let insuredIDCardBack = ref('') // 身份证反面
let insuredIDCardBackUrl = ref('') // 身份证反面地址
let insuredCarBusinessLicense = ref('') // 投保人营业执照
let insuredCarBusinessLicenseUrl = ref('') // 投保人营业执照地址
// 被投保人信息
let insuredPersonIDCardFront = ref('') // 身份证正面
let insuredPersonIDCardFrontUrl = ref('') // 身份证正面地址
let insuredPersonIDCardBack = ref('') // 身份证反面
let insuredPersonIDCardBackUrl = ref('') // 身份证反面地址
let insuredPersonCarBusinessLicense = ref('') // 被投保人营业执照
let insuredPersonCarBusinessLicenseUrl = ref('') // 被投保人营业执照地址
// 关系证明
let relationship = ref('') // 关系证明
let relationshipUrl = ref('') // 关系证明地址
//验车照
let vehicleCarFrame = ref('') // 验车照车架
let vehicleCarFrameUrl = ref('') // 验车照车架地址
let vehicleCarBL = ref('') // 验车照后左
let vehicleCarBLUrl = ref('') // 验车照后左地址
let vehicleCarBR = ref('') // 验车照后右
let vehicleCarBRUrl = ref('') // 验车照后右地址
let vehicleCarFR = ref('') // 验车照前右
let vehicleCarFRUrl = ref('') // 验车照前右地址
let vehicleCarFL = ref('') // 验车照前左
let vehicleCarFLUrl = ref('') // 验车照前左地址
let vehicleCarFrant = ref('') // 验车照正前
let vehicleCarFrantUrl = ref('') // 验车照正前地址
let vehicleCarBack = ref('') // 验车照正后
let vehicleCarBackUrl = ref('') // 验车照正后地址
let vehicleCarPC = ref('') // 验车照人车合影
let vehicleCarPCUrl = ref('') // 验车照人车合影地址
let vehicleCarLogo = ref('') // 验车照地标合影
let vehicleCarLogoUrl = ref('') // 验车照地标合影地址
let vehicleCarWork = ref('') // 验车照工作台
let vehicleCarWorkUrl = ref('') // 验车照工作台地址
let vehicleCarWindow = ref('') // 验车照天窗
let vehicleCarWindowUrl = ref('') // 验车照天窗地址
// 上年商业险保单
let insuranceFile = ref('') // 上年商业险保单
let insuranceFileUrl = ref('') // 上年商业险保单地址

// 图片删除
const deleteImage = (type) => {
  switch (type) {
    case 1:
      drivingLicenseHomePage.value = ''
      drivingLicenseHomePageUrl.value = ''
      break;
    case 2:
      drivingLicenseReversePage.value = ''
      drivingLicenseReversePageUrl.value = ''
      break;
    case 3:
      vehicleRegistrationCertificate.value = ''
      vehicleRegistrationCertificateUrl.value = ''
      break;
    case 4:
      carCertificate.value = ''
      carCertificateUrl.value = ''
      break;
    case 5:
      purchaseInvoice.value = ''
      purchaseInvoiceUrl.value = ''
      break;
    case 6:
      IDCardFront.value = ''
      IDCardFrontUrl.value = ''
      break;
    case 7:
      IDCardBack.value = ''
      IDCardBackUrl.value = ''
      break;
    case 8:
      carBusinessLicense.value = ''
      carBusinessLicenseUrl.value = ''
      break;
    case 9:
      insuredIDCardFront.value = ''
      insuredIDCardFrontUrl.value = ''
      break;
    case 10:
      insuredIDCardBack.value = ''
      insuredIDCardBackUrl.value = ''
      break;
    case 11:
      insuredCarBusinessLicense.value = ''
      insuredCarBusinessLicenseUrl.value = ''
      break;
    case 12:
      insuredPersonIDCardFront.value = ''
      insuredPersonIDCardFrontUrl.value = ''
      break;
    case 13:
      insuredPersonIDCardBack.value = ''
      insuredPersonIDCardBackUrl.value = ''
      break;
    case 14:
      insuredPersonCarBusinessLicense.value = ''
      insuredPersonCarBusinessLicenseUrl.value = ''
      break;
    case 15:
      relationship.value = ''
      relationshipUrl.value = ''
      break;
    case 16:
      vehicleCarFrame.value = ''
      vehicleCarFrameUrl.value = ''
      break;
    case 17:
      vehicleCarBL.value = ''
      vehicleCarBLUrl.value = ''
      break;
    case 18:
      vehicleCarBR.value = ''
      vehicleCarBRUrl.value = ''
      break;
    case 19:
      vehicleCarFR.value = ''
      vehicleCarFRUrl.value = ''
      break;
    case 20:
      vehicleCarFL.value = ''
      vehicleCarFLUrl.value = ''
      break;
    case 21:
      vehicleCarFrant.value = ''
      vehicleCarFrantUrl.value = ''
      break;
    case 22:
      vehicleCarBack.value = ''
      vehicleCarBackUrl.value = ''
      break;
    case 23:
      vehicleCarPC.value = ''
      vehicleCarPCUrl.value = ''
      break;
    case 24:
      vehicleCarLogo.value = ''
      vehicleCarLogoUrl.value = ''
      break;
    case 25:
      vehicleCarWork.value = ''
      vehicleCarWorkUrl.value = ''
      break;
    case 26:
      vehicleCarWindow.value = ''
      vehicleCarWindowUrl.value = ''
      break;
    case 27:
      insuranceFile.value = ''
      insuranceFileUrl.value = ''
      break;
  }
}

// 上传图片
const uploadImage = async (file, type) => {
  let files = file.raw
  const params = new FormData(); // 声明formData数据类型
  params.append("file", files);
  params.append("type", "image");
  const { code, data, msg } = await api.commonApi.fileUpload(params)
  if(code == 200) {
    let result: any = {...data}
    switch (type) {
      case 1:
        drivingLicenseHomePage.value = result.downloadUrl
        drivingLicenseHomePageUrl.value = result.fileName
        fileForm.value.drivingLicenseHomePage = result.id
        break;
      case 2:
        drivingLicenseReversePage.value = result.downloadUrl
        drivingLicenseReversePageUrl.value = result.fileName
        fileForm.value.drivingLicenseReversePage = result.id
        break;
      case 3:
        vehicleRegistrationCertificate.value = result.downloadUrl
        vehicleRegistrationCertificateUrl.value = result.fileName
        fileForm.value.vehicleRegistrationCertificate = result.id
        break;
      case 4:
        carCertificate.value = result.downloadUrl
        carCertificateUrl.value = result.fileName
        fileForm.value.carCertificate = result.id
        break;
      case 5:
        purchaseInvoice.value = result.downloadUrl
        purchaseInvoiceUrl.value = result.fileName
        fileForm.value.purchaseInvoice = result.id
        break;
      case 6:
        IDCardFront.value = result.downloadUrl
        IDCardFrontUrl.value = result.fileName
        fileForm.value.IDCardFront = result.id
        break;
      case 7:
        IDCardBack.value = result.downloadUrl
        IDCardBackUrl.value = result.fileName
        fileForm.value.IDCardBack = result.id
        break;
      case 8:
        carBusinessLicense.value = result.downloadUrl
        carBusinessLicenseUrl.value = result.fileName
        fileForm.value.carBusinessLicense = result.id
        break;
      case 9:
        insuredIDCardFront.value = result.downloadUrl
        insuredIDCardFrontUrl.value = result.fileName
        fileForm.value.insuredIDCardFront = result.id
        break;
      case 10:
        insuredIDCardBack.value = result.downloadUrl
        insuredIDCardBackUrl.value = result.fileName
        fileForm.value.insuredIDCardBack = result.id
        break;
      case 11:
        insuredCarBusinessLicense.value = result.downloadUrl
        insuredCarBusinessLicenseUrl.value = result.fileName
        fileForm.value.insuredCarBusinessLicense = result.id
        break;
      case 12:
        insuredPersonIDCardFront.value = result.downloadUrl
        insuredPersonIDCardFrontUrl.value = result.fileName
        fileForm.value.insuredPersonIDCardFront = result.id
        break;
      case 13:
        insuredPersonIDCardBack.value = result.downloadUrl
        insuredPersonIDCardBackUrl.value = result.fileName
        fileForm.value.insuredPersonIDCardBack = result.id
        break;
      case 14:
        insuredPersonCarBusinessLicense.value = result.downloadUrl
        insuredPersonCarBusinessLicenseUrl.value = result.fileName
        fileForm.value.insuredPersonCarBusinessLicense = result.id
        break;
      case 15:
        relationship.value = result.downloadUrl
        relationshipUrl.value = result.fileName
        fileForm.value.relationship = result.id
        break;
      case 16:
        vehicleCarFrame.value = result.downloadUrl
        vehicleCarFrameUrl.value = result.fileName
        fileForm.value.vehicleCarFrame = result.id
        break;
      case 17:
        vehicleCarBL.value = result.downloadUrl
        vehicleCarBLUrl.value = result.fileName
        fileForm.value.vehicleCarBL = result.id
        break;
      case 18:
        vehicleCarBR.value = result.downloadUrl
        vehicleCarBRUrl.value = result.fileName
        fileForm.value.vehicleCarBR = result.id
        break;
      case 19:
        vehicleCarFR.value = result.downloadUrl
        vehicleCarFRUrl.value = result.fileName
        fileForm.value.vehicleCarFR = result.id
        break;
      case 20:
        vehicleCarFL.value = result.downloadUrl
        vehicleCarFLUrl.value = result.fileName
        fileForm.value.vehicleCarFL = result.id
        break;
      case 21:
        vehicleCarFrant.value = result.downloadUrl
        vehicleCarFrantUrl.value = result.fileName
        fileForm.value.vehicleCarFrant = result.id
        break;
      case 22:
        vehicleCarBack.value = result.downloadUrl
        vehicleCarBackUrl.value = result.fileName
        fileForm.value.vehicleCarBack = result.id
        break;
      case 23:
        vehicleCarPC.value = result.downloadUrl
        vehicleCarPCUrl.value = result.fileName
        fileForm.value.vehicleCarPC = result.id
        break;
      case 24:
        vehicleCarLogo.value = result.downloadUrl
        vehicleCarLogoUrl.value = result.fileName
        fileForm.value.vehicleCarLogo = result.id
        break;
      case 25:
        vehicleCarWork.value = result.downloadUrl
        vehicleCarWorkUrl.value = result.fileName
        fileForm.value.vehicleCarWork = result.id
        break;
      case 26:
        vehicleCarWindow.value = result.downloadUrl
        vehicleCarWindowUrl.value = result.fileName
        fileForm.value.vehicleCarWindow = result.id
        break;
      case 27:
        insuranceFile.value = result.downloadUrl
        insuranceFileUrl.value = result.fileName
        fileForm.value.insuranceFile = result.id
        break;
    }
  } else {
    ElMessage({
      message: msg,
      type: 'error'
    })
  }
}

// 下载
// 图片下载
const download = (url, name) => {
  let image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function () {
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    let context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
    let a = document.createElement("a"); // 生成一个a元素
    let event = new MouseEvent("click"); // 创建一个单击事件
    a.download = name; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  }
  image.src = url
}
const downloadImage = (type) => {
  switch (type) {
    case 1:
      download(drivingLicenseHomePage.value,drivingLicenseHomePageUrl.value)
      break;
    case 2:
      download(drivingLicenseReversePage.value,drivingLicenseReversePageUrl.value)
      break;
    case 3:
      download(vehicleRegistrationCertificate.value,vehicleRegistrationCertificateUrl.value)
      break;
    case 4:
      download(carCertificate.value,carCertificateUrl.value)
      break;
    case 5:
      download(purchaseInvoice.value,purchaseInvoiceUrl.value)
      break;
    case 6:
      download(IDCardFront.value,IDCardFrontUrl.value)
      break;
    case 7:
      download(IDCardBack.value,IDCardBackUrl.value)
      break;
    case 8:
      download(carBusinessLicense.value,carBusinessLicenseUrl.value)
      break;
    case 9:
      download(insuredIDCardFront.value,insuredIDCardFrontUrl.value)
      break;
    case 10:
      download(insuredIDCardBack.value,insuredIDCardBackUrl.value)
      break;
    case 11:
      download(insuredCarBusinessLicense.value,insuredCarBusinessLicenseUrl.value)
      break;
    case 12:
      download(insuredPersonIDCardFront.value,insuredPersonIDCardFrontUrl.value)
      break;
    case 13:
      download(insuredPersonIDCardBack.value,insuredPersonIDCardBackUrl.value)
      break;
    case 14:
      download(insuredPersonCarBusinessLicense.value,insuredPersonCarBusinessLicenseUrl.value)
      break;
    case 15:
      download(relationship.value,relationshipUrl.value)
      break;
    case 16:
      download(vehicleCarFrame.value,vehicleCarFrameUrl.value)
      break;
    case 17:
      download(vehicleCarBL.value,vehicleCarBLUrl.value)
      break;
    case 18:
      download(vehicleCarBR.value,vehicleCarBRUrl.value)
      break;
    case 19:
      download(vehicleCarFR.value,vehicleCarFRUrl.value)
      break;
    case 20:
      download(vehicleCarFL.value,vehicleCarFLUrl.value)
      break;
    case 21:
      download(vehicleCarFrant.value,vehicleCarFrantUrl.value)
      break;
    case 22:
      download(vehicleCarBack.value,vehicleCarBackUrl.value)
      break;
    case 23:
      download(vehicleCarPC.value,vehicleCarPCUrl.value)
      break;
    case 24:
      download(vehicleCarLogo.value,vehicleCarLogoUrl.value)
      break;
    case 25:
      download(vehicleCarWork.value,vehicleCarWorkUrl.value)
      break;
    case 26:
      download(vehicleCarWindow.value,vehicleCarWindowUrl.value)
      break;
    case 27:
      download(insuranceFile.value,insuranceFileUrl.value)
      break;
  }
}

// 取消
const handleCancel = () => {
  emits('close', [])
}
// 确定
const handleConfirm = () => {
  let images = [
    {
      imageType: 'C01',
      imageId: fileForm.value.drivingLicenseHomePage
    },
    {
      imageType: 'D01',
      imageId: fileForm.value.drivingLicenseReversePage
    },
    {
      imageType: 'TAR05',
      imageId: fileForm.value.vehicleRegistrationCertificate
    },
    {
      imageType: 'XC00',
      imageId: fileForm.value.carCertificate
    },
    {
      imageType: 'GC00',
      imageId: fileForm.value.purchaseInvoice
    },
    {
      imageType: 'C02',
      imageId: fileForm.value.IDCardFront
    },
    {
      imageType: 'D02',
      imageId: fileForm.value.IDCardBack
    },
    {
      imageType: 'Y02',
      imageId: fileForm.value.carBusinessLicense
    },
    {
      imageType: 'C03',
      imageId: fileForm.value.insuredIDCardFront
    },
    {
      imageType: 'D03',
      imageId: fileForm.value.insuredIDCardBack
    },
    {
      imageType: 'Y03',
      imageId: fileForm.value.insuredCarBusinessLicense
    },
    {
      imageType: 'C04',
      imageId: fileForm.value.insuredPersonIDCardFront
    },
    {
      imageType: 'D04',
      imageId: fileForm.value.insuredPersonIDCardBack
    },
    {
      imageType: 'Y04',
      imageId: fileForm.value.insuredPersonCarBusinessLicense
    },
    {
      imageType: 'GX00',
      imageId: fileForm.value.relationship
    },
    {
      imageType: 'C0500',
      imageId: fileForm.value.vehicleCarFrame
    },
    {
      imageType: 'C0501',
      imageId: fileForm.value.vehicleCarBL
    },
    {
      imageType: 'C0502',
      imageId: fileForm.value.vehicleCarBR
    },
    {
      imageType: 'C0503',
      imageId: fileForm.value.vehicleCarFR
    },
    {
      imageType: 'C0504',
      imageId: fileForm.value.vehicleCarFL
    },
    {
      imageType: 'C0506',
      imageId: fileForm.value.vehicleCarFrant
    },
    {
      imageType: 'C0507',
      imageId: fileForm.value.vehicleCarBack
    },
    {
      imageType: 'C0505',
      imageId: fileForm.value.vehicleCarPC
    },
    {
      imageType: 'C0508',
      imageId: fileForm.value.vehicleCarLogo
    },
    {
      imageType: 'C0509',
      imageId: fileForm.value.vehicleCarWork
    },
    {
      imageType: 'C0510',
      imageId: fileForm.value.vehicleCarWindow
    },
    {
      imageType: 'LAST_INSURANCE_POLICY',
      imageId: fileForm.value.insuranceFile
    },
  ]
  emits('close', [...images])
}

// 回显
const initData = (data, type) => {
  if(type) {
    if(data) {
      if(data.find(a => a.imageType === 'C01')) {
        let result = data.find(a => a.imageType === 'C01')
        console.log(123, result)
        drivingLicenseHomePage.value = result.previewUrl
        drivingLicenseHomePageUrl.value = result.fileName
        fileForm.value.drivingLicenseHomePage = result.id
      }
      if(data.find(a => a.imageType === 'D01')) {
        let result = data.find(a => a.imageType === 'D01')
        drivingLicenseReversePage.value = result.previewUrl
        drivingLicenseReversePageUrl.value = result.fileName
        fileForm.value.drivingLicenseReversePage = result.id
      }
      if(data.find(a => a.imageType === 'TAR05')) {
        let result = data.find(a => a.imageType === 'TAR05')
        vehicleRegistrationCertificate.value = result.previewUrl
        vehicleRegistrationCertificateUrl.value = result.fileName
        fileForm.value.vehicleRegistrationCertificate = result.id
      }
      if(data.find(a => a.imageType === 'XC00')) {
        let result = data.find(a => a.imageType === 'XC00')
        carCertificate.value = result.previewUrl
        carCertificateUrl.value = result.fileName
        fileForm.value.carCertificate = result.id
      }
      if(data.find(a => a.imageType === 'GC00')) {
        let result = data.find(a => a.imageType === 'GC00')
        purchaseInvoice.value = result.previewUrl
        purchaseInvoiceUrl.value = result.fileName
        fileForm.value.purchaseInvoice = result.id
      }
      if(data.find(a => a.imageType === 'C02')) {
        let result = data.find(a => a.imageType === 'C02')
        IDCardFront.value = result.previewUrl
        IDCardFrontUrl.value = result.fileName
        fileForm.value.IDCardFront = result.id
      }
      if(data.find(a => a.imageType === 'D02')) {
        let result = data.find(a => a.imageType === 'D02')
        IDCardBack.value = result.previewUrl
        IDCardBackUrl.value = result.fileName
        fileForm.value.IDCardBack = result.id
      }
      if(data.find(a => a.imageType === 'Y02')) {
        let result = data.find(a => a.imageType === 'Y02')
        carBusinessLicense.value = result.previewUrl
        carBusinessLicenseUrl.value = result.fileName
        fileForm.value.carBusinessLicense = result.id
      }
      if(data.find(a => a.imageType === 'C03')) {
        let result = data.find(a => a.imageType === 'C03')
        insuredIDCardFront.value = result.previewUrl
        insuredIDCardFrontUrl.value = result.fileName
        fileForm.value.insuredIDCardFront = result.id
      }
      if(data.find(a => a.imageType === 'D03')) {
        let result = data.find(a => a.imageType === 'D03')
        insuredIDCardBack.value = result.previewUrl
        insuredIDCardBackUrl.value = result.fileName
        fileForm.value.insuredIDCardBack = result.id
      }
      if(data.find(a => a.imageType === 'Y03')) {
        let result = data.find(a => a.imageType === 'Y03')
        insuredCarBusinessLicense.value = result.previewUrl
        insuredCarBusinessLicenseUrl.value = result.fileName
        fileForm.value.insuredCarBusinessLicense = result.id
      }
      if(data.find(a => a.imageType === 'C04')) {
        let result = data.find(a => a.imageType === 'C04')
        insuredPersonIDCardFront.value = result.previewUrl
        insuredPersonIDCardFrontUrl.value = result.fileName
        fileForm.value.insuredPersonIDCardFront = result.id
      }
      if(data.find(a => a.imageType === 'D04')) {
        let result = data.find(a => a.imageType === 'D04')
        insuredPersonIDCardBack.value = result.previewUrl
        insuredPersonIDCardBackUrl.value = result.fileName
        fileForm.value.insuredPersonIDCardBack = result.id
      }
      if(data.find(a => a.imageType === 'Y04')) {
        let result = data.find(a => a.imageType === 'Y04')
        insuredPersonCarBusinessLicense.value = result.previewUrl
        insuredPersonCarBusinessLicenseUrl.value = result.fileName
        fileForm.value.insuredPersonCarBusinessLicense = result.id
      }
      if(data.find(a => a.imageType === 'GX00')) {
        let result = data.find(a => a.imageType === 'GX00')
        relationship.value = result.previewUrl
        relationshipUrl.value = result.fileName
        fileForm.value.relationship = result.id
      }
      if(data.find(a => a.imageType === 'C0500')) {
        let result = data.find(a => a.imageType === 'C0500')
        vehicleCarFrame.value = result.previewUrl
        vehicleCarFrameUrl.value = result.fileName
        fileForm.value.vehicleCarFrame = result.id
      }
      if(data.find(a => a.imageType === 'C0501')) {
        let result = data.find(a => a.imageType === 'C0501')
        vehicleCarBL.value = result.previewUrl
        vehicleCarBLUrl.value = result.fileName
        fileForm.value.vehicleCarBL = result.id
      }
      if(data.find(a => a.imageType === 'C0502')) {
        let result = data.find(a => a.imageType === 'C0502')
        vehicleCarBR.value = result.previewUrl
        vehicleCarBRUrl.value = result.fileName
        fileForm.value.vehicleCarBR = result.id
      }
      if(data.find(a => a.imageType === 'C0503')) {
        let result = data.find(a => a.imageType === 'C0503')
        vehicleCarFR.value = result.previewUrl
        vehicleCarFRUrl.value = result.fileName
        fileForm.value.vehicleCarFR = result.id
      }
      if(data.find(a => a.imageType === 'C0504')) {
        let result = data.find(a => a.imageType === 'C0504')
        vehicleCarFL.value = result.previewUrl
        vehicleCarFLUrl.value = result.fileName
        fileForm.value.vehicleCarFL = result.id
      }
      if(data.find(a => a.imageType === 'C0505')) {
        let result = data.find(a => a.imageType === 'C0505')
        vehicleCarFrant.value = result.previewUrl
        vehicleCarFrantUrl.value = result.fileName
        fileForm.value.vehicleCarFrant = result.id
      }
      if(data.find(a => a.imageType === 'C0506')) {
        let result = data.find(a => a.imageType === 'C0506')
        vehicleCarBack.value = result.previewUrl
        vehicleCarBackUrl.value = result.fileName
        fileForm.value.vehicleCarBack = result.id
      }
      if(data.find(a => a.imageType === 'C0507')) {
        let result = data.find(a => a.imageType === 'C0507')
        vehicleCarPC.value = result.previewUrl
        vehicleCarPCUrl.value = result.fileName
        fileForm.value.vehicleCarPC = result.id
      }
      if(data.find(a => a.imageType === 'C0508')) {
        let result = data.find(a => a.imageType === 'C0508')
        vehicleCarLogo.value = result.previewUrl
        vehicleCarLogoUrl.value = result.fileName
        fileForm.value.vehicleCarLogo = result.id
      }
      if(data.find(a => a.imageType === 'C0509')) {
        let result = data.find(a => a.imageType === 'C0509')
        vehicleCarWork.value = result.previewUrl
        vehicleCarWorkUrl.value = result.fileName
        fileForm.value.vehicleCarWork = result.id
      }
      if(data.find(a => a.imageType === 'C0510')) {
        let result = data.find(a => a.imageType === 'C0510')
        vehicleCarWindow.value = result.previewUrl
        vehicleCarWindowUrl.value = result.fileName
        fileForm.value.vehicleCarWindow = result.id
      }
      if(data.find(a => a.imageType === 'LAST_INSURANCE_POLICY')) {
        let result = data.find(a => a.imageType === 'LAST_INSURANCE_POLICY')
        insuranceFile.value = result.previewUrl
        insuranceFileUrl.value = result.fileName
        fileForm.value.insuranceFile = result.id
      }
    }
  } else {
    if(data) {
      drivingLicenseHomePage.value = data.xszFrontResult.downloadUrl
      drivingLicenseHomePageUrl.value = data.xszFrontResult.fileName
      drivingLicenseReversePage.value = data.xszBackResult.downloadUrl
      drivingLicenseReversePageUrl.value = data.xszBackResult.fileName
      IDCardFront.value = data.sfzFrontResult.downloadUrl
      IDCardFrontUrl.value = data.sfzFrontResult.fileName
      IDCardBack.value = data.sfzBackResult.downloadUrl
      IDCardBackUrl.value = data.sfzBackResult.fileName
      insuredIDCardFront.value = data.sfz1FrontResult.downloadUrl
      insuredIDCardFrontUrl.value = data.sfz1FrontResult.fileName
      insuredIDCardBack.value = data.sfz1BackResult.downloadUrl
      insuredIDCardBackUrl.value = data.sfz1BackResult.fileName
      insuredPersonIDCardFront.value = data.sfz2FrontResult.downloadUrl
      insuredPersonIDCardFrontUrl.value = data.sfz2FrontResult.fileName
      insuredPersonIDCardBack.value = data.sfz2BackResult.downloadUrl
      insuredPersonIDCardBackUrl.value = data.sfz2BackResult.fileName
      fileForm.value = {
        drivingLicenseHomePage: data.xszFrontResult.id,
        drivingLicenseReversePage: data.xszBackResult.id,
        IDCardFront: data.sfzFrontResult.id,
        IDCardBack: data.sfzBackResult.id,
        insuredIDCardFront: data.sfz1FrontResult.id,
        insuredIDCardBack: data.sfz1BackResult.id,
        insuredPersonIDCardFront: data.sfz2FrontResult.id,
        insuredPersonIDCardBack: data.sfz2BackResult.id,
      }
    }
  }
}

defineExpose({
  initData
})

</script>

<style scoped lang="scss">
@use "@/assets/styles/common/style";
.fileInfo{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 5px;
  margin: 0 0 16px;
  .fileName{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fileBtn{
    display: flex;
    align-items: center;
    .btn-icon{
      margin: 0 10px;
      font-size: 16px;
      cursor: pointer;
      &:hover{
        color: #00a0f4;
      }
    }
  }

  .file-box{
    position: relative;
    .btn-top{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      position: absolute;
      top: 0;
      left: 0;
      .image-close{
        display: block;
        width: 12px;
        height: 12px;
        cursor: pointer;
      }
    }
    .file-img{
      display: block;
      width: 208px;
      height: 130px;
      border-radius: 5px;
    }
    .btn-bottom{
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      height: 24px;
      width: 100%;
      background: url("@/assets/images/btn-bg.png") no-repeat;
      background-size: 100% 100%;
      .width-50{
        width: 50%;
      }
    }
  }

}
.upload-box{
  width: 208px;
  height: 130px;
  background: #EEEEEE;
  border: 1px solid #EEEEEE;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  .icon-box{
    text-align: center;
    color: #999999;
    p{
      margin: 0 0;
      font-size: 14px;
    }
  }
}
</style>