<template>
  <div class="padding" style="overflow: auto">
    <div class="headDiv">
      <a-button
        @click="handleLine"
        type="primary"
        style="margin-left: 12px"
        :style="{ background: isAddLine ? '#4fa24f' : '' }"
        >添加箭头</a-button
      >

      <a-button @click="handleAdd(false)" type="primary" style="margin-left: 12px"
        >添加工序</a-button
      >
      <a-button @click="handleSubmitConfirm" type="primary" style="margin-left: 12px"
        >保存</a-button
      >
      <a-button @click="handleReset" type="primary" style="margin-left: 12px">清空画布</a-button>
      <a-button @click="handleClose" style="margin-left: 12px" type="primary" class="clean-icon"
        >关闭</a-button
      >
    </div>

    <div class="containers">
      <!-- 画布 -->
      <div
        v-if="!isRightLine && showContextMenu"
        :style="{ top: contextMenuTop, left: contextMenuLeft }"
        class="context-menu"
      >
        <div class="copyBtn" @click="copyStep">复制工序</div>
        <div class="copyBtn" @click="replaceStep">替换工序</div>
        <div class="deleteBtn" @click="deleteStep">删除</div>
      </div>
      <div
        v-if="isRightLine && showContextMenu"
        style="width: 52px"
        :style="{ top: contextMenuTop, left: contextMenuLeft }"
        class="context-menu"
      >
        <div class="deleteBtn" v-if="isRightLine" @click="deleteArrow">删除</div>
      </div>

      <div class="canvas" ref="canvas" id="canvas_node" @click="showContextMenu = false">
        <div style="display: flex; flex-wrap: wrap; margin: 20px 20px">
          <div v-for="item in formData.mesProcessTechnologyLineList" :key="item.id"
            ><div
              :id="'line' + item.id"
              class="arrow"
              :style="{
                top: item.divTop + 'px',
                left: item.divLeft + 'px',
                width: item.divWidth + 'px',
                transform: item.divTransform,
              }"
              :class="item.active ? 'arrow-active' : ''"
              @click="clickArrow(item)"
              @mouseover="rightClickArrow($event, item)"
            >
            </div>
          </div>
          <div v-for="(item, index) in formData.mesProcessTechnologyStepList" :key="item.id">
            <div
              :style="{
                position: 'absolute',
                top: item.divTop + 'px',
                left: item.divLeft + 'px',
              }"
              :class="item.active ? 'stepDiv stepDiv-active' : 'stepDiv'"
              @click="clickStep(item)"
              @contextmenu.prevent.stop="rightClick($event, item)"
              :id="'ref' + item.id"
              @mousedown="dragx($event)"
            >
              {{ item.processName }}</div
            >

            <!-- <div v-if="index < formData.mesProcessTechnologyStepList.length - 1"
              ><a-image src="/analisis/arrow-right.png" :preview="false"></a-image
            ></div> -->
          </div>
        </div>
      </div>
    </div>

    <div
      v-if="selectedStep"
      v-for="(item, index) in formData.mesProcessTechnologyStepList"
      :key="index"
    >
      <a-tabs v-if="item.active" v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="工艺配置">
          <div v-if="index > 0">
            <div class="sub-title">前置要求</div>
            <div
              style="display: flex; align-items: center"
              v-for="(pre, index) in item.preConditionList"
              :key="index"
            >
              <div>
                工序【{{ item.processName }}】，每生产一个在制品，需要工序【{{
                  pre.processName
                }}】输出
                <a-input
                  v-model:value="pre.preCondition"
                  placeholder="请输入"
                  :disabled="!rowData.isUpdate"
                  style="width: 150px"
                />
                个在制品。
              </div>
            </div>
          </div>
          <div v-if="index < formData.mesProcessTechnologyStepList.length - 1">
            <div class="sub-title">静置要求</div>
            <div style="display: flex; align-items: center">
              工序【{{ item.processName }}】，完成后，需静置
              <a-input
                v-model:value="item.staCondition"
                placeholder="请输入"
                :disabled="!rowData.isUpdate"
                style="width: 150px"
              />
              小时后可再生产。
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="工序详情" force-render>
          <viewModal :rowData="{ id: item.processId }"></viewModal>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!-- 添加工序弹层 -->
    <a-modal
      :maskClosable="false"
      title="工序添加"
      v-model:visible="visibleModaProcess"
      :confirm-loading="confirmLoading"
      width="60%"
      :footer="null"
    >
      <div style="height: 600px">
        <div>
          <a-input
            v-model:value="keyword"
            placeholder="请输入工序编码或名称"
            style="width: 200px"
          />
          <a-button @click="queryProcessList(keyword)" type="primary">查询</a-button>
          <a-button @click="queryProcessList('')">重置</a-button>
        </div>

        <a-table
          bordered
          :row-key="(record) => record.id"
          :columns="columns2"
          :data-source="processList"
          :loading="dataLoading"
          :pagination="pagination"
          :scroll="{ x: 1000, y: 400 }"
          :row-selection="{
            selectedRowKeys: selectedKeys,
            onChange: onSelectChange,
            type: isCopyStep ? 'radio' : 'checkbox',
          }"
        >
        </a-table>
      </div>
      <div class="footerDiv" v-if="rowData.isUpdate">
        <a-button @click="visibleModaProcess = false">取消</a-button>
        <a-button @click="handleSelectProcess" type="primary" style="margin-left: 12px"
          >确认</a-button
        >
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, computed, unref, watch, onMounted } from 'vue';
  import { Modal } from 'ant-design-vue';
  import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
  import Upload from '/@/components/Form/src/components/Upload.vue';
  import SelectModal from './SelectModal.vue';
  import SelectUser from '/@/components/Form/src/components/SelectUser.vue';
  import SelectDepartment from '/@/components/Form/src/components/SelectDepartment.vue';
  import { XjrDatePicker } from '/@/components/DatePicker';

  import viewModal from '../../process/components/viewModal.vue';
  import { getMesProcessTechnology, updateMesProcessTechnology } from '/@/api/mes/protech';
  import { getProcessList } from '/@/api/mes/common';
  import { getUser } from '/@/api/system/user';
  import { useUserStore } from '/@/store/modules/user';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  let props = defineProps(['rowData']);
  const { t } = useI18n();

  const activeKey = ref('1');
  const rowData: {
    id: string;
    isUpdate: boolean;
    flag: string;
  } = reactive({
    id: '',
    isUpdate: false,
    flag: '',
  });
  const formData = ref<any>({
    dataCode: '',
    isSysNum: '',
    isSysNumBoolean: true,
    mesWarehouseCheckDetailList: [],
  });
  const emit = defineEmits(['cancel', 'success']);
  const formRef = ref();

  const { notification } = useMessage();

  function handleReset() {
    Modal.confirm({
      title: '清空确认',
      content: '清空画布后，所有工序的工艺配置数据也会一并删除且不可恢复，确认删除吗？',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        formData.value.mesProcessTechnologyStepList = [];
        formData.value.mesProcessTechnologyLineList = [];
        drawerStep();
      },
      onCancel() {},
    });
  }
  const guid = () => {
    var res = '';
    for (var i = 0; i < 5; i++) {
      res += Math.floor(Math.random() * 5);
    }
    return new Date().getTime() + res;
  };
  const selectedStepRight = ref<any>({});
  const selectedStep = ref<any>({});
  const contextMenuTop = ref('');
  const contextMenuLeft = ref('');
  const showContextMenu = ref<boolean>();
  const isAddLine = ref<boolean>();
  const selectedArrow = ref<any>({});
  const selectedArrowRight = ref<any>({});
  const isRightLine = ref<boolean>();
  // const chatbox = ref();
  const dragx = (el) => {
    //移动
    let oDiv = document.getElementById('ref' + selectedStep.value.id); //当前元素
    let canvas = document.getElementById('canvas_node'); //画布
    if (!oDiv) return;
    console.log('oDiv', oDiv.offsetLeft, canvas);
    let disX = el.clientX - oDiv.offsetLeft;
    let disY = el.clientY - oDiv.offsetTop;
    document.onmousemove = function (e) {
      //通过事件委托，计算移动的距离
      let l = e.clientX - disX;
      let t = e.clientY - disY;
      let maxW = document.documentElement.clientWidth - oDiv.offsetWidth - 100;
      let maxH = 600 - oDiv.offsetHeight;
      if (l < canvas.offsetLeft) {
        //如果左侧的距离小于0，就让距离等于0.不能超出屏幕左侧。如果需要磁性吸附，把0改为100或者想要的数字即可
        l = canvas.offsetLeft;
      } else if (l > maxW) {
        //如果左侧的距离>屏幕的宽度-元素的宽度。也就是说元素的右侧超出屏幕的右侧，就让元素的右侧在屏幕的右侧上
        l = maxW;
      }
      if (t < canvas.offsetTop) {
        //和左右距离同理
        t = canvas.offsetTop;
      } else if (t > maxH) {
        t = maxH;
      }
      //移动当前元素
      console.log('canvas===', l, t, canvas.offsetLeft, canvas.offsetTop);
      // if (l < canvas.offsetLeft) l = canvas.offsetLeft;
      // if (t < canvas.offsetTop) t = canvas.offsetTop;
      oDiv.style.left = l + 'px';
      oDiv.style.top = t + 'px';
      selectedStep.value.divLeft = l;
      selectedStep.value.divTop = t;

      drawLineAll();
    };
    document.onmouseup = function (e) {
      document.onmousemove = null;
      document.onmouseup = null;
    };
    // 解决有些时候,在鼠标松开的时候,元素仍然可以拖动;
    document.ondragstart = function (ev) {
      ev.preventDefault();
    };
    document.ondragend = function (ev) {
      ev.preventDefault();
    };
    return false;
  };
  function clickArrow(item) {
    showContextMenu.value = false;
    selectedArrow.value = null;
    formData.value.mesProcessTechnologyLineList.forEach((ele) => {
      if (ele.id == item.id && !ele.active) {
        ele.active = true;
        selectedArrow.value = ele;
      } else ele.active = false;
    });
  }
  function rightClickArrow(event, item) {
    isRightLine.value = true;
    selectedArrowRight.value = item;
    console.log('event', event);
    contextMenuTop.value = event.pageY - 80 + 'px';
    contextMenuLeft.value = event.pageX - 150 + 'px';
    showContextMenu.value = true;
  }
  function deleteArrow() {
    formData.value.mesProcessTechnologyLineList =
      formData.value.mesProcessTechnologyLineList.filter((ele) => {
        return selectedArrowRight.value?.id == ele.id ? false : true;
      });
    showContextMenu.value = false;
  }
  function rightClick(event, item) {
    isRightLine.value = false;
    selectedStepRight.value = item;
    console.log('event', event);
    contextMenuTop.value = event.pageY - 80 + 'px';
    contextMenuLeft.value = event.pageX - 150 + 'px';
    showContextMenu.value = true;
  }
  function copyStep() {
    let tempList = ref<any[]>([]);
    formData.value.mesProcessTechnologyStepList.forEach((ele) => {
      tempList.value.push(ele);
      if (selectedStepRight.value?.id == ele.id) {
        // selectedStepRight.value.active = false;
        let preStep =
          formData.value.mesProcessTechnologyStepList &&
          formData.value.mesProcessTechnologyStepList.length > 0
            ? formData.value.mesProcessTechnologyStepList[
                formData.value.mesProcessTechnologyStepList.length - 1
              ]
            : {};
        let preDiv = getNextPosition(preStep);
        //将复制的工序插入到选择的工序后面
        tempList.value.push({
          id: guid(),
          techId: formData.value.id,
          processId: selectedStepRight.value.processId,
          processName: selectedStepRight.value.processName,
          divTop: preDiv.divTop,
          divLeft: preDiv.divLeft,
        });
      }
    });
    formData.value.mesProcessTechnologyStepList = tempList.value;
    showContextMenu.value = false;
  }
  function deleteStep() {
    formData.value.mesProcessTechnologyStepList =
      formData.value.mesProcessTechnologyStepList.filter((ele) => {
        return selectedStepRight.value?.id == ele.id ? false : true;
      });
    showContextMenu.value = false;
  }
  function replaceStep() {
    handleAdd(true);
    showContextMenu.value = false;
  }
  function handleLine() {
    isAddLine.value = !isAddLine.value;

    selectedStep.value = [];
    formData.value.mesProcessTechnologyStepList.forEach((ele) => {
      ele.active = false;
    });
  }
  function clickStep(item) {
    showContextMenu.value = false;
    if (isAddLine.value && selectedStep.value && selectedStep.value.id?.length > 0) {
      console.log('selectedStep.value.divTop', selectedStep.value.divTop);
      //点击自己不需画箭头
      if (selectedStep.value.id != item.id) {
        let lineData = drawLine(selectedStep.value, item);
        console.log('lineData', lineData);
        if (lineData) formData.value.mesProcessTechnologyLineList.push(lineData);
      }

      // formData.value.mesProcessTechnologyLineList.push({
      //   id: guid(),
      //   top: selectedStep.value.divTop ? parseInt(selectedStep.value.divTop) + 90 : 90,
      //   left: parseInt(selectedStep.value.divLeft) + 120,
      //   width: parseInt(item.divLeft) - parseInt(selectedStep.value.divLeft) - 120,
      //   transform: drawLine(selectedStep.value, item),
      //   startStep: selectedStep.value.id,
      //   endStep: item.id,
      // });
    }
    selectedStep.value = null;
    formData.value.mesProcessTechnologyStepList.forEach((ele) => {
      if (ele.id == item.id && !ele.active) {
        ele.active = true;
        ele.preConditionList = getPreConditionList(ele);
        selectedStep.value = ele;
      } else ele.active = false;
    });
  }
  function handleAdd(isCopy) {
    isCopyStep.value = isCopy;
    visibleModaProcess.value = true;
    selectedRowsData.value = [];
    selectedKeys.value = [];
    queryProcessList('');
  }

  onMounted(async () => {
    rowData.id = props.rowData.id;
    rowData.isUpdate = props.rowData.isUpdate;
    rowData.flag = props.rowData.flag;
    console.log('row===', rowData);

    getDetailData();
  });

  watch(
    () => props.rowData,
    (val) => {
      console.log('监听', val);
      if (val) {
        rowData.id = props.rowData.id;
        rowData.isUpdate = props.rowData.isUpdate;
        rowData.flag = props.rowData.flag;
        getDetailData();
      }
    },
  );

  const getDetailData = async () => {
    showContextMenu.value = false;
    isAddLine.value = false;
    const res = await getMesProcessTechnology(rowData.id);
    formData.value = res;
    if (formData.value.mesProcessTechnologyStepList == null)
      formData.value.mesProcessTechnologyStepList = [];
    if (formData.value.mesProcessTechnologyLineList == null)
      formData.value.mesProcessTechnologyLineList = [];

    //查询进来时，将前置条件字符串转list
    formData.value.mesProcessTechnologyStepList?.forEach((ele) => {
      ele.preConditionList = ele.preCondition ? JSON.parse(ele.preCondition) : [];
    });

    drawerStep();
    // drawLineAll();
  };
  function drawerStep() {
    //展示路线图
    // mesProcessTechnologyStepList
  }
  function drawLineAll() {
    //重新绘制箭头：
    const lineList = ref<any[]>([]);
    lineList.value = [];
    formData.value.mesProcessTechnologyLineList?.forEach((ele) => {
      let startObj = {};
      let endObj = {};
      formData.value.mesProcessTechnologyStepList?.forEach((step) => {
        if (ele.startStep == step.id) startObj = step;
      });
      formData.value.mesProcessTechnologyStepList?.forEach((step) => {
        if (ele.endStep == step.id) endObj = step;
      });
      let lineData = drawLine(startObj, endObj);
      if (lineData) lineList.value.push(lineData);
    });
    formData.value.mesProcessTechnologyLineList = lineList;
  }
  function drawLine(startObj, endObj) {
    // 起点元素中心坐标
    // console.log(this.getOffset(startObj));
    const startObjOffset = document.getElementById('ref' + startObj.id);
    const endObjOffset = document.getElementById('ref' + endObj.id);
    if (!startObjOffset || !endObjOffset) return {};
    // console.log(
    //   startObjOffset,
    //   endObjOffset,
    //   startObjOffset.offsetHeight,
    //   startObjOffset.offsetLeft,
    // );
    const xStart = startObjOffset.offsetHeight / 2 + startObjOffset.offsetLeft;
    const yStart = startObjOffset.offsetHeight / 2 + startObjOffset.offsetTop;
    // console.log('yStart', yStart);
    // console.log('xStart', xStart);
    // 终点元素中心坐标
    const xEnd = endObjOffset.offsetHeight / 2 + endObjOffset.offsetLeft;
    const yEnd = endObjOffset.offsetHeight / 2 + endObjOffset.offsetTop;
    // console.log('yEnd', yEnd);
    // console.log('xEnd', xEnd);
    // 用勾股定律计算出斜边长度及其夹角（即连线的旋转角度）
    const lx = xEnd - xStart;
    const ly = yEnd - yStart;
    // 计算连线长度
    const length = Math.sqrt(lx * lx + ly * ly);
    // 弧度值转换为角度值
    const c = (360 * Math.atan2(ly, lx)) / (2 * Math.PI);

    // 连线中心坐标
    const midX = (xEnd + xStart) / 2;
    const midY = (yEnd + yStart) / 2;
    const deg = c <= -90 ? 360 + c : c; // 负角转换为正角
    // console.log('length', length);
    // console.log('c', c);
    // console.log('midX', midX);
    // console.log('midY', midY);
    // console.log('deg', deg);
    // console.log(`<div class='line'
    //             style='top:${midY}px;left:${(midX - length / 2).toFixed(2)}px;width:${length.toFixed(2)}px;transform:rotate(${deg.toFixed(2)}deg);'>
    //         </div>`);
    // return `rotate(${deg.toFixed(2)}deg`;
    // return `<div class='line ${className}'
    //             style='top:${midY}px;left:${(midX - length / 2).toFixed(2)}px;width:${length.toFixed(2)}px;transform:rotate(${deg.toFixed(2)}deg);'>
    //         </div>`;

    return {
      id: guid(),
      divTop: midY,
      divLeft: (midX - length / 2).toFixed(2),
      divWidth: (length - 40).toFixed(2),
      divTransform: 'rotate(' + deg.toFixed(2) + 'deg)',
      startStep: startObj.id,
      endStep: endObj.id,
      startProcessId: startObj.processId,
      startProcessName: startObj.processName,
      endProcessId: endObj.processId,
      endProcessName: endObj.processName,
    };
  }
  function getPreConditionList(step) {
    //设置前置条件
    let tempList = ref<any[]>([]);
    formData.value.mesProcessTechnologyLineList?.filter((ele) => {
      if (ele.endStep == step.id) {
        //结束id==步骤id
        let condition = '';
        step.preConditionList?.forEach((con) => {
          if (con.stepId == ele.startStep) condition = con.preCondition;
        });
        tempList.value.push({
          stepId: ele.startStep,
          processId: ele.startProcessId,
          processName: ele.startProcessName,
          preCondition: condition,
        });
      }
    });
    step.preConditionList = tempList.value;
    return step.preConditionList;
  }
  async function handleSubmitConfirm() {
    Modal.confirm({
      title: '提示信息',
      content: '是否确认提交？',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        handleSubmit();
      },
      onCancel() {},
    });
  }
  async function handleSubmit() {
    try {
      //将移动后的位置重新设置：
      formData.value.mesProcessTechnologyStepList?.forEach((ele) => {
        let odiv = document.getElementById('ref' + ele.id);
        ele.divTop = odiv.offsetTop;
        ele.divLeft = odiv.offsetLeft;
        ele.divWidth = odiv.offsetWidth;
        ele.divHeight = odiv.offsetHeight;
        ele.preCondition = ele.preConditionList ? JSON.stringify(ele.preConditionList) : null;
      });
      // formData.value.mesProcessTechnologyLineList?.forEach((ele) => {
      //   let odiv = document.getElementById('line' + ele.id);
      //   ele.divTop = odiv.offsetTop;
      //   ele.divLeft = odiv.offsetLeft;
      //   ele.divWidth = odiv.offsetWidth;
      //   ele.divHeight = odiv.offsetHeight;
      // });

      await updateMesProcessTechnology(formData.value);
      notification.success({
        message: 'Tip',
        description: t('工艺路线保存成功！'),
      }); //提示消息

      // formRef.value.resetFields();
      emit('success');
    } finally {
    }
  }

  function handleClose() {
    Modal.confirm({
      title: '温馨提示',
      content: '您还没有进行保存，退出后当前的配置不可恢复，确认退出吗？',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        emit('cancel');
      },
      onCancel() {},
    });
  }
  const visibleModaProcess = ref<boolean>(false);
  const processList = ref<any[]>([]);
  const selectedKeys = ref<string[]>([]);
  const selectedRowsData = ref<any[]>([]);
  const keyword = ref('');
  const isCopyStep = ref<boolean>(false);
  async function queryProcessList(keywords) {
    processList.value = await getProcessList(keywords);
  }
  function handleSelectProcess() {
    isAddLine.value = false;
    console.log(
      'selectedRowsData==',
      selectedRowsData.value,
      isCopyStep.value,
      selectedStepRight.value,
    );
    if (isCopyStep.value == true) {
      //替换
      if (selectedRowsData.value && selectedRowsData.value.length > 0) {
        formData.value.mesProcessTechnologyStepList.forEach((ele) => {
          if (selectedStepRight.value?.id == ele.id) {
            ele.processId = selectedRowsData.value[0].id;
            ele.processName = selectedRowsData.value[0].process_name;
            console.log('ele', ele);
            //替换后箭头部分值重新设置
            formData.value.mesProcessTechnologyLineList.forEach((line) => {
              if (line.startStep == ele.id) {
                line.startProcessId = ele.processId;
                line.startProcessName = ele.processName;
              }
              if (line.endStep == ele.id) {
                line.endProcessId = ele.processId;
                line.endProcessName = ele.processName;
              }
            });
          }
        });
      }
    } else {
      //将选择数据赋值到

      selectedRowsData.value?.forEach((ele) => {
        let preStep =
          formData.value.mesProcessTechnologyStepList &&
          formData.value.mesProcessTechnologyStepList.length > 0
            ? formData.value.mesProcessTechnologyStepList[
                formData.value.mesProcessTechnologyStepList.length - 1
              ]
            : {};
        let preDiv = getNextPosition(preStep);
        formData.value.mesProcessTechnologyStepList.push({
          id: guid(),
          techId: formData.value.id,
          processId: ele.id,
          processName: ele.process_name,
          divTop: preDiv.divTop,
          divLeft: preDiv.divLeft,
        });
      });
    }
    visibleModaProcess.value = false;
    drawerStep();
  }
  function getNextPosition(preStep) {
    // let maxTop = 600;
    let maxLeft = document.documentElement.clientWidth - 300;
    let divTop = preStep?.divTop ? parseInt(preStep?.divTop) : 52;
    let divLeft = preStep?.divLeft ? parseInt(preStep?.divLeft) + 200 : 50;
    if (divLeft > maxLeft) {
      //如果左边距超出最大边距。换下一行（头部距离）
      divTop = preStep?.divTop ? parseInt(preStep?.divTop) + 100 : 52;
      divLeft = 50;
    } else {
      divTop = preStep?.divTop ? parseInt(preStep?.divTop) : 52;
      divLeft = preStep?.divLeft ? parseInt(preStep?.divLeft) + 200 : 50;
    }

    return { divTop: divTop, divLeft: divLeft };
  }
  function onSelectChange(selectedRowKeys: [], selectedRows) {
    selectedKeys.value = selectedRowKeys;
    selectedRowsData.value = selectedRows;
  }
  const columns2 = [
    {
      title: '工序编码',
      dataIndex: 'process_code',
      sorter: true,
      width: 100,
    },
    {
      title: '工序名称',
      dataIndex: 'process_name',
      sorter: true,
      width: 130,
    },
    {
      title: '工序类型',
      dataIndex: 'type_name',
      sorter: true,
      width: 100,
    },
    {
      title: '描述',
      dataIndex: 'remark',
      sorter: true,
      width: 100,
    },
  ];
</script>
<style lang="less" scoped>
  .sub-title {
    font-weight: bold;
    margin: 15px 0 20px 3px;
    color: #606266;
  }

  .table-bottom {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 5px;

    & > div > span {
      margin-left: 40px;
    }
  }
  .headDiv {
    padding: 10px 16px;
    text-align: right;
    background: white;
    border-bottom: 1px solid rgb(240, 240, 240);
    border-radius: 0px 0px 2px 2px;
    position: absolute;
    top: -3px;
    width: 500px;
    right: 10px;
  }
  .footerDiv {
    padding: 10px 16px;
    text-align: right;
    background: white;
    border-top: 1px solid rgb(240, 240, 240);
    border-radius: 0px 0px 2px 2px;
    position: absolute;
    bottom: 1px;
    width: 98%;
  }

  .padding {
    padding: 12px;
  }

  .containers {
    padding-top: 50px;
    width: 100%;
    height: 600px;
    position: relative;
  }

  /* 画布 */
  .canvas {
    border: 1px solid;
    width: 100%;
    height: 100%;
    background: url('/analisis/canvas_bk.png');
  }
  .clean-icon {
    background-color: @clear-color;
    border-color: @clear-color;
  }
  .stepDiv {
    width: 120px;
    height: 68px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 2px solid #333333;

    align-content: center;
    display: inline-grid;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    // margin-left: 50px;
    // margin-top: 50px;
    cursor: pointer;
  }
  .stepDiv-active {
    border: 2px solid #5e95ff;
  }
  .stepName {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
  .context-menu {
    position: absolute;
    width: 110px;
    // height: 92px;
    background: #ffffff;
    box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    padding: 0 10px;
  }
  .copyBtn {
    border-bottom: 1px solid #eeeeee;
    height: 25px;
    color: #333;
    cursor: pointer;
  }
  .deleteBtn {
    height: 25px;
    color: #ff5353;
    cursor: pointer;
  }
  .arrow-active {
    border-bottom: 2px solid #5e95ff !important; /* 线条样式 */
  }
  .arrow {
    position: absolute;
    border-bottom: 2px solid #000; /* 线条样式 */
    display: inline-block;
    transform: rotate(0deg); /* 箭头变形 */
  }
  .arrow:before {
    content: '';
    position: absolute;
    top: 50%;
    right: -9px;
    width: 0;
    height: 0;
    margin-top: -7px;
    border: 8px solid transparent; /* 箭头大小与样式 */
    border-right-color: #000; /* 填充颜色 */
    transform: translate(0, 0) rotate(180deg);
  }
</style>
