<template>
  <!-- 文物基本信息 -->
  <div>
    <el-card shadow="hover">
      <el-descriptions title="文物详情" :column="1" labelClassName="label">
        <el-descriptions-item
          :label="item.label"
          v-for="(item, index) in crTabletitle"
          :key="index"
        >
          <div v-if="item.prop == 'faceImagePressUrl'">
            <el-image
              v-if="info['faceImagePressUrl']"
              class="image"
              :src="info['faceImagePressUrl']"
              fit="contain"
              :preview-src-list="[info['faceImageUrl']]"
            >
            </el-image>
            <span v-else>无</span>
          </div>
          <div v-else-if="item.prop == 'imagesVo'">
            <span v-if="isImagesVoEmpty">无</span>
            <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>
          <div v-else-if="item.prop == 'videosVo'">
            <span v-if="isVideosVoEmpty">无</span>
            <VideoPlayer
              class="video"
              v-for="(v, i) in info['videosVo']"
              :key="i"
              :src="v.url"
            />
          </div>
          <div v-else-if="item.prop == 'audiosVo'">
            <span v-if="isAudiosVoEmpty">无</span>
            <AudioPlayer
              v-for="(v, i) in info['audiosVo']"
              :key="i"
              :url="v.url"
              ref="AudioPlayer"
            />
          </div>
          <div v-else-if="item.prop == 'literatureVo'">
            <span v-if="isLiteratureVoEmpty">无</span>
            <el-table stripe border :data="info['literatureVo']" v-else>
              <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" @click="$bizCommon.openliterature(scope.row)">预览</el-button>
                </template>
              </el-table-column> -->
            </el-table>
          </div>
          <RichTextShow
            v-else-if="item.prop === 'intro'"
            :richText="info['intro']"
          ></RichTextShow>
          <div v-else-if="item.prop === 'sourceWay'">
            <DictText
              name="culturalRelicSourceWay"
              :dictValue="info['sourceWay']"
              v-if="info['sourceWay']"
            />
            <span v-else>无</span>
          </div>
          <div v-else-if="item.prop === 'file3dUrl' && info['file3dUrl']">
            <el-button type="text" @click="handleToggle3d">{{
              show3d ? "收起" : "在线预览"
            }}</el-button>
            <Viewer3d
              :url="info['file3dUrl']"
              v-if="show3d"
              class="container-3d"
            />
          </div>
          <span v-else>{{ info[item.prop] || "无" }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
import { crTabletitle } from "./config";
import VideoPlayer from "@/components/VideoPlayer";
import AudioPlayer from "@/components/AudioPlayer";
import Viewer3d from "@/components/Viewer3d";
export default {
  components: {
    VideoPlayer,
    AudioPlayer,
    Viewer3d,
  },
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    // 大图预览的
    imgsList() {
      return this.info.imagesVo.map((item) => {
        return item.url;
      });
    },
    isImagesVoEmpty() {
      return !(this.info["imagesVo"] && this.info["imagesVo"].length > 0);
    },
    isAudiosVoEmpty() {
      return !(this.info["audiosVo"] && this.info["audiosVo"].length > 0);
    },
    isVideosVoEmpty() {
      return !(this.info["videosVo"] && this.info["videosVo"].length > 0);
    },
    isLiteratureVoEmpty() {
      return !(
        this.info["literatureVo"] && this.info["literatureVo"].length > 0
      );
    },
  },
  data() {
    return {
      crTabletitle,
      show3d: false,
    };
  },
  methods: {
    handleToggle3d() {
      this.show3d = !this.show3d;
    },
  },
};
</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;
}

.container-3d {
  border: 1px solid #dadada;
  border-radius: 4px;
}
</style>
