<template>
  <!-- 文物基本信息 -->
  <div>
    <el-card shadow="hover" v-if="info">
      <el-descriptions title="展览基本详情" :column="1" labelClassName="label">
        <el-descriptions-item
          :label="item.label"
          v-for="(item, index) in displayTabletitle"
          :key="index"
        >
          <el-card v-if="hasProp(item, 'intro')" shadow="never">
            <RichTextShow :richText="info['intro']" />
          </el-card>

          <!-- 展览类型 -->
          <DictText
            v-else-if="hasProp(item, 'type')"
            name="displayType"
            :dictValue="info['type']"
          />
          <!-- 模板主题 -->
          <div v-else-if="hasProp(item, 'themeType')">
            {{ $constantsTool.getLabelByValue("themeType", info["themeType"]) }}
          </div>
          <!-- 封面 -->
          <el-image
            v-else-if="hasProp(item, 'faceImagePressUrl')"
            class="face-image"
            :src="info['faceImagePressUrl']"
            fit="contain"
            :preview-src-list="[info['faceImageUrl']]"
          >
          </el-image>
          <!-- 图片 -->
          <el-row :gutter="10" v-else-if="hasProp(item, 'imagesVo')">
            <el-col :span="4" v-for="(v, i) in info['imagesVo']">
              <el-image
                fit="contain"
                class="image"
                :src="v.pressUrl"
                :preview-src-list="imgsList"
              ></el-image>
            </el-col>
          </el-row>
          <!-- 视频 -->
          <el-row :gutter="10" v-else-if="hasProp(item, 'videosVo')">
            <el-col :span="4" v-for="(v, i) in info['videosVo']">
              <VideoPlayer class="video" :key="i" :src="v.url" />
            </el-col>
          </el-row>
          <!-- 音频 -->
          <el-row :gutter="10" v-else-if="hasProp(item, 'audiosVo')">
            <el-col :span="4" v-for="(v, i) in info['audiosVo']">
              <AudioPlayer :key="i" :url="v.url" ref="AudioPlayer" />
            </el-col>
          </el-row>
          <!-- 文献 -->
          <el-table
            stripe
            border
            :data="info['literatureVo']"
            v-else-if="hasProp(item, '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>
          <!-- 展览单元 -->
          <el-card v-else-if="hasProp(item, 'exhibitionUnits')" shadow="never">
            <ExhibitionPreview :data="info['exhibitionUnits']" />
          </el-card>

          <span v-else-if="info[item.prop] && info[item.prop].length == 0"
            >无</span
          >
          <span v-else>{{ info[item.prop] }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-empty v-else />
  </div>
</template>

<script>
import { displayTabletitle } from "./config";
import VideoPlayer from "@/components/VideoPlayer";
import AudioPlayer from "@/components/AudioPlayer";
import ExhibitionPreview from "@/components/ExhibitionPreview";
export default {
  components: {
    VideoPlayer,
    AudioPlayer,
    ExhibitionPreview,
  },
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    // 大图预览的数组
    imgsList() {
      return this.info.imagesVo.map((item) => {
        return item.url;
      });
    },
  },
  data() {
    return {
      displayTabletitle,
    };
  },
  methods: {
    hasProp(item, key) {
      if (this.info[key] instanceof Array) {
        return item.prop == key && this.info[key] && this.info[key].length > 0;
      } else {
        return item.prop == key && this.info[key];
      }
    },
  },
};
</script>

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

.face-image,
.image {
  height: 200px;
  border: 1px solid #dadada;
  border-radius: 4px;
}
.face-image {
  width: 200px;
}

.image {
  width: 100%;
}
.video {
  width: 400px;
  height: 400px;
  border: 1px solid #dadada;
  border-radius: 8px;
}
</style>
