<template>
  <view @click="$u.throttle(toAnswer)">
    <iframe ref="iframe" src="static/html/explanation.html" frameborder="0"></iframe>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    toAnswer () {
      uni.navigateTo({
        url: '/pages/answer/answer'
      })
    },

    async getDetail (id) {
      const res = await this.$u.api.baseFormShow({
        table_name: 'map_points',
        'with_relations[0]': 'image',
        'with_relations[1]': 'video',
        id
      })

      return res
    },
    async getVrs (id) {
      const res = await this.$u.api.baseFormIndex({
        table_name: 'map_point_contents',
        'with_relations[0]': 'image',
        'with_relations[1]': 'video',
        'filter[0][key]': 'map_point_id',
        'filter[0][op]': 'eq',
        'filter[0][value]': id
      })

      return res
    }
  },
  onLoad(option) {
    window.toAnswer = this.toAnswer

    this.$nextTick(() => {
      this.$refs['iframe'].onload = async () => {
        let detail = await this.getDetail(option.id)
        let vrs = await this.getVrs(option.id)
        this.$refs['iframe'].contentWindow.setDomData({ detail , vrs })
      }
    })
  },
}
</script>

<style lang="scss">
iframe {
  height: 100vh;
  width: 100vw;
}
</style>
