<template>
  <div>
    <div id="content" class="page-grid-box">
      <div class="page-grid-item-menu">
        <a-button :disabled="!canUndo" size="small" @click="undo">
          撤消
        </a-button>
        <a-button :disabled="!canRedo" size="small" @click="redo">
          重做
        </a-button>
        <a-button size="small" @click="showTemplate"> 加载默认模板 </a-button>
      </div>
      <div ref="stencilContainer" class="page-grid-item-dragable-group" />

      <div class="page-grid-item-x6">
        <div ref="container" class="content" />
      </div>
      <div
        style="padding: 5px; background-color: #f5f5f5; width: 270px"
        class="page-grid-item-props"
      >
        <a-form
          :model="formState"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 14 }"
        >
          <a-form-item
            label="X坐标"
            class="m-ant-form-item"
          >
            <a-input-number
              v-model:value="formState.x"
              :disabled="formState.type == 'tagBackground'"
              :min="0"
              class="m-form-item"
              @change="xChange"
            />
          </a-form-item>
          <a-form-item
            label="Y坐标"
            class="m-ant-form-item"
          >
            <a-input-number
              v-model:value="formState.y"
              :disabled="formState.type == 'tagBackground'"
              :min="0"
              class="m-form-item"
              @change="yChange"
            />
          </a-form-item>
          <a-form-item
            v-show="formState.type != null"
            label="节点类型"
            class="m-ant-form-item"
          >
            <a-select
              v-model:value="formState.type"
              class="m-form-item"
              @select="typeChange"
            >
              <a-select-option value="" />
              <a-select-option value="tagBackground">标签背景</a-select-option>
              <a-select-option value="assetNo">资产编号</a-select-option>
              <a-select-option value="assetName">资产名称</a-select-option>
              <a-select-option value="printField2">所属单位</a-select-option>
              <a-select-option value="depositoryUser">保管人</a-select-option>
              <a-select-option value="epc">Epc</a-select-option>
              <a-select-option value="barCode">二维码</a-select-option>
              <a-select-option value="staticImage">图片</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="高度"
            class="m-ant-form-item"
          >
            <a-input-number
              v-model:value="formState.height"
              :min="0"
              class="m-form-item"
              @change="heightChange"
            />
          </a-form-item>
          <a-form-item
            label="宽度"
            class="m-ant-form-item"
          >
            <a-input-number
              v-model:value="formState.width"
              :min="0"
              class="m-form-item"
              @change="widthChange"
            />
          </a-form-item>
          <a-form-item
            v-show="formState.text != null"
            label="内容"
            class="m-ant-form-item"
          >
            <a-input
              v-model:value="formState.text"
              class="m-form-item"
              @change="textChange"
            />
          </a-form-item>
          <a-form-item
            v-show="formState.fontSize != null"
            label="字体大小"
            class="m-ant-form-item"
          >
            <a-input
              v-model:value="formState.fontSize"
              class="m-form-item"
              @change="fontSizeChange"
            />
          </a-form-item>
          <a-form-item
            v-show="formState.textColor != null"
            label="文字颜色"
            class="m-ant-form-item"
          >
            <a-input
              v-model:value="formState.textColor"
              type="color"
              class="m-form-item"
              @change="textColorChange"
            />
          </a-form-item>
          <a-form-item
            v-show="formState.border != null"
            label="边框颜色"
            class="m-ant-form-item"
          >
            <a-input
              v-model:value="formState.border"
              type="color"
              class="m-form-item"
              @change="borderChange"
            />
          </a-form-item>
          <a-form-item
            v-show="formState.imgUrl != null"
            label="图片地址"
            class="m-ant-form-item"
          >
            <a-input
              v-model:value="formState.imgUrl"
              class="m-form-item"
              @change="imgUrlChange"
            />
            <a-upload
              name="file"
              :multiple="false"
              :before-upload="beforeImageUpload"
              accept="image/*"
              size="small"
            >
              <a-button size="small">
                <upload-outlined />
                上传
              </a-button>
            </a-upload>
          </a-form-item>
          <a-form-item
            v-show="
              formState != null &&
                formState.type !== 'tagBackground'
            "
            label="操作"
            class="m-ant-form-item"
          >
            <a-button size="small" @click="deleteNode">删除</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
  <a-divider />
  <div class="operationDiv">
    <a-button @click="before">上一步</a-button>
    <div>
      <a-button style="margin-right: 48px" @click="output">保存模版</a-button>
      <a-button style="margin-right: 48px" type="primary" @click="getPng">
        预览图片
      </a-button>
    </div>
  </div>
  <a-modal
    v-model:visible="visible"
    title="请填写模版名称"
    ok-text="确认"
    cancel-text="取消"
    @ok="handleOk"
  >
    <a-input v-model:value="TempName" placeholder="请输入模版名称" />
  </a-modal>
  <a-modal
    v-model:visible="imgVisible"
    title="预览图片"
    :body-style="bodyStyle"
    ok-text="确认"
    cancel-text="取消"
    @ok="imgHandleOk"
  >
    <a-image :src="imgBase64" />
  </a-modal>
  <a-modal
    v-model:visible="showBaseTemplate"
    title="请选择默认模板"
    ok-text="确认"
    cancel-text="取消"
    @ok="loadTemplate"
  >
    <label style="margin-left: 16px">默认模板：</label>
    <a-select
      v-model:value="baseValue"
      style="width: 200px"
      :options="options"
      @change="selectChange"
    />
  </a-modal>
</template>

<script setup>
import { ref, h, onMounted, computed } from 'vue';
import { Graph, Shape, Addon, DataUri } from '@antv/x6';
import { useStore } from 'vuex';
import { message, Modal } from 'ant-design-vue';
import Common from '../../common/Common.js';
import { UploadOutlined } from '@ant-design/icons-vue';
import { template } from '../../common/template';

const store = useStore();
const { Stencil } = Addon;

const { Rect, Image } = Shape;
let cellTem = null;

const TemText = computed(() => store.state.downloadStore.tempText);
const TempId = computed(() => store.state.downloadStore.templateId);
const TempName = ref('');

const imgBase64 = ref('');

let graph = null;
let history = null;
const formState = ref({
  x: null,
  y: null,
  text: null,
  textColor: null,
  border: null,
  imgUrl: null,
  height: null,
  width: null,
  type: null,
  fontSize: null,
});
const container = ref(null);
const stencilContainer = ref(null);
const visible = ref(false);

// 是否可以redo，undo
const canRedo = ref(false);
const canUndo = ref(false);

const options = ref([]);
const baseData = ref('');
const baseValue = ref('');
const showBaseTemplate = ref(false);
const bodyStyle = {
  display: 'flex',
  justifyContent: 'center',
};
// 选择框配置数据
const showTemplate = () => {
  showBaseTemplate.value = true;
  template.forEach(item => {
    item.label = item.templateName;
    item.value = JSON.stringify(item.templateData);
  });
  options.value = template;
};
// 获取默认数据
const selectChange = value => {
  baseData.value = value;
};
// 加载默认模板
const loadTemplate = () => {
  if (baseData.value !== '') {
    showBaseTemplate.value = false;
    graph.fromJSON(JSON.parse(baseData.value));
  } else {
    message.info('请选择默认模板');
  }
};
// 保存模板
const handleOk = () => {
  if (TempName.value == '') {
    Modal.info({
      title: '提示',
      content: h('div', {}, [h('p', '模版名称不能为空')]),
      onOk() {
        // console.log('ok');
      },
    });
    return;
  }
  visible.value = false;
  let json = graph.toJSON();
  // console.log(json.cells);
  $.ajax({
    url: '/api/printPageResource/uploadCustomerPrintTemplateX6',
    type: 'post',
    // contentType: 'application/json',
    dataType: 'json',
    data: {
      no: moment(new Date()).format('YYYY-MM-DD HH:mm'),
      name: TempName.value,
      contentX6: JSON.stringify(json),
      type: 'X6',
      id: TempId.value,
    },
    beforeSend: function (request) {
      Common.addTokenToRequest(request);
    },
    success: res => {
      // console.log(res);
      if (res) {
        Modal.info({
          title: '提示',
          content: h('div', {}, [h('p', '上传成功！')]),
          onOk() {},
        });
      } else {
        Modal.info({
          title: '提示',
          content: h('div', {}, [h('p', res)]),
          onOk() {},
        });
      }
    },
    error: e => {
      Common.processException(e);
    },
  });
  // console.log('发请求');
};
const imgVisible = ref(false);

const beforeImageUpload = file => {
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = e => {
    cellTem.attr('image/xlink:href', e.target.result);
  };
  return false;
};

const imgHandleOk = () => {
  imgVisible.value = false;
};

const before = () => {
  store.commit('changeStep', 0);
};
const textChange = () => {
  cellTem.attr('label/text', formState.value.text);
};
const fontSizeChange = () => {
  cellTem.attr('label/fontSize', formState.value.fontSize);
};
const output = () => {
  visible.value = true;
  console.log(graph.toJSON());
  // console.log(JSON.stringify(graph.toJSON()));
};

const getPng = () => {
  graph.toJPEG(
    dataUri => {
      // 下载
      imgVisible.value = true;
      imgBase64.value = dataUri;
      // console.log(dataUri);
      // DataUri.downloadDataUri(dataUri, 'temp.jpeg');
    },
    {
      serializeImages: true,
      quality: 1, //图片质量
    },
  );
};

const deleteNode = () => {
  let cells = graph.getSelectedCells();
  if (cells != null) {
    cells.forEach(cell => {
      if (!isTagBackgroundCell(cell)) {
        graph.removeNode(cell);
      }
    });
  }
};

const isTagBackgroundCell = cell => {
  if (cell == null) {
    return false;
  }
  // 根节点不允许修改
  if (cell.getData().type === 'tagBackground') {
    return true;
  }
  return false;
};

const textColorChange = () => {
  cellTem.attr('text/fill', formState.value.textColor);
};
const borderChange = () => {
  cellTem.attr('rect/stroke', formState.value.border);
};

const imgUrlChange = () => {
  cellTem.attr('image/xlink:href', formState.value.imgUrl);
};

const typeChange = (value, option) => {
  cellTem.data.type = value;
};
const widthChange = value => {
  if(value === null){
    formState.value.width = 0;
  }
  resetSize();
};
const heightChange = value => {
  if(value === null){
    formState.value.height = 0;
  }
  resetSize();
};

const resetSize = () => {
  if (cellTem == null) {
    return;
  }
  if (
    formState.value.width != null &&
    formState.value.height != null
  ) {
    cellTem.size(
      parseInt(formState.value.width),
      parseInt(formState.value.height),
    );
  }
};

const xChange = value => {
  if(value === null){
    formState.value.x = 0;
  }
  resetPosition();
};

const yChange = value => {
  if(value === null){
    formState.value.y = 0;
  }
  resetPosition();
};

const resetPosition = () => {
  if (cellTem == null) {
    return;
  }
  // 根节点不允许修改
  if (cellTem.getData().type === 'tagBackground') {
    return;
  }
  if (
    formState.value.x != null &&
    formState.value.y != null
  ) {
    cellTem.position(parseInt(formState.value.x), parseInt(formState.value.y));
  }
};

const undo = event => {
  history.undo();
};

const redo = event => {
  history.redo();
};

const setGraph = () => {
  graph = new Graph({
    container: container.value,
    width: 800,
    height: 400,
    background: {
      color: '#ddd',
    },
    grid: {
      size: 10,
      visible: true,
    },
    history: {
      enabled: true,
    },
    resizing: {
      enabled: true,
      restricted: true,
      // 让节点成为另一个节点的子节点
      //   embedding: {
      //   enabled: true,
      //   findParent({ node }) {
      //     const bbox = node.getBBox()
      //     return this.getNodes().filter((node) => {
      //       // 只有 data.parent 为 true 的节点才是父节点
      //       const data = node.getData()
      //       if (data && data.parent) {
      //         const targetBBox = node.getBBox()
      //         return bbox.isIntersectWithRect(targetBBox)
      //       }
      //       return false
      //     })
      //   }
      // }
    },
    interacting: function (cellView) {
      if (cellView.cell.getData().type === 'tagBackground') {
        return { nodeMovable: false };
      }
      return true;
    },
    selecting: {
      enabled: true,
    },
  });

  // graph.on('cell:mouseenter', ({ cell }) => {
  //   if (cell.data.parent) {
  //     return;
  //   }
  //   if (cell.isNode()) {
  //     cell.addTools([
  //       {
  //         name: 'button-remove',
  //         args: {
  //           x: 0,
  //           y: 0,
  //           offset: { x: 10, y: 10 },
  //         },
  //       },
  //     ]);
  //   }
  // });

  // graph.on('cell:mouseleave', ({ cell }) => {
  //   cell.removeTools();
  // });

  const clearFormState = () => {
    formState.value.text = null;
    formState.value.textColor = null;
    formState.value.border = null;
    formState.value.imgUrl = null;
    formState.value.type = null;
    formState.value.fontSize = null;
    formState.value.x = null;
    formState.value.y = null;
    cellTem = null;
  };

  const getFormStateFromCell = cell => {
    cellTem = cell;
    if (cell.attrs.label != undefined && cell.attrs.label.fontSize != null) {
      // console.log('fontSize', '!!!!!!!!!!!!!!!');
      formState.value.fontSize = cell.attrs.label.fontSize;
    }
    if (cell.attrs.label != undefined && cell.attrs.label.text != null) {
      formState.value.text = cell.attrs.label.text;
    }
    if (cell.attrs.text != undefined && cell.attrs.text.fill != null) {
      formState.value.textColor = cell.attrs.text.fill;
    }
    if (cell.attrs.rect != undefined && cell.attrs.rect.stroke != null) {
      formState.value.border = cell.attrs.rect.stroke;
    }
    if (cell.data.type) {
      formState.value.type = cell.data.type;
    }
    if (
      cell.attrs.image != undefined &&
      cell.attrs.image['xlink:href'] != null
    ) {
      formState.value.imgUrl = cellTem.attrs.image['xlink:href'];
    }
    let sizeTemp = cellTem.size();
    formState.value.height = parseInt(sizeTemp.height);
    formState.value.width = parseInt(sizeTemp.width);
    let positionTemp = cellTem.position();
    formState.value.x = parseInt(positionTemp.x);
    formState.value.y = parseInt(positionTemp.y);
  };

  graph.on('cell:click', ({ cell }) => {
    clearFormState();
    getFormStateFromCell(cell);
  });

  graph.on('node:moved', ({ e, x, y, node, view }) => {
    getFormStateFromCell(node);
  });

  graph.on('node:resized', ({ e, x, y, node, view }) => {
    getFormStateFromCell(node);
  });

  graph.on('cell:added', ({ cell, index, options }) => {
    graph.cleanSelection();
    graph.select(cell);
    getFormStateFromCell(cell);
  });

  if (graph.isHistoryEnabled()) {
    graph.enableHistory();
  } else {
    graph.disableHistory();
  }

  if (graph.isSelectionEnabled()) {
    graph.enableSelection();
  } else {
    graph.disableSelection();
  }

  history = graph.history;
  history.on('change', () => {
    canRedo.value = history.canRedo();
    canUndo.value = history.canUndo();
    // console.log('canRedo=' + canRedo.value + ',canUndo=' + canUndo.value);
  });

  // 创建节点
  const Box = new Shape.Rect({
    x: 0,
    y: 0,
    width: 740,
    height: 370,

    attrs: {
      rect: {
        stroke: '#FFFFFF',
      },
    },

    data: {
      parent: true,
      type: 'tagBackground',
    },
  });

  // 添加到画布
  graph.addNode(Box);
};

const setStencil = () => {
  const stencil = new Stencil({
    title: '',
    target: graph,
    stencilGraphWidth: 280,
    layoutOptions: {
      columns: 1,
      resizeToFit: true,
    },
    groups: [
      {
        name: 'group',
        title: TemText.value,
        graphWidth: 280,
        graphHeight: 800,
      },
    ],
  });

  const tem1 = new Rect({
    width: 100,
    height: 50,
    stroke: '#FFFFFF',
    attrs: {
      label: {
        fontSize: 14,
        text: '文本',
        refX: 0,
        refY: 0,
        textAnchor: 'start',
        textVerticalAnchor: 'top',
        textWrap: {
          ellipsis: true,
        },
      },
      rect: {
        stroke: '#FFFFFF',
      },
    },
    data: {
      type: '静态文本',
    },
  });
  const tem2 = new Rect({
    width: 100,
    height: 50,
    attrs: {
      label: {
        fontSize: 14,
        text: '动态文本：',
        refX: 0,
        refY: 0,
        textAnchor: 'start',
        textVerticalAnchor: 'top',
        textWrap: {
          ellipsis: true,
        },
      },
      rect: {
        stroke: '#FFFFFF',
      },
    },
    data: {
      type: '动态文本',
    },
  });

  const tem3 = new Image({
    width: 96,
    height: 30,
    data: {
      type: 'staticImage',
    },
    imageUrl:
      'data:image/jpeg;base64,[encoded data, 33576 characters]',
  });

  const tem4 = new Image({
    width: 50,
    height: 50,
    data: {
      type: '二维码',
    },
    imageUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAIAAAAP3aGbAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAH4ElEQVR4nO3dQY4aSxBFUfjq/W+5/wYskYN0OG5xztgqoMFXOXnK9+/v7wug4L9//QYATgkWkCFYQIZgARmCBWQIFpAhWECGYAEZggVkCBaQIVhAhmABGYIFZAgWkCFYQIZgARmCBWQIFpAhWECGYAEZggVkCBaQIVhAxs+tB73f71uPKjq53vHkT3TrOScWXkk5+Sfa9pwHu/hLc8ICMgQLyBAsIEOwgAzBAjIEC8gQLCBDsIAMwQIyBAvIECwg49qW8MTC8dpHF1dgkx9/4Z96255u2/t5rfzWPhr+MzphARmCBWQIFpAhWECGYAEZggVkCBaQIVhAhmABGYIFZAgWkDG6JTwxOU1aON368ovwbn0jk3cODvvy/yBOWECGYAEZggVkCBaQIVhAhmABGYIFZAgWkCFYQIZgARmCBWSs2xI+2K0V2Lad4OHi7ORtT+77Hrw3fDAnLCBDsIAMwQIyBAvIECwgQ7CADMECMgQLyBAsIEOwgAzBAjJsCedMjs4mR3AXt43brly0E9zGCQvIECwgQ7CADMECMgQLyBAsIEOwgAzBAjIEC8gQLCBDsICMdVvCL19vbbtz8MTFr+zWBHLyCsjhX+yX/wdxwgIyBAvIECwgQ7CADMECMgQLyBAsIEOwgAzBAjIEC8gQLCBjdEtYHMpdNDmU2/acw0dN2nYH4vzLFTlhARmCBWQIFpAhWECGYAEZggVkCBaQIVhAhmABGYIFZAgWkCFYQMZ72ySVj25NZH31Hy28SPXLOWEBGYIFZAgWkCFYQIZgARmCBWQIFpAhWECGYAEZggVkCBaQsW5LOHy75y0L39IVF38exQlk8T2/ZieQw3NLJywgQ7CADMECMgQLyBAsIEOwgAzBAjIEC8gQLCBDsIAMwQIyrm0Ji0O5E9EV2OQI7uJXf+vlinvDQ08d/x5ywgIyBAvIECwgQ7CADMECMgQLyBAsIEOwgAzBAjIEC8gQLCDj51+/gb/lyzeS0VvnTmwb0y28ujH6oz3hhAVkCBaQIVhAhmABGYIFZAgWkCFYQIZgARmCBWQIFpAhWEDGtS1hcbs3PJTbdufgsC//+Ce2Xcu4cEnqhAVkCBaQIVhAhmABGYIFZAgWkCFYQIZgARmCBWQIFpAhWEDGe9stb7eWYsPbxm1TyslV2sVx3+Svcdso79C2/7DDnLCADMECMgQLyBAsIEOwgAzBAjIEC8gQLCBDsIAMwQIyBAvIuHYv4S3bplIL7yW89VrDtl2W9+V3IJ7YNux9OWEBIYIFZAgWkCFYQIZgARmCBWQIFpAhWECGYAEZggVkCBaQsW5LGB3cTY7Xbn38bc95zV6VuPArm5wuRmeSTlhAhmABGYIFZAgWkCFYQIZgARmCBWQIFpAhWECGYAEZggVkCBaQ8Z68uHRy2XtieLa67Y7YyaXx4aNOTN7uuXAhHP0PcosTFpAhWECGYAEZggVkCBaQIVhAhmABGYIFZAgWkCFYQIZgARnrLlI9sXBNNjmUm7zdc+HcMroBPLHtV7SQExaQIVhAhmABGYIFZAgWkCFYQIZgARmCBWQIFpAhWECGYAEZyS3h5Jrs4lDu4stdec7w4sxQ7pGGvw4nLCBDsIAMwQIyBAvIECwgQ7CADMECMgQLyBAsIEOwgAzBAjKubQknL8KbdPFewlsfbdtucfjqxsmdYPTqxluvtZATFpAhWECGYAEZggVkCBaQIVhAhmABGYIFZAgWkCFYQIZgARnvyWXWg2+Um1xmRb+yyQnk5LL14oy0+ON3LyHAnwkWkCFYQIZgARmCBWQIFpAhWECGYAEZggVkCBaQIVhAxrUt4bad4PC1awuHaVdsez+Hom/7lm13F9oSAt9IsIAMwQIyBAvIECwgQ7CADMECMgQLyBAsIEOwgAzBAjJ+bj1o25Vq297PoYXrrUnblq3bFrKvR08gTzhhARmCBWQIFpAhWECGYAEZggVkCBaQIVhAhmABGYIFZAgWkHFtS/jlE6eTQdm22+IWDuVOTH78Ww5f68EXd97ihAVkCBaQIVhAhmABGYIFZAgWkCFYQIZgARmCBWQIFpAhWECGYAEZ18bPJxYuaT+6uBHdNjcdvkn05FHb9tgPvtf21rc/zAkLyBAsIEOwgAzBAjIEC8gQLCBDsIAMwQIyBAvIECwgQ7CAjNEt4YnJ+VJ04bXNxVtCF47XPlr4nicnmcO/WCcsIEOwgAzBAjIEC8gQLCBDsIAMwQIyBAvIECwgQ7CADMECMtZtCR9scky3cLg3OXDbdr/hxde69dG2/YkOOWEBGYIFZAgWkCFYQIZgARmCBWQIFpAhWECGYAEZggVkCBaQYUs4Z3IF5nrHj/9m4Ziu+K0N/xmdsIAMwQIyBAvIECwgQ7CADMECMgQLyBAsIEOwgAzBAjIEC8hYtyVcOEy7ZdtFeMMrsIXbvY8mr4mcf9RHC78yJywgQ7CADMECMgQLyBAsIEOwgAzBAjIEC8gQLCBDsIAMwQIyRreEk9euccXCNdmJ6C/t1gL01mudcC8hwJ8JFpAhWECGYAEZggVkCBaQIVhAhmABGYIFZAgWkCFYQMZ74RAM4I+csIAMwQIyBAvIECwgQ7CADMECMgQLyBAsIEOwgAzBAjIEC8gQLCBDsIAMwQIyBAvIECwgQ7CADMECMgQLyBAsIEOwgAzBAjIEC8gQLCDjf21kPSzuSrEmAAAAAElFTkSuQmCC',
  });
  stencil.load([tem1, tem2, tem3, tem4], 'group');
  stencilContainer.value.appendChild(stencil.container);
};

onMounted(() => {
  // console.log('加载完毕');
  setGraph();
  setStencil();
  let temp = store.state.downloadStore.templateVal;
  if (temp != '') {
    // console.log(temp);
    graph.fromJSON(JSON.parse(temp));
  }
  if (TemText.value == '新建模板') {
    showTemplate();
    TempName.value = '新建模板';
  }else{
    TempName.value = TemText.value;
  }
});
</script>



<style scoped>
.page-grid-box {
  display: grid;
  grid-template-columns: 165px auto 300px;
  grid-template-rows: 35px auto 270px;
  height: calc(100vh - 400px);
}

.page-grid-item-menu {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 4;
}

.page-grid-item-dragable-group {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
  overflow: auto;
  position: relative;
  border-right: 1px solid rgb(231, 229, 229);
}

.page-grid-item-x6 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
  /* overflow: auto; */
}

.page-grid-item-props {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 3;
  grid-column-end: 4;
  overflow: auto;
}

.page-grid-item-1-1 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
  background-color: #fafafa;
  border-right: 1px solid rgb(231, 229, 229);
  padding: 5px 5px;
}

.page-grid-item-2-1 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
  overflow: auto;
  background-color: #fafafa;
  border-right: 1px solid rgb(231, 229, 229);
  padding: 0px 5px;
}

.m-form-item {
  width: 100%;
}

.m-ant-form-item {
  margin-bottom: 0px;
}
.operationDiv {
  display: flex;
  justify-content: space-between;
  margin-top: 100px;
}
</style>  