<template>
  <div style="height: 100%;width: 100%">
    <div ref="con" class="con">
      <div class="separate" draggable="true" :style="`left: ${tree.separate}%;display:${viewFlag?'none':'block'}`"
           ref="separate"></div>
      <div class="area" ref="area1" :style="`width:${tree.separate}%`">
        <component v-if="typeof tree.left === 'string' " :is="tree.left" :tree="tree.leftChildren"
                   :styleData="styleData"
                   :viewFlag="viewFlag"></component>
        <component v-if="(tree.left||{}).type" :is="componentsEnum[tree.left.type]" :styleData="styleData"
                   :defaultData="tree.left.data"></component>
      </div>
      <div class="area" ref="area2" :style="`width:${100-tree.separate}%;left:${tree.separate}%`">
        <component v-if="typeof tree.right === 'string' " :is="tree.right" :tree="tree.rightChildren"
                   :styleData="styleData"
                   :viewFlag="viewFlag"></component>
        <component v-if="(tree.right||{}).type" :is="componentsEnum[tree.right.type]" :styleData="styleData"
                   :defaultData="tree.right.data"></component>
      </div>
    </div>

    <el-dialog
        title="分割方式"
        :visible.sync="dialogVisible"
        :append-to-body="true"
        width="30%">
      <el-button type="primary" @click="leftRight">左右</el-button>
      <el-button type="primary" @click="upDown">上下</el-button>
      <el-button type="primary" @click="clearCut">取消</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>


    <el-dialog
        title="选择组件"
        :visible.sync="componentsDialogVisible"
        :append-to-body="true"
        width="60%">
      <ComponentsDialogContent @SelectComponentsCB="SelectComponentsCB"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearCom">清 除</el-button>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="componentsDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
        title="图表配置"
        :append-to-body="true"
        :visible.sync="componentsDialog"
        width="96%"
        class="dialog1"
        :fullscreen="true"
        :before-close="closeComponentsDialog">
      <ChartModelLineInfo
          @close="closeComponentsDialog"
          @ok="modelOptionOk"
          v-if="(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='lineChart' &&componentsDialogData.serveType === 'line'"
          :defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
          :isDialog="true"
          :key="'chartDialog' + dialogKey"/>
      <ChartModelBarInfo
          @close="closeComponentsDialog"
          @ok="modelOptionOk"
          v-if="(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='barChart' &&componentsDialogData.serveType === 'bar'"
          :defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
          :isDialog="true"
          :key="'chartDialog' + dialogKey"/>
      <ChartModelBarInfo1
          @close="closeComponentsDialog"
          @ok="modelOptionOk"
          v-if="(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='barChart1' &&componentsDialogData.serveType === 'bar'"
          :defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
          :isDialog="true"
          :key="'chartDialog' + dialogKey"/>
      <ChartModelPieInfo
          @close="closeComponentsDialog"
          @ok="modelOptionOk"
          v-if="(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='pieChart' &&componentsDialogData.serveType === 'pie'"
          :defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
          :isDialog="true"
          :key="'chartDialog' + dialogKey"/>
      <ScrollTableModelInfo
          @close="closeComponentsDialog"
          @ok="modelOptionOk"
          v-if="(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='scrollTable'"
          :defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
          :isDialog="true"
          :key="'chartDialog' + dialogKey"/>
      <ChartInfo
          v-if="!(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='chart'"
          :defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
          :isDialog="true"
          :key="'chartDialog' + dialogKey"/>
      <TableInfo v-if="(componentsDialogData && componentsDialogData.type)==='table'"
                 :defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
                 :isDialog="true"
                 :key="'chartDialog' + dialogKey"/>
      <TextInfo v-if="(componentsDialogData && componentsDialogData.type)==='text'"
                :defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
                :isDialog="true"
                :key="'chartDialog' + dialogKey"/>
    </el-dialog>


  </div>
</template>

<script>

import {
  ComplexTable,
  ComplexChart,
  ComplexForm,
  ComplexMap,
  ComplexText,
  ComplexScrollTable,
} from "@/components/complex";

import ChartInfo from '@/views/createChart/index'
import TableInfo from '@/views/createTable/index'
import TextInfo from '@/views/basicCom/createText/index'


import ChartModelLineInfo from '@/components/modelComponents/line/line'
import ChartModelBarInfo from '@/components/modelComponents/bar/bar'
import ChartModelPieInfo from '@/components/modelComponents/pie/pie'
import ScrollTableModelInfo from '@/components/modelComponents/srcollTable/srcollTable'

import ScrollView from '@/components/view/scrollTable'
import lineView from '@/components/view/line'
import barView from '@/components/view/bar'
import pieView from '@/components/view/pie'

export default {
  name: 'LeftRight',
  components: {
    UpDown: () => import('./upDownStr'),
    ComponentsDialogContent: () => import('./componentsDialog'),
    ComplexTable,
    ComplexChart,
    ComplexForm,
    ComplexMap,
    ComplexText,
    ComplexScrollTable,
    ChartInfo,
    TableInfo,
    TextInfo,
    ChartModelLineInfo,
    ChartModelBarInfo,
    ChartModelPieInfo,
    ScrollTableModelInfo,
    ScrollView,
    lineView,
    barView,
    pieView
  },
  props: ['tree', 'viewFlag', 'styleData'],
  data() {
    return {
      componentsEnum: {
        table: 'ComplexTable',
        chart: 'ComplexChart',
        form: 'ComplexForm',
        map: 'ComplexMap',
        text: 'ComplexText',
        lineChart: 'lineView',
        barChart: 'barView',
        barChart1: 'barView',
        pieChart: 'pieView',
        scrollTable: 'ScrollView',
      },
      width: 0,
      distance: 0,
      dialogVisible: false,
      componentsDialogVisible: false,
      type: '',
      componentsDialog: false,
      componentsDialogData: {},
      dialogKey: 0
    }
  },
  mounted() {
    let area1 = this.$refs.area1
    area1.addEventListener('contextmenu', (event) => {
      event.preventDefault()
      event.stopPropagation();
      if (!this.tree.left) {
        this.dialogVisible = true
        this.type = 'left'
      } else {
        this.type = 'left'
        this.dialogKey += 1
        this.componentsDialogData = this.tree.left
        this.componentsDialog = true
      }
    })
    area1.addEventListener('dblclick', (event) => {
      event.preventDefault()
      event.stopPropagation();
      // if (!this.tree.left) {
      this.componentsDialogVisible = true
      this.type = 'left'
      // }
    })

    let area2 = this.$refs.area2
    area2.addEventListener('contextmenu', (event) => {
      event.preventDefault()
      event.stopPropagation();
      if (!this.tree.right) {
        this.dialogVisible = true
        this.type = 'right'
      } else {
        this.type = 'right'
        this.dialogKey += 1
        this.componentsDialogData = this.tree.right
        this.componentsDialog = true
      }
    })
    area2.addEventListener('dblclick', (event) => {
      event.preventDefault()
      event.stopPropagation();
      // if (!this.tree.right) {
      this.componentsDialogVisible = true
      this.type = 'right'
      // }
    })

    let con = this.$refs.con
    this.width = con.offsetWidth
    this.distance = con.offsetWidth * (this.tree.separate / 100)


    let separate = this.$refs.separate
    separate.ondrag = (e) => {
      e.preventDefault()
    }
    separate.ondragend = (e) => {
      let con = this.$refs.con
      this.height = con.offsetHeight
      this.tree.separate = ((this.distance + e.offsetX) / this.width) * 100
      if (this.tree.separate < 1) {
        this.tree.separate = 1
      }
      if (this.tree.separate > 99) {
        this.tree.separate = 99
      }
      this.distance = this.width * (this.tree.separate / 100)
    }

  },
  methods: {
    leftRight() {
      if (this.type === 'left') {
        this.$set(this.tree, this.type, 'LeftRight')
        this.$set(this.tree, 'leftChildren', this.tree.leftChildren || {
          separate: 50
        })
      }
      if (this.type === 'right') {
        this.$set(this.tree, this.type, 'LeftRight')
        this.$set(this.tree, 'rightChildren', this.tree.rightChildren || {
          separate: 50
        })
      }
      this.dialogVisible = false
    },
    clearCut() {
      this.$set(this.$parent.tree, 'top', null)
      this.$set(this.$parent.tree, 'topChildren', null)
      this.$set(this.$parent.tree, 'down', null)
      this.$set(this.$parent.tree, 'downChildren', null)
      this.$set(this.$parent.tree, 'left', null)
      this.$set(this.$parent.tree, 'leftChildren', null)
      this.$set(this.$parent.tree, 'right', null)
      this.$set(this.$parent.tree, 'rightChildren', null)
      this.dialogVisible = false
    },
    upDown() {
      if (this.type === 'left') {
        this.$set(this.tree, this.type, 'UpDown')
        this.$set(this.tree, 'leftChildren', this.tree.leftChildren || {
          separate: 50
        })
      }
      if (this.type === 'right') {
        this.$set(this.tree, this.type, 'UpDown')
        this.$set(this.tree, 'rightChildren', this.tree.rightChildren || {
          separate: 50
        })
      }
      this.dialogVisible = false
    },
    SelectComponentsCB(e) {
      this.$set(this.tree, this.type, JSON.parse(JSON.stringify(e)))
      this.componentsDialogVisible = false
    },
    clearCom() {
      this.$set(this.tree, this.type, '')
      this.componentsDialogVisible = false
    },
    closeComponentsDialog() {
      this.componentsDialog = false
    },
    modelOptionOk(e) {
      this.$set(this.tree[this.type], 'data', e)
    }
  }
}

</script>

<style lang="less" scoped>
.con {
  width: 100%;
  height: 100%;
  position: relative;
}

.separate {
  position: absolute;
  height: 100%;
  width: 2px;
  transform: translateX(-50%);
  top: 0;
  background-color: #409EFF;
  cursor: col-resize;
  z-index: 2;

  &:hover {
    width: 6px;
  }
}

.area {
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
  text-align: center;
}


.dialog1 /deep/ .el-dialog .el-dialog__body {
  padding: 0;
  height: calc(100% - 54px - 60px);
  overflow: hidden;
}
</style>


