<!--  -->
<template>
  <div>
    <main-top :crumb="crumbData">
      <div slot="con" class="con-btn">
        <el-button type="primary" @click="$router.back()">返回</el-button>
      </div>
    </main-top>
    <div class="table-interface">
      <div class="collection-con">
        <div class="c-left">
          <p>{{ detail.name }}</p>
          <iframe
            v-if="detail.type === '3D'"
            :src="detail.modelUrl"
            frameborder="0"
          ></iframe>
          <div class="modelimg" v-else>
            <div
              v-if="imgs.length > 0"
              id="sPrev"
              class="pagenav"
              @click="slide('slidePrev')"
            >
              <img :src="require('@/assets/img/icon2.png')" />
            </div>
            <swiper style="width:100%" ref="mySwiper" :options="swiperOptions">
              <swiper-slide v-for="(item, i) in imgs" :key="i">
                <el-image
                  style="width:100%;"
                  :src="$serverName.replace('/zhoushan', '') + item"
                  :fit="'contain'"
                ></el-image>
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
            <div
              v-if="imgs.length > 0"
              id="sNext"
              class="pagenav"
              @click="slide('slideNext')"
            >
              <img :src="require('@/assets/img/icon2.png')" />
            </div>
          </div>
        </div>
        <div class="c-right theme-color">
          <p class="c-title">
            <span>文物信息</span>
            <span class="edit" @click="goto">编辑</span>
          </p>
          <p v-if="detail.typeName">文物类别：{{ detail.typeName }}</p>
          <p v-if="detail.timeName">分类年代：{{ detail.timeName }}</p>
          <p v-if="detail.typeTime">文物年代：{{ detail.typeTime }}</p>
          <p v-if="detail.description">
            文物介绍：<span v-html="detail.description"></span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

import MainTop from '@/components/main-top'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// import 'swiper/css/swiper.css'
// If you use Swiper 6.0.0 or higher
import 'swiper/swiper-bundle.css'

const crumbData = [
  {
    name: '文物库',
    id: 0
  },
  {
    name: '查看文物',
    id: 1
  }
]

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    MainTop,
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev'
      },
      crumbData,
      imgs: [],
      detail: '',
      id: this.$route.params.id,
      type: 'picture',
      realType: ''
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
  methods: {
    slide (name) {
      this.swiper[name]()
    },
    async getDetail () {
      let result = await this.$http({
        method: 'post',
        data: {
          id: this.id
        },
        url: '/collection/findById'
      })

      this.detail = result.data
      this.detail.modelUrl += `&hideAction=true`
      this.imgs = this.detail.typeImages
        ? JSON.parse(this.detail.typeImages)
        : []
      this.type = this.getType()
    },

    getType () {
      if (!this.detail.contentUrl) {
        return null
      }
      let type = this.detail.contentUrl.split('.')
      type = type[type.length - 1]
      var a = [
        'cd',
        'ogg',
        'mp3',
        'asf',
        'wma',
        'wav',
        'mp3pro',
        'rm',
        'real',
        'ape',
        'module',
        'midi',
        'vqf'
      ]
      var v = ['jpg', 'jpgc', 'png']
      this.realType = type

      for (var i in a) {
        if (a[i] === type.toLowerCase()) return 'audio'
      } // 音频
      for (var j in v) {
        if (v[j] === type.toLowerCase()) return 'picture'
      } // 图片
      return null
    },
    goto () {
      window.localStorage.setItem(
        'editCollection',
        JSON.stringify(this.detail)
      )
      this.$router.push({ name: 'edit-cultural-relic', params: { type: 1 } })
    }
  },
  mounted () {
    this.getDetail()
  }
}
</script>

<style lang="less" scoped>
@import "./style.less";
</style>

<style>
.wrapper >>> .swiper-pagination-bullet-active {
  background: #fff;
}
.ql-picker-label {
  line-height: 1;
  overflow: hidden;
}

.avatar-uploader .el-upload {
  /* border: 1px dashed #000; */
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
