<template>
  <div id="app" style="height: 775px">
    <iframe
      class="placeholder"
      frameborder="0"
      scrolling="auto"
      :src="
        URL.api_url +
        '/admin/shop/shop-page-app/editApp?app_id=' +
        app_id +
        '&tpl_id=' +
        tpl_id +
        '&app_type=' +
        app_type +
        '&authorization=' +
        authorization
      "
      style="width: 100%; height: 770px"
    ></iframe>
  </div>
</template>

<script>
  import { editApp } from '@/api/page/app'
  import { URL } from '@/config'
  import { getToken } from '@/utils/token'
  import { mapGetters } from 'vuex'

  export default {
    name: 'AppTemplate',
    components: {},
    data() {
      return {
        URL: URL,
        app_id: '',
        tpl_id: '',
        app_type: '',
        authorization: '',
      }
    },
    computed: {
      ...mapGetters({
        token: 'user/token',
      }),
    },
    created() {
      // 后台获取数据方法
      // this.editApp()
      // 获取页面传递的参数
      let queryParams = this.$route.query
      this.app_id = queryParams.app_id
      this.tpl_id = queryParams.tpl_id
      this.app_type = queryParams.app_type
      this.authorization = getToken()
    },
    methods: {
      async editApp() {
        // 查询 h5数据
        const { data } = await editApp()
        const html = data
        const iframe = document.getElementsByClassName('placeholder')[0]
        const iframedoc =
          iframe.contentDocument || iframe.contentWindow.document
        iframedoc.children[0].innerHTML = html // 事先拿到的html
      },
    },
  }
</script>
