<template>
  <div style="height:100%">
  <UnAuthorizationBar @closeEvent="closeEvent" v-if="unAuthorization"/>
  <p-layout
    :menus="menus"
    :collapsed="collapsed"
    :mediaQuery="query"
    :isMobile="isMobile"
    :unAuthorization="unAuthorization"
    :siderWidth="settings.siderWidth"
    :handleMediaQuery="handleMediaQuery"
    :handleCollapse="handleCollapse"
    :i18nRender="i18nFnRender"
    v-bind="settings"
  >

    <!-- 1.0.0+ 版本 pro-layout 提供 API，
          我们推荐使用这种方式进行 LOGO 和 title 自定义
    -->
    <template v-slot:menuHeaderRender>
      <div>
        <logo-svg />
        <!-- <h1><title-svg/></h1> -->
        <div :class="'stitle ' + titleClz ">
          <div class="main-title">  {{ title }}</div>
          <div class="sub-title">{{subTitle}}</div>
        </div>
      </div>
    </template>
    <!-- 1.0.0+ 版本 pro-layout 提供 API,
          增加 Header 左侧内容区自定义
    -->
    <template v-slot:headerContentRender>
      <s-breadcrumb v-if="multiTab" style="margin-top:25px;" />
    </template>

    <multi-tab
      v-if="multiTab"
      :themeColor="settings.primaryColor"
      :siderWidth="settings.siderWidth"
      :contentWidth="settings.contentWidth"
      :i18nRender="i18nRender"
      @pages="handlPages"
    />

    <div class="plg-custome-content">
      <template v-for="(page, index) in multiTab?pages:[$route]" >
          <IframeView   v-if="page.meta.iframe" v-show="$route.fullPath==page.fullPath" :key="index" :path="page.meta.iframePath"/>
      </template>
      <router-view />
    </div>

    <setting-drawer ref="settingDrawer" :settings="settings" @change="handleSettingChange">
      <div style="margin: 12px 0">This is SettingDrawer custom footer content.</div>
    </setting-drawer>

    <template v-slot:rightContentRender>
      <right-content
        :top-menu="settings.layout === 'topmenu'"
        :is-mobile="isMobile"
        :theme="settings.theme"
        :themeColor="settings.primaryColor"
        @systemSettings="systemSettings"
      />
    </template>

    <!-- custom footer / 自定义Footer -->
    <template v-slot:footerRender>
      <global-footer />
    </template>
  </p-layout>
</div>
</template>

<script>
import SettingDrawer from '@/components/SettingDrawer/index.jsx'
import { updateTheme } from '@/components/_util/dynamicTheme'
import { i18nRender, i18nFnRender } from '@/locales'
import { mapState } from 'vuex'
import {
  SIDEBAR_TYPE,
  TOGGLE_MOBILE_TYPE,
  TOGGLE_NAV_THEME,
  TOGGLE_LAYOUT,
  TOGGLE_FIXED_HEADER,
  TOGGLE_FIXED_SIDEBAR,
  TOGGLE_CONTENT_WIDTH,
  TOGGLE_HIDE_HEADER,
  TOGGLE_PRIMARY_COLOR,
  TOGGLE_HEADER_STYLE,
  TOGGLE_WEAK,
  TOGGLE_MULTI_TAB,
  TOGGLE_ZOOM


} from '@/store/mutation-types'
import defaultSettings from '@/config/defaultSettings'
import RightContent from '@/components/GlobalHeader/RightContent'
import GlobalFooter from '@/components/GlobalFooter'
import LogoSvg from '../assets/logo.svg?inline'
import TitleSvg from '../assets/title.svg?inline'
import Breadcrumb from '@/components/tools/Breadcrumb'
import IframeView from '@/layouts/IframeView/Iframe.vue'
import UnAuthorizationBar from '@/components/UnAuthorizationBar'

export default {
  name: 'BasicLayout',
  components: {
    IframeView,
    SettingDrawer,
    RightContent,
    GlobalFooter,
    LogoSvg,
    TitleSvg,
    UnAuthorizationBar,
    's-breadcrumb': Breadcrumb
  },
  data() {
    return {
      // preview.pro.antdv.com only use.
      isProPreviewSite: process.env.VUE_APP_PREVIEW === 'true' && process.env.NODE_ENV !== 'development',
      // end
      showMultiTab: true,
      // base
      menus: [],
      // 侧栏收起状态
      collapsed: false,

      title: defaultSettings.title,
      subTitle:defaultSettings.subTitle,

      // 媒体查询
      query: {},
      options: [],
      // 是否手机模式
      isMobile: false,
      value: '',
      pages:[]
    }
  },

  computed: {


    ...mapState({
      // 动态主路由
      mainMenu: state => state.permission.addRouters,
      layout: state => state.app.layout,
      multiTab: state => state.app.multiTab,
      settings: state => {
        return {
          siderWidth: defaultSettings.siderWidth,
          // 布局类型
          layout: state.app.layout, // 'sidemenu', 'topmenu'
          // CONTENT_WIDTH_TYPE
          // contentWidth: defaultSettings.layout === 'sidemenu' ? CONTENT_WIDTH_TYPE.Fluid : defaultSettings.contentWidth,
          contentWidth: state.app.contentWidth,
          // 主题 'dark' | 'light'
          theme: state.app.theme,
          // 主色调
          primaryColor: state.app.primaryColor,
          headerStyle: state.app.headerStyle,
          fixedHeader: state.app.fixedHeader,
          fixSiderbar: state.app.fixedSidebar,
          colorWeak: state.app.weak,
          multiTab: state.app.multiTab,
          zoom: state.app.zoom
        }
      },
      unAuthorization: state => state.app.unAuthorization
    }),
    titleClz() {
      if (this.settings.theme == 'dark') {
        return 'light'
      }
      if (this.settings.headerStyle == 'none') {
        return 'dark'
      } else {
        return 'light'
      }
    }
  },
  created() {
    // const { layout } = this
    // this.settings.layout = layout
    // if (layout == 'sidemenu') {
    //   this.settings.fixSiderbar = true
    //   this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fluid
    // } else {
    //   this.settings.fixSiderbar = false
    //   this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fluid
    // }
    // this.$store.commit(TOGGLE_LAYOUT, layout)
    const routes = this.mainMenu.find(item => item.path === '/')
    /**
     * 隐藏一级目录逻辑
     */
    if (defaultSettings.hideTopMenu) {
      if (routes && routes.children) {
        var chrs = []
        routes.children.forEach(x => {
          if (x.children) {
            x.children.forEach(y => {
              chrs.push(y)
            })
          }
        })
        this.menus = chrs
      }
    } else {
      this.menus = (routes && routes.children) || []
    }
    // 处理侧栏收起状态
    this.$watch('collapsed', () => {
      this.$store.commit(SIDEBAR_TYPE, this.collapsed)
    })
    this.$watch('isMobile', () => {
      this.$store.commit(TOGGLE_MOBILE_TYPE, this.isMobile)
    })

    const { menus } = this.$store.state.user
    this.options = menus.map((o, index) => {
      return {
        label: o.name,
        value: `${o.path}__${index}`
      }
    })
  },
  mounted() {
    const userAgent = navigator.userAgent
    if (userAgent.indexOf('Edge') > -1) {
      this.$nextTick(() => {
        this.collapsed = !this.collapsed
        setTimeout(() => {
          this.collapsed = !this.collapsed
        }, 16)
      })
    }
    // first update color
    // TIPS: THEME COLOR HANDLER!! PLEASE CHECK THAT!!
    // updateTheme(this.settings.primaryColor)

    // if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
    //   updateTheme(this.settings.primaryColor)
    // }
  },
  methods: {
    i18nRender,
    i18nFnRender,
    closeEvent() {
      this.$store.state.unAuthorization = false
      this.$store.commit('SET_UN_AUTHORIZATION', false)
      console.log(this.unAuthorization)
    },
    systemSettings() {
      this.$refs.settingDrawer.setShow(true)
    },

    handlPages(value){
      this.pages=value
    },

    handleMediaQuery(val) {
      this.query = val
      if (this.isMobile && !val['screen-xs']) {
        this.isMobile = false
        return
      }
      if (!this.isMobile && val['screen-xs']) {
        this.isMobile = true
        this.collapsed = false
        this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fluid
        // this.settings.fixSiderbar = false
      }
    },
    handleCollapse(val) {
      this.collapsed = val
    },
    handleSettingChange({ type, value }) {
      //console.log(type, value)
      //type && (this.settings[type] = value)
      let tp
      switch (type) {
        case 'contentWidth':
          tp = TOGGLE_CONTENT_WIDTH
          break
        case 'theme':
          tp = TOGGLE_NAV_THEME
          break
        case 'headerStyle':
          tp = TOGGLE_HEADER_STYLE
          break
        case 'primaryColor':
          tp = TOGGLE_PRIMARY_COLOR
          break
        case 'colorWeak':
          tp = TOGGLE_WEAK
          break
        case 'multiTab':
          tp = TOGGLE_MULTI_TAB
          break
        case 'fixedHeader':
          tp = TOGGLE_FIXED_HEADER
          break
        case 'fixSiderbar':
          tp = TOGGLE_FIXED_SIDEBAR
          break

        case 'zoom':
          tp = TOGGLE_ZOOM
          break

        case 'layout':
          // if (value === 'sidemenu') {
          //   this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fluid
          // } else {
          //   this.settings.fixSiderbar = false
          //   this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fixed
          // }
          tp = TOGGLE_LAYOUT
          break
      }

      tp && this.$store.commit(tp, value)
    }
  }
}
</script>

<style lang="less">
@import './BasicLayout.less';
@import '../assets/css/font.less';
.plg-custome-content {
  height: inherit;
  padding: 50px 10px 0 10px;
}
.ant-pro-grid-content{
    overflow-y: auto;
    height: inherit;
    position: relative;

}
.ant-pro-setting-drawer-handle {
  display: none;
}
.stitle {
  display: inline-block;
  font-size: 14px;
  line-height: 18px;
  font-weight: bold;
  position: relative;
  top: 12px;
  left: 10px;
  font-family: plgFont1;

  &.light {
    color: #fff;
  }
  &.dark {
    color: #333;
  }
  .main-title {
  }
  .sub-title {
    font-size: 12px;
    // font-style: italic;
    font-family: alibabaPHFont1;
  }
}

// .ant-pro-grid-content.wide {
//   max-width: 100% !important;
// }
// .ant-pro-top-nav-header-main.wide {
//   max-width: 90% !important;
// }
// .ant-pro-top-nav-header-menu{
//    max-width: 100% !important;
// }
</style>
