<template>
  <div class="comp-master-file-info">
    <el-row :gutter="40">
      <el-col :span="12">
        <file-info
          ref="protocol"
          :sign="deviceType === 'pc'"
          :limit="4"
          :file-size="20"
          :data="protocolUrlData"
          :upload-type="['camera', 'sign']"
          :attachment-url="attachmentUrl"
          label="入网协议"
          sign-key="peopleAgreement"
          placeholder="上传文件"
        />
      </el-col>
      <el-col v-if="type !== 'new'" :span="12">
        <file-info
          ref="contract"
          :limit="5"
          :file-size="20"
          :data="contractUrlData"
          label="购车合同"
          placeholder="上传文件"
        />
      </el-col>
      <el-col v-else :span="12">
        <file-info
          ref="notify"
          :sign="deviceType === 'pc'"
          :limit="4"
          :file-size="20"
          :data="notifyUrlData"
          :upload-type="['camera', 'sign']"
          sign-key="realnameNotice"
          label="责任告知书"
          placeholder="上传文件"
        />
      </el-col>
    </el-row>
    <el-row v-if="type !== 'new'" :gutter="40">
      <el-col :span="12">
        <file-info
          ref="bill"
          :limit="5"
          :file-size="20"
          :data="billUrlData"
          label="购车发票或行驶本之一"
          placeholder="上传文件"
        />
      </el-col>
      <el-col :span="12">
        <file-info
          ref="transfer"
          :limit="5"
          :file-size="20"
          :data="transferUrlData"
          label="过户证明"
          placeholder="上传文件"
        />
      </el-col>
    </el-row>
    <el-row v-if="type !== 'new'" :gutter="40">
      <el-col :span="12">
        <file-info
          ref="notify"
          :sign="deviceType === 'pc'"
          :limit="4"
          :file-size="20"
          :data="notifyUrlData"
          :upload-type="['camera', 'sign']"
          sign-key="realnameNotice"
          label="责任告知书"
          placeholder="上传文件"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import FileInfo from '@/components/FileInfo'
import { mapGetters } from 'vuex'

export default {
  name: 'CompMasterFileInfo',
  components: {
    FileInfo
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      default: 'new'
    },
    attachmentUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        protocolUrl: [],
        contractUrl: [],
        billUrl: [],
        transferUrl: [],
        notifyUrlData: []
      }
    }
  },
  computed: {
    ...mapGetters(['deviceType']),
    outerData() {
      return this.data || {}
    },
    protocolUrlData() {
      return {
        fileList: this.outerData.protocolUrl || []
      }
    },
    contractUrlData() {
      return {
        fileList: this.outerData.contractUrl || []
      }
    },
    billUrlData() {
      return {
        fileList: this.outerData.billUrl || []
      }
    },
    transferUrlData() {
      return {
        fileList: this.outerData.transferUrl || []
      }
    },
    notifyUrlData() {
      return {
        fileList: this.outerData.notifyUrlData || []
      }
    }
  },
  methods: {

    // 校验
    async validate() {
      let validateList = null
      if (this.type === 'new') {
        validateList = [
          this.$refs.protocol.validate(),
          this.$refs.notify.validate()
        ]
      } else {
        validateList = [
          this.$refs.protocol.validate(),
          this.$refs.contract.validate(),
          this.$refs.bill.validate(),
          this.$refs.transfer.validate(),
          this.$refs.notify.validate()
        ]
      }
      try {
        await Promise.all(validateList)
        return true
      } catch (e) {
        throw e
      }
    },
    // 获取数据
    getFormData() {
      if (this.type === 'new') {
        const protocolUrl = this.$refs.protocol.getPendingCacheData().fileList
        const notifyUrl = this.$refs.notify.getPendingCacheData().fileList
        return {
          protocolUrl,
          notifyUrl
        }
      } else {
        const protocolUrl = this.$refs.protocol.getPendingCacheData().fileList
        const contractUrl = this.$refs.contract.getPendingCacheData().fileList
        const billUrl = this.$refs.bill.getPendingCacheData().fileList
        const transferUrl = this.$refs.transfer.getPendingCacheData().fileList
        const notifyUrl = this.$refs.notify.getPendingCacheData().fileList
        return {
          protocolUrl,
          contractUrl,
          billUrl,
          transferUrl,
          notifyUrl
        }
      }
    },
    // 获取待缓存数据
    getPendingCacheData() {
      return this.getFormData()
    }
  }
}
</script>

<style lang="scss">
.comp-master-file-info {

}
</style>
