<template>
  <!-- 文物基本信息 -->
  <div>
    <el-card shadow="hover">
      <el-descriptions title="展览基本详情" :column="1" labelClassName="label">
        <el-descriptions-item
          :label="item.label"
          v-for="(item, index) in displayTabletitle"
          :key="index"
        >
          <el-image
            class="image"
            v-if="item.prop == 'faceImagePressUrl'"
            :src="info['faceImagePressUrl']"
            fit="contain"
            :preview-src-list="[info['faceImageUrl']]"
          >
          </el-image>
          <div v-else-if="item.prop == 'imagesVo'">
            <div v-if="info['imagesVo'].length > 0">
              <el-image
                v-for="(v, i) in info['imagesVo']"
                :key="i"
                class="image"
                :src="v.pressUrl"
                fit="contain"
                :preview-src-list="imgsList"
              >
              </el-image>
            </div>
            <span v-else>暂无音频</span>
          </div>
          <div v-else-if="item.prop == 'videosVo'">
            <div v-if="info['videosVo'].length > 0">
              <VideoPlayer
                class="video"
                v-for="(v, i) in info['videosVo']"
                :key="i"
                :src="v.url"
              />
            </div>
            <span v-else>暂无音频</span>
          </div>
          <div v-else-if="item.prop == 'audiosVo'">
            <div v-if="info['audiosVo'].length > 0">
              <AudioPlayer
                v-for="(v, i) in info['audiosVo']"
                :key="i"
                :url="v.url"
                ref="AudioPlayer"
              />
            </div>
            <span v-else>暂无音频</span>
          </div>
          <div v-else-if="item.prop == 'literatureVo'">
            <div v-if="info['literatureVo'].length > 0">
              <el-table stripe border :data="info['literatureVo']">
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="authors" label="作者"></el-table-column>
                <el-table-column prop="source" label="来源"></el-table-column>
                <el-table-column prop="source" label="操作">
                  <template slot-scope="scope">
                    <el-button type="text">预览</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <span v-else>暂无文献</span>
          </div>
          <TextShow
            v-else-if="item.prop === 'intro'"
            :richText="info['intro']"
          ></TextShow>
          <div v-else-if="item.prop === 'type'">
            <DictText name="displayType" :dictValue="info['type']" />
          </div>
          <span v-else>{{ info[item.prop] || "无" }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
import { displayTabletitle } from "../../config";
import VideoPlayer from "@/components/VideoPlayer";
import AudioPlayer from "@/components/AudioPlayer";
export default {
  components: {
    VideoPlayer,
    AudioPlayer,
  },
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    // 大图预览的数组
    imgsList() {
      return this.info.imagesVo.map((item) => {
        return item.url;
      });
    },
  },
  data() {
    return {
      displayTabletitle,
    };
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions-item__label {
  width: 90px;
  display: inline-block;
}
::v-deep .el-descriptions-item__content {
  flex: 1;
}

.image {
  margin-right: 20px;
  width: 200px;
  height: 200px;
  border: 1px solid #dadada;
  border-radius: 4px;
}
.video {
  width: 400px;
  height: 400px;
  border: 1px solid #dadada;
  border-radius: 4px;
}
</style>
