<template>
  <div class="vee-container">
    <header class="vee-header">
      <div class="vee-header-left">
        <span>Echarts图表可视化配置工具</span>
        <el-popover
          placement="bottom"
          title=""
          width="1000"
          trigger="click">
          <el-button slot="reference" size="small" type="primary" v-show="chartTemplates.length" class="vee-select-chart-btn">选择图表模板</el-button>
          <ChartTemplateSelect></ChartTemplateSelect>
        </el-popover>
      </div>
      <div class="vee-header-right">
        <el-popover
          placement="bottom"
          title=""
          width="200"
          trigger="click">
          <el-button slot="reference" size="small" type="primary">改变视图</el-button>
          <div class="vee-change-view-container">
            <el-radio-group v-model="currentLayoutView" size="medium">
              <el-radio-button v-for="item of LAYOUT_VIEW_OPTIONS" :key="item.value" :label="item.value">{{item.name}}</el-radio-button>
            </el-radio-group>
          </div>
        </el-popover>
        <el-button v-show="showSubmitBtn" class="vee-submit-btn" size="small" type="primary" @click="handleSubmitBtnClick">确定</el-button>
        <el-button v-show="showCloseBtn" class="vee-submit-btn" size="small" type="text" icon="el-icon-close" @click="handleCloseBtnClick"></el-button>
      </div>
    </header>
    <div class="vee-main">
      <div class="vee-layout">
        <rs-panes split-to="columns" primary="first" v-if="currentLayoutView === LAYOUT_VIEW_ENUM.LRR"
          :size="60"
          :minSize="0"
          :units="pane.units"
          :allowResize="pane.allowResize" 
          :resizerColor="pane.resizerColor"
          :resizerThickness="pane.resizerThickness"
          :resizerBorderThickness="pane.resizerBorderThickness">
          <div slot="firstPane" class="vee-layout-panel-content vee-pdr">
            <EditorPanel></EditorPanel>
          </div>
          <rs-panes 
            split-to="rows"
            :size="50"
            :minSize="0"
            :units="pane.units"
            :allowResize="pane.allowResize"
            :resizerColor="pane.resizerColor"
            :resizerThickness="pane.resizerThickness"
            :resizerBorderThickness="pane.resizerBorderThickness"
            slot="secondPane" primary="first">
            <div slot="firstPane" class="vee-layout-panel-content vee-pdl vee-pdb">
              <PreviewPanel></PreviewPanel>
            </div>
            <div slot="secondPane" class="vee-layout-panel-content vee-pdl vee-pdt">
              <CodePanel></CodePanel>
            </div>
          </rs-panes>
        </rs-panes>
        <rs-panes split-to="columns" primary="first" v-if="currentLayoutView === LAYOUT_VIEW_ENUM.LCR"
          :size="40"
          :minSize="0"
          :units="pane.units"
          :allowResize="pane.allowResize" 
          :resizerColor="pane.resizerColor"
          :resizerThickness="pane.resizerThickness"
          :resizerBorderThickness="pane.resizerBorderThickness">
          <div slot="firstPane" class="vee-layout-panel-content vee-pdr">
            <EditorPanel></EditorPanel>
          </div>
          <rs-panes 
            split-to="columns"
            :size="50"
            :minSize="0"
            :units="pane.units"
            :allowResize="pane.allowResize"
            :resizerColor="pane.resizerColor"
            :resizerThickness="pane.resizerThickness"
            :resizerBorderThickness="pane.resizerBorderThickness"
            slot="secondPane" primary="first">
            <div slot="firstPane" class="vee-layout-panel-content vee-pdl vee-pdr">
              <CodePanel></CodePanel>
            </div>
            <div slot="secondPane" class="vee-layout-panel-content vee-pdl">
              <PreviewPanel></PreviewPanel>
            </div>
          </rs-panes>
        </rs-panes>
      </div>
    </div>
  </div>
</template>
<script>
import './asserts/css/index.scss'
import { mapGetters, mapMutations } from 'vuex'
import { Button, Popover, RadioButton, RadioGroup } from 'element-ui';
import ResSplitPane from 'vue-resize-split-pane'
import EditorPanel from './EditorPanel'
import CodePanel from './CodePanel'
import PreviewPanel from './PreviewPanel'
import ChartTemplateSelect from './ChartTemplateSelect'
import { veeStoreName } from './store/name'
import { LAYOUT_VIEW_OPTIONS, LAYOUT_VIEW_ENUM } from './constant/index'

export default {
  props: {},
  computed: {
    ...mapGetters(veeStoreName, ['layoutView', 'chartTemplates', 'jsonCode', 'showSubmitBtn', 'showCloseBtn']),
    currentLayoutView: {
      get () {
        return this.layoutView
      },
      set (val) {
        this.setLayoutView(val)
      }
    }
  },
  methods: {
    ...mapMutations(veeStoreName, ['setLayoutView']),
    handleSubmitBtnClick () {
      this.$parent.$emit('submit', this.jsonCode) // todo 先暂定这么写，后面可以支持任意层级的组件发送到最外层
    },
    handleCloseBtnClick () {
      this.$parent.$emit('close') // todo 先暂定这么写，后面可以支持任意层级的组件发送到最外层
    }
  },
  mounted () {
  },
  data() {
    return {
      pane: {
        allowResize: true,
        units: 'percents', // 'pixels' 'percents',
        resizerColor: '#293c55',
        resizerThickness: 6,
        resizerBorderThickness: 0,
      },
      LAYOUT_VIEW_OPTIONS,
      LAYOUT_VIEW_ENUM,
    }
  },
  components: {
    EditorPanel,
    CodePanel,
    PreviewPanel,
    ChartTemplateSelect,
    'ElButton': Button,
    'ElPopover': Popover,
    'ElRadioButton': RadioButton,
    'ElRadioGroup': RadioGroup,
    'rs-panes': ResSplitPane,
  }
}
</script>
<style lang="scss">
.vee-container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.vee-header {
  box-sizing: border-box;
  height: 50px;
  position: absolute;
  width: 100%;
  z-index: 1;
  background: #293c55;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vee-header-left {
  color: white;
}

.vee-header-right {
}

.vee-main {
  box-sizing: border-box;
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  padding-top: 50px;
}

.vee-layout {
  width: 100%;
  height: 100%;
  position: relative;
}

$--vee-pd: 3px;

.vee-layout-panel-content {
  box-sizing: border-box;
  height: 100%;
}

.vee-pdr {
  padding-right: $--vee-pd;
}

.vee-pdl {
  padding-left: $--vee-pd;
}

.vee-pdt {
  padding-top: $--vee-pd;
}

.vee-pdb {
  padding-bottom: $--vee-pd;
}

.vee-panel-content {
  height: calc(100% - 30px);
}

.vee-change-view-container {
  display: flex;
  justify-content: center;
}

.vee-select-chart-btn {
  margin-left: 10px;
}

.vee-submit-btn {
  margin-left: 10px;
}
</style>
<style lang="scss">
.vee-container .Resizer {
  z-index: initial;
}
</style>
<style lang="scss">
// 滚动条
.vee-container {
  *::-webkit-scrollbar {
    width: 6px;
    height: 6px
  }
  // 滚动条的轨道
  *::-webkit-scrollbar-track{
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background-color: #EDEDED;
  }

  // 滚动条的滑块按钮
  *::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: #535353;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
  }
}
</style>
