<template>
  <section class="preview">
    <ai-dv-wrapper :views="[{label: '返回'}]" :theme="config.theme" @change="$router.back()" v-if="screenId" :title="info.name">
      <ai-dv-background
          :theme="config.theme"
          v-if="config.length || config.theme === '1'"
          :src="config.theme === '1' ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj-bg.png' : config.backgroundImage[0].url">
      </ai-dv-background>
      <app-gigscreen-viewer :urlPrefix="urlPrefix" :instance="instance" :dict="dict" :id="screenId"/>
    </ai-dv-wrapper>
  </section>
</template>

<script>
import AppGigscreenViewer from "../../viewer/AppGigscreenViewer";
import AiDvWrapper from "../../../../components/layout/AiDvWrapper/AiDvWrapper";
import AiDvBackground from "../../../../components/layout/AiDvBackground";

export default {
  name: "preview",
  components: {AiDvBackground, AiDvWrapper, AppGigscreenViewer},
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    urlPrefix: {
      type: String,
      default: '/app'
    }
  },
  computed: {
    screenId: v => v.$route.query.id
  },
  data() {
    return {
      info: {},
      config: {}
    }
  },
  methods: {
    getDvData() {
      let {id} = this.$route.query
      this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
        if (res?.data) {
          this.info = res.data
          this.config = JSON.parse(res.data.config).dashboard
        }
      })
    }
  },
  created() {
    this.getDvData()
  }
}
</script>

<style lang="scss" scoped>
.preview {
}
</style>
