<template>
  <div class="fullheight appcontent-div__content">
    <!-- 图表-->
    <ht-chart v-if="type === '4'" :id="id" :chart-key="id" />
    <!-- 数据报表-->
    <template-preview v-else-if="type === '2'" :template-key="id" />
    <!-- 自定义视图-->
    <query-sql-preview
      v-else-if="type === '3'"
      :sql-view-id="id"
      :single="true"
    />
    <!-- 表单预览-->
    <form-preview
      v-else-if="type === '6'"
      :form-id="id"
      :single="true"
      :form-key="alias"
    />

    <iframe
      v-else-if="type === '7'"
      style="width: 100%"
      frameborder="0"
      class="fullheight"
      allowtransparency="0"
      :src="path"
      :height="tableHeight"
    ></iframe>

    <DatavDesignPreview
      v-else-if="type === '9'"
      ref="datavDesign"
      :layout="null"
      :alias="app.alias"
    />

    <app-portal v-else-if="type === '1'" :column-layout-alias="id"></app-portal>

    <!-- 常规应用 -->
    <el-container v-else style="height: 95%" class="fullheight">
      <el-aside v-if="asideShow" class="aside-menu__wrap">
        <p class="flow_tree_top_title">{{ appName }}</p>
        <el-menu :default-active="firstMenuId" class="appcontent__menu">
          <template v-for="menu in menus">
            <el-submenu
              v-if="menu.children.length > 0"
              :key="menu.id"
              :index="menu.id"
            >
              <template slot="title">
                <span>{{ menu.name }}</span>
              </template>
              <el-menu-item
                v-for="child in menu.children"
                :key="child.id"
                :index="child.id"
                @click="open(child)"
              >
                {{ child.name }}
              </el-menu-item>
            </el-submenu>
            <el-menu-item
              v-else
              :key="menu.id"
              :index="menu.id"
              @click="open(menu)"
            >
              {{ menu.name }}
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <div
        class="navbar-collapse"
        :class="{ 'navbar-collapse-right': !asideShow }"
        @click="asideShow = !asideShow"
      >
        <div class="navbar-collapse-bg">
          <i
            class="navbar-collapse-arrow"
            :class="{
              'el-icon-arrow-left': asideShow,
              'el-icon-arrow-right': !asideShow,
            }"
          ></i>
        </div>
      </div>
      <el-main
        :style="app.type === 1 ? { overflowY: 'hidden' } : {}"
        :class="{ 'url-iframe__wrap': app.type === 1 }"
        class="app__main-content"
      >
        <h3 v-if="app.type === 1" class="flow_table_title">
          {{ currentActiveMenuName }}
        </h3>
        <!-- 图表-->
        <ht-chart
          v-if="app.type === 4"
          :id="app.id"
          :key="app.id"
          :chart-key="app.id"
        />
        <!-- 数据报表-->
        <template-preview
          v-else-if="app.type === 2"
          :key="app.alias"
          :template-key="app.alias"
        />
        <!-- 自定义视图-->
        <query-sql-preview
          v-else-if="app.type === 3"
          :key="app.id"
          :sql-view-id="app.id"
          :single="true"
        />
        <!-- 表单预览-->
        <form-preview
          v-else-if="app.type === 6"
          :key="app.id"
          :form-id="app.id"
          :single="true"
        />
        <!-- 网页链接-->
        <iframe
          v-else-if="app.type === 1"
          style="width: 100%; overflow-y: hidden"
          frameborder="0"
          class="fullheight iframe-class"
          allowtransparency="0"
          :src="getUrl(app.url)"
        />
      </el-main>
    </el-container>
  </div>
</template>

<script>
  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 AppPortal = () => import('@/views/app/portal/AppPortal')
  import { mapGetters } from 'vuex'
  export default {
    name: 'AppContent',
    components: {
      templatePreview,
      QuerySqlPreview,
      FormPreview,
      DatavDesignPreview,
      AppPortal,
    },
    data() {
      return {
        currentActiveMenuName: '',
        firstMenuId: null,
        asideShow: true,
        title: '',
        iframeSrc: '',
        menus: [],
        app: {
          id: '',
          type: 0,
          key: '',
          sqlAlias: '',
          alias: '',
          url: '',
        },
        path: '',
        //url的参数
        id: '',
        type: '',
        appName: '',
        alias: '',
      }
    },
    computed: {
      ...mapGetters('user', ['accessToken']),
      tableHeight() {
        return this.$baseTableHeight() + 100
      },
    },
    created() {
      this.getParamsByUrl()
      this.init()
    },
    methods: {
      //返回
      goBack() {
        this.$router.go(-1)
      },
      getParamsByUrl() {
        this.id = this.$route.query.id
        this.type = this.$route.query.type
        this.appName = this.$route.query.appName
        this.alias = this.$route.query.alias
      },
      //初始化标题和类型
      init() {
        const titleMap = {
          1: '门户',
          2: '表单报表',
          3: '数据列表',
          4: '图表',
          6: '表单',
          7: '模块开发',
          8: '流程启动',
          9: '大屏展示',
        }
        this.title = titleMap[this.type]
        if (this.type === '7') {
          this.path = `${window.context.front}/sysModulePreview/${this.id}/${this.appName}?token=${this.accessToken}`
        }
      },
      getUrl(url) {
        if (url.startsWith('http') || url.startsWith('https')) {
          return url
        } else return `${window.context.front}/${url}`
      },
      //点击菜单
      open(menu) {
        this.currentActiveMenuName = menu ? menu.name : ''
        //菜单类型为链接菜单时不用转content内容
        if (menu.type === 1) {
          this.app = {
            url:
              menu.content.indexOf('?') == -1
                ? menu.content + '?token=' + this.accessToken
                : menu.content + '&token=' + this.accessToken,
            type: menu.type,
          }
          return
        }
        //其他类型需要转换content内容
        let content = JSON.parse(menu.content)
        this.app = {
          id: content.id,
          type: menu.type,
          key: content.key,
          sqlAlias: content.sqlAlias,
          alias: content.alias,
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .appcontent-div__content {
    padding: 10px;
    height: calc(100% - 20px);
    overflow: auto;
    .aside-menu__wrap {
      height: 100%;
      border-right: 1px solid #ccc;
      margin-top: 8px;
    }
    .url-iframe__wrap {
      padding-left: 0;
      padding-top: 8px;
    }
    .app__main-content {
      padding: 0;
    }
    .flow_table_title {
      margin-top: 0;
      background: #fff;
      padding-top: 10px;
      padding-bottom: 11px;
    }
    .flow_tree_top_title {
      margin-top: 8px;
      padding-top: 2px;
      margin-bottom: 0;
    }
    .appcontent__menu {
      background: #f5f5f5;
    }

    .navbar-collapse {
      margin-top: 50px;
      width: 0;
      .navbar-collapse-bg {
        margin-left: 1px;
        height: 28px;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 10px solid #f5f5f5;
        border-right: none;
        position: relative;
        cursor: pointer;
        .navbar-collapse-arrow {
          position: absolute;
          left: -12px;
          top: 7px;
        }
      }
    }
  }
  .iframe-class {
    height: calc(100% - 50px);
  }
</style>