<template>
  <div class="fullheight appcontent-div__content">
    <app-portal
      v-if="type === 1"
      ref="htPortal"
      :key="id"
      :column-layout-alias="alias"
    ></app-portal>
    <div v-if="type === 4" class="chart-wrapper">
      <ht-chart :id="id" :key="id" :chart-key="id" />
    </div>
    <!-- 数据报表-->
    <template-preview
      v-else-if="type === 2"
      ref="templatePreview"
      :key="id"
      :template-key="alias"
    />
    <!-- 自定义视图-->
    <query-sql-preview
      v-else-if="type === 3"
      :key="id"
      :sql-view-id="id"
      :single="true"
    />
    <!-- 表单预览-->
    <form-preview
      v-else-if="type === 6"
      :key="alias"
      :form-id="id"
      :single="true"
      :form-key="alias"
    />
    <amis v-else-if="type === 5 && amisAlias" :alias="amisAlias" />
    <iframe
      v-else-if="type === 5 || type === 7 || type === 8 || type === 11"
      style="width: 100%"
      frameborder="0"
      class="fullheight"
      allowtransparency="0"
      :src="path"
      :height="tableHeight"
    ></iframe>

    <DatavDesignPreview
      v-else-if="type === 9"
      ref="datavDesign"
      :key="id"
      :layout="null"
      :alias="alias"
    />

    <mail-box v-else-if="type === 163" />
    <message-center v-else-if="type === 164" />
    <div v-else style="height: 100%; margin-top: 160px">
      <el-empty
        :image-size="380"
        :image="noDataImg"
        description="无菜单权限或菜单可预览"
      ></el-empty>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getMainByDefKey } from '@/api/appCenter.js'
  const templatePreview = () =>
    import('@/components/dataTemplate/TemplatePreview.vue')
  const QuerySqlPreview = () =>
    import('@/components/querySql/QuerySqlPreview.vue')
  const FormPreview = () => import('@/components/form/FormPreview.vue')
  const DatavDesignPreview = () =>
    import('@/components/datav/DatavDesignPreview.vue')
  const MailBox = () => import('@/views/personal/mail/index')
  const MessageCenter = () => import('@/views/personal/message/index')
  const AppPortal = () => import('@/views/app/portal/AppPortal')
  const EMPTY_IMAGE = require('@/assets/nodata_images/no-data.png')
  import { isExternal } from '@/utils/validate'
  export default {
    name: 'Index',
    components: {
      templatePreview,
      QuerySqlPreview,
      FormPreview,
      DatavDesignPreview,
      MailBox,
      MessageCenter,
      AppPortal,
    },
    data() {
      return {
        id: '',
        type: '',
        path: '',
        alias: '',
        noDataImg: EMPTY_IMAGE,
        amisAlias: '',
      }
    },
    computed: {
      tableHeight() {
        return this.$baseTableHeight() + 100
      },
      ...mapGetters({
        activeMenu: 'app/activeMenu',
        tileMenus: 'app/tileMenus',
        accessToken: 'user/accessToken',
      }),
    },
    watch: {
      activeMenu() {
        this.initMain()
      },
    },
    mounted() {
      this.initMain()
    },
    methods: {
      async initMain() {
        if (this.activeMenu) {
          let val = this.activeMenu
          this.type = val.type
          if (val.type === 5) {
            this.handlerPath(val)
            return
          }
          this.updateRoute()
          if (val.type === 11) {
            if (!val.content) return
            if (val.content.includes('?')) {
              this.path = `${window.context.front}${val.content}&application=true&__isFull__=true`
            } else {
              this.path = `${window.context.front}${val.content}?&application=true&__isFull__=true`
            }
            return
          }
          if (val.type === 7) {
            let content = JSON.parse(val.content)
            this.path = `${window.context.front}/sysModulePreview/${content.id}/${val.name}?token=${this.accessToken}`
            return
          }
          if (val.type === 8) {
            let content = JSON.parse(val.content)
            let resp = {}
            let url
            if (content.key) {
              resp = await getMainByDefKey(content.key)
              url = `/matter/startProcess?defId=${resp.id}&name=${content.name}&__isFull__=true`
            } else {
              url = `/matter/startProcess?defId=${content.id}&name=${content.name}&__isFull__=true`
            }
            this.path = `${window.context.front}${url}`
          }
          if (val.type === 6) {
            let content = JSON.parse(val.content)
            this.alias = content.key
            this.id = content.id
            return
          }
          if (val.content) {
            let content = JSON.parse(val.content)
            this.id = content.id
            this.alias = content.alias
          }
        }
      },
      handlerPath(val) {
        const path = val.content
        this.amisAlias = ''
        if (isExternal(path)) {
          // 如果是网页地址则走原来的逻辑
          this.path = path
          this.updateRoute()
        } else if (/^amis\//.test(path)) {
          // amis开头的则是amis页面
          const route = this.$router.match(
            `app/${this.$route.params.id}/${path}`
          )
          this.amisAlias = route.params.amisAlias
          this.updateRoute()
        } else if (/^\//.test(path)) {
          // /开头的地址是平台级路由跳转
          this.$router.push(path)
        } else {
          // 剩下为应用内跳转
          this.$router.push(`${this.$route.params.id}/${path}`)
        }
      },
      // 更新路由
      updateRoute() {
        if (this.$route.params.alias === this.activeMenu.alias) {
          // 别名没变化不处理
          return
        }
        this.$router.push({
          name: 'app',
          params: { ...this.$route.params, alias: this.activeMenu.alias },
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .fullheight {
    overflow: hidden;
  }
  .chart-wrapper {
    height: 100%;
    background: white;
    padding: 16px;
  }
</style>