<template>
  <div v-if="data && data.length > 0">
    <el-collapse
      v-model="activeNames"
      v-for="(item, index) in data"
      :key="index"
    >
      <el-form>
        <el-collapse-item :title="item.title" :name="item.euId">
          <el-card>
            <h3>{{ item.title }}</h3>
            <el-form-item label="文字介绍：">
              <div class="intro">
                <RichTextShow :richText="item.intro" />
              </div>
            </el-form-item>
            <div
              class="crId"
              v-if="item.culturalRelics && item.culturalRelics.length > 0"
            >
              <el-form-item label="相关文物：">
                <el-row :gutter="10">
                  <el-col :span="4" v-for="(v, i) in item.culturalRelics">
                    <el-image
                      fit="contain"
                      class="image"
                      :src="v.faceImagePressUrl"
                    ></el-image>
                  </el-col>
                </el-row>
              </el-form-item>
            </div>
            <div
              class="images"
              v-if="item.imagesVo && item.imagesVo.length > 0"
            >
              <el-form-item label="相关图片：">
                <el-row :gutter="10">
                  <el-col :span="4" v-for="(v, i) in item.imagesVo">
                    <el-image
                      fit="contain"
                      class="image"
                      :src="v.middleUrl"
                    ></el-image>
                  </el-col>
                </el-row>
              </el-form-item>
            </div>
          </el-card>
        </el-collapse-item>
        <div class="indent20">
          <ExhibitionPreview
            v-for="(v, i) in item.children"
            :key="i"
            :data="item.children"
          />
        </div>
      </el-form>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: "ExhibitionPreview",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      activeNames: "",
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style scoped lang="scss">
.indent20 {
  padding-left: 20px;
}
.image {
  width: 100%;
  height: 200px;
  border: 1px solid #dadada;
  border-radius: 4px;
}
</style>
