/**
 * 附件上传面板
 */
<template>
  <div class="upload-container">
    <a-tabs v-model:activeKey="type" class="custom-tabs">
      <a-tab-pane key="1" :tab="$t('lang.attachmentUpload.uploadFile')">
        <UploadWidget
          v-if="isShowEdit == undefined || isShowEdit"
          :file-type="fileType"
          @upload="uploadAttachment($event)"
        />
      </a-tab-pane>
      
      <a-tab-pane key="2" :tab="$t('lang.attachmentUpload.captureImage')">
        <WebSocketImage
          :multiple="true"
          @upload-image="uploadImageAttachments($event)"
        />
      </a-tab-pane>

      <a-tab-pane key="3" :tab="$t('lang.attachmentUpload.camera')">
        <WebRtcImage
          :multiple="true"
          @upload-image="uploadImageAttachments($event)"
        />
      </a-tab-pane>

      <a-tab-pane key="4" :tab="$t('lang.attachmentUpload.altimeter')">
        <Altimeter
          :multiple="true"
          @upload-image="uploadImageAttachments($event)"
        />
      </a-tab-pane>
    </a-tabs>

    <Loading v-if="loading" />
  </div>
</template>

<script>
import Common from '../../common/Common.js';

import FileService from '../../resource/file/FileService.js';
import AttachmentService from '../../resource/file/AttachmentService.js';


import WebSocketImage from '../../widget/WebSocketImage.vue';
import WebRtcImage from '../../widget/WebRtcImage.vue';
import Altimeter from '../../widget/Altimeter.vue';
import { Notify, Uuid } from 'pc-component-v3';
export default {

  components: {
    WebSocketImage, WebRtcImage, Altimeter,
  },
  /**
	 * className: 类名称
	 * recordId: 记录Id
	 * fileType: 附件类型,eg:".xls,.doc,.txt,.pdf"
	 * isShowEdit: 显示上传控件(true:显示上传控件，false：不显示上传控件)
	 */
  props: {
   
    className: {
      type: String,
      default: null,
    },
    recordId: {
      type: Number,
      default: null,
    },
    fileType: {
      type: String,
      default: null,
    },
    isShowEdit: {
      type: Boolean,
      default: null,
    },
    windowNo: {
      type: String,
      default: null,
    },
  },



  data: function () {
    return {
      'fileProperties': [],
      type: '1',
      loading: false,
    };
  },

  methods: {

    /**
		 * 上传单个附件
		 */
    uploadAttachment: function (files) {
      var _self = this;
      var selectedFile = files[0];
      _self.$emit('getFile',selectedFile);
      if (selectedFile == undefined) {
        Notify.error(_self.$t('lang.Notify.prompt'), _self.$t('lang.attachmentUpload.mustSelectFile'), false);
        return;
      }
      var formData = new FormData();
      formData.append('attachment', selectedFile);
      formData.append('windowNo', _self.windowNo);
      formData.append('className', _self.className);
      formData.append('recordId', _self.recordId);
      formData.append('fileName', selectedFile.name);
      _self.loading=true;
      AttachmentService.uploadAttachment(formData).then(successData => {
        _self.loading=false;
        if (successData.errorCode == 0) {
          Notify.success(_self.$t('lang.attachmentUpload.uploadSucceeded'), _self.$t('lang.attachmentUpload.attachmentUploadedSuccessfully'), true);
        }
        if (successData.errorCode == 1) {
          Notify.error(_self.$t('lang.Notify.warning'), _self.$t('lang.attachmentUpload.noPermissionUploadAttachments'), false);
        }

        if (successData.errorCode) {
          Notify.error(_self.$t('lang.Notify.warning'), successData.errorMessage, false);
        }

        _self.$emit('uploadSuccess');
      }, error => {
        _self.loading=false;
        Common.processException(error);
      });
    },


    /**
         * 上传多个附件
         */
    uploadImageAttachments: function (imageSrcs) {
      var _self = this;
      var dataURLs = [];
      if (imageSrcs.length > 0) {
        for (var i = 0; i < imageSrcs.length; i++) {
          dataURLs.push(FileService.dataURLToBlob(imageSrcs[i]));
        }
      } else {
        Notify.error(_self.$t('lang.Notify.prompt'), _self.$t('lang.attachmentUpload.noPicture'),false);
        return;
      }

      if (dataURLs && dataURLs.length > 0) {
        this.loading=true;
        var length = dataURLs.length;
        var promiseArray = [];
        for (let i = 0; i < length; i++) {
          var blob = dataURLs[i];
          var nameImg = new Date().getTime() + '.png';
          var formData = new FormData();
          formData.append('attachment', blob);
          formData.append('className', this.className);
          formData.append('recordId', this.recordId);
          formData.append('fileName', nameImg);
          var promise = AttachmentService.uploadAttachment(formData);
          promiseArray.push(promise);
        }
        Promise.all(promiseArray).then(successResultList => {
          _self.loading=false;
          _self.$emit('uploadSuccess');
          Notify.success(_self.$t('lang.Notify.prompt'), _self.$t('lang.attachmentUpload.uploadSucceeded'),1500);
        }, errorResultList => {
          _self.loading=false;
          Notify.error(_self.$t('lang.Notify.prompt'), _self.$t('lang.attachmentUpload.uploadFailed'),false);
        });
      }
    },
  },
};
</script>
<style scoped>
.upload-container {
  padding: 16px;
  background: #fff;
  border-radius: 4px;
}

.custom-tabs {
  margin: -16px;
}

:deep(.ant-tabs-nav) {
  margin: 0 16px;
}

:deep(.ant-tabs-tab) {
  padding: 12px 24px !important;
  font-size: 14px;
}

:deep(.ant-tabs-tab-active) {
  background: #f0f9ff;
  border-radius: 4px 4px 0 0;
}

:deep(.ant-tabs-content) {
  padding: 24px;
  min-height: 200px;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  :deep(.ant-tabs-tab) {
    padding: 8px 12px !important;
    font-size: 13px;
  }
  
  :deep(.ant-tabs-content) {
    padding: 16px;
  }
}
</style>
