<template>
  <a-layout style="height: 100%">
    <splitPanel
      style="height: 100%; border: 1px solid #d1dbe5; padding: 0px"
      :leftWidth="leftWidth"
      :isShowSplite="showPeoperty && !isFullScreen"
    >
      <template #left-content>
        <!-- 20260317将编辑和显示做两个实例，防止因为mxclient中因为全局变量的问题引起的打架 -->
        <GraphEdit
          ref="refparentgraph"
          @hidePorperty="handleHide"
          @return="handleReturn"
          :DeviceOption="DeviceOption"
          :funOption="funOption"
          :AllfunOption="AllfunOption"
          :formularColor="formularColor"
          :showSimpleBtn="showSimpleBtn"
          :ifCanBeEdite="ifCanBeEdite"
          :data="data"
          :titleFontSize="titleFontSize"
          :showPeoperty="showPeoperty"
          :SFCcolor="SFCcolor"
          :outMaxKeyWord="outMaxKeyWord"
          :CommonFunRow="CommonFunRow"
          :QCFunRow="QCFunRow"
          :showEnable="showEnable"
          :moduleType="moduleType"
          :planDevice="planDevice"
          :ifUpdate="ifUpdate"
          :matLimitOption="matLimitOption"
          :isDoubleMode="isDoubleMode"
          @closeParamForm="handleCloseForm"
          @showGraphTree="handleshowGraphTree"
          @cellDbClick="handleCellDbClick"
          @cellClick="handleCellClick"
          @ifEditableChange="handleEditChange"
          v-if="showGraph()"
          :ParamNameReplaceRelation="ParamNameReplaceRelation"
          @fullScreenState="handleFullScreenChange"
          :baseParameterOption="props.baseParameterOption"
          @show-child="handleShowChilGraph"
        >
        </GraphEdit>
        <GraphShow
          v-else
          ref="refparentgraph"
          @hidePorperty="handleHide"
          @return="handleReturn"
          :isDoubleMode="isDoubleMode"
          :DeviceOption="DeviceOption"
          :funOption="funOption"
          :AllfunOption="AllfunOption"
          :formularColor="formularColor"
          :showSimpleBtn="showSimpleBtn"
          :ifCanBeEdite="ifCanBeEdite"
          :data="data"
          :titleFontSize="titleFontSize"
          :showPeoperty="showPeoperty"
          :SFCcolor="SFCcolor"
          :outMaxKeyWord="outMaxKeyWord"
          :CommonFunRow="CommonFunRow"
          :QCFunRow="QCFunRow"
          :showEnable="showEnable"
          :moduleType="moduleType"
          :planDevice="planDevice"
          :ifUpdate="ifUpdate"
          :matLimitOption="matLimitOption"
          @closeParamForm="handleCloseForm"
          @showGraphTree="handleshowGraphTree"
          @cellDbClick="handleCellDbClick"
          @cellClick="handleCellClick"
          @ifEditableChange="handleEditChange"
          :ParamNameReplaceRelation="ParamNameReplaceRelation"
          @fullScreenState="handleFullScreenChange"
          :baseParameterOption="props.baseParameterOption"
          :isShowStart="isShowStart"
          :isShowStop="isShowStop"
          :isShowCompleted="isShowCompleted"
          :isShowPause="isShowPause"
          :isShowContinue="isShowContinue"
          :isShowCancel="isShowCancel"
          :isShowReset="isShowReset"
          :PlanBatch="PlanBatch"
          :StartMode="StartMode"
          :IsFormular="IsFormular"
          :DownloadStatus="DownloadStatus"
          :isShowOperateBtn="isShowOperateBtn"
          :ReceipID="ReceipID"
          :isShowOperateBtnInGraph="isShowOperateBtnInGraph"
          :WorkCenterId="WorkCenterId"
          @show-child="handleShowChilGraph"
        ></GraphShow>
      </template>
      <template #right-content v-if="showPeoperty && !isFullScreen">
        <a-layout style="height: 100%; padding: 2px">
          <a-layout-content>
            <keep-alive>
              <component
                :is="propertyComponent"
                :formData="formData"
                :DeviceOption="DeviceOption"
                :funOption="funOption"
                :QCfunOption="QCfunOption"
                :AllfunOption="AllfunOption"
                :MCIValiantOption="MCIValiantOption"
                :formularColor="formularColor"
                :receipFunction="receipFunction"
                :moduleType="moduleType"
                :QCItemCols="QCItemCols"
                :ifDefaultMCIReadOnly="ifDefaultMCIReadOnly"
                :matFilter="matFilter"
                :matCol="matCol"
                :MaterialCateOption="MaterialCateOption"
                :circle="circle"
                :showTreeOperate="ifCanBeEdite"
                :ifCanBeEdite="ifCanBeEdite"
                :QCItemOptions="QCItemOptions"
                :QCVariable="QCVariable"
                :ScriptVar="ScriptVar"
                :isHaveMaterial="isHaveMaterial"
                :isMustSelectMaterialName="isMustSelectMaterialName"
                :ifHaveQCDetails="ifHaveQCDetails"
                :errorLimitDefaultVal="errorLimitDefaultVal"
                :DevCtldetailsColumns="DevCtldetailsColumns"
                :DevCtlmainColumns="DevCtlmainColumns"
                :DevCtlmainFilter="DevCtlmainFilter"
                :DeviceModelCols="DeviceModelCols"
                :ExpressionOption="ExpressionOption"
                :ErpBomDetails="ErpBomDetails"
                :ErpBomCols="ErpBomCols"
                :isMatFromERP="isMatFromERP"
                @closeParamForm="handleCloseForm"
                :planDevice="planDevice"
                :isRequirePlcID="isRequirePlcID"
                :PLCOption="PLCOption"
                :matLimitOption="matLimitOption"
                :ParamNameReplaceRelation="ParamNameReplaceRelation"
                :DeviceModelMainCols="DeviceModelMainCols"
                :ifUseMultiMat="ifUseMultiMat"
                :multiMatCols="multiMatCols"
                :erpBomMatRelation="erpBomMatRelation"
                :CHQCUseLims="props.CHQCUseLims"
                :mainData="props.mainData"
                :ifFromTemplate="props.ifFromTemplate"
                :baseParameterOption="props.baseParameterOption"
                :isShowStart="isShowStart"
                :isShowStop="isShowStop"
                :isShowCompleted="isShowCompleted"
                :isShowPause="isShowPause"
                :isShowContinue="isShowContinue"
                :isShowCancel="isShowCancel"
                :isShowReset="isShowReset"
                :PlanBatch="PlanBatch"
                :StartMode="StartMode"
                :IsFormular="IsFormular"
                :DownloadStatus="DownloadStatus"
                :isShowOperateBtn="isShowOperateBtn"
                :ReceipID="ReceipID"
                :isShowOperateBtnInGraph="isShowOperateBtnInGraph"
                :limsSchemeMainTableParams="props.limsSchemeMainTableParams"
                :limsSchemeDetailTableParams="props.limsSchemeDetailTableParams"
                :WorkCenterId="WorkCenterId"
              >
              </component>
            </keep-alive>
          </a-layout-content>
        </a-layout>
      </template>
    </splitPanel>
    <a-float-button
      v-if="isFullScreen == true && showPeoperty == true"
      @click="handleShowDrawer"
    />
    <a-drawer
      v-model:open="openDrawer"
      :mask="false"
      class="custom-class"
      root-class-name="root-class-name"
      :root-style="{ color: 'blue' }"
      style="color: red"
      title="组件信息"
      placement="right"
      :bodyStyle="{ padding: '5px' }"
    >
      <a-layout style="height: 100%; padding: 2px">
        <a-layout-content>
          <component
            :is="propertyComponent"
            :formData="formData"
            :DeviceOption="DeviceOption"
            :funOption="funOption"
            :QCfunOption="QCfunOption"
            :AllfunOption="AllfunOption"
            :MCIValiantOption="MCIValiantOption"
            :formularColor="formularColor"
            :receipFunction="receipFunction"
            :moduleType="moduleType"
            :QCItemCols="QCItemCols"
            :ifDefaultMCIReadOnly="ifDefaultMCIReadOnly"
            :matFilter="matFilter"
            :matCol="matCol"
            :MaterialCateOption="MaterialCateOption"
            :circle="circle"
            :showTreeOperate="ifCanBeEdite"
            :ifCanBeEdite="ifCanBeEdite"
            :QCItemOptions="QCItemOptions"
            :QCVariable="QCVariable"
            :ScriptVar="ScriptVar"
            :isHaveMaterial="isHaveMaterial"
            :isMustSelectMaterialName="isMustSelectMaterialName"
            :ifHaveQCDetails="ifHaveQCDetails"
            :errorLimitDefaultVal="errorLimitDefaultVal"
            :DevCtldetailsColumns="DevCtldetailsColumns"
            :DevCtlmainColumns="DevCtlmainColumns"
            :DevCtlmainFilter="DevCtlmainFilter"
            :DeviceModelCols="DeviceModelCols"
            :ExpressionOption="ExpressionOption"
            :ErpBomDetails="ErpBomDetails"
            :ErpBomCols="ErpBomCols"
            :isMatFromERP="isMatFromERP"
            @closeParamForm="handleCloseForm"
            :planDevice="planDevice"
            :isRequirePlcID="isRequirePlcID"
            :PLCOption="PLCOption"
            :matLimitOption="matLimitOption"
            :ParamNameReplaceRelation="ParamNameReplaceRelation"
            :DeviceModelMainCols="DeviceModelMainCols"
            :ifUseMultiMat="ifUseMultiMat"
            :multiMatCols="multiMatCols"
            :erpBomMatRelation="erpBomMatRelation"
            :CHQCUseLims="props.CHQCUseLims"
            :mainData="props.mainData"
            :ifFromTemplate="props.ifFromTemplate"
            :baseParameterOption="props.baseParameterOption"
            :isShowStart="isShowStart"
            :isShowStop="isShowStop"
            :isShowCompleted="isShowCompleted"
            :isShowPause="isShowPause"
            :isShowContinue="isShowContinue"
            :isShowCancel="isShowCancel"
            :isShowReset="isShowReset"
            :PlanBatch="PlanBatch"
            :StartMode="StartMode"
            :IsFormular="IsFormular"
            :DownloadStatus="DownloadStatus"
            :isShowOperateBtn="isShowOperateBtn"
            :ReceipID="ReceipID"
            :isShowOperateBtnInGraph="isShowOperateBtnInGraph"
            :limsSchemeMainTableParams="props.limsSchemeMainTableParams"
            :limsSchemeDetailTableParams="props.limsSchemeDetailTableParams"
            :WorkCenterId="WorkCenterId"
          >
          </component>
        </a-layout-content>
      </a-layout>
    </a-drawer>
    <a-float-button
      v-if="isFullScreen == true && showPeoperty == true"
      @click="handleShowDrawer"
    />
    <a-drawer
      v-model:open="showGraphDetail"
      class="custom-class"
      root-class-name="root-class-name"
      :root-style="{ color: 'blue' }"
      style="color: red"
      :title="showGraphDetailTitle"
      placement="right"
      :bodyStyle="{ padding: '5px' }"
      :mask="true"
      :maskClosable="true"
      size="large"
    >
      <graphShow
        data=""
        v-if="showGraphDetail"
        :ifCanBeEdite="false"
        :AllfunOption="props.AllfunOption"
        :outMaxKeyWord="outMaxKeyWord"
        :DeviceOption="DeviceOption"
        :funOption="funOption"
        :showSimpleBtn="props.showSimpleBtn"
        :titleFontSize="titleFontSize"
        :showPeoperty="showPeoperty"
        :showEnable="props.showEnable"
        :moduleType="props.moduleType"
        :planDevice="props.planDevice"
        :ifUpdate="props.ifUpdate"
        :matLimitOption="props.matLimitOption"
        :isDoubleMode="isDoubleMode"
        :ParamNameReplaceRelation="ParamNameReplaceRelation"
        @return="handleReturn"
        @hidePorperty="handleHide"
        @fullScreenState="handleFullScreenChange"
        @showGraphTree="handleshowGraphTree"
        :destroyOnClose="true"
        @closeParamForm="handleCloseForm"
        showMode="view"
        :showCells="showCells"
        :outGroupLayer="currentGropuLayer"
      >
      </graphShow>
    </a-drawer>
  </a-layout>
</template>

<script setup lang="ts">
import { PropType } from "vue";
import GraphEdit from "./lt-graph-edit/src/graph/index.vue";
import GraphShow from "./lt-graph-show/src/graph/index.vue";
import paramaGroup from "./lt-graph-edit/src/graph/component/set-parama/group-property.vue"; //组参数设置
import paramSwime from "./lt-graph-edit/src/graph/component/set-parama/swimlane-property.vue"; //泳道参数设置
import paramComFct from "./lt-graph-edit/src/graph/component/set-parama/common-function-property.vue"; //普通工艺参数设置
import paramEdge from "./lt-graph-edit/src/graph/component/set-parama/edge-property.vue"; //连线属性值
import paramCondition from "./lt-graph-edit/src/graph/component/set-parama/condition.vue"; //条件属性面板
import paramConditionReadOnly from "./lt-graph-edit/src/graph/component/set-parama/condition-readonly.vue";
import paramCpxCondition from "./lt-graph-edit/src/graph/component/set-parama/complex-condition.vue"; //复杂条件属性面板
import paramCpxConditionReadOnly from "./lt-graph-edit/src/graph/component/set-parama/complex-condition-readonly.vue";
import paramQC from "./lt-graph-edit/src/graph/component/set-parama/qc.vue"; //QC面板
import paramReturn from "./lt-graph-edit/src/graph/component/set-parama/return.vue"; //子过程返回页面
import patamSub from "./lt-graph-edit/src/graph/component/set-parama/sub.vue"; //子过程
import graphTree from "./lt-graph-edit/src/graph/component/graph-tree/graph-tree.vue"; //显示结构树
import paramaQCReadonly from "./lt-graph-edit/src/graph/component/set-parama/qc-detail-readonly.vue";
import paramComReaonly from "./lt-graph-edit/src/graph/component/set-parama/common-device-readonly/device-list-readonly.vue";
import paramTable from "./lt-graph-edit/src/graph/component/set-parama/common-mat-table/mat-table-property.vue"; //物料
import workGroup from "./lt-graph-edit/src/graph/component/set-parama/work-group-property.vue";
import parameHub from "./lt-graph-edit/src/graph/component/set-parama/hub-parama/hub.vue"; //集线器显示界面
import {
  onBeforeMount,
  ref,
  getCurrentInstance,
  reactive,
  nextTick,
  markRaw,
  computed,
  watch,
} from "vue";
import { Modal } from "ant-design-vue";
import { cloneDeep } from "lodash-es";
import splitPanel from "./lt-graph-edit/src/graph/component/splite/index.vue";
import "./lt-graph-edit/assets/mxgraph-source/css/common.css";
import "./lt-graph-edit/assets/mxgraph-source/css/explorer.css";
import Api from "./lt-graph-edit/src/api/api";

const props = defineProps({
  isDoubleMode: {
    type: Boolean,
    default: false,
  },
  limsSchemeDetailTableParams: {
    type: Object,
    default() {
      return null;
    },
  },
  limsSchemeMainTableParams: {
    type: Object,
    default() {
      return null;
    },
  },
  ifFromTemplate: {
    type: Boolean,
    default: false,
  },
  mainData: {
    type: Object,
    default() {
      return null;
    },
  },
  CHQCUseLims: {
    type: Boolean,
    default: false,
  },
  blockBottomPadding: {
    type: Number,
    default: 30,
  },
  multiMatCols: {
    type: Array,
    default() {
      return [
        {
          Field: "MaterialCode",
          Name: "物料编码",
          Width: 140,
          Fix: false,
          Visible: true,
          Style: "TextBox",
        },
        {
          Field: "TechMaterialName",
          Name: "物料型号",
          Width: 140,
          Fix: false,
          Visible: true,
          Style: "TextBox",
        },
        {
          Field: "MaterialName",
          Name: "物料名称",
          Width: 140,
          Fix: false,
          Visible: true,
          Style: "TextBox",
        },
        {
          Field: "Field01",
          Name: "备注1",
          Width: 60,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Field02",
          Name: "备注2",
          Width: 60,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Field03",
          Name: "备注3",
          Width: 60,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Field_04",
          Name: "备注4",
          Width: 60,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Field05",
          Name: "备注5",
          Width: 60,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
      ];
    },
  },
  ifUseMultiMat: {
    type: Boolean,
    default: false,
  },
  erpBomMatRelation: {
    type: Object,
    default() {
      return null;
    },
  },
  ParamNameReplaceRelation: {
    type: Object,
    default() {
      return null;
    },
  },
  receipStyle: {
    type: Array,
    default() {
      return [];
    },
  },
  formularColor: {
    type: Object,
    default() {
      return null;
    },
  },
  baseParameterOption: {
    type: Array as PropType<any[]>,
    default() {
      return [];
    },
  },
  receipFunction: {
    type: Object,
    default() {
      return null;
    },
  },
  moduleType: {
    type: String,
    default: "Formular",
  },
  showSimpleBtn: {
    type: Boolean,
    default: false,
  },
  ifCanBeEdite: {
    type: Boolean,
    default: true,
  },
  data: {
    //配方结构
    type: String,
    default: "",
  },
  SFCcolor: {
    type: Object,
    default() {},
  },
  // funOption: {
  //   //标准工艺
  //   type: Array,
  //   default() {
  //     return [];
  //   },
  // },

  QCItemCols: {
    type: Array,
    default() {
      return [];
    },
  },
  QCfunOption: {
    //QC工艺
    type: Array,
    default() {
      return [];
    },
  },
  AllfunOption: {
    //所有工艺
    type: Array,
    default() {
      return [];
    },
  },
  MCIValiantOption: {
    type: Array,
    default() {
      return [
        {
          PropertyId: "9100",
          Description: "变量ID测试",
          QCStyle: 0,
          QCClass: 0,
          QCPointer: "string",
          QCVenue: 0,
          CompanyId: "string",
          Status: 0,
        },
      ];
    },
  },
  ifDefaultMCIReadOnly: {
    type: Boolean,
    default: true,
  },
  matFilter: {
    type: Array,
    default() {
      return ["MaterialCategory", "MaterialCode", "TechMaterialName"];
    },
  },
  matCol: {
    type: Array,
    default() {
      return [
        {
          Field: "MaterialCategory",
          NameZH: "物料分类",
          NameEN: "MaterialCategory",
          Width: 100,
          Fix: false,
          Visible: true,
          Style: "TextBox",
        },
        {
          Field: "MaterialCode",
          Name: "原料物料号",
          Width: 100,
          Fix: false,
          Visible: true,
          Style: "TextBox",
        },
        {
          Field: "TechMaterialName",
          Name: "物料技术代码",
          Width: 100,
          Fix: false,
          Visible: true,
          Style: "TextBox",
        },
        {
          Field: "MaterialName",
          Name: "物料显示名称",
          Width: 100,
          Fix: false,
          Visible: true,
          Style: "TextBox",
        },
      ];
    },
  },
  MaterialCateOption: {
    type: Array,
    default() {
      return [];
    },
  },
  CommonFunRow: {
    type: Number,
    default: 6,
  },
  QCFunRow: {
    type: Number,
    default: 6,
  },
  showEnable: {
    type: Boolean,
    default: false,
  },
  planDevice: {
    type: Array,
    default() {
      return [];
    },
  },
  ifUpdate: {
    //是否只更新页面
    type: Boolean,
    default: false,
  },
  QCItemOptions: {
    //QC检验细项
    type: Array,
    default() {
      return [];
    },
  },
  QCVariable: {
    //QC检验变量
    type: Array,
    default() {
      return [];
    },
  },
  ScriptVar: {
    type: Object,
    default() {
      return {
        测试1: [],
        测试2: [],
      };
    },
  },
  isHaveMaterial: {
    type: Boolean,
    default: true,
  },
  isMustSelectMaterialName: {
    type: Boolean,
    default: true,
  },
  ifHaveQCDetails: {
    type: Boolean,
    default: true,
  },
  errorLimitDefaultVal: {
    type: String,
    default: "0.0005",
  },
  DevCtldetailsColumns: {
    type: Array,
    default() {
      return [
        {
          Field: "DeviceParamId",
          Name: "ID",
          Width: 60,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Description",
          Name: "设备参数",
          Width: 220,
          Fix: false,
          Visible: true,
          Style: "TextBox",
        },
        {
          Field: "DeviceId",
          Name: "DeviceId",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "ComBox",
          Option: [
            {
              Label: "{" + 1101 + "} " + "==" + "DB1101",
              Key: 1,
            },
            {
              Label: "{" + 1102 + "} " + "==" + "DB1102",
              Key: 2,
            },
            {
              Label: "{" + 1201 + "} " + "==" + "DB1201",
              Key: 9,
            },
            {
              Label: "{" + 1202 + "} " + "==" + "DB1201",
              Key: 10,
            },
            {
              Label: "{" + 205 + "} " + "==" + "R1211",
              Key: 205,
            },
            {
              Label: "{" + 206 + "} " + "==" + "D1221",
              Key: 206,
            },
            {
              Label: "{" + 207 + "} " + "==" + "WT1221",
              Key: 207,
            },
            {
              Label: "{" + 208 + "} " + "==" + "WT1222",
              Key: 208,
            },
            {
              Label: "{" + 209 + "} " + "==" + "R1221",
              Key: 209,
            },
            {
              Label: "{" + 211 + "} " + "==" + "MX1211",
              Key: 211,
            },
          ],
        },
        {
          Field: "LineId",
          Name: "LineId",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "ComBox",
          Option: [
            {
              Label: "{" + 1 + "} " + "==" + "线1#R1211",
              Key: 1,
            },
            {
              Label: "{" + 2 + "} " + "==" + "线2#R1221",
              Key: 2,
            },
            {
              Label: "{" + 3 + "} " + "==" + "线3#MX1211",
              Key: 3,
            },
            {
              Label: "{" + 4 + "} " + "==" + "线4#MX1212",
              Key: 4,
            },
            {
              Label: "{" + 5 + "} " + "==" + "线5#MX1221",
              Key: 5,
            },
            {
              Label: "{" + 6 + "} " + "==" + "线6#MX1222",
              Key: 6,
            },
            {
              Label: "{" + 7 + "} " + "==" + "线7#BT1231",
              Key: 7,
            },
            {
              Label: "{" + 8 + "} " + "==" + "线8#BT1232",
              Key: 8,
            },
            {
              Label: "{" + 9 + "} " + "==" + "线9#BT1233",
              Key: 9,
            },
            {
              Label: "{" + 10 + "} " + "==" + "线10#BT1241",
              Key: 10,
            },
            {
              Label: "{" + 11 + "} " + "==" + "线11#BT1242",
              Key: 11,
            },
          ],
        },
        {
          Field: "BindFuncs",
          Name: "BindFuncs",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "Array",
          Option: [
            {
              Label: "{" + 410 + "} " + "==" + "启动控温（油）",
              Key: 410,
            },
            {
              Label: "{" + 412 + "} " + "==" + "启动控温（IN）",
              Key: 412,
            },
          ],
        },
        {
          Field: "ParamStyle",
          Name: "ParamStyle",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
      ];
    },
  },
  DevCtlmainColumns: {
    type: Array,
    default() {
      return [
        {
          Field: "DeviceParamId",
          Name: "ID",
          Width: 60,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Description",
          Name: "设备参数",
          Width: 220,
          Fix: false,
          Visible: true,
          Style: "TextBox",
        },
        {
          Field: "DeviceId",
          Name: "DeviceId",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "ComBox",
          Option: [
            {
              Label: "{" + 1101 + "} " + "==" + "DB1101",
              Key: 1,
            },
            {
              Label: "{" + 1102 + "} " + "==" + "DB1102",
              Key: 2,
            },
            {
              Label: "{" + 1201 + "} " + "==" + "DB1201",
              Key: 9,
            },
            {
              Label: "{" + 1202 + "} " + "==" + "DB1201",
              Key: 10,
            },
            {
              Label: "{" + 205 + "} " + "==" + "R1211",
              Key: 205,
            },
            {
              Label: "{" + 206 + "} " + "==" + "D1221",
              Key: 206,
            },
            {
              Label: "{" + 207 + "} " + "==" + "WT1221",
              Key: 207,
            },
            {
              Label: "{" + 208 + "} " + "==" + "WT1222",
              Key: 208,
            },
            {
              Label: "{" + 209 + "} " + "==" + "R1221",
              Key: 209,
            },
            {
              Label: "{" + 211 + "} " + "==" + "MX1211",
              Key: 211,
            },
          ],
        },
        {
          Field: "LineId",
          Name: "LineId",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "ComBox",
          Option: [
            {
              Label: "{" + 1 + "} " + "==" + "线1#R1211",
              Key: 1,
            },
            {
              Label: "{" + 2 + "} " + "==" + "线2#R1221",
              Key: 2,
            },
            {
              Label: "{" + 3 + "} " + "==" + "线3#MX1211",
              Key: 3,
            },
            {
              Label: "{" + 4 + "} " + "==" + "线4#MX1212",
              Key: 4,
            },
            {
              Label: "{" + 5 + "} " + "==" + "线5#MX1221",
              Key: 5,
            },
            {
              Label: "{" + 6 + "} " + "==" + "线6#MX1222",
              Key: 6,
            },
            {
              Label: "{" + 7 + "} " + "==" + "线7#BT1231",
              Key: 7,
            },
            {
              Label: "{" + 8 + "} " + "==" + "线8#BT1232",
              Key: 8,
            },
            {
              Label: "{" + 9 + "} " + "==" + "线9#BT1233",
              Key: 9,
            },
            {
              Label: "{" + 10 + "} " + "==" + "线10#BT1241",
              Key: 10,
            },
            {
              Label: "{" + 11 + "} " + "==" + "线11#BT1242",
              Key: 11,
            },
          ],
        },
        {
          Field: "BindFuncs",
          Name: "BindFuncs",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "Array",
          Option: [
            {
              Label: "{" + 410 + "} " + "==" + "启动控温（油）",
              Key: 410,
            },
            {
              Label: "{" + 412 + "} " + "==" + "启动控温（IN）",
              Key: 412,
            },
          ],
        },
        {
          Field: "ParamStyle",
          Name: "ParamStyle",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
      ];
    },
  },
  DevCtlmainFilter: {
    type: Array,
    default() {
      return [];
    },
  },
  DeviceModelMainCols: {
    type: Array,
    default() {
      return [
        {
          Field: "DeviceId",
          Name: "ID",
          Width: 60,
          Fix: false,
          Visible: false,
          Style: "TextBox",
          isNumber: true,
        },
        {
          Field: "ModelName",
          Name: "模板名称",
          Width: 180,
          Fix: false,
          Visible: true,
          Style: "TextBox",
          Required: true,
          isNumber: false,
        },
      ];
    },
  },
  DeviceModelCols: {
    type: Array,
    default() {
      return [
        {
          Field: "DeviceParamId",
          NameZH: "ID",
          NameEN: "ID",
          Width: 60,
          Fix: false,
          Visible: false,
          Style: "TextBox",
          isNumber: true,
        },
        {
          Field: "ParamName",
          NameZH: "参数名称",
          NameEN: "Parameter name",
          Width: 130,
          Fix: false,
          Visible: true,
          Style: "TextBox",
          Required: true,
          isNumber: false,
        },
        {
          Field: "Value",
          NameZH: "值",
          NameEN: "Value",
          Width: 80,
          Fix: false,
          Visible: true,
          Style: "TextBox",
          Required: true,
          isNumber: true,
        },
      ];
    },
  },
  ExpressionOption: {
    type: Array,
    default() {
      return [];
    },
  },
  ErpBomDetails: {
    type: Array,
    default() {
      return [];
    },
  },
  ErpBomCols: {
    type: Array,
    default() {
      return [
        {
          Field: "ERPRowID",
          Name: "ERP行号",
          Width: 80,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "MaterialCode",
          Name: "物料编码",
          Width: 150,
          Fix: false,
          Visible: true,
          Style: "TextBox",
          sortable: "custom",
          OrderType: "Ascending",
        },
        {
          Field: "MaterialName",
          Name: "物料名称",
          Width: 150,
          Fix: false,
          Visible: true,
          Style: "TextBox",
          sortable: "custom",
          OrderType: "Ascending",
        },
        {
          Field: "TechMaterialName",
          Name: "技术部名称",
          Width: 150,
          Fix: false,
          Visible: true,
          Style: "TextBox",
          sortable: "custom",
          OrderType: "Ascending",
        },
        {
          Field: "MatStandant",
          Name: "标准用量",
          Width: 80,
          Fix: false,
          Visible: true,
          Style: "TextBox",
          sortable: "custom",
          OrderType: "Ascending",
        },
        {
          Field: "MatErrorLimit",
          Name: "允许误差",
          Width: 130,
          Fix: false,
          Visible: true,
          Style: "TextBox",
          sortable: "custom",
          OrderType: "Ascending",
        },
        {
          Field: "RecipeID",
          Name: "单据ID",
          Width: 100,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Field01",
          Name: "备注1",
          Width: 100,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Field02",
          Name: "备注2",
          Width: 100,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Field03",
          Name: "备注3",
          Width: 100,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Field04",
          Name: "备注4",
          Width: 100,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Field05",
          Name: "备注5",
          Width: 100,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Field06",
          Name: "备注6",
          Width: 100,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Field07",
          Name: "备注7",
          Width: 100,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Field08",
          Name: "备注8",
          Width: 100,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Field09",
          Name: "备注9",
          Width: 100,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
        {
          Field: "Field10",
          Name: "备注10",
          Width: 100,
          Fix: false,
          Visible: false,
          Style: "TextBox",
        },
      ];
    },
  },
  isMatFromERP: {
    type: Boolean,
    default: false,
  },
  isRequirePlcID: {
    //PLCID是否必须输入
    type: Boolean,
    default: false,
  },
  PLCOption: {
    type: Array,
    default() {
      return [
        {
          key: 1,
          label: "PLC测试1",
        },
        {
          key: 2,
          label: "PLC测试2",
        },
      ];
    },
  },
  outMaxKeyWord: {
    type: Number,
    default: 0,
  },
  matLimitOption: {
    //物料限制参数
    type: Array,
    default() {
      return [];
    },
  },
  titleFontSize: {
    type: Number,
    default: 12,
  },
  isShowStart: {
    type: Boolean,
    default: true,
  },
  isShowStop: {
    type: Boolean,
    default: true,
  },
  isShowCompleted: {
    type: Boolean,
    default: true,
  },
  isShowPause: {
    type: Boolean,
    default: true,
  },
  isShowContinue: {
    type: Boolean,
    default: true,
  },
  isShowCancel: {
    type: Boolean,
    default: true,
  },
  isShowReset: {
    type: Boolean,
    default: true,
  },
  PlanBatch: {
    type: String,
    default: "",
  },
  StartMode: {
    type: Number,
    default: 0,
  },
  IsFormular: {
    type: Boolean,
    default: false,
  },
  DownloadStatus: {
    type: Boolean,
    default: false,
  },
  //是否显示操作btn,暂时使用一个权限控制
  isShowOperateBtn: {
    type: Boolean,
    default: false,
  },
  ReceipID: {
    //单据ID，配方中，传入配方ID,工单中，传入planbatch
    type: String,
    default: "",
  },
  WorkCenterId: {
    type: Number,
    default: 0,
  },
  //是否需要显示在图形中
  isShowOperateBtnInGraph: {
    type: Boolean,
    default: true,
  },
});

const emits = defineEmits(["cellDbClick", "cellClick", "return"]);

let isShowGraph = ref(false);
const showGraphDetail = ref(false);
const showGraphDetailTitle = ref("组件信息");
const currentGropuLayer = ref(0);
const showCells = ref<any[]>([]);
let graphWidth = ref("0%");
let formData = reactive({
  cell: null,
  graph: null,
});
let propertyComponent = ref(null); //动态参数面板
let DeviceOption = ref([]);
let circle = ref(true);
let showPeoperty = ref(false);
let showTree = ref(false);
let editAble = ref(false);
const refparentgraph = ref(null);
const funOption = ref([] as any);
// let graph = ref(null)
let currentInstance = getCurrentInstance();
const isFullScreen = ref(false);
const openDrawer = ref(false);
// const leftWidth = ref("80%")
const leftWidth = ref("calc(100% - 400px");

watch([isFullScreen.value, showPeoperty.value], (newVal) => {
  if (newVal[0] == true && newVal[1] == true) {
    leftWidth.value = "calc(100% - 400px)";
  } else {
    leftWidth.value = "100%";
  }
});

// const openDrawer = computed(() => {
//   return isFullScreen.value == true && showPeoperty.value == true;
// });
const sideStyle = computed(() => {
  let tempStyle = {
    with: graphWidth.value,
    flex: "0 0 " + graphWidth.value + "!important",
  };
  document.documentElement.style.setProperty("--side-width", graphWidth.value);
  document.documentElement.style.setProperty(
    "--side-flex",
    "0 0 " + graphWidth.value + "!important",
  );
  return tempStyle;
});

const handleShowChilGraph = function (
  children: any[],
  parentTitle?: string,
  groupLayer = 0,
) {
  if (!Array.isArray(children) || children.length === 0) {
    return;
  }
  showCells.value = children;
  const title = parentTitle ?? children[0]?.value ?? "组件";
  showGraphDetailTitle.value = `${title}的子项`;
  currentGropuLayer.value = groupLayer;
  showGraphDetail.value = true;
};

const showGraph = function () {
  if (props.ifCanBeEdite == false) {
    return false;
  } else {
    if (props.moduleType == "Formular") {
      return funOption.value.length > 0;
    } else {
      return true;
    }
  }
};

const handleFullScreenChange = function (state: boolean) {
  isFullScreen.value = state;
};

const handleShowDrawer = function () {
  //显示抽屉
  if (isFullScreen.value == true && showPeoperty.value == true) {
    openDrawer.value = true;
  }
};

const handleEditChange = function (value: boolean) {
  editAble.value = value;
};

const handleHide = function (cells: any, graph: any) {
  showTree.value = false;
  openDrawer.value = false;
  if (cells.length < 1) {
    showPeoperty.value = false;
    graphWidth.value = "0%";
  } else {
    //if (this.editAble == false) {
    if (props.ifCanBeEdite == false) {
      if (cells.cellType == "Qc") {
        if (cells.QCItems && cells.QCItems.length > 0) {
          graphWidth.value = "20%";
          showPeoperty.value = true;
          showComponentByCellType(cells, graph);
        }
      } else if (cells.cellType == "Common") {
        let bRet =
          typeof cells.DeviceCtlParama != "undefined" ||
          typeof graph.selectionModel.cells[0].MultiMats != "undefined";

        if (bRet) {
          graphWidth.value = "20%";
          showPeoperty.value = true;
          showComponentByCellType(cells, graph);
        } else {
          showPeoperty.value = false;
          graphWidth.value = "0%";
        }
      } else {
        showPeoperty.value = false;
        graphWidth.value = "0%";
      }
    } else {
      if (cells.cellType == "Table") {
        graphWidth.value = "50%";
        showPeoperty.value = true;
      } else if (cells.cellType == "Channel") {
        graphWidth.value = "0%";
        showPeoperty.value = false;
      } else {
        showPeoperty.value = true;
        graphWidth.value = "20%";
      }
      showComponentByCellType(cells, graph);
    }
  }
};

const handleCloseForm = function () {
  graphWidth.value = "100%";
  showPeoperty.value = false;
  openDrawer.value = false;
  propertyComponent.value = null;
  showTree.value = false;
};
const handleshowGraphTree = function (model: any, graph: any) {
  //显示树形结构
  propertyComponent.value = null;
  if (showTree.value == false) {
    leftWidth.value = "60%";
    //@ts-ignore
    propertyComponent.value = markRaw(graphTree);
    showPeoperty.value = true;
    showTree.value = true;

    formData = {
      cell: model,
      graph: graph,
    };
  } else {
    leftWidth.value = "100%";
    showTree.value = false;
  }
};
const handleCellDbClick = function (cell: any, graph: any) {
  if (props.ifCanBeEdite) {
    if (cell.cellType == "Channel") {
      graphWidth.value = "80%";
      nextTick(() => {
        showPeoperty.value = true;
        showFormByType(cell, paramSwime, graph);
      });
    }
  }
  emits("cellDbClick", cell, graph);
};
const handleCellClick = function (cell: any) {
  emits("cellClick", cell);
};

const showComponentByCellType = function (cells: any, graph: any) {
  if (typeof cells == "undefined") {
    return;
  }
  if (cells.edge == true && cells.cellType != "Bus") {
    cells.cellType = "Line";
  }
  var type = cells.cellType;

  switch (type) {
    case "Layer": {
      showFormByType(cells, paramaGroup, graph);
      break;
    }
    case "Channel": {
      showFormByType(cells, paramSwime, graph);

      break;
    }
    case "Common": {
      if (props.ifCanBeEdite == false) {
        showFormByType(cells, paramComReaonly, graph);
      } else {
        showFormByType(cells, paramComFct, graph);
      }
      break;
    }
    case "Line": {
      showFormByType(cells, paramEdge, graph);
      break;
    }
    case "Condition": {
      //条件
      if (props.ifCanBeEdite == false) {
        //只读模式下， 只显示脚本
        showFormByType(cells, paramConditionReadOnly, graph);
      } else {
        showFormByType(cells, paramCondition, graph);
      }

      break;
    }
    case "ComplexCondition": {
      //条件
      if (props.ifCanBeEdite == false) {
        showFormByType(cells, paramCpxConditionReadOnly, graph);
      } else {
        showFormByType(cells, paramCpxCondition, graph);
      }

      //
      break;
    }
    case "Qc": {
      //this.showFormByType(cells, paramaQCReadonly, graph);
      if (props.ifCanBeEdite == false) {
        //   //if (this.editAble == false) {
        //   //内部测试用
        //   //QC只读

        showFormByType(cells, paramaQCReadonly, graph);
      } else {
        showFormByType(cells, paramQC, graph);
      }
      break;
    }
    //
    case "Return": {
      showFormByType(cells, paramReturn, graph);
      break;
    }
    //
    case "Sub": {
      showFormByType(cells, patamSub, graph);
      break;
    }
    case "Table": {
      showFormByType(cells, paramTable, graph);
      break;
    }
    case "WorkGroup": {
      showFormByType(cells, workGroup, graph);
      break;
    }
    case "HubIn": {
      showFormByType(cells, parameHub, graph);
      break;
    }
    case "HubOut": {
      showFormByType(cells, parameHub, graph);
      break;
    }
    default:
      propertyComponent.value = null;
      graphWidth.value = "100%";
      showPeoperty.value = false;
      break;
  }
};
const showFormByType = function (cells: any, component: any, graph: any) {
  propertyComponent.value = null;
  if (typeof cells == "undefined") {
    return;
  }
  //@ts-ignore
  let tempCell = cloneDeep(cells);
  nextTick(() => {
    propertyComponent.value = markRaw(component);
    setPramaByVertex(tempCell, graph);
  });
};
const handleReturn = function () {
  emits("return", 1);
};
const setPramaByVertex = function (cell: any, graph: any) {
  formData = { cell: null, graph: null };
  // nextTick(() => {
  // if (
  //   cell.cellType == "ComplexCondition" ||
  //   cell.cellType == "Return" ||
  //   cell.cellType == "Sub" ||
  //   cell.cellType == "HubIn" ||
  //   cell.cellType == "HubOut" ||
  //   cell.cellType == 'Condition' || cell.cellType == 'Channel' ||
  //   cell.cellType == "Common" ||
  //   cell.cellType == "Table"
  // ) {
  formData = {
    cell: cell,
    graph: graph,
  };
  // } else {
  //   formData = cell;
  // }
};
const _initDeviceOption = function () {
  const option = props.receipStyle;
  if (option.length < 1) {
    Modal.warning({
      title: "警告",
      content: "投料位置不能为空!",
    });
    return;
  }
  //var option = this.receipStyle.Param;
  for (let i = 0; i < option.length; i++) {
    let device = {
      DeviceID: null,
      DeviceName: null,
      DeviceColor: null,
    };
    //@ts-ignore
    device.DeviceID = option[i].ParamValue;
    //@ts-ignore
    device.DeviceName = option[i].ParamName;
    //@ts-ignore
    device.DeviceColor = option[i].AidParamList[0];
    var copy = cloneDeep(device);
    //@ts-ignore
    DeviceOption.value.push(copy);
  }
};
const getCurrentXml = function () {
  //@ts-ignore
  return refparentgraph.value.getCurrentXml();
};
const getReceipTotalWeight = function () {
  //获取配方总重
  //@ts-ignore
  return refparentgraph.value.getReceipTotalWeight();
};

const getFunctionOption = function () {
  Api.LoadEditWorkFlowFunction().then((data: any) => {
    funOption.value = data.Func;
  });
};
const setForceEditStatus = function (value: boolean) {
  //@ts-ignore
  refparentgraph.value.setForceEditStatus(value);
};

watch(
  () => props.data,
  () => {
    propertyComponent.value = null;
  },
);

onBeforeMount(() => {
  _initDeviceOption();
  getFunctionOption();
});

defineExpose({ getReceipTotalWeight, getCurrentXml }); //需要暴露出去的方法，供父组件使用
</script>

<style>
:root {
  --side-width: 350px;
  --side-flex: "0 0 350px";
}

#graph_parama_main {
  height: 100%;
  padding: 0px;
  border-left-width: 0px;
  min-width: 350px !important;
  background: white;
  max-width: 50% !important;
  width: var(--side-width) !important;
  flex: var(--side-flex) !important;
}

/*设置input只读的时候不显示边框 */
input[readonly].ant-input {
  border: 0px;
}

.ant-modal-body {
  padding: 5px !important;
}

.ant-input,
.ant-card,
.ant-btn,
.ant-select-selector {
  border-radius: 0px !important;
}

.ant-input-search
  > .ant-input-group
  > .ant-input-group-addon:last-child
  .ant-input-search-button {
  border-radius: 0px !important;
}
/* 自定义的按钮颜色 */
.success-btn {
  background-color: #5ac54c !important;
  color: #fff !important;
}
.warning-btn {
  background-color: #fcc525 !important;
  color: #fff !important;
}
.custom-table {
  background-color: #fff !important;
}
.ant-table-body {
  max-height: 100vh !important;
}
.ant-form.ant-form-horizontal {
  border: 0;
}
.loading-box {
  z-index: 9;
}
.lt-table-row-text-red {
  color: red;
}
.ant-select-dropdown.ant-tree-select-dropdown.ant-select-dropdown-placement-bottomLeft {
  min-width: 160px !important;
  width: auto !important;
}
.ant-select-tree-list {
  width: auto !important;
  white-space: nowrap !important;
  padding-right: 15px !important;
}
.ant-select-tree-list-holder-inner {
  position: relative !important;
  left: 0;
  right: 0;
  top: 0;
}
.ant-input-textarea::after {
  content: none;
}
</style>
