<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 === 'LeftRight'?'LeftRight':components[tree.left]" :tree="tree.leftChildren"
                   :styleData="styleData"
                   :viewFlag="viewFlag"></component>
        <component v-if="(tree.left||{}).type"
                   :is="componentsEnum[tree.left.type] === 'LeftRight'?'LeftRight':components[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 === 'LeftRight'?'LeftRight':components[tree.right]" :tree="tree.rightChildren"
                   :styleData="styleData"
                   :viewFlag="viewFlag"></component>
        <component v-if="(tree.right||{}).type"
                   :is="tree.right.type === 'LeftRight'?'LeftRight':components[componentsEnum[tree.right.type]]"
                   :styleData="styleData"
                   :defaultData="tree.right.data"></component>
      </div>
    </div>

    <el-dialog
      title="分割方式"
      v-model="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="选择组件"
      v-model="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"
      v-model="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" />
      <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 setup>
defineOptions({
  name: 'LeftRight'
});
import {
  ComplexTable,
  ComplexChart,
  ComplexForm,
  ComplexMap,
  ComplexText,
  ComplexScrollTable
} from '@/components/Configure/complex';

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

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

import ScrollView from '@/components/Configure/view/scrollTable';
import lineView from '@/components/Configure/view/line';
import barView from '@/components/Configure/view/bar';
import pieView from '@/components/Configure/view/pie';
import UpDown from './upDownStr.vue';
import ComponentsDialogContent from './componentsDialog.vue';


const components = reactive({

  UpDown: markRaw(UpDown),
  ComponentsDialogContent: markRaw(ComponentsDialogContent),
  ComplexTable: markRaw(ComplexTable),
  ComplexChart: markRaw(ComplexChart),
  ComplexForm: markRaw(ComplexForm),
  ComplexMap: markRaw(ComplexMap),
  ComplexText: markRaw(ComplexText),
  ComplexScrollTable: markRaw(ComplexScrollTable),
  ChartInfo: markRaw(ChartInfo),
  TableInfo: markRaw(TableInfo),
  TextInfo: markRaw(TextInfo),
  ChartModelLineInfo: markRaw(ChartModelLineInfo),
  ChartModelBarInfo: markRaw(ChartModelBarInfo),
  ChartModelPieInfo: markRaw(ChartModelPieInfo),
  ScrollTableModelInfo: markRaw(ScrollTableModelInfo),
  ScrollView: markRaw(ScrollView),
  lineView: markRaw(lineView),
  barView: markRaw(barView),
  pieView: markRaw(pieView)
});


const props = defineProps({
  tree: Object,
  viewFlag: Object,
  styleData: Object
});

const { tree, viewFlag, styleData } = toRefs(props);

const componentsEnum = {
  table: 'ComplexTable',
  chart: 'ComplexChart',
  form: 'ComplexForm',
  map: 'ComplexMap',
  text: 'ComplexText',
  lineChart: 'lineView',
  barChart: 'barView',
  barChart1: 'barView',
  pieChart: 'pieView',
  scrollTable: 'ScrollView'
};
const width = ref(0);
const distance = ref(false);
const dialogVisible = ref(false);
const componentsDialogVisible = ref(false);
const type = ref('');
const componentsDialog = ref(false);
const componentsDialogData = ref({});
const dialogKey = ref(0);


let area1 = ref();
let area2 = ref();
let con = ref();
let separate = ref();
onMounted(async () => {
  await nextTick();
  console.log(area1.value);
  area1.value.addEventListener('contextmenu', (event) => {
    console.log(111);
    event.preventDefault();
    event.stopPropagation();
    if (!tree.value.left) {
      console.log(222);
      dialogVisible.value = true;
      type.value = 'left';
    } else {
      console.log(333);
      type.value = 'left';
      dialogKey.value += 1;
      componentsDialogData.value = tree.value.left;
      componentsDialog.value = true;
    }
  });
  area1.value.addEventListener('dblclick', (event) => {
    event.preventDefault();
    event.stopPropagation();
    // if (!this.tree.left) {
    componentsDialogVisible.value = true;
    type.value = 'left';
    // }
  });

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

  width.value = con.value.offsetWidth;
  distance.value = con.value.offsetWidth * (tree.value.separate / 100);


  separate.value.ondrag = (e) => {
    e.preventDefault();
  };
  separate.value.ondragend = (e) => {
    tree.value.separate = ((distance.value + e.offsetX) / width.value) * 100;
    if (tree.value.separate < 1) {
      tree.value.separate = 1;
    }
    if (tree.value.separate > 99) {
      tree.value.separate = 99;
    }
    distance.value = width.value * (tree.value.separate / 100);
  };

});

const leftRight = () => {
  if (type.value === 'left') {
    tree.value[type.value] = 'LeftRight';
    tree.value['leftChildren'] = tree.value.leftChildren || {
      separate: 50
    };
  }
  if (type.value === 'right') {
    tree.value[type.value] = 'LeftRight';
    tree.value['rightChildren'] = tree.value.rightChildren || {
      separate: 50
    };
  }
  dialogVisible.value = false;
};

const clearCut = () => {
  let currentCpn = getCurrentInstance();
  let parent = currentCpn.parent;
  parent.tree.value['top'] = null;
  parent.tree.value['topChildren'] = null;
  parent.tree.value['down'] = null;
  parent.tree.value['downChildren'] = null;
  parent.tree.value['left'] = null;
  parent.tree.value['leftChildren'] = null;
  parent.tree.value['right'] = null;
  parent.tree.value['rightChildren'] = null;
  dialogVisible.value = false;
};
const upDown = () => {
  if (type.value === 'left') {
    tree.value[type.value] = 'UpDown';
    tree.value['leftChildren'] = tree.value.leftChildren || {
      separate: 50
    };
  }
  if (type.value === 'right') {
    tree[type.value] = 'UpDown';
    tree.value['rightChildren'] = tree.value.rightChildren || {
      separate: 50
    };
  }
  dialogVisible.value = false;
};
const SelectComponentsCB = (e) => {
  tree.value[type.value] = e;
  componentsDialogVisible.value = false;
};
const clearCom = () => {
  tree.value[type.value] = '';
  componentsDialogVisible.value = false;
};
const closeComponentsDialog = () => {
  componentsDialog.value = false;
};
const modelOptionOk = (e) => {
  tree.value[type.value]['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>


