<template>
  <div class="okay-upload clearfix">
    <div class="list clearfix">
      <!-- 图片显示 -->
      <template v-if="resType == 'image'">
        <div v-viewer class="item" :style="`width:${size};height:${size}`">
          <el-tooltip class="item" effect="light" :content="attachName" placement="right">
            <img :style="`width:${size};height:${size}`" :src="url" :data-source="url" />
          </el-tooltip>
        </div>
      </template>

      <!-- 三维模型 -->
      <template v-if="resType == 'd3'">
        <div v-viewer class="item" :style="`width:${size};height:${size}`">
          <el-tooltip class="item" effect="light" :content="attachName" placement="right">
            <div class="default" @click="openLink(url)" :style="`width:${size};height:${size};`">
              <img src="../../images/d3.png" />
            </div>
          </el-tooltip>
        </div>
      </template>

      <!-- 点云模型 -->
      <template v-if="resType == 'pointCloud'">
        <div v-viewer class="item" :style="`width:${size};height:${size}`">
          <el-tooltip class="item" effect="light" :content="attachName" placement="right">
            <div class="default" @click="openLink(url)" :style="`width:${size};height:${size};`">
              <img src="../../images/pointCloud.png" />
            </div>
          </el-tooltip>
        </div>
      </template>

      <!-- 倾斜模型 -->
      <template v-if="resType == 'tiltModel'">
        <div v-viewer class="item" :style="`width:${size};height:${size}`">
          <el-tooltip class="item" effect="light" :content="attachName" placement="right">
            <div class="default" @click="openLink(url)" :style="`width:${size};height:${size};`">
              <img src="../../images/tiltModel.png" />
            </div>
          </el-tooltip>
        </div>
      </template>

      <!-- 音频 -->
      <template v-if="resType == 'audio'">
        <div v-viewer class="item audio" :style="`width:${size};height:${size}`">
          <el-tooltip class="item" effect="light" :content="attachName" placement="right">
            <audio :src="url" controls loop></audio>
          </el-tooltip>
        </div>
      </template>

      <!-- 视频 -->
      <template v-if="resType == 'video'">
        <div v-viewer class="item video" :style="`width:${size};height:${size}`">
          <el-tooltip class="item" effect="light" :content="attachName" placement="right">
            <video :src="url" poster="../../images/video.png" controls="controls"></video>
          </el-tooltip>
        </div>
      </template>

      <!-- 全景 -->
      <template v-if="resType == 'panora'">
        <div v-viewer class="item" :style="`width:${size};height:${size}`">
          <el-tooltip class="item" effect="light" :content="attachName" placement="right">
            <div class="default" :style="`width:${size};height:${size};`">
              <img src="../../images/panora.png" />
            </div>
          </el-tooltip>
        </div>
      </template>

      <!-- 地图文件 -->
      <template v-if="resType == 'gis'">
        <div v-viewer class="item" :style="`width:${size};height:${size}`">
          <el-tooltip class="item" effect="light" :content="attachName" placement="right">
            <div class="default" :style="`width:${size};height:${size};`">
              <img src="../../images/gis.png" />
            </div>
          </el-tooltip>
        </div>
      </template>

      <!-- 压缩包 -->
      <template v-if="resType == 'compress'">
        <div v-viewer class="item" :style="`width:${size};height:${size}`">
          <el-tooltip class="item" effect="light" :content="attachName" placement="right">
            <div class="default" :style="`width:${size};height:${size};`">
              <img src="../../images/compress.png" />
            </div>
          </el-tooltip>
        </div>
      </template>

      <!-- 其他文件类型 -->
      <template v-if="resType == 'others'">
        <div v-viewer class="item" :style="`width:${size};height:${size}`">
          <el-tooltip class="item" effect="light" :content="attachName" placement="right">
            <div class="default" :style="`width:${size};height:${size};`">
              <img src="../../images/others.png" />
            </div>
          </el-tooltip>
        </div>
      </template>

      <!-- 办公文档 -->
      <template v-if="resType == 'docs'">
        <div v-viewer class="item" :style="`width:${size};height:${size}`">
          <el-tooltip class="item" effect="light" :content="attachName" placement="right">
            <div class="default" @click="openLink(url)" :style="`width:${size};height:${size};`">
              <img v-if="fileNameSuffix(url) === 'doc'" src="../../images/doc.png" />
              <img v-else-if="fileNameSuffix(url) === 'xlsx'" src="../../images/xlsx.png" />
              <img v-else-if="fileNameSuffix(url) === 'xls'" src="../../images/xlsx.png" />
              <img v-else-if="fileNameSuffix(url) === 'txt'" src="../../images/txt.png" />
              <img v-else-if="fileNameSuffix(url) === 'pdf'" src="../../images/pdf.png" />
              <img v-else-if="fileNameSuffix(url) === 'csv'" src="../../images/csv.png" />
              <img v-else-if="fileNameSuffix(url) === 'ppt'" src="../../images/ppt.png" />
              <img v-else-if="fileNameSuffix(url) === 'docs'" src="../../images/doc.png" />
              <img v-else src="../../images/others.png" />
            </div>
          </el-tooltip>
        </div>
      </template>

      <!-- 图纸 -->
      <template v-if="resType == 'dwg'">
        <div v-viewer class="item" :style="`width:${size};height:${size}`">
          <el-tooltip class="item" effect="light" :content="attachName" placement="right">
            <div class="default" :style="`width:${size};height:${size};`">
              <img src="../../images/dwg.png" />
            </div>
          </el-tooltip>
        </div>
      </template>
    </div>

    <!-- 弹层文件预览详情 -->
    <el-dialog class="file-detail" width="90%" :title="attachName" :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 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-browse',
  props: {
    // 文件地址
    url: {
      type: String,
      default: ''
    },
    // 文件名
    attachName: {
      type: String,
      default: ''
    },
    // 数字资源分类  固定，例如： 传入图片 image： 1
    resType: {
      type: String,
      require: true
    },
    // 图片显示区域大小
    size: {
      type: String,
      default: '215px'
    },
    // 编辑，还是预览状态
    type: {
      type: String,
      default: 'preview'
    }
  },

  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() {},
  mounted() {},
  methods: {
    // 类型名判断
    typeExt(str, arr) {
      let FileExt = str.replace(/.+\./, '')
      return arr.indexOf(FileExt.toLowerCase()) === -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(url) {
      let fileUrl = url
      let serveUrl = website.serveUrl
      let minioUrl = website.minioUrl
      let name = this.fileNameSuffix(url)
      switch (this.resType) {
        // 三维模型
        case 'd3':
          if (name === 'glb') {
            window.open(`${serveUrl}/dcmap/#/loadglbview?url=${fileUrl}`)
          } else if (name === 'obj') {
            window.open(`${serveUrl}/dcmap/#/loadobj?url=${fileUrl}`)
          } else if (name === 'fbx') {
            window.open(`${serveUrl}/dcmap/#/loadfbx?url=${fileUrl}`)
          } else {
            window.open(`${serveUrl}/dcmap/#/loadglbview?url=${fileUrl}`)
          }
          break

        // 点云模型
        case 'pointCloud':
          if (name === 'json') {
            window.open(`${serveUrl}/dcmap/#/pointcloudview?url=${fileUrl}`)
          }
          break

        // 倾斜模型
        case 'tiltModel':
          let url = `${serveUrl}/dcmap/#/load3dtielsview?url=${fileUrl}`
          window.open(url)
          break

        // 办公文档
        case 'docs':
          // console.log(name)
          if (name === 'pdf') {
            this.fileUrl = fileUrl
            this.pdfVisible = true
          } else if (name === 'doc') {
            this.fileUrl = website.kkfileViewUrl + encodeURIComponent(this.base64Encode(fileUrl))
            this.fileDetailVisible = true
          } else {
            this.fileUrl = website.kkfileViewUrl + encodeURIComponent(this.base64Encode(fileUrl))
            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>
