<template>
  <a-layout style="height: 100%; padding: 0px; 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>
          <a-form layout="horizontal" autocomplete="off" :labelCol="{
            span: 6
          }" style="width: 100%;" :rules="rules" ref="refFormGroup" :model="form">
            <a-form-item label="工艺段" name="description">
              <a-input v-model:value="form.description">
              </a-input>
            </a-form-item>
            <a-form-item label="PLC" name="PLCID">
              <a-select allowClear v-model:value="form.PLCID" placeholder="请选择" size="mini" @change="handlePLChange">
                <a-select-option v-for="item in PLCOption" :key="item.key" :value="item.key">{{ item.key + '-' +
                  item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item style="border-left: 0px solid #d1dbe5;border-bottom: 0px solid #d1dbe5;text-align: center;">
              <a-button size="mini" v-on:click="handleConfirm" style="margin-top: 8px; margin-bottom: 8px"
                type="primary">
                <template #icon>
                  <check-outlined />
                </template>
                确认
              </a-button>
              <a-button size="mini" v-on:click="handleReset" style="margin-left: 10px;">
                <template #icon>
                  <reload-outlined />
                </template>
                重置
              </a-button>
            </a-form-item>
          </a-form>
        </lt-a-form>
      </a-card>
    </a-layout-content>

  </a-layout>
</template>

<script setup lang="ts">
import { computed, reactive, watch, ref, onMounted, nextTick, PropType } from 'vue';
import { events } from '../../../bus';
const refFormGroup = ref();
interface comboxLabel {
  key: string | number
  label: string
}
// 
const emits = defineEmits(["closeParamForm"])
const props = defineProps({
  formData: {
    type: Object,
    default() {
      return null;
    },
  },
  PLCOption: {
    type: Array as PropType<comboxLabel[]>,
    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: "该项不能为空"
      },
    ],
    description: [{
      required: true,
      message: "该项不能为空"
    },]
  };
})

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


watch(
  () => props.formData,
  () => {
    initFormVal()
  })
const handlePLChange = function (value: string | number) {
  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 () {
  refFormGroup.value
    .validate()
    .then((data: any) => {
      if (data) {
        var propertyData = {
          data: form,
          type: "WorkGroup",
        };
        events.emit("porpertyChange", propertyData);
        emits("closeParamForm", 1);
      }
    }).catch((error: any) => {

    })
}
const handleReset = function () {
  //初始化的时候，将页面初始化成初始结构
  form.description = null //文本值'
  form.PLCID = ""
  form.PLCName = ""
  // this.$forceUpdate();
}

const initFormVal = function () {
  const newValue = props.formData
  if (newValue != null && newValue != undefined) {
    if (newValue.cellType == "WorkGroup") {
      form.PLCID = newValue.PLCID;
      form.PLCName = newValue.PLCName;
      form.description = newValue.description
    }
  }
}

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



</script>

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

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