<template>
  <div style="width: 100%; height: 100vh">
    <div class="top">
      <el-button type="primary">保存</el-button>
      <el-button type="info" @click="setPageData">设置</el-button>
    </div>
    <div class="left">
      <el-divider content-position="left">基础</el-divider>
      <el-card
        class="moduleCard1"
        shadow="never"
        :draggable="true"
        @dragstart="onDragStart($event, 'line', {})"
        :style="{ display: 'inline-block', margin: '0 4px 4px 0' }"
        :body-style="{ padding: '4px 0' }"
      >
        <template #header>
          <div
            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 1px; background-color: #0002"
          ></div>
        </template>
        <div class="moduleText">线</div>
      </el-card>
      <el-card
        class="moduleCard1"
        shadow="never"
        :draggable="true"
        @dragstart="onDragStart($event, 'text1', {})"
        :style="{ display: 'inline-block', margin: '0 4px 4px 0' }"
        :body-style="{ padding: '4px 0' }"
      >
        <template #header>
          <div style="text-align: center; line-height: 50px">文字</div>
        </template>
        <div class="moduleText">文字</div>
      </el-card>
      <el-divider content-position="left">元件</el-divider>
      <el-card
        class="moduleCard"
        shadow="never"
        :draggable="true"
        @dragstart="onDragStart($event, 'circuitComponent', { type: 1 })"
        :style="{ display: 'inline-block', margin: '0 4px 4px 0' }"
        :body-style="{ padding: '4px 0' }"
      >
        <template #header>
          <el-image style="width: 100%; height: 100%" :src="img1" fit="contain" />
        </template>
        <div class="moduleText">元件1</div>
      </el-card>
      <el-card
        class="moduleCard"
        shadow="never"
        :draggable="true"
        @dragstart="onDragStart($event, 'circuitComponent', { type: 2 })"
        :style="{ display: 'inline-block', margin: '0 4px 4px 0' }"
        :body-style="{ padding: '4px 0' }"
      >
        <template #header>
          <el-image style="width: 100%; height: 100%" :src="img2" fit="contain" />
        </template>
        <div class="moduleText">元件2</div>
      </el-card>
    </div>
    <div class="right" ref="rightRef" @drop="onDrop">
      <VueFlow
        class="flow"
        id="flowA"
        :min-zoom="0.01"
        ref="flowRef"
        :zoom-on-double-click="false"
        :snapToGrid="isSnapToGrid"
        :panOnDrag="false"
        :zoomOnScroll="false"
        :autoPanSpeed="0"
        :snapGrid="[10, 10]"
        v-model:nodes="nodes"
        v-model:edges="edges"
        fit-view-on-init
        default-marker-color="#409EFF"
        @node-click="logEvent('click', $event)"
        @pane-click="logEvent('paneClick', $event)"
        @node-drag-start="logEvent('nodeDrag', $event)"
        @node-contextMenu="logEvent('contextmenu', $event)"
        @node-double-click="logEvent('dblclick', $event)"
        @dragover="onDragOver"
      >
        <Background
          :size="1"
          :gap="20"
          :pattern-color="nodes.find((e) => (e.type = 'area'))?.data.style.patternColor || '#0000'"
          :style="`background-color: ${nodes.find((e) => (e.type = 'area'))?.data.style.backgroundColor}`"
        />

        <template #node-area="props">
          <AreaNode v-bind="props" :pageData="{ width: '960px', height: '540px' }"></AreaNode>
        </template>
        <template #node-circuitComponent="props">
          <CircuitComponentNode :monitorType="monitorType" v-bind="props" :networkData="deviceData" />
        </template>
        <template #node-deviceDataList="props">
          <DeviceDataListNode :monitorType="monitorType" v-bind="props" :networkData="deviceData" :nodes="nodes" />
        </template>
        <template #node-line="props">
          <LineNode :monitorType="monitorType" v-bind="props" />
        </template>
        <template #node-text1="props">
          <TextNode :monitorType="monitorType" v-bind="props" :networkData="deviceData" />
        </template>
      </VueFlow>
    </div>

    <el-dialog draggable v-model="nodeOptionVisible" title="节点配置" width="500">
      <el-form :model="nodeData">
        <el-form-item label="网络地址" label-width="120px" v-if="[].includes(nodeType)">
          <el-input v-model="nodeData.network" autocomplete="off" />
        </el-form-item>
        <el-form-item label="节点id" label-width="120px" v-if="['circuitComponent', 'text1'].includes(nodeType)">
          <el-input v-model="nodeData.id" autocomplete="off" />
        </el-form-item>
        <el-form-item label="节点内容" label-width="120px" v-if="['text1'].includes(nodeType)">
          <el-input v-model="nodeData.value" autocomplete="off" />
        </el-form-item>
        <el-form-item label="参数展示" label-width="120px" v-if="['circuitComponent'].includes(nodeType)">
          <el-select multiple v-model="nodeData.infos" placeholder="选择">
            <el-option
              :key="key"
              :label="monitorType.find((e) => e.value === key)?.label"
              :value="key"
              v-for="(value, key) in deviceData.find((e) => e.id === nodeData.id)?.options"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="nodeOptionVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog draggable v-model="pageDataVisible" title="页面配置" width="500">
      <el-form :model="pageData">
        <el-form-item label="背景颜色" label-width="120px">
          <el-color-picker v-model="pageData.backgroundColor" show-alpha />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="pageDataVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog :modal="false" :modal-penetrable="true" draggable v-model="nodeStyleVisible" title="节点样式配置" width="500">
      <el-form :model="nodeStyle">
        <el-form-item label="对齐方式" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'align')">
          <el-select v-model="nodeStyle.align" placeholder="Select">
            <el-option label="左对齐" value="left" />
            <el-option label="居中" value="center" />
            <el-option label="右对齐" value="right" />
          </el-select>
        </el-form-item>
        <el-form-item label="冒号居中" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'isColonCentered')">
          <el-switch v-model="nodeStyle.isColonCentered" />
        </el-form-item>
        <el-form-item label="左右比例" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'ratio') && nodeStyle.isColonCentered">
          <el-slider v-model="nodeStyle.ratio" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="颜色" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'color')">
          <el-color-picker v-model="nodeStyle.color" show-alpha />
        </el-form-item>
        <el-form-item label="文字颜色" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'color1')">
          <el-color-picker v-model="nodeStyle.color1" show-alpha />
        </el-form-item>
        <el-form-item label="数值颜色" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'color2')">
          <el-color-picker v-model="nodeStyle.color2" show-alpha />
        </el-form-item>
        <el-form-item label="是否允许换行" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'whiteSpace')">
          <el-switch v-model="nodeStyle.whiteSpace" active-value="normal" inactive-value="nowrap" />
        </el-form-item>
        <el-form-item label="线类型" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'lineType')">
          <el-select v-model="nodeStyle.lineType" placeholder="Select">
            <el-option label="横线" :value="0" />
            <el-option label="竖线" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="宽度" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'width')">
          <el-input-number v-model="nodeStyle.width" :min="1" />
        </el-form-item>
        <el-form-item label="旋转角度" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'rotate')">
          <el-input-number v-model="nodeStyle.rotate" :min="-360" :max="360" />
        </el-form-item>
        <el-form-item label="旋转中心" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'transformOrigin1')">
          <el-select v-model="nodeStyle.transformOrigin1" placeholder="Select" style="width: calc(50% - 20px); margin-right: 20px">
            <el-option label="左" value="left" />
            <el-option label="中" value="center" />
            <el-option label="右" value="right" />
          </el-select>
          <el-select v-model="nodeStyle.transformOrigin2" placeholder="Select" style="width: calc(50% - 20px)">
            <el-option label="上" value="top" />
            <el-option label="中" value="center" />
            <el-option label="下" value="bottom" />
          </el-select>
        </el-form-item>
        <el-form-item label="字体大小" label-width="120px" v-if="Object.hasOwn(nodeStyle, 'fontSize')">
          <el-slider v-model="nodeStyle.fontSize" :min="6" :max="40" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="nodeStyleVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { v4 as uuidv4 } from 'uuid';
import img1 from '@/assets/electronicComponents/1.png';
import img2 from '@/assets/electronicComponents/2.png';
import AreaNode from './nodes/area.vue';
import CircuitComponentNode from './nodes/circuitComponent.vue';
import DeviceDataListNode from './nodes/deviceDataList.vue';
import LineNode from './nodes/line.vue';
import TextNode from './nodes/text.vue';
import { MarkerType, useVueFlow, VueFlow } from '@vue-flow/core';
import { Background } from '@vue-flow/background';
import tool from './tool.js';

const rightRef = ref();
const flowRef = ref();

const pid = ref(`area_${uuidv4().replaceAll('-', '_')}`);
const nodes = ref([
  {
    id: pid.value,
    class: 'no-click',
    name: 'area',
    type: 'area',
    position: {
      x: 0,
      y: 0
    },
    selectable: false,
    draggable: false,
    data: {
      style: {
        backgroundColor: '#fff'
      }
    }
  }
]);
const edges = ref([]);
const isSnapToGrid = ref(true);
const nodeOptionVisible = ref(false);
const nodeStyleVisible = ref(false);
const pageDataVisible = ref(false);
const nodeType = ref('');
const nodeData = ref({});
const nodeStyle = ref({});
const pageData = ref({});
const deviceData = ref([
  {
    id: 'test-1',
    options: {
      tem: 30,
      a: 10,
      v: 20
    }
  },
  {
    id: 'test-2',
    options: {
      tem: 20,
      a: 20,
      v: 10
    }
  }
]);

const monitorType = ref([
  { label: '温度', value: 'tem' },
  { label: '字段1', value: 'a' },
  { label: '字段2', value: 'v' }
]);

const { onDragStart, onDrop, onDragOver } = tool();
const { addEdges, updateNode, removeNodes, addNodes, onNodesChange } = useVueFlow({ id: 'flowA' });

const logEvent = async (eventname, event) => {
  switch (eventname) {
    case 'paneClick':
      break;
    case 'click':
      break;
    case 'nodeDrag':
      break;
    case 'dblclick':
      event.event.preventDefault();
      nodeStyleVisible.value = true;
      nodeType.value = event.node.type;
      nodeStyle.value = event.node.data.style;
      break;
    case 'contextmenu':
      event.event.preventDefault();
      nodeOptionVisible.value = true;
      nodeType.value = event.node.type;
      nodeData.value = event.node.data.options;
      break;
  }
};
onNodesChange((changes) => {
  changes.forEach((e) => {
    if (e.type === 'remove') {
      const ids = nodes.value.filter((node) => node.parentNode === e.id).map((node) => node.id);
      removeNodes(ids);
    }
  });
});
const setPageData = () => {
  pageDataVisible.value = true;
  pageData.value = nodes.value.find((e) => (e.type = 'area'))?.data.style;
  console.log(pageData.value);
};
onMounted(() => {
  let scale = 0;
  const width = window.innerWidth - 220;
  rightRef.value.style.width = width + 'px';
  rightRef.value.style.height = (width * 540) / 960 + 'px';
  scale = width / 960;

  flowRef.value.onInit(() => {
    flowRef.value.setTransform({
      x: 0,
      y: 0,
      zoom: scale
    });
  });
  nextTick(() => {
    let NODES = JSON.parse(localStorage.getItem('NODES') || '[]');
    if (NODES.length > 0) {
      nodes.value = NODES;
    }
  });
});
watch(
  nodes,
  () => {
    if (nodes.value.length > 1) {
      localStorage.setItem('NODES', JSON.stringify(nodes.value));
    }
  },
  { deep: true }
);
</script>
<style lang="scss" scoped>
.top {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: right;
  padding-right: 20px;
}

.left {
  display: inline-block;
  width: 200px;
  height: calc(100% - 50px);
  vertical-align: top;

  .moduleCard1 {
    width: calc(50% - 4px);
    display: inline-block;
    height: 100px;

    :deep(.el-card__header) {
      width: 100%;
      height: 50px;
      position: relative;
      padding: 0 !important;
    }

    :deep(.el-card__body) {
      padding: 0 20px 0 20px !important;

      .moduleText {
        line-height: 50px;
        text-align: center;
      }
    }
  }
  .moduleCard {
    width: calc(50% - 4px);
    display: inline-block;
    height: 150px;

    :deep(.el-card__header) {
      width: 100%;
      height: 100px;
      position: relative;
    }

    :deep(.el-card__body) {
      padding: 0 20px 0 20px !important;

      .moduleText {
        line-height: 50px;
        text-align: center;
      }
    }
  }
}

.right {
  display: inline-block;
  position: absolute;
  left: 200px;
}

:deep(.el-divider__text) {
  background-color: #f5f7fb;
}
</style>
<style>
.no-click {
  pointer-events: none !important;
}
</style>