<!--  -->
<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.modelUrl" :src="detail.modelUrl" frameborder="0"></iframe>
            <el-image class="cimg" :preview-src-list="[detail.pic]" :fit="'cover'" :src="detail.pic"  v-else/>
          </div>
          <div class="c-right theme-color">
            <p class="c-title">
              <span>文物信息</span>
              <span class="edit" v-if="authority['编辑']" @click="goto">编辑</span>
            </p>
            <p>文物类别：{{detail.typeName}}</p>
            <p>文物年代：{{detail.timeName}}</p>
            <p>文物介绍：<span v-html="detail.description"></span></p>
            <p v-if='detail.discoveryTime'>文物发现时间：{{$base.timestampToTime(detail.discoveryTime)}}</p>
            <p v-if='detail.repairTime'>文物维修时间：{{$base.timestampToTime(detail.repairTime)}}</p>
            <p v-if='detail.venue'>文物所在场馆：{{detail.venue}}</p>
            <div v-if='detail.contentUrl'>多媒体资料：
              <img v-if="type==='picture'" style="width:80%;margin-top:20px;" :src="detail.contentUrl" alt="">
              <div style="margin-top:20px;color:#3BB8EA;" v-else-if="type==='audio'">{{realType}}音频文件</div>
              <div v-else></div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

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

import MainTop from '@/components/main-top'

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

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    MainTop
  },
  data () {
    return {
      crumbData,
      detail: '',
      id: this.$route.params.id,
      type: 'picture',
      realType: '',
      authority: {}
    }
  },
  methods: {
    async getDetail () {
      let result = await this.$http({
        method: 'post',
        data: {
          id: this.id
        },
        url: '/collection/findById'
      })

      this.detail = result.data
      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
      console.log(this.realType)

      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 () {
    if (!window.localStorage.getItem('currentItem')) {
      return
    } else {
      let currentItem = JSON.parse(window.localStorage.getItem('currentItem'))
      let auth = ''
      if (currentItem.children) {
        auth = currentItem.children.find(item => item.name === '文物库')
      }

      auth && auth.children.forEach(item => {
        this.authority[item.name] = item.authority
      })
    }
    this.getDetail()
  }
}
</script>

<style scoped>
/* 引入公共css类 */
@import url(./style);
</style>

<style>
.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>
