qjkankan_v1.1.1/packages/qjkankan-editor/src/components/materialSelectorForManageCenter.vue

<template>
  <div class="table-select">
    <span class="title">{{title}}</span>
    <div class="close-btn"><i class="iconfont icon-pop-ups_shut-down" @click="$emit('cancle')"></i></div>

    <div class="material-tab">
      <a v-if="selectableType.includes('image')" class="material-tab-item" @click.prevent="currentMaterialType = 'image'">
        <span 
        :class="{active: currentMaterialType === 'image'}"
        class="text"
        >
          图片
        </span>
        <div v-if="currentMaterialType === 'image'" class="bottom-line"></div>
      </a>
      <a v-if="selectableType.includes('pano')" class="material-tab-item" @click.prevent="currentMaterialType = 'pano'">
        <span 
        :class="{active: currentMaterialType === 'pano'}"
        class="text"
        >
          全景图
        </span>
        <div v-if="currentMaterialType === 'pano'" class="bottom-line"></div>
      </a>
      <a v-if="selectableType.includes('audio')" class="material-tab-item" @click.prevent="currentMaterialType = 'audio'">
        <span 
        :class="{active: currentMaterialType === 'audio'}"
        class="text"
        >
          音频
        </span>
        <div v-if="currentMaterialType === 'audio'" class="bottom-line"></div>
      </a>
      <a v-if="selectableType.includes('video')" class="material-tab-item" @click.prevent="currentMaterialType = 'video'">
        <span 
        :class="{active: currentMaterialType === 'video'}"
        class="text"
        >
          视频
        </span>
        <div v-if="currentMaterialType === 'video'" class="bottom-line"></div>
      </a>
      <a v-if="selectableType.includes('3D')" class="material-tab-item" @click.prevent="currentMaterialType = '3D'">
        <span 
        :class="{active: currentMaterialType === '3D'}"
        class="text"
        >
          三维场景
        </span>
        <div v-if="currentMaterialType === '3D'" class="bottom-line"></div>
      </a>
    </div>
    
    <div class="filter">
      <input type="text" placeholder="输入关键词" v-model="searchKey"/>
      <i v-if="!searchKey" class="iconfont icon-editor_search search-icon"/>
      <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red clear-icon"></i>
    </div>

    <div class="table table-pano" v-show="currentMaterialType === 'pano'">
      <div class="table-head-row">
        <span class="table-head">1</span>
        <span class="table-head" v-for="(item,i) in tableHeadersForPano" :key="i">{{item.name}}</span>
      </div>
      <div
        v-if="panoListRealLength !== 0 || hasMorePanoData"
        class="table-body"
        v-infinite-scroll="requestMorePanoData"
        :infinite-scroll-disabled="!hasMorePanoData || isRequestingMorePanoData"
      >
        <!-- vuex中的上传中数据 -->
        <div class="table-body-row" v-for="(item, i) in uploadStatusListPano" :key="item.uid" @click="onClickRow">
          <!-- 如果已经上传成功 -->
          <template v-if="item.status === 'SUCCESS'">
            <span class="table-data">
              <RadioOrCheckbox
                class="checkbox"
                :isLightTheme="true"
                :isMultiSelection="isMultiSelection"
                :isCheckedInitial="select.some(i => i[primaryKey] === item.successInfo[primaryKey])"
                @change="v => selectItem(item.successInfo, v)"
                @click.native.stop
              />
            </span>
            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForPano" :key="idx">
              <div v-if="tableItemStructure.type=='image'" class="list-img">
                <img :src="item.successInfo[tableItemStructure.key] + `?x-oss-process=image/resize,p_20&${Math.random()}`" alt="">
              </div>
              <span  v-else class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.successInfo[tableItemStructure.key] : ''">{{ item.successInfo[tableItemStructure.key] }}</span>
            </span>
          </template>
          <!-- 如果还在上传或切图处理中 -->
          <template v-else-if="item.status = 'LOADING'">
            <span class="table-data">
              <div class="checkbox">
                <span class="for-outer-circle"></span>
                <span class="for-inner-circle disabled"></span>
              </div>
            </span>
            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForPano" :key="idx">
              <div v-if="tableItemStructure.type=='image'" class="list-img">
                <img src="@/assets/images/icons/upload-file-type-icon-image@2x.png" alt="">
              </div>
              <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
              <span  v-if="tableItemStructure.key === 'fileSize' && item.ifKnowProgress">上传素材 {{Math.round(item.progress * 100)}}%</span>
              <span  v-if="tableItemStructure.key === 'fileSize' && !item.ifKnowProgress">{{item.statusText}}</span>
              <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
            </span>
          </template>
          <!-- 如果上传失败了 -->
          <template v-else-if="item.status = 'FAIL'">
            <span class="table-data">
              <div class="checkbox">
                <span class="for-outer-circle"></span>
                <span class="for-inner-circle disabled"></span>
              </div>
            </span>
            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForPano" :key="idx">
              <div v-if="tableItemStructure.type=='image'" class="list-img">
                <img src="@/assets/images/icons/upload-file-type-icon-image@2x.png" alt="">
              </div>
              <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
              <span  v-if="tableItemStructure.key === 'fileSize'">上传失败</span>
              <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
            </span>
          </template>
        </div>
        <!-- 本组件内的列表数据 -->
        <div class="table-body-row" v-for="(item,i) in panoList" :key="i" @click="onClickRow">
          <span class="table-data">
            <RadioOrCheckbox
              class="checkbox"
              :isLightTheme="true"
              :isMultiSelection="isMultiSelection"
              :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
              @change="v => selectItem(item, v)"
              @click.native.stop
            />
          </span>
          <span class="table-data" v-for="(sub,idx) in tableHeadersForPano" :key="idx">
            <div v-if="sub.type=='image'" class="list-img">
              <img :src="item[sub.key] + `?x-oss-process=image/resize,p_20&${Math.random()}`" alt="">
            </div>
            <span class="ellipsis" v-else v-title="sub.key === 'name' ? item[sub.key] : ''">{{item[sub.key]}}</span>
          </span>
        </div>
      </div>
      <!-- 无数据时的提示 -->
      <div v-if="panoList.length === 0 && !hasMorePanoData" class="no-data">
        <div v-if="latestUsedSearchKey">
          <img :src="require('@/assets/images/default/empty_04_search.png')" alt="">
          <span>{{'未搜索到结果~'}}</span>
        </div>
        <div v-if="!latestUsedSearchKey">
          <img :src="require('@/assets/images/default/empty_04.png')" alt="">
          <span>{{'暂无素材~'}}</span>
        </div>
      </div>
    </div>

    <div class="table table-3D" v-show="currentMaterialType === '3D'">
      <div class="table-head-row">
        <span class="table-head">1</span>
        <span class="table-head" v-for="(item,i) in tableHeadersFor3D" :key="i">{{item.name}}</span>
      </div>
      <div
        v-if="scene3DList.length !== 0 || hasMore3DData"
        class="table-body"
        v-infinite-scroll="requestMorePanoData"
        :infinite-scroll-disabled="!hasMore3DData || isRequestingMore3DData"
      >
        <div class="table-body-row" v-for="(item,i) in scene3DList" :key="i">
          <span class="table-data">
            <RadioOrCheckbox
              class="checkbox"
              :isLightTheme="true"
              :isMultiSelection="isMultiSelection"
              :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
              @change="v => selectItem(item, v)"
              @click.native.stop
            />
          </span>
          <span class="table-data" v-for="(sub,idx) in tableHeadersFor3D" :key="idx">
            <div v-if="sub.type=='image'" class="list-img">
              <img :src="item[sub.key] + `?x-oss-process=image/resize,p_20&${Math.random()}`" alt="">
            </div>
            <span class="ellipsis" v-else v-title="sub.key === 'name' ? item[sub.key] : ''">{{item[sub.key]}}</span>
          </span>
        </div>
      </div>
      <!-- 无数据时的提示 -->
      <div v-if="scene3DList.length === 0 && !hasMore3DData" class="no-data">
        <div v-if="latestUsedSearchKey">
          <img :src="require('@/assets/images/default/empty_04_search.png')" alt="">
          <span>{{'未搜索到结果~'}}</span>
        </div>
        <div v-if="!latestUsedSearchKey">
          <img :src="require('@/assets/images/default/empty_04.png')" alt="">
          <span>{{'暂无素材~'}}</span>
          <a href="/#/">
            <button class="ui-button">如何拍摄三维场景</button>
          </a>
        </div>
      </div>
    </div>

    <div class="btns">
      <button v-if="currentMaterialType !== '3D'" class="ui-button upload-btn" @click="$refs['file-input'].click()">
        <span>上传素材</span>
        <i class="iconfont icon-material_prompt tool-tip-for-editor"
          v-tooltip="
            currentMaterialType === 'image' ? '请上传10MB以内、jpg/png格式的图片' :
            currentMaterialType === 'pano' ? '请上传2:1、120MB以内、jpg格式的图片' :
            currentMaterialType === 'audio' ? '请上传20MB以内、mp3格式的音频' :
            currentMaterialType === 'video' ? '请上传200MB以内、mp4格式的视频' : ''
          ">
        </i>
        <FileInput
          ref="file-input"
          :failString="fileInputFailString"
          :limitFailStr="fileInputLimitFailStr"
          :acceptType="fileInputAcceptType"
          :mediaType="fileInputMediaType"
          :limit="fileInputLimit"
          @file-change="onFileInputChange"
        ></FileInput>
      </button>
      <div v-else class="button-placeholder"></div>
      <div>
        <button class="ui-button cancel" @click="$emit('cancle')">取消</button>
        <button class="ui-button submit" :class="{disable: !select.length}" @click="$emit('submit', select)">
          确定
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import {
  getMaterialList,
  getSceneList,
  uploadMaterial,
  checkMStatus,
} from "@/api";
import { getImgWH, changeByteUnit } from "@/utils/file";
import config from "@/config";
import { debounce } from "@/utils/other.js"
import FileInput from "@/components/shared/uploads/UploadMultiple.vue";
import { mapState } from "vuex";
// import AudioIconCanPlay from "@/components/audio/indexForEditor.vue";
import RadioOrCheckbox from "@/components/shared/RadioOrCheckbox.vue";

export default {
  props:{
    title:{
      default:'',
      type:String
    },
    primaryKey: {
      default:'id'
    },
    selectableType: {
      type: Array,
      default: function() {
        return [
          'image',
          'pano',
          'audio',
          'video',
          '3D',
        ]
      },
    },
    initialMaterialType: {
      type: String,
      default: 'image',
    },
    isMultiSelection: {
      type: Boolean,
      default: false,
    },
    workId: {
      type: String,
      default: '',
    },
  },
  components:{
    FileInput,
    // AudioIconCanPlay,
    RadioOrCheckbox,
  },
  watch:{
    searchKey: {
      handler: function () {
        this.refreshMaterialList(this.currentMaterialType)
      },
      immediate: false,
    },
    currentMaterialType: {
      handler: function (newVal) {
        if (newVal === 'image' && this.imageList.length === 0) {
          this.refreshMaterialList('image')
        } else if (newVal === 'pano' && this.panoList.length === 0) {
          this.refreshMaterialList('pano')
        } else if (newVal === 'audio' && this.audioList.length === 0) {
          this.refreshMaterialList('audio')
        } else if (newVal === 'video' && this.videoList.length === 0) {
          this.refreshMaterialList('video')
        } else if (newVal === '3D' && this.scene3DList.length === 0) {
          this.refreshMaterialList('3D')
        }
      },
      immediate: false,
    },
    needLongPolling: {
      handler: function (newVal) {
        if (!newVal) {
          clearInterval(this.longPollingIntervalId)
          this.longPollingIntervalId = null
        } else {
          console.log('need long polling!');
          clearInterval(this.longPollingIntervalId)
          this.longPollingIntervalId = null
          this.longPollingIntervalId = setInterval(() => {
            this._checkMStatus();
          }, 3000);
        }
      },
    },
  },
  computed:{
    ...mapState({
      uploadStatusListAudio: 'uploadStatusListAudio',
      uploadStatusListImage: 'uploadStatusListImage',
      uploadStatusListPano: 'uploadStatusListPano',
      uploadStatusListVideo: 'uploadStatusListVideo',
    }),
    tableHeadersForImage() {
      return this.$MAPTABLEHEADER['image'].filter(item => {
        return ['icon', 'name', 'fileSize', 'dpi'].includes(item.key)
      })
    },
    tableHeadersForPano() {
      return this.$MAPTABLEHEADER['pano'].filter(item => {
        return ['icon', 'name', 'fileSize'].includes(item.key)
      })
    },
    tableHeadersForAudio() {
      return this.$MAPTABLEHEADER['audio'].filter(item => {
        return ['ossPath', 'name', 'fileSize'].includes(item.key)
      })
    },
    tableHeadersForVideo() {
      return this.$MAPTABLEHEADER['video'].filter(item => {
        return ['icon', 'name', 'fileSize'].includes(item.key)
      })
    },
    tableHeadersFor3D() {
      return this.$MAPTABLEHEADER['scene'].filter(item => {
        return ['thumb', 'sceneName', 'createTime'].includes(item.key)
      })
    },
    fileInputFailString() {
      let ret = ''
      switch (this.currentMaterialType) {
        case 'pano':
          ret = '格式错误，请上传2:1、120MB以内、jpg格式的全景图片'
          break;
        case 'image':
          ret = '格式错误，请上传10MB以内、jpg/png格式的图片'
          break;
        case 'audio':
          ret = '格式错误，请上传20MB以内、mp3格式的音频'
          break;
        case 'video':
          ret = '格式错误，请上传200MB以内、mp4格式的视频'
          break;
        default:
          break;
      }
      return ret
    },
    fileInputLimitFailStr() {
      let ret = ''
      switch (this.currentMaterialType) {
        case 'pano':
          ret = '过大，请上传2:1、120MB以内、jpg格式的全景图片'
          break;
        case 'image':
          ret = '过大，请上传10MB以内、jpg/png格式的图片'
          break;
        case 'audio':
          ret = '过大，请上传20MB以内、mp3格式的音频'
          break;
        case 'video':
          ret = '过大，请上传200MB以内、mp4格式的视频'
          break;
        default:
          break;
      }
      return ret
    },
    fileInputAcceptType() {
      let ret = ''
      switch (this.currentMaterialType) {
        case 'pano':
          ret = 'image/jpeg'
          break;
        case 'image':
          ret = 'image/png,image/jpeg'
          break;
        case 'audio':
          ret = 'audio/mp3'
          break;
        case 'video':
          ret = 'video/mp4'
          break;
        default:
          break;
      }
      return ret
    },
    fileInputMediaType() {
      let ret = ''
      switch (this.currentMaterialType) {
        case 'pano':
          ret = 'image'
          break;
        case 'image':
          ret = 'image'
          break;
        case 'audio':
          ret = 'audio'
          break;
        case 'video':
          ret = 'video'
          break;
        default:
          break;
      }
      return ret
    },
    fileInputLimit() {
      let ret
      switch (this.currentMaterialType) {
        case 'pano':
          ret = 120
          break;
        case 'image':
          ret = 10
          break;
        case 'audio':
          ret = 20
          break;
        case 'video':
          ret = 200
          break;
        default:
          break;
      }
      return ret
    },
    imageListRealLength() {
      return this.imageList.length + this.uploadStatusListImage.filter((item) => {
        return item.status === 'SUCCESS'
      }).length
    },
    panoListRealLength() {
      return this.panoList.length + this.uploadStatusListPano.filter((item) => {
        return item.status === 'SUCCESS'
      }).length
    },
    audioListRealLength() {
      return this.audioList.length + this.uploadStatusListAudio.filter((item) => {
        return item.status === 'SUCCESS'
      }).length
    },
    videoListRealLength() {
      return this.videoList.length + this.uploadStatusListVideo.filter((item) => {
        return item.status === 'SUCCESS'
      }).length
    },
    needLongPolling() {
      return this.uploadStatusListPano.some((item) => {
        return item.status === 'LOADING' && item.ifKnowProgress === false
      })
    },
  },
  data () {
    return {
      imageList: [],
      panoList: [],
      audioList: [],
      videoList: [],
      scene3DList: [],
      
      select: [],
      searchKey:'', // 搜索关键词
      latestUsedSearchKey: '',

      currentMaterialType: this.initialMaterialType,
      
      isRequestingMoreImageData: false,
      isRequestingMorePanoData: false,
      isRequestingMoreAudioData: false,
      isRequestingMoreVideoData: false,
      isRequestingMore3DData: false,
      hasMoreImageData: true,
      hasMorePanoData: true,
      hasMoreAudioData: true,
      hasMoreVideoData: true,
      hasMore3DData: true,

      longPollingIntervalId: null,
    }
  },
  methods: {
    ...mapMutations([
      'clearUploadStatusLists',
    ]),
    selectItem(item, v) {
      item.materialType = this.currentMaterialType // 三维场景数据没有type字段来表明自己是三维场景。所以统一加一个字段。
      if (false) {
        // 对于图片，大于600kb的，压缩？
      } else {
        if (this.isMultiSelection) {
          if (v) {
            this.select.push(item)
          } else {
            const toDeleteIdx = this.select.findIndex((eachSelect) => {
              return eachSelect.id === item.id
            })
            if (toDeleteIdx >= 0) {
              this.select.splice(toDeleteIdx, 1)
            }
          }
        } else {
          if (v) {
            this.select = [item]
          } else {
            this.select = []
          }
        }
      }
    },
    requestMoreImageData() {
      this.isRequestingMoreImageData = true
      const latestUsedSearchKey = this.searchKey
      getMaterialList(
        {
          pageNum: Math.floor(this.imageListRealLength / config.PAGE_SIZE) + 1,
          pageSize: config.PAGE_SIZE,
          searchKey: this.searchKey,
          type: 'image',
        },
        (data) => {
          const newData = data.data.list.map((i) => {
            i.fileSize = changeByteUnit(Number(i.fileSize));
            i.createTime = i.createTime.substring(0, i.createTime.length - 3)
            i.updateTime = i.updateTime.substring(0, i.updateTime.length - 3)
            return i;
          });
          this.imageList = this.imageList.concat(newData)
          if (this.imageListRealLength === data.data.total) {
            this.hasMoreImageData = false
          }
          this.isRequestingMoreImageData = false
          this.latestUsedSearchKey = latestUsedSearchKey
        },
        () => {
          this.isRequestingMoreImageData = false
          this.latestUsedSearchKey = latestUsedSearchKey
        }
      );
    },
    requestMorePanoData() {
      this.isRequestingMorePanoData = true
      const latestUsedSearchKey = this.searchKey
      getMaterialList(
        {
          pageNum: Math.floor(this.panoListRealLength / config.PAGE_SIZE) + 1,
          pageSize: config.PAGE_SIZE,
          searchKey: this.searchKey,
          type: 'pano',
        },
        (data) => {
          const newData = data.data.list.map((i) => {
            i.fileSize = changeByteUnit(Number(i.fileSize));
            i.createTime = i.createTime.substring(0, i.createTime.length - 3)
            i.updateTime = i.updateTime.substring(0, i.updateTime.length - 3)
            return i;
          });
          this.panoList = this.panoList.concat(newData)
          if (this.panoListRealLength === data.data.total) {
            this.hasMorePanoData = false
          }
          this.isRequestingMorePanoData = false
          this.latestUsedSearchKey = latestUsedSearchKey
        },
        () => {
          this.isRequestingMorePanoData = false
          this.latestUsedSearchKey = latestUsedSearchKey
        }
      );
    },
    requestMoreAudioData() {
      this.isRequestingMoreAudioData = true
      const latestUsedSearchKey = this.searchKey
      getMaterialList(
        {
          pageNum: Math.floor(this.audioListRealLength / config.PAGE_SIZE) + 1,
          pageSize: config.PAGE_SIZE,
          searchKey: this.searchKey,
          type: 'audio',
        },
        (data) => {
          const newData = data.data.list.map((i) => {
            i.fileSize = changeByteUnit(Number(i.fileSize));
            i.createTime = i.createTime.substring(0, i.createTime.length - 3)
            i.updateTime = i.updateTime.substring(0, i.updateTime.length - 3)
            return i;
          });
          this.audioList = this.audioList.concat(newData)
          if (this.audioListRealLength === data.data.total) {
            this.hasMoreAudioData = false
          }
          this.isRequestingMoreAudioData = false
          this.latestUsedSearchKey = latestUsedSearchKey
        },
        () => {
          this.isRequestingMoreAudioData = false
          this.latestUsedSearchKey = latestUsedSearchKey
        }
      );
    },
    requestMoreVideoData() {
      this.isRequestingMoreVideoData = true
      const latestUsedSearchKey = this.searchKey
      getMaterialList(
        {
          pageNum: Math.floor(this.videoListReallength / config.PAGE_SIZE) + 1,
          pageSize: config.PAGE_SIZE,
          searchKey: this.searchKey,
          type: 'video',
        },
        (data) => {
          const newData = data.data.list.map((i) => {
            i.fileSize = changeByteUnit(Number(i.fileSize));
            i.icon = i.ossPath + '?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,m_fast,ar_auto';
            i.createTime = i.createTime.substring(0, i.createTime.length - 3)
            i.updateTime = i.updateTime.substring(0, i.updateTime.length - 3)
            return i;
          });
          this.videoList = this.videoList.concat(newData)
          if (this.videoListReallength === data.data.total) {
            this.hasMoreVideoData = false
          }
          this.isRequestingMoreVideoData = false
          this.latestUsedSearchKey = latestUsedSearchKey
        },
        () => {
          this.isRequestingMoreVideoData = false
          this.latestUsedSearchKey = latestUsedSearchKey
        }
      );
    },
    requestMore3DData() {
      this.isRequestingMore3DData = true
      const latestUsedSearchKey = this.searchKey
      getSceneList(
        {
          pageNum: Math.floor(this.scene3DList.length / config.PAGE_SIZE) + 1,
          pageSize: config.PAGE_SIZE,
          searchKey: this.searchKey,
          workId: this.workId,
        },
        (data) => {
          const newData = data.data.data.list.map((i) => {
            return i;
          });
          this.scene3DList = this.scene3DList.concat(newData)
          if (this.scene3DList.length === data.data.data.total) {
            this.hasMore3DData = false
          }
          this.isRequestingMore3DData = false
          this.latestUsedSearchKey = latestUsedSearchKey
        },
        () => {
          this.isRequestingMore3DData = false
          this.latestUsedSearchKey = latestUsedSearchKey
        }
      )
    },
    refreshMaterialList: debounce(function(type) {
      if (type === 'image') {
        this.isRequestingMoreImageData = false
        this.hasMoreImageData = true
        this.imageList = []
        let filterResult = this.uploadStatusListImage.filter((item) => {
          return item.status === 'LOADING'
        })
        this.$store.commit('setUploadStatusListImage', filterResult)
        this.requestMoreImageData()
      } else if (type === 'pano') {
        this.isRequestingMorePanoData = false
        this.hasMorePanoData = true
        this.panoList = []
        let filterResult = this.uploadStatusListPano.filter((item) => {
          return item.status === 'LOADING'
        })
        this.$store.commit('setUploadStatusListPano', filterResult)
        this.requestMorePanoData()
      } else if (type === 'audio') {
        this.isRequestingMoreAudioData = false
        this.hasMoreAudioData = true
        this.audioList = []
        let filterResult = this.uploadStatusListAudio.filter((item) => {
          return item.status === 'LOADING'
        })
        this.$store.commit('setUploadStatusListAudio', filterResult)
        this.requestMoreAudioData()
      } else if (type === 'video') {
        this.isRequestingMoreVideoData = false
        this.hasMoreVideoData = true
        this.videoList = []
        let filterResult = this.uploadStatusListVideo.filter((item) => {
          return item.status === 'LOADING'
        })
        this.$store.commit('setUploadStatusListVideo', filterResult)
        this.requestMoreVideoData()
      } else if (type === '3D') {
        this.isRequestingMore3DData = false
        this.hasMore3DData = true
        this.scene3DList = []
        this.requestMore3DData()
      }
    }, 700, false),
    onFileInputChange(e) {
      switch (this.currentMaterialType) {
        case 'pano':
          this.onPanoFileInputChange(e)
          break;
        case 'image':
          this.onImageFileInputChange(e)
          break;
        case 'audio':
          this.onAudioFileInputChange(e)
          break;
        case 'video':
          this.onVideoFileInputChange(e)
          break;
        default:
          break;
      }
    },
    onPanoFileInputChange(e) {
      e.files.forEach(async (eachFile, i) => {
        if (
          eachFile.type.indexOf("jpeg") <= -1
        ) {
          console.log('格式不对！');
          setTimeout(() => {
            this.$msg({
              message: `“${eachFile.name}”格式错误，请上传2:1、120MB以内、jpg格式的全景图片`,
              type: "warning",
            });
          }, i * 100);
          return;
        }

        if (eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50) {
          setTimeout(() => {
            this.$msg({
              message: `“${eachFile.name}”名称过长，请上传标题在50字以内的全景图片`,
              type: "warning",
            });
          }, i * 100);
          return;
        }

        let WHRate = null
        try {
          const {width, height} = await getImgWH(eachFile)
          WHRate = width / height
        } catch(e) {
          console.error('获取图像宽高失败：', e)
          setTimeout(() => {
            this.$msg({
              message: `“${eachFile.name}”格式错误，请上传2:1、120MB以内、jpg格式的全景图片`,
              type: "warning",
            });
          }, i * 100);
          return
        }
        if (WHRate !== 2) {
          setTimeout(() => {
            this.$msg({
              message: `“${eachFile.name}”格式错误，请上传2:1、120MB以内、jpg格式的全景图片`,
              type: "warning",
            });
          }, i * 100);
          return
        }

        let itemInUploadList = {
          title: eachFile.name,
          ifKnowProgress: true,
          progress: 0,
          status: 'LOADING',
          statusText: "正在上传素材",
          uid: `u_${this.$randomWord(true, 8, 8)}`,
          abortHandler: null,
          backendId: '',
        };

        itemInUploadList.abortHandler = uploadMaterial(
          {
            file: eachFile
          },
          {
            type: 'pano',
            uid: itemInUploadList.uid,
          },
          (response) => { // 上传成功
            itemInUploadList.statusText = '正在切图处理'
            itemInUploadList.ifKnowProgress = false
            itemInUploadList.backendId = response.data.id
          },
          (err) => {
            if (err.statusText === 'abort') { // 用户取消了上传任务。
              console.log('用户取消了任务！');
              const index = this.uploadStatusListPano.findIndex((eachItem) => {
                return eachItem.uid === itemInUploadList.uid
              })
              this.uploadStatusListPano.splice(index, 1)
            } else {
              console.log('失败！');
              itemInUploadList.status = 'FAIL'
              itemInUploadList.statusText = '素材上传失败'
            }
          },
          (progress) => {
            console.log('进度：', progress);
            itemInUploadList.progress = progress
          }
        )

        this.uploadStatusListPano.unshift(itemInUploadList);
      })
    },
    onImageFileInputChange(e) {
      console.log('tableHeadersForImage: ', this.tableHeadersForImage);
      
      e.files.forEach((eachFile, i) => {
        if (
          eachFile.type.indexOf("jpeg") <= -1 &&
          eachFile.type.indexOf("png") <= -1
        ) {
          setTimeout(() => {
            this.$msg({
              message: `“${eachFile.name}”格式错误，请上传10MB以内、jpg/png格式的图片`,
              type: "warning",
            });
          }, i * 100);
          return;
        }

        if (eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50) {
          setTimeout(() => {
            this.$msg({
              message: `“${eachFile.name}”名称过长，请上传标题在50字以内的图片`,
              type: "warning",
            });
          }, i * 100);
          return;
        }

        let itemInUploadList = {
          title: eachFile.name,
          ifKnowProgress: true,
          progress: 0,
          status: 'LOADING',
          statusText: "正在上传素材",
          uid: `u_${this.$randomWord(true, 8, 8)}`,
          abortHandler: null,
          successInfo: null,
        };
        
        itemInUploadList.abortHandler = uploadMaterial(
          {
            file: eachFile
          },
          {
            type: 'image',
            uid: itemInUploadList.uid,
          },
          (result) => { // 上传成功
            const index = this.uploadStatusListImage.findIndex((eachItem) => {
              return eachItem.uid === itemInUploadList.uid
            })
            result.data.fileSize = changeByteUnit(Number(result.data.fileSize));
            result.data.createTime = result.data.createTime.substring(0, result.data.createTime.length - 3)
            result.data.updateTime = result.data.updateTime.substring(0, result.data.updateTime.length - 3)
            this.uploadStatusListImage[index].status = 'SUCCESS'
            this.uploadStatusListImage[index].successInfo = result.data
            return i;
          },
          (err) => {
            if (err.statusText === 'abort') { // 用户取消了上传任务。
              console.log('用户取消了任务！');
              const index = this.uploadStatusListImage.findIndex((eachItem) => {
                return eachItem.uid === itemInUploadList.uid
              })
              this.uploadStatusListImage.splice(index, 1)
            } else {
              console.log('失败！');
              itemInUploadList.status = 'FAIL'
              itemInUploadList.statusText = '素材上传失败'
            }
          },
          (progress) => {
            console.log('进度：', progress);
            itemInUploadList.progress = progress
          }
        );

        this.uploadStatusListImage.unshift(itemInUploadList);
      });
    },
    onAudioFileInputChange(e) {
      e.files.forEach((eachFile, i) => {
        if (eachFile.name.toLowerCase().indexOf("mp3") <= -1) {
          setTimeout(() => {
            this.$msg({
              message: `“${eachFile.name}”格式错误，请上传20MB以内、mp3格式的音频`,
              type: "warning",
            });
          }, i * 100);
          return;
        }

        if (eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50) {
          setTimeout(() => {
            this.$msg({
              message: `“${eachFile.name}”名称过长，请上传标题在50字以内的音频`,
              type: "warning",
            });
          }, i * 100);
          return;
        }

        let itemInUploadList = {
          title: eachFile.name,
          ifKnowProgress: true,
          progress: 0,
          status: 'LOADING',
          statusText: "正在上传素材",
          uid: `u_${this.$randomWord(true, 8, 8)}`,
          abortHandler: null,
        };
        
        itemInUploadList.abortHandler = uploadMaterial(
          {
            file: eachFile
          },
          {
            type: 'audio',
            uid: itemInUploadList.uid,
          },
          (result) => { // 上传成功
            console.log('success');
            const index = this.uploadStatusListAudio.findIndex((eachItem) => {
              return eachItem.uid === itemInUploadList.uid
            })
            result.data.fileSize = changeByteUnit(Number(result.data.fileSize));
            result.data.createTime = result.data.createTime.substring(0, result.data.createTime.length - 3)
            result.data.updateTime = result.data.updateTime.substring(0, result.data.updateTime.length - 3)
            this.uploadStatusListAudio[index].status = 'SUCCESS'
            this.uploadStatusListAudio[index].successInfo = result.data
          },
          (err) => {
            console.log('error');
            if (err.statusText === 'abort') { // 用户取消了上传任务。
              console.log('用户取消了');
              const index = this.uploadStatusListAudio.findIndex((eachItem) => {
                return eachItem.uid === itemInUploadList.uid
              })
              this.uploadStatusListAudio.splice(index, 1)
            } else {
              console.log('上传失败');
              itemInUploadList.status = 'FAIL'
              itemInUploadList.statusText = '素材上传失败'
            }
          },
          (progress) => {
            console.log('progress');
            itemInUploadList.progress = progress
          }
        );

        this.uploadStatusListAudio.unshift(itemInUploadList);
      });
    },
    onVideoFileInputChange(e) {
      e.files.forEach((eachFile, i) => {
        if (eachFile.name.toLowerCase().indexOf("mp4") <= -1) {
          setTimeout(() => {
            this.$msg({
              message: `“${eachFile.name}”格式错误，请上传200MB以内、mp4格式的视频`,
              type: "warning",
            });
          }, i * 100);
          return;
        }

        if (eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50) {
          setTimeout(() => {
            this.$msg({
              message: `“${eachFile.name}”名称过长，请上传标题在50字以内的视频`,
              type: "warning",
            });
          }, i * 100);
          return;
        }

        let itemInUploadList = {
          title: eachFile.name,
          ifKnowProgress: true,
          progress: 0,
          status: 'LOADING',
          statusText: "正在上传素材",
          uid: `u_${this.$randomWord(true, 8, 8)}`,
          abortHandler: null,
        };
        
        itemInUploadList.abortHandler = uploadMaterial(
          {
            file: eachFile
          },
          {
            type: 'video',
            uid: itemInUploadList.uid,
          },
          (result) => { // 上传成功
            console.log('成功！');
            const index = this.uploadStatusListVideo.findIndex((eachItem) => {
              return eachItem.uid === itemInUploadList.uid
            })
            result.data.fileSize = changeByteUnit(Number(result.data.fileSize));
            result.data.createTime = result.data.createTime.substring(0, result.data.createTime.length - 3)
            result.data.updateTime = result.data.updateTime.substring(0, result.data.updateTime.length - 3)
            result.data.icon = result.data.ossPath + '?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,m_fast,ar_auto';
            this.uploadStatusListVideo[index].status = 'SUCCESS'
            this.uploadStatusListVideo[index].successInfo = result.data
          },
          (err) => {
            if (err.statusText === 'abort') { // 用户取消了上传任务。
              const index = this.uploadStatusListVideo.findIndex((eachItem) => {
                return eachItem.uid === itemInUploadList.uid
              })
              this.uploadStatusListVideo.splice(index, 1)
            } else {
              itemInUploadList.status = 'FAIL'
              itemInUploadList.statusText = '素材上传失败'
            }
          },
          (progress) => {
            console.log('进度：', progress);
            itemInUploadList.progress = progress
          }
        );

        this.uploadStatusListVideo.unshift(itemInUploadList);
      });
    },
    _checkMStatus() {
      let needPollingTaskList = this.uploadStatusListPano.filter((item) => item.status === 'LOADING' && item.ifKnowProgress === false);
      if (needPollingTaskList.length > 0) {
        checkMStatus(
          {
            ids: needPollingTaskList.map((item) => item.backendId),
            islongpolling: true,
          },
          (res) => {
            // 1切图中，2失败，3成功
            res.data.forEach(eachRes => {
              if (eachRes.status === 2) {
                const index = this.uploadStatusListPano.findIndex(eachTask => eachTask.backendId === eachRes.id)
                if (index >= 0) {
                  const targetItem = this.uploadStatusListPano[index]
                  targetItem.status = 'FAIL'
                  targetItem.statusText = '素材切图失败'
                  targetItem.ifKnowProgress = true
                }
              } else if (eachRes.status === 3) {
                const index = this.uploadStatusListPano.findIndex(eachTask => eachTask.backendId === eachRes.id)
                if (index >= 0) {
                  const targetItem = this.uploadStatusListPano[index]
                  targetItem.status = 'SUCCESS'
                  eachRes.fileSize = changeByteUnit(Number(eachRes.fileSize));
                  targetItem.successInfo = eachRes
                }
              }
            });
          }
        );
      }
    },
    onClickRow(e) {
      const checkboxNodeList = e.currentTarget.getElementsByClassName('selection-click-target')
      if (checkboxNodeList && checkboxNodeList[0]) {
        checkboxNodeList[0].click()
      }
    },
  },
  mounted() {
    console.log('tableHeadersForAudio: ', this.tableHeadersForAudio);
    console.log('tableHeadersForVideo: ', this.tableHeadersForVideo);
    this.clearUploadStatusLists()
  },
  unmounted() {
    this.$store.commit('setUploadStatusListImage', this.uploadStatusListImage.filter((item) => {
      return item.status === 'LOADING'
    }))
    this.$store.commit('setUploadStatusListPano', this.uploadStatusListPano.filter((item) => {
      return item.status === 'LOADING'
    }))
    this.$store.commit('setUploadStatusListAudio', this.uploadStatusListAudio.filter((item) => {
      return item.status === 'LOADING'
    }))
    this.$store.commit('setUploadStatusListVideo', this.uploadStatusListVideo.filter((item) => {
      return item.status === 'LOADING'
    }))
  }
}
</script>

<style lang="less" scoped>
.ellipsis{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  display: inline-block;
}

.table-select {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 600px;
  height: 730px;
  border-radius: 4px;
  border: 1px solid #EBEDF0;
  padding: 26px;
  background: #fff;
}

.title {
  font-size: 18px;
  color: #323233;
}

.close-btn {
  display: inline-block;
  position: absolute;
  top: 26px;
  right: 20px;
  font-size: 12px;
  color: #969799;
  cursor: pointer;
  padding: 6px;
}

.material-tab {
  margin-top: 35px;
  > .material-tab-item {
    display: inline-block;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
    > .text {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: #969799;
      &.active {
        color: #323233;
      }
    }
    > .bottom-line {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -4px;
      width: 16px;
      height: 2px;
      background: #0076F6;
      border-radius: 1px;
    }
  }
}

.filter {
  margin-top: 28px;
  width: 100%;
  height: 36px;
  background: #F7F8FA;
  border-radius: 2px;
  border: 1px solid #EBEDF0;
  position: relative;
  > input {
    box-sizing: border-box;
    width: calc(100% - 42px);
    height: 100%;
    border: none;
    padding-left: 16px;
    background: transparent;
    color: #323233;
    outline: none;
  }
  > .search-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 18px;
    color: #C8C9CC;
    font-size: 20px;
  }
  > .clear-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 18px;
    color: #C8C9CC;
    font-size: 20px;
    cursor: pointer;
  }
}

@table-height: 440px;
@table-head-row-height: 40px;
@table-border-size: 1px;

.table {
  margin-top: 20px;
  border: @table-border-size solid #EBEDF0;
  background: #ffffff;
  width: 100%;
  height: @table-height;
  > .table-head-row {
    width: 100%;
    height: @table-head-row-height;
    background: #F5F7FA;
    color: #646566;
    .table-head {
      font-size: 16px;
      line-height: @table-head-row-height;
      height: 100%;
      display: inline-block;
    }
  }
  > .table-body {
    height: calc(@table-height - @table-head-row-height - @table-border-size - @table-border-size);
    overflow: auto;
    display: inline-block;
    width: 100%;
    > .table-body-row {
      height: 50px;
      border-bottom: 1px solid #EBEDF0;
      display: flex;
      align-items: center;
      cursor: pointer;
      > .table-data {
        font-size:14px;
        line-height:50px;
        height: 100%;
        color: #323233;
        > .list-img {
          position: relative;
          height: 100%;
          display: inline-block;
          width: 100%;
          > img, .audio-player {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            object-fit: cover;
          }
        }
      }
    }
  }
  > .no-data {
    height: calc(@table-height - @table-head-row-height - @table-border-size - @table-border-size);
    width: 100%;
    position: relative;
    > div {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      > img {
        width: 116px;
      }
      > span {
        margin-top: 20px;
        display: block;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.6);
      }
      > a {
        > button {
          margin-top: 20px;
        }
      }
    }
  }
}

.table-image .table-head,
.table-image .table-data {
  &:nth-of-type(1) {
    width: 50px;
    color: transparent;
  }
  &:nth-of-type(2) {
    width: calc(116px - 50px);
  }
  &:nth-of-type(3) {
    width: calc(316px - 116px);
    padding-right: 30px;
  }
  &:nth-of-type(4) {
    width: calc(416px - 316px);
  }
  &:nth-of-type(5) {
    width: calc(100% - 416px);
  }
}

.table-pano .table-head,
.table-pano .table-data {
  &:nth-of-type(1) {
    width: 50px;
    color: transparent;
  }
  &:nth-of-type(2) {
    width: calc(116px - 50px);
  }
  &:nth-of-type(3) {
    width: calc(416px - 116px);
    padding-right: 30px;
  }
  &:nth-of-type(4) {
    width: calc(100% - 416px);
  }
}

.table-audio .table-head,
.table-audio .table-data {
  &:nth-of-type(1) {
    width: 50px;
    color: transparent;
  }
  &:nth-of-type(2) {
    width: calc(116px - 50px);
  }
  &:nth-of-type(3) {
    width: calc(416px - 116px);
    padding-right: 30px;
  }
  &:nth-of-type(4) {
    width: calc(100% - 416px);
  }
}

.table-video .table-head,
.table-video .table-data {
  &:nth-of-type(1) {
    width: 50px;
    color: transparent;
  }
  &:nth-of-type(2) {
    width: calc(116px - 50px);
  }
  &:nth-of-type(3) {
    width: calc(416px - 116px);
    padding-right: 30px;
  }
  &:nth-of-type(4) {
    width: calc(100% - 416px);
  }
}

.table-3D .table-head,
.table-3D .table-data {
  &:nth-of-type(1) {
    width: 50px;
    color: transparent;
  }
  &:nth-of-type(2) {
    width: calc(116px - 50px);
  }
  &:nth-of-type(3) {
    width: calc(416px - 116px);
    padding-right: 30px;
  }
  &:nth-of-type(4) {
    width: calc(100% - 416px);
  }
}

.checkbox {
  width: 100%;
  height: 100%;
}

.btns {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  .upload-btn {
    display: flex;
    align-items: center;
    > span {
      display: inline-block;
      margin-right: 4px;
    }
    i.tool-tip-for-editor {
      font-size: 12px;
      transform: scale(0.923) translateY(1px);
      cursor: default;
    }
  }
  > div {
    .cancel {
      margin-right: 16px;
    }
  }
}
</style>