<!--
 * @Author: wlo_o
 * @Date: 2022-01-24 16:26:39
 * @LastEditors: Jone
 * @LastEditTime: 2022-07-11 15:19:03
 * @FilePath: /frontend/lib/components/MdMainWrap.vue
 * @Description: 入口组件
 *
 * Copyright (c) 2022 by 青岛百洋智能科技股份有限公司, All Rights Reserved.
-->
<template>
  <div class="height100">
    <el-container
      v-loading="loading"
      class="height100"
    >
      <component
        :is="componentName"
        v-bind="cfg.attrs"
      >
        <el-menu
          :unique-opened="true"
          :default-active="activeIndex"
          :mode="cfg.mode"
          ref="menu"
        >
          <component
            v-for="(menu, idx) in cfg.menus"
            :is="menu.children&&menu.children.length?'el-submenu':'el-menu-item'"
            :key="`menu_item_${idx}`"
            v-bind="menu.attrs"
            v-on="menu.on||{}"
          >
            <template slot="title">{{menu.title}}</template>
            <template v-if="menu.children&&menu.children.length">
              <el-menu-item
                v-for="(node,i) in menu.children"
                :key="`menu_item_${idx}_${i}`"
                v-bind="node.attrs"
                v-on="node.on||{}"
              >
                {{node.title}}
              </el-menu-item>
            </template>
          </component>
          <!-- <el-submenu index="1">
            <template slot="title">元数据资源</template>
            <el-menu-item index="1-1"
              @click="onMenuClick('md-element-list',{title:'元数据资源',showTabs:true,showSelectAllTag:true,type:'1',showImport:true})"
            >元数据资源</el-menu-item>
            <el-menu-item index="1-2"
              @click="onMenuClick('md-element-form',{title:'新增数据元',type: '1',id:''})"
            >新增数据元</el-menu-item>
            <el-menu-item index="1-3"
              @click="onMenuClick('md-element-form',{title:'新增值域',type: '2',id:''})"
            >新增值域</el-menu-item>
            <el-menu-item index="1-4"
              @click="onMenuClick('md-element-form',{title:'新增统计指标',type: '3'})"
            >新增统计指标</el-menu-item>
            <el-menu-item index="1-5"
              @click="onMenuClick('md-set-list',{title:'自建数据集', type: '4'})"
            >自建数据集</el-menu-item>
          </el-submenu>
          <el-menu-item index="3"
            @click="onMenuClick('md-category',{editable: true,showTabs:true})"
            >文件标签管理</el-menu-item> -->
        </el-menu>
      </component>
      <el-main :style="elMainStyle">
        <component
          :is="$OecpMetaDataEventBus.component.componentName"
          :key="`component_${new Date().getTime()}`"
          v-bind="$OecpMetaDataEventBus.component.attrs"
        ></component>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import Vue from 'vue'
import { t as lang } from '../locale/index.js'
import OptionsMixin from '../mixins/OptionsMixin'
import merge from 'lodash/merge'
import isEmpty from 'lodash/isEmpty'
import isFunction from 'lodash/isFunction'
import get from 'lodash/get'

export default {
  mixins: [OptionsMixin],
  data() {
    return {
      loading: true,
      lang,
      activeIndex: '1-1',
      componentName: 'el-aside',
      cfg: {
        // 默认菜单
        mode: 'vertical',
        attrs: { width: '200px' },
        menus: [
          {
            title: '元数据资源',
            attrs: { index: '1' },
            children: [
              {
                title: '元数据资源',
                attrs: { index: '1-1' },
                on: {
                  click: function () {
                    this.onMenuClick('md-element-list', {
                      title: '元数据资源',
                      showTabs: true,
                      showSelectAllTag: true,
                      type: '1',
                      showImport: true,
                    })
                  },
                },
              },
              {
                title: '新增数据元',
                attrs: { index: '1-2' },
                on: {
                  click: function () {
                    this.onMenuClick('md-element-form', {
                      title: '新增数据元',
                      showTabs: true,
                      showSelectAllTag: true,
                      type: '1',
                    })
                  },
                },
              },
              {
                title: '新增值域',
                attrs: { index: '1-3' },
                on: {
                  click: function () {
                    this.onMenuClick('md-element-form', {
                      title: '新增值域',
                      showTabs: true,
                      showSelectAllTag: true,
                      type: '2',
                    })
                  },
                },
              },
              {
                title: '新增统计指标',
                attrs: { index: '1-4' },
                on: {
                  click: function () {
                    this.onMenuClick('md-element-form', {
                      title: '新增统计指标',
                      showTabs: true,
                      showSelectAllTag: true,
                      type: '3',
                    })
                  },
                },
              },
              {
                title: '自建数据集',
                attrs: { index: '1-5' },
                on: {
                  click: function () {
                    this.onMenuClick('md-set-list', { title: '自建数据集', type: '4' })
                  },
                },
              },
              {
                title: '自定义模板',
                attrs: { index: '1-6' },
                on: {
                  click: function () {
                    this.onMenuClick('md-custom-module', { title: '自定义模板', type: '5' })
                  },
                },
              },
            ],
          },
          {
            title: '元数据资源',
            attrs: { index: '2' },
            on: {
              click: function () {
                this.onMenuClick('md-category', {
                  editable: true,
                  showTabs: true,
                })
              },
            },
          },
        ],
      },
    }
  },
  methods: {
    elMainStyle() {
      let cfg = this.getMetaDataConfig()
      return {
        // position: 'absolute',
        flex: 1,
        left: get(cfg, 'attrs.width') || '0',
        right: '0',
        top: '60px',
        bottom: '0',
        'overflow-y': 'scroll',
      }
    },
    getMetaDataConfig() {
      return merge({ mode: 'vertical', attrs: { width: '200px' } }, this.getMbOptionVar('metaDataConfig'))
    },
    getCfg() {
      let that = this
      let cfg = this.getMetaDataConfig()
      console.log('cfg', cfg)
      this.componentName = cfg.mode === 'vertical' ? 'el-aside' : 'el-header'
      if (cfg.menus && cfg.menus.length) {
        cfg.menus.forEach(root => {
          if (!isEmpty(root.on)) {
            for (let key in root.on) {
              isFunction(root.on[key]) && (root.on[key] = root.on[key].bind(that))
              // console.log('bind' + root.title + ':' + key)
            }
          }
          if (isEmpty(root.children)) return
          root.children.forEach(node => {
            if (isEmpty(node.on)) return
            for (let key in node.on) {
              isFunction(node.on[key]) && (node.on[key] = node.on[key].bind(that))
            }
          })
        })
      }
      return cfg
    },
    onMenuClick(component, attrs) {
      this.$OecpMetaDataEventBus.component.componentName = component
      this.$OecpMetaDataEventBus.component.attrs = { ...attrs }
    },
  },
  created() {
    let that = this
    this.$OecpMetaDataEventBus.component = Vue.observable({ componentName: 'span', attrs: {} })
    this.$OecpMetaDataEventBus.ready.promise.then(function () {
      that.loading = false
      that.cfg = that.getCfg()
      let { menuDefaultActive: defaultActive, menus = [] } = that.cfg
      if (defaultActive) {
        let idx = null
        let clickFn = null
        for (let i = 0; i < menus.length; i++) {
          let menu = menus[i]
          if (get(menu, 'attrs.index') === defaultActive) {
            idx = i + 1
            clickFn = get(menu, 'on.click')
          } else if (menu.children && menu.children.length) {
            let item = menu.children.find(item => get(item, 'attrs.index') === defaultActive)
            if (item) {
              idx = i + 1
              clickFn = get(item, 'on.click')
            }
          }
          if (idx) {
            break
          }
        }
        if (idx) {
          that.$refs.menu.open(idx)
          clickFn && clickFn.call(that)
        }
      }
    })
  },
}
</script>
<style scoped>
.height100 {
  height: 100%;
  flex: 1;
  overflow: auto;
}
.el-aside,
/deep/.el-menu {
  background: #001628;
  border-right: none !important;
}

.el-menu-item,
/deep/.el-submenu__title {
  color: #fff;
}

.el-menu-item.is-active {
  color: #fff;
  background: #2468f2;
}

.el-menu-item:hover,
/deep/.el-submenu__title:hover {
  background: #4479e3;
  color: #f5f5f5;
}

.el-submenu__icon-arrow {
  color: #fff !important;
}
.el-main {
  background: #ebeff2;
  padding: 0 12px 20px 12px !important;
}
</style>
