<template>
  <div class="fp-design-container">
    <fp-header/>
    <fp-aside/>
    <fp-aside-extend class="noselect">
      <fp-aside-panel-component v-if="activeId === 3"/>
      <fp-aside-material v-if="activeId === 2"/>
      <fp-aside-panel-layer v-if="activeId === 4"/>
      <fp-aside-panel-poster v-if="activeId === 5"/>
      <fp-aside-batch v-if="activeId === 6"/>
    </fp-aside-extend>
    <fp-main-container/>
    <fp-setting-container/>
    <fp-debug-panel/>
    <fp-login/>
    <fp-change-pwd/>
    <fp-token-manager/>
    <fp-user-manager/>
    <fp-code-container/>
    <fp-batch/>
  </div>
</template>

<script>
import FpHeader from "./header/FpHeader";
import FpAside from "./aside/FpAside";
import FpAsideExtend from "./aside/FpAsideExtend";
import {mapState} from 'vuex'
import FpMainContainer from "./editor/FpMainContainer";
import FpSettingContainer from "./setting/FpSettingContainer";
import FpDebugPanel from "./debug/FpDebugPanel";
import FpAsidePanelComponent from "./aside/extend/FpAsideComponent";
import FpAsidePanelLayer from "./aside/extend/FpAsideLayer";
import FpLogin from "./login/FpLogin";
import FpAsidePanelPoster from "./aside/extend/FpAsidePoster";
import FpCodeContainer from "./code/FpCodeContainer";
import FpChangePwd from "./header/FpChangePwd";
import FpTokenManager from "./header/FpTokenManager";
import FpUserManager from "./header/FpUserManager";
import FpAsideMaterial from "./aside/extend/FpAsideMaterial";
import FpBatch from "./batch/FpBatch";
import FpAsideBatch from "./aside/extend/FpAsideBatch";

export default {
  name: "FpDesign",
  components: {
    FpAsideBatch,
    FpAsideMaterial,
    FpUserManager,
    FpTokenManager,
    FpChangePwd,
    FpCodeContainer,
    FpAsidePanelPoster,
    FpLogin,
    FpAsidePanelLayer,
    FpAsidePanelComponent,
    FpBatch,
    FpDebugPanel, FpSettingContainer, FpMainContainer, FpAsideExtend, FpAside, FpHeader
  },
  computed: {
    ...mapState({
      'activeId': state => state.aside.activeId
    })
  }
}
</script>

<style scoped>


.noselect {
  /*-webkit-touch-callout: none; !* iOS Safari *!*/
  /*-webkit-user-select: none; !* Safari *!*/
  /*-khtml-user-select: none; !* Konqueror HTML *!*/
  /*-moz-user-select: none; !* Old versions of Firefox *!*/
  /*-ms-user-select: none; !* Internet Explorer/Edge *!*/
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

.fp-design-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  /*background-color: skyblue;*/
  background-color: #eef2f8;
  min-width: 1000px;
}

</style>

<style>

:root {
  --primary-color: #2c8ef8;
  --font-color: #25282F;
  --icon-color: #070707;
  --logo-color: #000;
}

body {
  margin: 0;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  /*font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;*/
  font-variant: tabular-nums;
  line-height: 1.5;
  background-color: #fff;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum"
}

a:visited {
  /*color: #2c3e50;*/
  color: var(--logo-color);
}

a:link {
  color: var(--logo-color);
}

p, pre {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5em;
  color: rgba(0, 0, 0, .85);
  font-weight: 500;
}

*, :before, :after {
  box-sizing: border-box;
}

.fp-design-container .iconfont {
  user-select: none;
}

</style>