<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: 100%" :body-style='{ padding: "5px", height: "100%" }'>
        <lt-a-form contendPadding="0px" style="border-width: 0px">
          <a-form ref="refFormGroup" :inline="false" :model="form" :inline-message="true" label-width="100px"
            style="width: 100%;" :labelCol="{
              span: 6
            }">
            <a-row>
              <a-col :span="24">
                <a-form-item label="子过程" name="value">
                  <a-select v-model:value="form.SubId" @change="handleChange" allowClear>
                    <a-select-option v-for="item in selectOption" :key="item.id" :value="item.id">{{ item.value
                      }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </lt-a-form>
      </a-card>
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">
import { events } from '../../../bus';
import { reactive, onBeforeMount, watch } from "vue"

const props = defineProps({
  formData: {
    type: Object,
    default() {
      return null;
    },
  },
})

const form = reactive({
  value: "", //文本值'
  SubId: "", //子过程id
})
let selectOption = reactive([{ id: null, value: "(空)" }])  //下拉选项

watch(() => props.formData, () => {
  initFormVal()
})
const initFormVal = function () {
  const newValue = props.formData
  if (newValue != null && newValue != undefined) {
    if (newValue.cell.cellType == "Return") {
      const cell = newValue.cell;
      const graph = newValue.graph;
      getSelectOption(cell, graph); //获取下拉选项
      form.SubId =
        newValue.cell.SubId == undefined || newValue.cell.SubId == "0"
          ? null
          : newValue.cell.SubId;
      if (form.SubId) {
        form.SubId = form.SubId.toString()
      } else {
        form.SubId = ""
      }
      // form.SubId =
      //   form.SubId == null ? null : form.SubId.toString();
    }
  }
}

const handleChange = function (value:string|number) {
  //下拉选择框
  getValueById(value);
  var propertyData = {
    data: form,
    type: "Return",
  };
  events.emit("porpertyChange", propertyData);
}
const getValueById = function (value:string|number) {
  for (var i in selectOption) {
    if (selectOption[i].id == value) {
      form.value = selectOption[i].value;
      break;
    }
  }
}
const getSelectOption = function (cell:any, graph:any) {
  const model = graph.getModel();
  const cells = model.cells;
  
  const subCells = []; //子过程
  const returnCells = []; //子过程返回
  selectOption = [{ id: null, value: "空" }];
  const cellTypeArr=[]
  // selectOption = [];
  for (const i in cells) {
    if (cells[i].cellType == undefined) {
      continue;
    } else {
      if (cells[i].cellType == "Sub"&&cells[i].value!=='空'&&cells[i].value!=='(空)'&&!cellTypeArr.includes(cells[i].value)) {
        selectOption.push(cells[i]);
        cellTypeArr.push(cells[i].value)
      } else if (cells[i].cellType == "Return") {
        returnCells.push(cells[i]);
      }
    }
  }
  
}

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


</script>

<style scoped>
.header-bread {
  margin-top: 8px;
  margin-left: 10px;
  font-size: 16px;
  font-weight: bold;
}

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