<template>
  <div style="height: 100%;width: 100%">
    <div ref="con" class="con">
      <div class="separate" draggable="true" :style="`top: ${tree.separate}%;display:${viewFlag?'none':'block'}`"
           ref="separate"></div>
      <div class="area" ref="area1" :style="`height:${tree.separate}%`">
        <component v-if="typeof tree.top === 'string' " :is="tree.top === 'UpDown'?'UpDown':components[tree.top]"
                   :tree="tree.topChildren"
                   :styleData="styleData"
                   :viewFlag="viewFlag"></component>
        <component v-if="(tree.top||{}).type"
                   :is="componentsEnum[tree.top.type] === 'UpDown'?'UpDown': components[componentsEnum[tree.top.type]]"
                   :styleData="styleData"
                   :defaultData="tree.top.data"></component>
      </div>
      <div class="area" ref="area2" :style="`height:${100-tree.separate}%;top:${tree.separate}%`">
        <component v-if="typeof tree.down === 'string' " :is="tree.down === 'UpDown'?'UpDown':components[tree.down]"
                   :tree="tree.downChildren"
                   :styleData="styleData"
                   :viewFlag="viewFlag"></component>
        <component v-if="(tree.down||{}).type"
                   :is="componentsEnum[tree.down.type] === 'UpDown'?'UpDown':components[componentsEnum[tree.down.type]]"
                   :styleData="styleData"
                   :defaultData="tree.down.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: 'UpDown'
});
import {
  ComplexTable,
  ComplexChart,
  ComplexForm,
  ComplexMap,
  ComplexScrollTable,
  ComplexText
} 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 LeftRight from './leftRightStr.vue';
import ComponentsDialogContent from './componentsDialog.vue';

const components = reactive({
  LeftRight: markRaw(LeftRight),
  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 height = ref(0);
const distance = ref(0);
const dialogVisible = ref(false);
const componentsDialogVisible = ref(false);
const type = ref('');
const componentsDialog = ref(false);
const componentsDialogData = ref(null);
const dialogKey = ref(0);


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

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

  height.value = con.value.offsetHeight;
  distance.value = con.value.offsetHeight * (tree.value.separate / 100);

  const customMenu = (event) => {
    event.preventDefault();
  };
  con.value.addEventListener('contextmenu', customMenu);


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

});

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 leftRight = () => {
  if (type.value === 'top') {
    tree.value['top'] = 'LeftRight';
    tree.value['topChildren'] = tree.value.topChildren || {
      separate: 50
    };
  }
  if (type.value === 'down') {
    tree.value['down'] = 'LeftRight';
    tree.value['downChildren'] = tree.value.downChildren || {
      separate: 50
    };
  }
  dialogVisible.value = false;
};
const upDown = () => {
  if (type.value === 'top') {
    tree.value[type.value] = 'UpDown';
    tree.value['topChildren'] = tree.value.topChildren || {
      separate: 50
    };
  }
  if (type.value === 'down') {
    tree.value[type.value] = 'UpDown';
    tree.value['downChildren'] = tree.value.downChildren || {
      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;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
  left: 0;
  background-color: #409EFF;
  cursor: row-resize;
  z-index: 2;

  &:hover {
    height: 6px;
  }
}

.area {
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 1;
}

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