<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="0px" style="border-width: 0px">
          <a-form layout="horizontal" ref="refFormGroup" id="refFormGroup" :inline="false" v-model:value="form" label-width="90px"
            :labelCol="{
              span: 6
            }" style="width: 100%;">
            <a-form-item label="投料位置" name="RecipeStyleName">
              <a-input v-model:value="form.RecipeStyleName" :readonly="true"></a-input>
            </a-form-item>
            <a-form-item label="工艺组" name="value">
              <a-input v-model:value="form.value"></a-input>
            </a-form-item>
            <a-form-item label="模板">
              <a-button type="success" size="mini" @click="handleChooseModel">选择模板</a-button>
            </a-form-item>
          </a-form>
        </lt-a-form>
      </a-card>
    </a-layout-content>
    <lt-a-model v-model:open="showInDlg" title="选择模板" :width="1000" v-model:fullscreen="dlgfullscreen" @ok="onOk">
      <modelDlg :fullscreen="dlgfullscreen" v-model:detailData="detailData" @ok="onOk" />
    </lt-a-model>
  </a-layout>
</template>

<script setup lang="ts">
import modelDlg from "../model/index.vue";
import { events } from "../../../bus";
import { watch, reactive, nextTick, ref, onMounted } from "vue"

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

const form = reactive({
  value: "", //文本值'
  RecipeStyle: "",
  RecipeStyleName: "", //投料位置
})

const showInDlg = ref(false)
const dlgfullscreen = ref(false)
const detailData = ref("")


watch(
  form,
  (newVal) => {
    var propertyData = {
      data: newVal,
      type: "Layer",
    };
    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 == "Layer") {
      form.value = cell.value;
      form.RecipeStyle = cell.RecipeStyle;
      form.RecipeStyleName = cell.RecipeStyleName;
    }
  }
}

const onOk = () => {
  //弹窗确定事件
  nextTick(() => {
    events.emit("importGroup", detailData.value);
    showInDlg.value = false;
  });
}

onMounted(() => {
  nextTick(() => {
    
    initFormVal()
  })
})


const handleChooseModel = function () {
  nextTick(() => {
    showInDlg.value = true;

  });
}



</script>

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

.codeRow {
  height: 500px;
}

div.ant-modal-body {
  padding: 5px !important;
}

#refFormGroup .ant-form-item {
  border-left: 0px !important;
}
</style>
