<template>
  <el-container class="fullheight">
    <el-aside
      :width="asideShow ? '222px' : '73px'"
      class="sysmodule__preview-aside"
    >
      <!-- <el-page-header
        style="padding: 10px; background: #eee"
        @back="$emit('close-dialog')"
      >
        <template #content>预览</template>
      </el-page-header> -->
      <el-menu
        default-active="0_0"
        class="el-menu-vertical-demo"
        style="border-right: none"
        :collapse="!asideShow"
        unique-opened
        :menu-trigger="'click'"
        @select="handleSelect"
      >
        <el-submenu
          v-for="(item, index) in menuData"
          :key="index"
          :index="index + ''"
        >
          <template slot="title">
            <template v-if="asideShow">
              <i class="el-icon-menu"></i>
              <span class="title-text">{{ item.text }}</span>
            </template>
            <template v-else>
              <div class="submenu-title__wrap">
                <i class="el-icon-menu"></i>
                <div class="title-text">{{ item.text }}</div>
              </div>
            </template>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="(obj, index1) in item.children"
              :key="index1"
              :index="index + '_' + index1"
            >
              <div class="menu-item__text">
                {{ obj.text }}
              </div>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
      <div class="aside-collapse-wrap" @click="handleCollapse">
        <i
          class="collapse-icon"
          :class="asideShow ? 'icon-unfold' : 'icon-fold'"
          :title="asideShow ? '收起' : '展开'"
        ></i>
        <span v-show="asideShow" class="text">
          {{ asideShow ? '收起' : '展开' }}
        </span>
      </div>
    </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-container>
      <iframe
        v-if="isShowIframe"
        id="myIframe"
        style="width: 100%"
        frameborder="0"
        allowtransparency="0"
        :src="iframeSrc"
      ></iframe>
      <ht-template-preview
        v-else-if="isDatalistList"
        :template-key="templateKey"
        :rkey="rkey"
        style="width: 100%"
        :from-module="true"
      />
      <div v-else style="width: 100%" class="charts-wrap">
        <ht-chart :id="chartId" :alias="curClickItem.code" :chart-key="chartId" />
      </div>
    </el-container>
  </el-container>
</template>
<script>
  import { Base64 } from 'js-base64'
  export default {
    name: 'SysModulePreview',
    // components: {
    //   TemplatePreview: () =>
    //     import('@/components/form/dataTemplate/TemplatePreview'),
    // },
    props: ['data', 'dialogVisible'],
    data() {
      return {
        asideShow: true,
        workspaceList: [],
        datalistList: [],
        viewlistList: [],
        isShowIframe: true,
        chartId: '',
        iframeSrc: '',
        menuData: {},
        chartList: [],
        menuTypeList: [
          { type: 'workspaceList', name: '工作空间' },
          { type: 'datalistList', name: '数据列表' },
          { type: 'viewlistList', name: '视图列表' },
          { type: 'chartList', name: '图表列表' },
          { type: 'otherList', name: '栏目列表' },
        ],
        otherList: [],
        templateKey: '',
        isDatalistList: false,
        curClickItem:{}
      }
    },
    computed: {
      rkey() {
        return `${Date.parse(new Date())}_${Math.ceil(Math.random() * 99999)}`
      },
    },
    watch: {
      'data.id': function () {
        this.init()
        this.initDetails(this.data)
        var menuData = []
        this.initMenuData(menuData)
        this.menuData = menuData
        this.templateKey = this.datalistList[0] ? this.datalistList[0].code : ''
      },
    },

    mounted() {
      this.initDetails(this.data)
      var menuData = []
      this.initMenuData(menuData)
      this.menuData = menuData
      this.templateKey = this.datalistList[0] ? this.datalistList[0].code : ''
    },
    created() {},
    methods: {
      init() {
        this.workspaceList = []
        this.datalistList = []
        this.viewlistList = []
        this.iframeSrc = ''
        this.menuData = {}
        this.chartList = []
        this.menuTypeList = [
          { type: 'workspaceList', name: '工作空间' },
          { type: 'datalistList', name: '数据列表' },
          { type: 'viewlistList', name: '视图列表' },
          { type: 'chartList', name: '图表列表' },
          { type: 'otherList', name: '栏目列表' },
        ]
        this.otherList = []
      },
      initDetails(data) {
        if (data.moduleDetail && data.moduleDetail.length > 0) {
          for (var i = 0; i < data.moduleDetail.length; i++) {
            var type = data.moduleDetail[i].type
            switch (type) {
              case 'workspace':
                this.workspaceList.push(data.moduleDetail[i])
                break
              case 'datalist':
                this.datalistList.push(data.moduleDetail[i])
                break
              case 'viewlist':
                this.viewlistList.push(data.moduleDetail[i])
                break
              case 'chart':
                this.chartList.push(data.moduleDetail[i])
                break
              case 'other':
                this.otherList.push(data.moduleDetail[i])
                break
            }
          }
        }
      },
      initMenuData(menuData) {
        for (var k = 0; k < this.menuTypeList.length; k++) {
          var type = this.menuTypeList[k].type
          if (this[type].length > 0) {
            var typeList = this[type]
            if (type == 'otherList') {
              var map = {}
              for (var i = 0; i < typeList.length; i++) {
                if (!map[typeList[i].columnName]) {
                  map[typeList[i].columnName] = typeList[i].columnName
                  var item = {
                    text: typeList[i].columnName,
                    children: [],
                  }
                  for (var n = 0; n < typeList.length; n++) {
                    if (typeList[i].columnName == typeList[n].columnName) {
                      var sub = {
                        text: typeList[n].name,
                        code: typeList[n].code,
                        type: type,
                        url: typeList[n].url,
                      }
                      item.children.push(sub)
                    }
                  }
                  menuData.push(item)
                }
              }
            } else {
              var item = {
                text: this.menuTypeList[k].name,
                children: [],
              }
              for (var i = 0; i < typeList.length; i++) {
                var sub = {
                  text: typeList[i].name,
                  code: typeList[i].code,
                  type: type,
                  url: typeList[i].url,
                }
                item.children.push(sub)
              }
              menuData.push(item)
            }
          }
        }
        if (menuData.length > 0) {
          let item = menuData[0].children[0]
          this.iframeSrc = this.getUrl(item.url, item.type)
        }
      },
      handleSelect(index) {
        var path = index.split('_')
        if (path.length > 1) {
          let item = this.menuData[path[0]].children[path[1]]
          if (item.type === 'datalistList') {
            this.templateKey = item.code
          }
          this.curClickItem = item
          this.iframeSrc = this.getUrl(item.url, item.type)
        }
      },
      getUrl(url, type) {
        this.isShowIframe = true
        if (type === 'datalistList') {
          this.isDatalistList = true
        } else if (
          url.includes('templatePreview') &&
          type === 'workspaceList'
        ) {
          this.templateKey = url.split('/')[2] || ''
          this.isDatalistList = true
        } else {
          this.isDatalistList = false
        }
        var iframeSrc = url
        switch (type) {
          case 'workspaceList':
            this.isShowIframe = this.isDatalistList ? false : true
            iframeSrc = `${window.context.front}${url}&token=${this.$store.state.user.accessToken}`
            break
          case 'datalistList':
            this.isShowIframe = false
            break
          case 'viewlist':
            break
          case 'chartList':
            this.isShowIframe = false
            this.chartId = url
            break
        }
        return iframeSrc
      },
      handleCollapse() {
        this.asideShow = !this.asideShow
      },
    },
  }
</script>
<style lang="scss" scoped>
  ::v-deep .navbar-collapse {
    margin-top: 50px;
    width: 0;
    z-index: 9999;
  }
  ::v-deep .navbar-collapse-bg {
    margin-left: 1px;
    height: 28px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 10px solid #fcfcfc;
    border-right: none;
    position: relative;
  }
  ::v-deep .navbar-collapse-bg:hover {
    cursor: pointer;
  }
  ::v-deep .navbar-collapse-arrow {
    position: absolute;
    left: -12px;
    top: 7px;
  }
  ::v-deep .el-tabs__content {
    padding-left: 20px;
  }
  .sysmodule__preview-aside {
    padding: 24px 0;
    // border-right: 1px solid #eee;
    background: #fcfcfc;
    position: relative;
  }
  .el-menu-vertical-demo,
  ::v-deep .el-menu-item-group {
    background: #fcfcfc;
  }
  .el-menu-item {
    line-height: 36px !important;
    height: 36px !important;
  }
  .charts-wrap {
    padding: 10px 24px;
    box-sizing: border-box;
  }

  .aside-collapse-wrap {
    border-top: 1px solid #ebebeb;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 24px;

    height: 40px;
    line-height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 30px);

    cursor: pointer;
    .collapse-icon {
      font-size: 18px;
    }
    .text {
      margin-left: 8px;
      color: #262626;
      font-size: 14px;
    }
  }
  ::v-deep {
    .el-menu {
      .second-menu.is-active.is-opened {
        .el-submenu__title {
          color: var(--themeColor) !important;
        }
        .three-menu {
          .sub-menu-title {
            color: var(--menuColor) !important;
          }
        }
      }
      .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
        transform: rotateZ(0deg);
        color: var(--themeColor);
      }
      .el-submenu {
        .is-active {
          .sub-menu-child__title {
            &::before {
              background: $base-color-white;
              border-color: var(--themeColor);
            }
          }
        }
        .el-menu-item-group__title {
          display: none;
        }
        .el-menu-item {
          height: $base-menu-item-height;
          line-height: unset;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding-left: 48px !important;
        }
        .sub-menu-child__title {
          padding-left: 36px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .el-submenu.is-active {
        .ht-fa-icon {
          color: var(--themeColor);
        }
      }
    }

    .dark-menu,
    .mashup-menu {
      .el-menu-item.is-active {
        color: $base-color-white !important;
        background-color: var(--themeColor) !important ;
      }
    }

    .el-submenu__title {
      min-height: 40px !important;
      height: 40px !important;
      line-height: 40px;
      color: #262626;
    }
  }
  .el-icon-menu {
    color: #262626;
  }
  .menu-item__text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .submenu-title__wrap {
    display: flex;
    align-items: center;
    flex-direction: column;
    .title-text {
      width: 64px;
      text-align: center;
      line-height: 20px;
      word-break: break-all;
      white-space: normal;
    }
  }
  .el-menu-vertical-demo {
    & > .el-submenu:first-child {
      margin-top: 5px;
    }
  }
  ::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 20px;
  }
  ::v-deep .top_btn_col .data-form-list__top-btn {
    margin-bottom: 10px;
  }
  ::v-deep {
    .el-submenu__title i {
      color: #909399 !important;
      transform: rotate(-90deg);
      font-size: 16px;
    }
  }

  .el-menu--collapse {
    .el-submenu {
      padding: 12px 8px 12px 4px;
    }
    .el-submenu.is-active {
      background-color: #e0f0ff !important;
      border-left: 4px solid #0080fe;
    }
    width: 73px;
    .el-menu-vertical-demo {
      width: 73px;
      padding-right: 3px;
    }
  }
  .el-menu-item-group .el-menu-item.is-active {
    background-color: #e0f0ff !important ;
    color: #0080fe;
    border-left: 4px solid #0080fe;
    padding-left: 44px !important;
  }
</style>