<template>
  <a-layout style="height: 100%; padding: 5px; padding-left: 0px">
    <a-layout-content style="padding: 5px; height: 100%; border: 1px solid #d1dbe5">
      <a-card class="box-card" style="padding: 0px; height: 99.8%" :body-style='{ padding: "5px", height: "100%" }'>
        <lt-a-form contendPadding="5px" :fill="true" :fit="false" style="border-width: 0px; height: 100%">
          <a-form ref="refFormConditionReadOnly" :inline="false" :model="form" :inline-message="true"
            style="width: 100%;" :labelCol="{
              span: 6
            }">
            <a-row v-for="item in showData" :key="item.case">
              <a-row style="
                height: 36px;
                font-size: 18px;
                text-align: center;
                background-color: aliceblue;
                text-align: left;
                padding: 7px;
              ">
                <label>
                  {{ item.case }}
                </label>
              </a-row>
              <a-row>
                <a-col>
                  <a-form-item label="判断条件" name="type">
                    <label>
                      {{ item.type }}
                    </label>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col>
                  <a-form-item label="执行分支" name="lineID">
                    <label>
                      {{ item.lineID }}
                    </label>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col>
                  <a-form-item label="监控节点" name="monitorId">
                    <label>
                      {{ item.monitorId }}
                    </label>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col>
                  <a-form-item label="执行脚本" name="Script">
                    <label>
                      {{ item.Script }}
                    </label>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col>
                  <a-form-item label="下一节点" name="nextFunction">
                    <label>
                      {{ item.nextFunction }}
                    </label>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-row>
          </a-form>
        </lt-a-form>
      </a-card>
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">
import { ref, onBeforeMount, watch } from "vue"
import {cloneDeep} from "lodash-es"

const props = defineProps({
  formData: {
    type: Object,
    default() {
      return null;
    },
  },
  AllfunOption: {
    //所有工艺
    type: Array,
    default() {
      return [];
    },
  },
  ScriptVar: {
    type: Object,
    default() {
      return {};
    },
  },
})
type showDataStruct = {
  case: string
  type: string
  monitorId: string
  Script: string
  lineID: string
  nextFunction: string
}
const form = ref({})
const showData = ref([] as showDataStruct[])

const initFormVal = function () {
  const newValue = props.formData
  if (newValue && typeof newValue != 'undefined') {
    if (newValue.cell.cellType == "ComplexCondition") {
      let cell = newValue.cell
      let graph = newValue.graph
      formMatData(cell, graph)
    }
  }
}

watch(() => props.formData, () => {
  initFormVal()
})

const formMatData = function (cell: any, graph: any) {
  let script = cell.Script
  showData.value = []
  for (const i in script) {
    let temp = {
      type: 'if',
      case: i,
      Script: script[i].Script,
      lineID: getLineID(cell.id, script[i].ExecId, graph),
      monitorId: getMonitorShowLabel(script[i].monitorId, graph),
      nextFunction: getNextKeyWord(script[i].ExecId, graph)
    }
    let copy = cloneDeep(temp)
    showData.value.push(copy)
  }
  for (let j = 1; j < showData.value.length; j++) {
    if (j < showData.value.length - 1) {
      showData.value[j].type = "else-if"
    }
    if (j == showData.value.length - 1) {
      showData.value[j].type = "else"
    }
  }
}
const getLineID = function (sourceID: number, targetID: number, graph: any) {
  let showLabel = ""
  let cells = graph.getModel().cells
  for (const i in cells) {
    if (cells[i].source && cells[i].target) {
      if (cells[i].source.id == sourceID && cells[i].target.id == targetID) {
        showLabel = cells[i].value
        break
      }
    }
  }
  return showLabel
}
const getNextKeyWord = function (id: number, graph: any) {
  let showLabel = ""
  let cells = graph.getModel().cells
  for (const i in cells) {

    if (cells[i].id == id) {
      showLabel = cells[i].keyWord
      break
    }

  }
  return showLabel
}
const getMonitorShowLabel = function (id:number, graph:any) {
  let showLabel = ""
  let cells = graph.getModel().cells
  for (let i in cells) {
    if (cells[i].id == id) {
      showLabel = '[' + cells[i].keyWord + ']' + cells[i].funDescript
      break
    }
  }
  return showLabel
}

onBeforeMount(() => {
  initFormVal()
})

</script>
<style scoped>
.codeRow {
  height: 500px;
}

.ltui-form label.a-form-item__label {
  overflow: hidden !important;
}
</style>
