<template>
  <component :is="currentView" :config="config" :modelId="modelId" :isPreview="isPreview" v-show="showPage" />
</template>

<script>
import { getConfigData, NOgetConfigData } from '@/api/onlineDev/visualDev'
import Form from './form'
import List from './list'
import mobileList from './mobileList'
import zeroList from './zeroList'
export default {
  name: 'dynamicModel',
  components: { Form, List, mobileList, zeroList },
  data() {
    return {
      currentView: '',
      showPage: false,
      isPreview: false,
      modelId: '',
      modeType: '',
      config: {}
    }
  },
  created() {
    let isPreview = this.$route.query.isPreview || false
    if (isPreview) {
      this.modelId = this.$route.query.id
      this.modeType = this.$route.query.modeType
      this.isPreview = true
    } else {
      this.modelId = this.$route.meta.relationId
    }
    if (!this.modelId) return
    this.getConfigData()
  },
  methods: {
    getConfigData() {
      if (this.modeType === '2') {
        NOgetConfigData(this.modelId).then((res) => {
          if (res.data.code !== 200) {
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.replace('/404')
          }
          if (!res.data.data) return
          this.config = res.data.data
          this.currentView = 'zeroList'
          this.showPage = true
        })
      } else {
        getConfigData(this.modelId)
          .then((res) => {
            if (res.data.code !== 200) {
              this.$store.dispatch('tagsView/delView', this.$route)
              this.$router.replace('/404')
            }
            if (!res.data.data) return
            this.config = res.data.data
            // 设置浏览器标题
            document.title = res.data.data.fullName
            if (res.data.data.webType === '1') {
              this.currentView = 'Form'
            } else {
              if (window.innerWidth > 767) {
                this.currentView = 'List'
              } else {
                this.currentView = 'mobileList'
              }
            }
            this.showPage = true
          })
          .catch(() => {})
      }
    }
  }
}
</script>
