<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="refFormCondition" :inline="false" :model="form" :inline-message="true" label-width="100px"
            style="width: 100%;" :labelCol="{
              span: 6
            }">
            <a-row style="
                height: 36px;
                font-size: 18px;
                text-align: center;
                background-color: aliceblue;
                border-bottom: 1px solid #d1dbe5;;
              ">
              <a-col :span="15" style="height: 100%; padding: 5px">
                <div>执行分支</div>
              </a-col>
              <a-col :span="9" style="height: 100%; padding: 5px;border-left: 1px solid #d1dbe5;">
                <div>完成节点</div>
              </a-col>
            </a-row>
            <a-row v-for="item in form" :key="item.index">
              <a-row style="border-bottom: 1px solid #d1dbe5;width: 100%;">
                <a-col :span="15" style="padding: 5px; height: 100%">
                  <a-select v-model:value="item.ExecId" style="width: 100%">
                    <a-select-option v-for="item in selectOption" :key="item.id" :value="item.id">{{ item.label
                    }}</a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="9" style="padding: 5px; height: 100%; text-align: center;border-left: 1px solid #d1dbe5;">
                  <a-select v-model:value="item.monitorId" allowClear style="width: 100%">
                    <a-select-option v-for="item in keyOption" :key="item.key" :value="item.index">{{ item.label
                    }}</a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-row>
            <a-row v-if="showEmpty == true" style="
                height: 50px;
                text-align: center;
                background: aliceblue;
                font-size: 30px;
              ">
              <span>
                请先选择执行分支
              </span>
            </a-row>
            <a-row v-if="showEmpty == false"
              style="padding: 10px;text-align: center;width: 100%;display: flex;">
              <div style="margin: auto;">
                <a-button v-on:click="handleConfirm" type="primary">
                  <template #icon>
                    <check-outlined />
                  </template>
                  确认</a-button>
                <a-button v-on:click="handleReset" style="margin-left: 10px;">
                  <template #icon>
                    <close-outlined />
                  </template>
                  返回 </a-button>
              </div>
            </a-row>
          </a-form>
        </lt-a-form>
      </a-card>
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">
import { cloneDeep } from 'lodash-es';
import { events } from '../../../bus';
import {
  ref, watch, onBeforeMount
} from "vue"

const props = defineProps({
  formData: {
    type: Object,
    default() {
      return null;
    },
  },
  AllfunOption: {
    //所有工艺
    type: Array,
    default() {
      return [];
    },
  },
})

const emits = defineEmits(['closeParamForm'])

type formStruct = {
  ExecId: string
  index: string
  Script: string
  monitorId: string
}

type comboxStruct = {
  id: string | number
  label: string
  index: number
  key: number
}

const form = ref({} as formStruct[])
const showEmpty = ref(true)
let cellsArray = ref([]) //分支元素
let selectOption = ref([] as comboxStruct[])
let keyOption = ref([] as comboxStruct[]) //关键字选项
let parentID = ref("")
let DetailOrderKey = ref("")

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

const initFormVal = function () {
  const newValue = props.formData
  if (newValue != null && newValue != undefined) {
    var cell = newValue.cell;
    parentID.value = cell.RecipeStyle;
    DetailOrderKey.value = cell.DetailOrderKey;
    let graph = newValue.graph;
    if (cell.cellType == "ComplexCondition") {
      let edges = cell.edges;
      if (edges == null) {
        showEmpty.value = true;
        return;
      }
      cellsArray.value = []; //每次使用图元之前,先清空数组
      selectOption.value = [];
      for (let i = 0; i < edges.length; i++) {
        if (edges[i].source.id == cell.id) {
          //@ts-ignore
          cellsArray.value.push(edges[i]);
          var item = {
            label: edges[i].value,
            id: edges[i].target.id,
          };
          var copy = cloneDeep(item)

          //@ts-ignore
          selectOption.value.push(copy);
        }
      }
      if (cellsArray.value.length > 0) {
        showEmpty.value = false;
      }
      getKeyArray(cell, graph); //获取页面关键字
      showFormStruct(cell.Script);
    }
  }
}

const getKeyArray = function (cell: any, graph: any) {
  const model = graph.getModel();
  let cells = model.cells;
  let tempArray = [];
  for (let i in cells) {
    // var qq = cells[i].id;
    // var type = cells[i].cellType;
    if (
      cells[i].cellType != undefined &&
      cells[i].cellType != "keyWords" &&
      cells[i].cellType != "ComplexCondition" &&
      cells[i].cellType != "Channel" &&
      cells[i].cellType != "Layer" &&
      cells[i].cellType != "Bus" &&
      cells[i].id != cell.id &&
      cells[i].cellType != "" &&
      cells[i].edge == false
    ) {
      tempArray.push(cells[i]);
    }
    for (let j = 0; j < selectOption.value.length; j++) {
      for (let k = 0; k < tempArray.length; k++) {
        //@ts-ignore
        if (selectOption.value[j].id == tempArray[k].id) {
          tempArray.splice(k, 1);
          k--;
          break;
        }
      }
    }
  }
  keyOption.value = [];
  // debugger;
  for (let m = 0; m < tempArray.length; m++) {
    let showLabel = tempArray[m].funDescript
      ? tempArray[m].funDescript
      : "";
    let temp = {
      label: "[" + tempArray[m].keyWord + "]" + showLabel,
      key: tempArray[m].keyWord,
      index: tempArray[m].id.toString(),
    };
    var copy = cloneDeep(temp)

    //@ts-ignore
    keyOption.value.push(copy);
  }
}
const showFormStruct = function (data: any) {
  let temp = {};
  //cellsArray.value = cloneDeep(data)
  if (typeof data == "undefined") {
    for (let i = 0; i < cellsArray.value.length; i++) {
      //@ts-ignore
      temp["Case" + (i + 1)] = {
        index: i + 1,
        //@ts-ignore
        ExecId: cellsArray.value[i].target.id,
        monitorId: "",
      };
    }

  } else {
    temp = cloneDeep(data)

    let n = 0;
    for (const j in data) {
      n++;
      data[j].index = n; //防止生成的徐海重复
      data[j].monitorId = data[j].monitorId.toString();
    }
    temp = cloneDeep(data)
  }

  //@ts-ignore
  form.value = cloneDeep(temp)
}
const handleConfirm = function () {
  //确认修改数据
  let tempData = {
    EditFunName: getFunCodeByStyle(15),
    parentID: parentID.value,
   // DetailOrderKey: DetailOrderKey.value,
    Script: form.value,
  };

  const propertyData = {
    data: tempData,
    type: "ComplexCondition", //复杂条件
  };
  events.emit("porpertyChange", propertyData);
  handleReset(); //数据推送之后清空面板
}
const handleReset = function () {
  //初始化的时候，将页面初始化成初始结构
  emits("closeParamForm", 1);
}
const getFunCodeByStyle = function (style: any) {
  var code = "";
  for (let i = 0; i < props.AllfunOption.length; i++) {
    //@ts-ignore
    if (props.AllfunOption[i].FuncStyle == style) {
      //@ts-ignore
      code = props.AllfunOption[i].FunctionCode;
      break;
    }
  }
  return code;
}

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

</script>

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

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