<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' }">
        <lt-a-form ref="showFormRef" v-model="form" @submit="handleConfirm" @submit-error="handleReset">
          <a-row>
            <a-form :model="form" name="horizontal_login" layout="inline" autocomplete="off">
              <a-form-item label="工艺段" name="description">
                <a-input v-model:value="form.description">
                  <template #prefix>
                    <UserOutlined class="site-form-item-icon" />
                  </template>
                </a-input>
              </a-form-item>
            </a-form>
          </a-row>
          <a-row>

            <a-form-item label="工艺段" name="description">
              <a-input v-model:value="form.description">
                <template #prefix>
                  <UserOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>

          </a-row>
        </lt-a-form>

        <!-- <lt-a-form contendPadding="0px" style="border-width: 0px">
          <a-form ref="refFormGroup" :inline="false" :model="form" :rules="rules" :inline-message="true"
            label-width="90px">
            <a-row>
              <a-col>
                <a-form-item label="工艺段" prop="description">
                  <a-input v-model="form.description"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col>
                <a-form-item label="PLC" prop="PLCID">
                  <a-select v-model="form.PLCID" placeholder="请选择" size="mini" @change="handlePLChange">
                    <a-option v-for="item in props.PLCOption" :key="item.key" :label="item.key + '-' + item.label"
                      :value="item.key">
                    </a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row style="text-align: center">
              <a-button size="mini" icon="icon icon-save " v-on:click="handleConfirm" type="success"
                style="margin-top: 8px; margin-bottom: 8px">确认
              </a-button>
              <a-button size="mini" icon="icon fa fa-refresh " type="warning" v-on:click="handleReset">重置
              </a-button>
            </a-row>
          </a-form>
        </lt-a-form> -->
      </a-card>
    </a-layout-content>

  </a-layout>
</template>

<script setup>
import { computed, getCurrentInstance, reactive, watch, useSlots, unref } from 'vue';

const currentInstance = getCurrentInstance()
const emits = defineEmits(["closeParamForm"])
const props = defineProps({
  formData: {
    type: Object,
    default() {
      return null;
    },
  },
  PLCOption: {
    type: Array,
    default() {
      return [
        {
          key: 1,
          label: "PLC测试1"
        },
        {
          key: 2,
          label: "PLC测试2"
        }
      ]
    }
  },
  isRequirePlcID: {
    type: Boolean,
    default: true
  }
})

const rules = computed(() => {
  return {
    PLCID: [
      {
        required: props.isRequirePlcID ? true : false,
        message: "该项不能为空"
      },
    ],
  };
})

const form = reactive({
  description: "", //文本值'
  PLCID: "",
  PLCName: ""
})

let DnyConponent = null
watch(
  () => props.formData,
  (newValue) => {
    if (newValue != null && newValue != undefined) {
      if (newValue.cellType == "WorkGroup") {
        form.PLCID = newValue.PLCID;
        form.PLCName = newValue.PLCName;
        form.description = newValue.description
      }
    }
  })

const formSchemas = [
  {
    field: 'description',
    component: 'Input',
    // eslint-disable-next-line 
    componentProps: ({ formInstance, formModel }) => ({
      size: 'small',
    }),
    label: "工艺段",
    colProps: {
      span: 24,
    },

  }
]

const getRowSlotKeys = computed(() => {
  const slots = useSlots();
  const keys = Object.keys(slots);
  return keys
    .map((item) => (item.startsWith('form-') ? item : null))
    .filter((item) => !!item);
});

const getFormProps = function () {
  const temp = {
    showAdvancedButton: false,
    layout: 'horizontal',
    labelWidth: 100,
    schemas: unref(formSchemas),
    compact: true,
    showResetButton: true,
    showSubmitButton: true,
    labelCol: {
      style: { width: '150px' }
    }
    //isOutline: true 默认值是true
  };
  debugger
  return temp
}

const replaceRowSlotKey = function (key) {
  if (!key) return '';
  return key?.replace?.(/form-/, '') ?? '';
}

const handlePLChange = function (value) {
  let PLCName = ""
  let target = props.PLCOption.filter((item) => {
    return item.key == value
  })
  if (target.length > 0) {
    PLCName = target[0].label
  }
  form.PLCName = PLCName
}
const handleConfirm = function () {
  currentInstance.ctx.$refs.refFormGroup.validate((valid) => {
    if (valid) {
      var propertyData = {
        data: form,
        type: "WorkGroup",
      };

      emits("closeParamForm", 1);
    }
  });
}
const handleReset = function () {
  //初始化的时候，将页面初始化成初始结构
}


</script>

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

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