<template>
  <div class="line" v-show="!disabled || shipFileList.length">
    <div class="info-line">
      <div class="info-line-title">船舶证书 :</div>
      <Uploader
        :uploaderId="certsId + 'shipFileList'"
        :params="{ type: '2', userId: 0, location: '' }"
        :disabled="disabled"
        @onSendFileList="getShipFileList"
        :fileList="shipFileList"
      ></Uploader>
    </div>
  </div>
  <div class="line" v-show="!disabled || annualFileList.length">
    <div class="info-line">
      <div class="info-line-title">船舶年审合格证 :</div>
      <Uploader
        :uploaderId="certsId + 'annualFileList'"
        :params="{ type: '5', userId: 0, location: '' }"
        :disabled="disabled"
        @onSendFileList="getAnnualFileList"
        :fileList="annualFileList"
      ></Uploader>
    </div>
  </div>
  <div class="line" v-show="!disabled || shipNationFileList.length">
    <div class="info-line">
      <div class="info-line-title">船舶国籍证书 :</div>
      <Uploader
        :uploaderId="certsId + 'shipNationFileList'"
        :params="{ type: '6', userId: 0, location: '' }"
        :disabled="disabled"
        @onSendFileList="getShipNationFileList"
        :fileList="shipNationFileList"
      ></Uploader>
    </div>
  </div>
  <div class="line" v-show="!disabled || operatingFileList.length">
    <div class="info-line">
      <div class="info-line-title">营运证 :</div>
      <Uploader
        :uploaderId="certsId + 'operatingFileList'"
        :params="{ type: '7', userId: 0, location: '' }"
        :disabled="disabled"
        @onSendFileList="getOperatingFileList"
        :fileList="operatingFileList"
      ></Uploader>
    </div>
  </div>
</template>

<script>
import { defineComponent, computed, ref, onMounted, watch } from "vue";
import _ from "lodash";

export default defineComponent({
  props: {
    certsId: {
      type: String,
      default: "cert",
    },
    disabled: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["onPreview", "onSendFileList"],
  setup(props, { emit }) {
    let disabled = ref(true);
    let shipFileList = ref([]);
    let annualFileList = ref([]);
    let shipNationFileList = ref([]);
    let operatingFileList = ref([]);
    function getShipFileList(list) {
      shipFileList.value = list;
    }

    function getAnnualFileList(list) {
      annualFileList.value = list;
    }

    function getShipNationFileList(list) {
      shipNationFileList.value = list;
    }
    function getOperatingFileList(list) {
      operatingFileList.value = list;
    }

    function initCerts(arr) {
      shipFileList.value = [];
      annualFileList.value = [];
      shipNationFileList.value = [];
      operatingFileList.value = [];
      let t = setTimeout(() => {
        for (let i of arr) {
          i.url = i.viewUrl;
          switch (i.type) {
            case 5: {
              annualFileList.value.push(i);
              break;
            }

            case 6: {
              shipNationFileList.value.push(i);
              break;
            }

            case 7: {
              operatingFileList.value.push(i);
              break;
            }
            default: {
              shipFileList.value.push(i);
              break;
            }
          }
        }
        clearTimeout(t);
      }, 500);
    }

    let shipFileListCache = ref([]);
    let annualFileListCache = ref([]);
    let shipNationFileListCache = ref([]);
    let operatingFileListCache = ref([]);

    function editCerts() {
      shipFileListCache.value = _.cloneDeep(shipFileList.value);
      annualFileListCache.value = _.cloneDeep(annualFileList.value);
      shipNationFileListCache.value = _.cloneDeep(shipNationFileList.value);
      operatingFileListCache.value = _.cloneDeep(operatingFileList.value);
      disabled.value = false;
    }

    function sendCerts() {
      let certs = [];
      for (let i of shipFileList.value) {
        if (i.id) {
          certs.push(i);
        } else {
          certs.push({
            downloadUrl: i.response.result.downloadUrl,
            fileKey: i.response.result.key,
            viewUrl: i.response.result.viewUrl,
            type: 2,
          });
        }
      }
      for (let i of annualFileList.value) {
        if (i.id) {
          certs.push(i);
        } else {
          certs.push({
            downloadUrl: i.response.result.downloadUrl,
            fileKey: i.response.result.key,
            viewUrl: i.response.result.viewUrl,
            type: 5,
          });
        }
      }
      for (let i of shipNationFileList.value) {
        if (i.id) {
          certs.push(i);
        } else {
          certs.push({
            downloadUrl: i.response.result.downloadUrl,
            fileKey: i.response.result.key,
            viewUrl: i.response.result.viewUrl,
            type: 6,
          });
        }
      }
      for (let i of operatingFileList.value) {
        if (i.id) {
          certs.push(i);
        } else {
          certs.push({
            downloadUrl: i.response.result.downloadUrl,
            fileKey: i.response.result.key,
            viewUrl: i.response.result.viewUrl,
            type: 7,
          });
        }
      }
      return certs;
    }
    function cancelEditCerts() {
      if (!_.isEqual(shipFileList.value, shipFileListCache.value)) {
        shipFileList.value = _.cloneDeep(shipFileListCache.value);
      }
      if (!_.isEqual(annualFileList.value, annualFileListCache.value)) {
        annualFileList.value = _.cloneDeep(annualFileListCache.value);
      }
      if (!_.isEqual(shipNationFileList.value, shipNationFileListCache.value)) {
        shipNationFileList.value = _.cloneDeep(shipNationFileListCache.value);
      }
      if (!_.isEqual(operatingFileList.value, operatingFileListCache.value)) {
        operatingFileList.value = _.cloneDeep(operatingFileListCache.value);
      }
      disabled.value = true;
    }
    onMounted(() => {});

    return {
      disabled,
      shipFileList,
      annualFileList,
      shipNationFileList,
      operatingFileList,
      getShipFileList,
      getAnnualFileList,
      getShipNationFileList,
      getOperatingFileList,
      initCerts,
      sendCerts,
      cancelEditCerts,
      editCerts,
    };
  },
});
</script>

<style></style>
