<script>
export default {
  props: {
    storyContent: {
      type: Array,
      default: ()=>[],
    },
  },
  data() {
    return {
    }
  },
  computed: {
  },
  onLoad() {},
  onShow() {
  },
  methods: {},
}
</script>

<template>
  <view style="display: flex; flex-flow: column nowrap;">
      <view
        v-for="(section, index) of storyContent"
        :key="index"
        style="display: flex; flex-flow: column nowrap; padding: 5px; position: relative;"
      >
        <text v-if="section.text !== undefined" style="box-sizing: border-box; width: 100%; padding: 5px;">{{ section.text }}</text>
        <img v-if="section.image" :src="section.image" style="width: 100%;" />
        <video v-if="section.video" :src="section.video" style="width: 100%;" autoplay></video>
      </view>
  </view>
</template>

<style lang="scss" scoped>

</style>
