<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="refFormEdge" id="refFormEdge" :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-input v-model:value="form.value"></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 { reactive, watch, onBeforeMount } from 'vue';
import { events } from '../../../bus';
const props = defineProps({
  formData: {
    type: Object,
    default() {
      return null;
    },
  },
})

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

watch(form, (_val) => {
  var propertyData = {
    data: _val,
    type: "Line",
  };
  events.emit("porpertyChange", propertyData);
}, {
  deep: true
})


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

const initFormVal = function () {
  const newValue = props.formData
  if (newValue && typeof newValue != 'undefined') {
    const cell = newValue.cell
    if (cell.cellType == "Line") {
      form.value = cell.value;
    }
  }
}

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


</script>

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

#refFormEdge .ant-form-item {
  border-left: 0px !important;
}

</style>
