<template>
  <div class="vee-editor-panel">
    <PanelHeader name="图表配置">
      <span slot="left" class="vee-editor-panel-header">
        <i class="el-icon-s-unfold vee-icon-fold" :class="isMenuFold ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="handleFoldBtnClick"></i>
        <span>图表配置</span>
      </span>
      <span slot="right" class="vee-editor-panel-header-right">
        <span class="vee-compile-error-text" v-show="compileError">编辑器内容有误！</span>
        <span class="vee-editor-op-item" :title="`某个对象属性超过${showMoreLimit}个，是否需要 '显示更多' 按钮控制`">
          <span class="vee-show-usage-label">显示更多按钮</span>
          <vee-switch :value="isNeedShowMore" @change="handleNeedShowMoreChange"></vee-switch>
        </span>
        <span class="vee-editor-op-item">
          <span class="vee-show-usage-label" title="只显示代码中有的属性配置">简化配置</span>
          <vee-switch :value="isSoulSimple" @change="handleSoulSimpleStateChange"></vee-switch>
        </span>
        <i class="el-icon-document-copy vve-editor-fold-icon" title="在编辑器中折叠对象，点击展开，再次点击收起" @click="handleFoldObjIconClick"></i>
      </span>
    </PanelHeader>
    <div class="vee-panel-content">
      <div class="vee-editor-wrapper">
        <el-menu class="vee-editor-menus" @select="handleMenuSelect" :default-active="selectMenu" :collapse="isMenuFold" :collapse-transition="false">
            <el-menu-item v-for="item of menus" :key="item.name" :index="item.name">
              <i v-if="item.menuIconType === 'text'" class="vee-menu-icon vee-menu-text-icon">{{item.menuIcon}}</i>
              <i v-else :class="item.menuIcon" class="vee-menu-icon vee-menu-i-icon"></i>
              <span slot="title">
                <vee-model-tooltip :model="item" :propPath="item.name" :open-delay="1000">
                  <span>{{item.nickname}}</span>
                </vee-model-tooltip>
              </span>
            </el-menu-item>
        </el-menu>
        <div class="vee-editor-main">
          <VeeEditItem :model="model" v-if="model"></VeeEditItem>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Menu, MenuItem } from 'element-ui';
import PanelHeader from './PanelHeader'
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { veeStoreName } from './store/name'
import VeeEditItem from './comps/VeeEditItem'
import VeeModelTooltip from './comps/VeeModelTooltip'
import VeeSwitch from './components/VeeSwitch'

export default {
  components: {
    PanelHeader,
    VeeEditItem,
    VeeModelTooltip,
    VeeSwitch,
    'ElMenu': Menu,
    'ElMenuItem': MenuItem,
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters(veeStoreName, ['menus', 'currentMenu', 'menuFold', 'soul', 'compileError', 'soulFold', 'soulSimple', 'needShowMore', 'showMoreLimit']),
    selectMenu: {
      get () {
        return this.currentMenu
      },
      set (val) {
        this.setCurrentMenu(val)
      }
    },
    isMenuFold: {
      get () {
        return this.menuFold
      },
      set (val) {
        this.setMenuFold(val)
      }
    },
    isSoulFold () {
      return this.soulFold
    },
    isSoulSimple () {
      return this.soulSimple
    },
    isNeedShowMore () {
      return this.needShowMore
    },
    model () {
      return this.soul[this.currentMenu]
    }
  },
  methods: {
    ...mapActions(veeStoreName, ['foldSoul', 'simpleSoul']),
    ...mapMutations(veeStoreName, ['setCurrentMenu', 'setMenuFold', 'setNeedShowMore']),
    handleMenuSelect (index) {
      this.selectMenu = index
    },
    handleFoldBtnClick () {
      this.isMenuFold = !this.isMenuFold
    },
    handleFoldObjIconClick () {
      this.foldSoul(!this.isSoulFold)
    },
    handleSoulSimpleStateChange () {
      this.simpleSoul(!this.isSoulSimple)
    },
    handleNeedShowMoreChange () {
      this.setNeedShowMore(!this.isNeedShowMore)
    }
  },
  watch: {
    menus () {
      if (!this.menus.find(item => item.name === this.currentMenu) && this.menus.length) {
        this.setCurrentMenu(this.menus[0].name)
      }
    }
  }
}
</script>
<style lang="scss">
  .vee-editor-panel {
    width: 100%;
    height: 100%;
  }
  .vee-editor-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    min-width: 500px;
    overflow-x: auto;
  }
  .vee-editor-menus {
    // width: 120px;
    height: 100%;
    overflow: auto;
  }
  .vee-editor-main {
    box-sizing: border-box;
    height: 100%;
    padding: 10px;
    flex: 1;
    overflow: auto;
  }
  .vee-link {
    margin-left: 2px;
    color: yellowgreen;
    text-decoration: underline;
  }
  .vee-editor-prop-item {
    margin-bottom: 5px;
  }
  .vee-editor-title {
    margin-right: 5px;
  }
  .vee-editor-input {
    width: 250px;
  }
  .vee-menu-icon {
    line-height: normal;
    margin-right: 5px;
  }
  .vee-menu-i-icon {
    font-size: 18px;
  }
  .vee-icon-fold {
    padding-right: 5px;
    font-size: 20px;
    vertical-align: -2px;
    cursor: pointer;
    user-select: none;

    &:hover {
      color: #409EFF;
    }
  }
  .vee-editor-panel-header {
    min-width: 200px;
    display: inline-block;
    margin-left: 10px;
  }
  .vee-compile-error-text {
    color: red;
  }

  .vee-editor-panel-header-right {
    display: flex;
    align-items: center;
  }

  .vee-show-usage-label {
    margin-right: 5px;
  }

  .vve-editor-fold-icon {
    cursor: pointer;
    padding: 0 5px;
    &:hover {
      color: #409EFF;
    }
  }

  .vee-editor-op-item {
    padding: 0 5px;
  }
</style>
