<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="refFormSub" :inline="false" :model="state" :rules="rules" :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-input v-model:value="state.value" @input="handleValueInput"></a-input>
                </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, ref, watch, onBeforeMount } from 'vue';
import { Modal } from 'ant-design-vue';
const refFormSub = ref("")

const subName = ref([] as string[]) //当前页面中已存在的子过程名称
const validateValue = (rule: any, val: string) => {
  if (val === "") {
    return Promise.reject("该项不能为空");
  } else {
    let bRet = false;
    for (const i in subName.value) {
      if (val == subName.value[i]) {
        bRet = true;
        break;
      }
    }
    if (bRet) {
      return Promise.reject("子过程名称不能重复");
    } else {
      return Promise.resolve();
    }
  }
};

const state = reactive({
  value: null, //文本值'
})

const rules = reactive({
  value: [
    {
      required: true,
      message: '该项不能为空'
    },
    { validator: validateValue },
  ]
})

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


watch(() => props.formData, () => {
  initFormVal()
})
const initFormVal = function () {
  const newValue = props.formData
  if (newValue && typeof newValue != 'undefined') {
    if (newValue.cell.cellType == "Sub") {
      const cell = newValue.cell;
      const graph = newValue.graph;
      const model = graph.getModel();
      const cells = model.cells;
      state.value = cell.value;
      for (const i in cells) {
        if (typeof cells[i].cellType == 'undefined') {
          continue;
        } else {
          if (cells[i].cellType == "Sub" && cells[i].id != cell.id) {
            subName.value.push(cells[i].value);
          }
        }
      }
    }
  }
}

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

const handleValueInput = function () {
  //@ts-ignore
  refFormSub.value.validate().then(values => {
    const propertyData = {
      data: state,
      type: "Sub",
    };
    events.emit("porpertyChange", propertyData);
  }).catch((err:any) => {
    if (err.errorFields.length > 0) {
      Modal.warning({
        title: "警告",
        content: "请输入子过程名称"
      })
    }
  })
}


</script>

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

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