<template>
  <div class="okay-upload clearfix">
    <div class="list clearfix">
      <template v-if="dataList && dataList.length > 0">
        <!-- 图片显示 -->
        <template v-if="resType == 'image'">
          <transition-group tag="" name="fade">
            <div v-viewer class="item" v-for="(item, index) in dataList" :key="item.dataresId" :style="`width:${size};height:${size}`">
              <el-tooltip class="item" effect="light" :content="item.attachName" placement="right">
                <img :style="`width:${size};height:${size}`" :src="item.thumbnailUrl" :data-source="item.srcFileUrl" />
              </el-tooltip>
              <!-- 操作区域 -->
              <div class="fade-box" v-if="type == 'edit'">
                <span class="icon picture" @click="setCover(item, index)"><i class="el-icon-picture" title="设置封面"></i></span>
                <span class="icon delete" @click="delData(item, index)"><i class="el-icon-delete" title="删除"></i></span>
              </div>
              <!-- 设置封面 -->
              <div class="set-cover" v-if="item.faceFlag == 1">
                <div class="trangle"></div>
                <div class="txt">封面</div>
              </div>
            </div>
          </transition-group>
        </template>

        <!-- 三维模型 -->
        <template v-if="resType == 'd3'">
          <transition-group tag="" name="fade">
            <div v-viewer class="item" v-for="(item, index) in dataList" :key="item.dataresId" :style="`width:${size};height:${size}`">
              <el-tooltip class="item" effect="light" :content="item.attachName" placement="right">
                <!-- <img :style="`width:${size};height:${size}`" :src="item.thumbnailUrl" :data-source="item.srcFileUrl" /> -->
                <div class="default" @click="openLink(item, index)" :style="`width:${size};height:${size};`">
                  <img src="../../images/d3.png" />
                </div>
              </el-tooltip>
              <!-- 操作区域 -->
              <div class="fade-box" v-if="type == 'edit'">
                <!-- <span class="icon picture" @click="setCover(item, index)"><i class="el-icon-picture" title="设置封面"></i></span> -->
                <span class="icon delete" @click="delData(item, index)"><i class="el-icon-delete" title="删除"></i></span>
              </div>
              <!-- 设置封面 -->
              <!-- <div class="set-cover" v-if="item.faceFlag == 1">
                <div class="trangle"></div>
                <div class="txt">封面</div>
              </div> -->
            </div>
          </transition-group>
        </template>

        <!-- 点云模型 -->
        <template v-if="resType == 'pointCloud'">
          <transition-group tag="" name="fade">
            <div v-viewer class="item" v-for="(item, index) in dataList" :key="item.dataresId" :style="`width:${size};height:${size}`">
              <el-tooltip class="item" effect="light" :content="item.attachName" placement="right">
                <!-- <img :style="`width:${size};height:${size}`" :src="item.thumbnailUrl" :data-source="item.srcFileUrl" /> -->
                <div class="default" @click="openLink(item, index)" :style="`width:${size};height:${size};`">
                  <img src="../../images/pointCloud.png" />
                </div>
              </el-tooltip>
              <!-- 操作区域 -->
              <div class="fade-box" v-if="type == 'edit'">
                <!-- <span class="icon picture" @click="setCover(item, index)"><i class="el-icon-picture" title="设置封面"></i></span> -->
                <span class="icon delete" @click="delData(item, index)"><i class="el-icon-delete" title="删除"></i></span>
              </div>
              <!-- 设置封面 -->
              <!-- <div class="set-cover" v-if="item.faceFlag == 1">
                <div class="trangle"></div>
                <div class="txt">封面</div>
              </div> -->
            </div>
          </transition-group>
        </template>

        <!-- 倾斜模型 -->
        <template v-if="resType == 'tiltModel'">
          <transition-group tag="" name="fade">
            <div v-viewer class="item" v-for="(item, index) in dataList" :key="item.dataresId" :style="`width:${size};height:${size}`">
              <el-tooltip class="item" effect="light" :content="item.attachName" placement="right">
                <!-- <img :style="`width:${size};height:${size}`" :src="item.thumbnailUrl" :data-source="item.srcFileUrl" /> -->
                <div class="default" @click="openLink(item, index)" :style="`width:${size};height:${size};`">
                  <img src="../../images/tiltModel.png" />
                </div>
              </el-tooltip>
              <!-- 操作区域 -->
              <div class="fade-box" v-if="type == 'edit'">
                <!-- <span class="icon picture" @click="setCover(item, index)"><i class="el-icon-picture" title="设置封面"></i></span> -->
                <span class="icon delete" @click="delData(item, index)"><i class="el-icon-delete" title="删除"></i></span>
              </div>
              <!-- 设置封面 -->
              <!-- <div class="set-cover" v-if="item.faceFlag == 1">
                <div class="trangle"></div>
                <div class="txt">封面</div>
              </div> -->
            </div>
          </transition-group>
        </template>

        <!-- 音频 -->
        <template v-if="resType == 'audio'">
          <transition-group tag="" name="fade">
            <div v-viewer class="item audio" v-for="(item, index) in dataList" :key="item.dataresId" :style="`width:${size};height:${size}`">
              <el-tooltip class="item" effect="light" :content="item.attachName" placement="right">
                <audio :src="item.srcFileUrl" controls loop></audio>
              </el-tooltip>
              <!-- 操作区域 -->
              <div class="fade-box" v-if="type == 'edit'">
                <!-- <span class="icon picture" @click="setCover(item, index)"><i class="el-icon-picture" title="设置封面"></i></span> -->
                <span class="icon delete" @click="delData(item, index)"><i class="el-icon-delete" title="删除"></i></span>
              </div>
              <!-- 设置封面 -->
              <!-- <div class="set-cover" v-if="item.faceFlag == 1">
                <div class="trangle"></div>
                <div class="txt">封面</div>
              </div> -->
            </div>
          </transition-group>
        </template>

        <!-- 视频 -->
        <template v-if="resType == 'video'">
          <transition-group tag="" name="fade">
            <div v-viewer class="item video" v-for="(item, index) in dataList" :key="item.dataresId" :style="`width:${size};height:${size}`">
              <el-tooltip class="item" effect="light" :content="item.attachName" placement="right">
                <video :src="item.srcFileUrl" poster="../../images/video.png" controls="controls"></video>
              </el-tooltip>
              <!-- 操作区域 -->
              <div class="fade-box" v-if="type == 'edit'">
                <!-- <span class="icon picture" @click="setCover(item, index)"><i class="el-icon-picture" title="设置封面"></i></span> -->
                <span class="icon delete" @click="delData(item, index)"><i class="el-icon-delete" title="删除"></i></span>
              </div>
              <!-- 设置封面 -->
              <!-- <div class="set-cover" v-if="item.faceFlag == 1">
                <div class="trangle"></div>
                <div class="txt">封面</div>
              </div> -->
            </div>
          </transition-group>
        </template>

        <!-- 全景 -->
        <template v-if="resType == 'panora'">
          <transition-group tag="" name="fade">
            <div v-viewer class="item" v-for="(item, index) in dataList" :key="item.dataresId" :style="`width:${size};height:${size}`">
              <el-tooltip class="item" effect="light" :content="item.attachName" placement="right">
                <div class="default" :style="`width:${size};height:${size};`">
                  <img src="../../images/panora.png" />
                </div>
              </el-tooltip>
              <!-- 操作区域 -->
              <div class="fade-box" v-if="type == 'edit'">
                <!-- <span class="icon picture" @click="setCover(item, index)"><i class="el-icon-picture" title="设置封面"></i></span> -->
                <span class="icon delete" @click="delData(item, index)"><i class="el-icon-delete" title="删除"></i></span>
              </div>
              <!-- 设置封面 -->
              <!-- <div class="set-cover" v-if="item.faceFlag == 1">
                <div class="trangle"></div>
                <div class="txt">封面</div>
              </div> -->
            </div>
          </transition-group>
        </template>

        <!-- 地图文件 -->
        <template v-if="resType == 'gis'">
          <transition-group tag="" name="fade">
            <div v-viewer class="item" v-for="(item, index) in dataList" :key="item.dataresId" :style="`width:${size};height:${size}`">
              <el-tooltip class="item" effect="light" :content="item.attachName" placement="right">
                <div class="default" :style="`width:${size};height:${size};`">
                  <img src="../../images/gis.png" />
                </div>
              </el-tooltip>
              <!-- 操作区域 -->
              <div class="fade-box" v-if="type == 'edit'">
                <!-- <span class="icon picture" @click="setCover(item, index)"><i class="el-icon-picture" title="设置封面"></i></span> -->
                <span class="icon delete" @click="delData(item, index)"><i class="el-icon-delete" title="删除"></i></span>
              </div>
              <!-- 设置封面 -->
              <!-- <div class="set-cover" v-if="item.faceFlag == 1">
                <div class="trangle"></div>
                <div class="txt">封面</div>
              </div> -->
            </div>
          </transition-group>
        </template>

        <!-- 压缩包 -->
        <template v-if="resType == 'compress'">
          <transition-group tag="" name="fade">
            <div v-viewer class="item" v-for="(item, index) in dataList" :key="item.dataresId" :style="`width:${size};height:${size}`">
              <el-tooltip class="item" effect="light" :content="item.attachName" placement="right">
                <div class="default" :style="`width:${size};height:${size};`">
                  <img src="../../images/compress.png" />
                </div>
              </el-tooltip>
              <!-- 操作区域 -->
              <div class="fade-box" v-if="type == 'edit'">
                <!-- <span class="icon picture" @click="setCover(item, index)"><i class="el-icon-picture" title="设置封面"></i></span> -->
                <span class="icon delete" @click="delData(item, index)"><i class="el-icon-delete" title="删除"></i></span>
              </div>
              <!-- 设置封面 -->
              <!-- <div class="set-cover" v-if="item.faceFlag == 1">
                <div class="trangle"></div>
                <div class="txt">封面</div>
              </div> -->
            </div>
          </transition-group>
        </template>

        <!-- 其他文件类型 -->
        <template v-if="resType == 'others'">
          <transition-group tag="" name="fade">
            <div v-viewer class="item" v-for="(item, index) in dataList" :key="item.dataresId" :style="`width:${size};height:${size}`">
              <el-tooltip class="item" effect="light" :content="item.attachName" placement="right">
                <div class="default" :style="`width:${size};height:${size};`">
                  <img src="../../images/others.png" />
                </div>
              </el-tooltip>
              <!-- 操作区域 -->
              <div class="fade-box" v-if="type == 'edit'">
                <!-- <span class="icon picture" @click="setCover(item, index)"><i class="el-icon-picture" title="设置封面"></i></span> -->
                <span class="icon delete" @click="delData(item, index)"><i class="el-icon-delete" title="删除"></i></span>
              </div>
              <!-- 设置封面 -->
              <!-- <div class="set-cover" v-if="item.faceFlag == 1">
                <div class="trangle"></div>
                <div class="txt">封面</div>
              </div> -->
            </div>
          </transition-group>
        </template>

        <!-- 办公文档 -->
        <template v-if="resType == 'docs'">
          <transition-group tag="" name="fade">
            <div v-viewer class="item" v-for="(item, index) in dataList" :key="item.dataresId" :style="`width:${size};height:${size}`">
              <el-tooltip class="item" effect="light" :content="item.attachName" placement="right">
                <div class="default" @click="openLink(item, index)" :style="`width:${size};height:${size};`">
                  <img v-if="fileNameSuffix(item.resName) === 'doc'" src="../../images/doc.png" />
                  <img v-else-if="fileNameSuffix(item.resName) === 'xlsx'" src="../../images/xlsx.png" />
                  <img v-else-if="fileNameSuffix(item.resName) === 'xls'" src="../../images/xlsx.png" />
                  <img v-else-if="fileNameSuffix(item.resName) === 'txt'" src="../../images/txt.png" />
                  <img v-else-if="fileNameSuffix(item.resName) === 'pdf'" src="../../images/pdf.png" />
                  <img v-else-if="fileNameSuffix(item.resName) === 'csv'" src="../../images/csv.png" />
                  <img v-else-if="fileNameSuffix(item.resName) === 'ppt'" src="../../images/ppt.png" />
                  <img v-else-if="fileNameSuffix(item.resName) === 'docs'" src="../../images/doc.png" />
                  <img v-else src="../../images/others.png" />
                </div>
              </el-tooltip>
              <!-- 操作区域 -->
              <div class="fade-box" v-if="type == 'edit'">
                <!-- <span class="icon picture" @click="setCover(item, index)"><i class="el-icon-picture" title="设置封面"></i></span> -->
                <span class="icon delete" @click="delData(item, index)"><i class="el-icon-delete" title="删除"></i></span>
              </div>
              <!-- 设置封面 -->
              <!-- <div class="set-cover" v-if="item.faceFlag == 1">
                <div class="trangle"></div>
                <div class="txt">封面</div>
              </div> -->
            </div>
          </transition-group>
        </template>

        <!-- 图纸 -->
        <template v-if="resType == 'dwg'">
          <transition-group tag="" name="fade">
            <div v-viewer class="item" v-for="(item, index) in dataList" :key="item.dataresId" :style="`width:${size};height:${size}`">
              <el-tooltip class="item" effect="light" :content="item.attachName" placement="right">
                <div class="default" :style="`width:${size};height:${size};`">
                  <img src="../../images/dwg.png" />
                </div>
              </el-tooltip>
              <!-- 操作区域 -->
              <div class="fade-box" v-if="type == 'edit'">
                <!-- <span class="icon picture" @click="setCover(item, index)"><i class="el-icon-picture" title="设置封面"></i></span> -->
                <span class="icon delete" @click="delData(item, index)"><i class="el-icon-delete" title="删除"></i></span>
              </div>
              <!-- 设置封面 -->
              <!-- <div class="set-cover" v-if="item.faceFlag == 1">
                <div class="trangle"></div>
                <div class="txt">封面</div>
              </div> -->
            </div>
          </transition-group>
        </template>
      </template>

      <!-- 上传按钮 -->
      <el-upload v-if="maxNum > dataList.length && type == 'edit'" v-loading="loading" element-loading-text="数据处理中" element-loading-spinner="el-icon-loading" class="upload" :style="`width:${size};height:${size}`" ref="upload" v-bind="$attrs" v-on="$listeners" :before-upload="uploadBefore" :action="uploadUrl" :http-request="uploadRequest" list-type="picture-card" :show-file-list="false">
        <div v-if="!progressShow">
          <i class="el-icon-upload"></i>
          <div class="des">{{ des }}</div>
        </div>
        <el-progress v-if="progressShow" type="circle" :percentage="percentage"></el-progress>
      </el-upload>
    </div>

    <!-- 弹层文件预览详情 -->
    <el-dialog class="file-detail" width="90%" :title="dialogTitle" :visible.sync="fileDetailVisible" :append-to-body="true" center>
      <div class="detail-content">
        <img v-if="resType === 'image'" class="content-item" :src="fileUrl" alt="" />
        <audio v-else-if="resType === 'audio'" width="100%" class="content-item" :src="fileUrl" controls loop></audio>
        <video v-else-if="resType === 'video'" width="100%" class="content-item" :src="fileUrl" controls="controls"></video>
        <img v-else-if="resType === 'dwg'" width="100%" class="content-item" :src="fileUrl" alt="" />
        <iframe v-else-if="resType === 'docs'" :src="fileUrl" width="100%" style="height: 84vh" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import Vue from 'vue'
import viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
import { resTypeList } from '../../common/dataresattach'
import { uploadFileApi, getFileApi, delFile, setOwnerFace } from '../../api/api.js'
import website from '@/const/website'

// viewer 图片设置
viewer.setDefaults({
  url: 'data-source', // 大图地址参数
  filter(image) {
    // 只有大图的才能放大
    let dataSource = image.getAttribute('data-source')
    if (dataSource == null || dataSource === undefined) {
      return false
    } else {
      return true
    }
  }
})
// Vue.use(viewer)
export default {
  name: 'okay-upload',
  props: {
    // 主体所属主键值   'fdb6c1cf6b474e9bb84386bc4ac9c6e7' 接口来源
    ownerId: {
      type: String,
      require: true
    },
    // 主体所属类型  固定，例如： 历史建筑： A-E10
    ownerType: {
      type: String,
      require: true
    },
    // 数字资源分类  固定，例如： 传入图片 image： 1
    resType: {
      type: String,
      require: true
    },
    // 数字资源用途  用户自己输入
    useType: {
      type: [Number, String],
      default: ''
    },
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 描述
    des: {
      type: String,
      default: ''
    },
    // 错误提示
    errorsTips: {
      type: String,
      default: ''
    },
    // 开始设置封面  1-开启 0-关闭
    setFaceFlag: {
      type: [Number, String],
      default: ''
    },
    // 图片显示区域大小
    size: {
      type: String,
      default: '215px'
    },
    // 上传个数限制
    maxNum: {
      type: [Number, String],
      default: 100000
    },
    // 编辑，还是预览状态
    type: {
      type: String,
      default: 'edit'
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 5
    },
    // 上传接口
    uploadUrl: {
      type: String,
      default: '/dr/drattach/upload'
    },
    // 下载接口
    getFileUrl: {
      type: String,
      default: '/dr/drdatares/getinfo'
    }
  },

  components: {},

  data() {
    return {
      loading: false,
      progressShow: false, // 进度条显示隐藏
      percentage: 0,
      canUpload: true, // 是否可以上传
      // 数据列表
      dataList: [
        // {
        // resName: '',
        // dataresId: '',
        //   thumbnailUrl: 'http://172.16.20.28:9090/okdc-dev/1/thumbnails_80e8303954104429bea2e9b3f4aefda8.png',
        //   srcFileUrl: 'http://172.16.20.28:9090/okdc-dev/1/80e8303954104429bea2e9b3f4aefda8.png'
        // }
      ],
      fileUrl: '', // 插件预览url
      dialogTitle: '', // 弹层标题
      fileDetailVisible: false // 弹层可视
    }
  },
  created() {
    this.getFile()
  },
  mounted() {},
  methods: {
    // 读取已有数据
    getFile() {
      let data = {
        resType: resTypeList[this.resType],
        useType: this.useType,
        ownerType: this.ownerType,
        ownerId: this.ownerId
      }
      getFileApi(this.getFileUrl, data).then((res) => {
        let list = res.data.data
        // console.log(list)
        if (list && list.length > 0) {
          list.forEach((item, index) => {
            this.dataList.push(item)
          })
        }
      })
    },
    // 类型名判断
    typeExt(str, arr) {
      let FileExt = str.replace(/.+\./, '')
      return arr.indexOf(FileExt.toLowerCase()) === -1
    },
    // 上传之前
    uploadBefore(file) {
      let type = file.type
      let errMes = ''
      let errTip = ''
      // 限制文件类型
      switch (this.resType) {
        case 'image':
          if (type.indexOf('image') === -1) {
            errMes = this.errTip || '请选择图片类型'
          }
          break
        case 'audio':
          if (type.indexOf('audio') === -1) {
            errMes = this.errTip || '请选择音频类型'
          }
          break
        case 'video':
          if (type.indexOf('video') === -1) {
            errMes = this.errTip || '请选择视频类型'
          }
          break
        case 'panora':
          errTip = this.errTip || '请上传后缀名为zip或rar的360全景！'
          errMes = this.typeExt(file.name, ['zip', 'rar']) ? errTip : ''
          break
        case 'dwg':
          errTip = this.errTip || '请上传后缀名为dwg图纸附件！'
          errMes = this.typeExt(file.name, ['dwg']) ? errTip : ''
          break
        case 'gis':
          errTip = this.errTip || '请上传后缀名为zip或rar的地图！'
          errMes = this.typeExt(file.name, ['zip', 'rar']) ? errTip : ''
          break
        case 'd3':
          errTip = this.errTip || '请上传后缀名为zip或rar的三维模型！'
          errMes = this.typeExt(file.name, ['zip', 'rar']) ? errTip : ''
          break
        case 'pointCloud':
          errTip = this.errTip || '请上传后缀名为zip或rar的点云模型！'
          errMes = this.typeExt(file.name, ['zip', 'rar']) ? errTip : ''
          break
        case 'tiltModel':
          errTip = this.errTip || '请上传后缀名为zip或rar的倾斜模型！'
          errMes = this.typeExt(file.name, ['zip', 'rar']) ? errTip : ''
          break
        case 'compress':
          errTip = this.errTip || '请上传后缀名为zip或rar！'
          errMes = this.typeExt(file.name, ['zip', 'rar']) ? errTip : ''
          break
        case 'docs':
          errTip = this.errTip || '请上传后缀名为txt、pdf、doc、docx、xls、xlsx、ppt、pptx、csv文档类型！'
          errMes = this.typeExt(file.name, ['txt', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'csv', 'ppt', 'pptx']) ? errTip : ''
          break
        case 'others':
          errMes = this.errTip || ''
          break
        default:
          errMes = ''
          break
      }
      if (errMes !== '') {
        this.$message({
          message: errMes,
          type: 'error'
        })
        return false
      }
      // 是否可以继续上传
      if (this.canUpload) {
        this.percentage = 0
        this.progressShow = true
      }
      return this.canUpload
    },
    // 上传文件
    uploadRequest(item) {
      let fileObj = item.file
      const form = new FormData() // FormData 对象
      form.append('file', fileObj) // 文件对象 file 是后台接收的参数名
      // 赋值
      form.append('ownerId', this.ownerId)
      form.append('ownerType', this.ownerType)
      form.append('resType', resTypeList[this.resType])
      form.append('useType', this.useType)
      this.canUpload = false
      uploadFileApi(this.uploadUrl, form, (progressEvent) => {
        let percent = ((progressEvent.loaded / progressEvent.total) * 100) | 0
        // console.log(percent)
        this.percentage = percent
        if (percent === 100) {
          this.loading = true
        }
      })
        .then((res) => {
          let item = res.data.data
          // console.log(item)
          // 上传完毕
          this.loading = false
          this.progressShow = false
          this.canUpload = true
          this.dataList.push(item)
        })
        .catch((error) => {
          this.$message.error('上传失败')
          console.log(error)
        })
    },
    // 删除资源
    delData(item, index) {
      // delFile(item.dataresId).then((res) => {
      //   if (res && res.data) {
      //     this.dataList.splice(index, 1)
      //     this.$message({
      //       type: 'success',
      //       message: '删除成功!'
      //     })
      //   }
      // })
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(item)
        delFile(item.dataresId).then((res) => {
          if (res && res.data) {
            this.dataList.splice(index, 1)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      })
    },
    // 设置封面
    setCover(item, index) {
      setOwnerFace(item.dataresId).then((res) => {
        this.$message({
          type: 'success',
          message: '封面设置成功!'
        })
        this.dataList.forEach((item, index) => {
          item.faceFlag = ''
        })
        this.dataList[index]['faceFlag'] = 1
      })
    },

    // 返回文件后缀名
    fileNameSuffix(str) {
      str = str + ''
      let name = str.substring(str.lastIndexOf('.') + 1).toLowerCase()
      if (name === 'docx') name = 'doc'
      if (name === 'pptx') name = 'ppt'
      return name
    },

    // 打开 外链预览
    async openLink(item, index) {
      console.log(item)
      let serveUrl = website.serveUrl
      let minioUrl = website.minioUrl
      let name = ''
      let list = item.indexObjs || []
      this.dialogTitle = item.resName
      ;(await list) &&
        list.length > 0 &&
        list.forEach((item) => {
          item.size = parseInt(item.size)
        })
      // 升序
      ;(await list) &&
        list.length > 0 &&
        list.sort((a, b) => {
          return a.size - b.size
        })

      switch (this.resType) {
        // 三维模型
        case 'd3':
          if (!item.indexObjs) {
            this.$message.warning('参数有误！无法预览')
            return
          }
          if (list && list.length > 0) {
            for (let i = 0; i < list.length; i++) {
              name = this.fileNameSuffix(item.url)
              let fileUrl = minioUrl + list[i].url
              // debugger
              if (name === 'glb') {
                window.open(`${serveUrl}/dcmap/#/loadglbview?url=${fileUrl}`)
                return
              } else if (name === 'obj') {
                window.open(`${serveUrl}/dcmap/#/loadobj?url=${fileUrl}`)
                return
              } else if (name === 'fbx') {
                window.open(`${serveUrl}/dcmap/#/loadfbx?url=${fileUrl}`)
                return
              } else {
                window.open(`${serveUrl}/dcmap/#/loadglbview?url=${fileUrl}`)
                return
              }
            }
          }
          break

        // 点云模型
        case 'pointCloud':
          if (!item.indexObjs) {
            this.$message.warning('参数有误！无法预览')
            return
          }
          if (list && list.length > 0) {
            for (let i = 0; i < list.length; i++) {
              name = this.fileNameSuffix(list[i].url)
              let fileUrl = minioUrl + list[i].url
              if (name === 'json') {
                window.open(`${serveUrl}/dcmap/#/pointcloudview?url=${fileUrl}`)
                return
              }
            }
          }
          break

        // 倾斜模型
        case 'tiltModel':
          let fileUrl = minioUrl + 'okdc-dev' + item.srcFileUrl + '/Scene/Production_1.json'
          let url = `${serveUrl}/dcmap/#/load3dtielsview?url=${fileUrl}`
          window.open(url)
          break

        // 办公文档
        case 'docs':
          name = this.fileNameSuffix(item.srcFileUrl)
          // console.log(name)
          if (name === 'pdf') {
            this.fileUrl = item.url
            this.pdfVisible = true
          } else if (name === 'doc') {
            this.fileUrl = website.kkfileViewUrl + encodeURIComponent(this.base64Encode(item.srcFileUrl))
            this.fileDetailVisible = true
          } else {
            this.fileUrl = website.kkfileViewUrl + encodeURIComponent(this.base64Encode(item.srcFileUrl))
            this.fileDetailVisible = true
          }
          // debugger
          break

        // 图纸
        case 'dwg':
          break
      }
    },
    base64Encode(url) {
      var rv
      rv = encodeURIComponent(url)
      rv = unescape(rv)
      rv = window.btoa(rv)
      return rv
    }
  }
}
</script>

<style lang="scss" scope>
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: ' ';
  clear: both;
  height: 0;
}
.okay-upload {
  // display: flex;
  // width: 100%;
  .upload {
    float: left;
    margin-bottom: 30px;
  }
  .el-upload--picture-card {
    height: 100%;
    width: 100%;
    line-height: 18px;
    display: flex;
    align-items: center; //center
    justify-content: center; //垂直居中
    border: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }
  .el-icon-upload {
    font-size: 50px;
  }
  .des {
    padding-top: 15px;
  }

  // 列表
  .list {
    float: left;
    & > div {
      float: left;
    }
    .item {
      border-radius: 5px;
      box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
      margin-right: 30px;
      margin-bottom: 30px;
      overflow: hidden;
      float: left;
      position: relative;
      img {
        object-fit: cover;
        object-position: 100% 0;
        cursor: pointer;
      }

      .default {
        display: flex;
        align-items: center; //center
        justify-content: center; //垂直居中
      }

      .fade-box {
        position: absolute;
        width: 100%;
        height: 34px;
        line-height: 34px;
        left: 0;
        bottom: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        font-size: 20px;
        background-color: rgba(0, 0, 0, 0.5);
        transition: opacity 0.3s;
        z-index: 2;
        opacity: 0;
        display: flex;
        align-items: center; //center
        justify-content: center; //垂直居中
        .icon {
          margin-right: 15px;
          cursor: pointer;
          .el-icon-picture {
          }
          .el-icon-delete {
          }
        }
      }
      &:hover {
        img {
          transform: scale(1.1, 1.1);
          transition: all 0.3s ease-out 0s;
        }

        .fade-box {
          opacity: 1;
        }
      }
    }
    .audio {
      text-align: center;
      display: flex;
      align-items: center; //center
      justify-content: center; //垂直居中
      audio {
        background: #f1f3f4;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
      }
    }

    .video {
      text-align: center;
      display: flex;
      // align-items: center; //center
      justify-content: center; //垂直居中
      video {
        background: #f1f3f4;
        margin: auto;
        width: 90%;
      }
    }
  }
  .set-cover {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    .trangle {
      width: 0;
      height: 0;
      border-bottom: 70px solid #4b94ff;
      border-left: 70px solid transparent;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    }
    .txt {
      font-size: 16px;
      color: #fff;
      position: absolute;
      top: 40px;
      right: 8px;
      text-align: center;
    }
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
    transform: translateY(-10px);
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s ease;
  }
}

// 弹层文件预览详情
.file-detail {
  .detail-content {
    text-align: center;
    position: relative;
  }
  .el-dialog {
    display: flex;
    display: -ms-flex; /* 兼容IE */
    flex-direction: column;
    -ms-flex-direction: column; /* 兼容IE */
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
  }
  .el-dialog--center {
    text-align: center;
  }
  .content-item {
    max-height: 700px;
  }
}
</style>
