<template>
  <a-layout style="height:100%;padding:5px;padding-left:0px">
    <a-layout-content style="border: 1px solid #d1dbe5;height:100%;padding:5px;">
      <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 ref="refFormGroup" id="refFormGroup" :model="form" label-width="90px" style="width: 100%">
            <a-form-item label="投料位置" name="RecipeStyle" title="投料位置">
              <a-select v-model:value="form.RecipeStyle" @change="handleChange" @select="handleSelect">
                <a-select-option v-for="item in DeviceOption" :key="item.DeviceID" :value="item.DeviceID">{{
                  item.DeviceName }}</a-select-option>
              </a-select>
            </a-form-item>

          </a-form>
        </lt-a-form>
      </a-card>
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">
import { events } from '../../../bus';
import { reactive, watch, onMounted, nextTick, ref, PropType } from "vue"
import { Modal } from "ant-design-vue"
interface deviceOption {
  DeviceID: string
  DeviceName: string
  DeviceColor: string
}

const props = defineProps({
  formData: {
    type: Object,
    default() {
      return null;
    },
  },
  DeviceOption: {
    type: Array as PropType<deviceOption[]>,
    default() {
      return []
    }
  },
})

const form = reactive({
  RecipeStyle: null, //投料位置
  RecipeStyleName: "",
  RecipeStyleColor: "",
  Status: 0, //生产状态
})

let graph = ref(null)
const cellID = ref(null)


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

const initFormVal = function () {
  const newValue = props.formData
  if (newValue && typeof newValue != 'undefined') {
    const cell = newValue.cell

    cellID.value = cell.id
    graph.value = newValue.graph
    form.Status = cell.Status;
    if (cell.cellType == "Channel") {
      form.RecipeStyle = cell.RecipeStyle;
    }
  }
}

const handleChange = function (value: string) {

  for (var i = 0; i < props.DeviceOption.length; i++) {
    if (value == props.DeviceOption[i].DeviceID) {
      form.RecipeStyleName = props.DeviceOption[i].DeviceName;
      form.RecipeStyleColor = props.DeviceOption[i].DeviceColor;
    }
  }
  var propertyData = {
    data: JSON.parse(JSON.stringify(form)),
    type: "Channel",
    targetId: cellID.value,
  };
  if (form.Status != 0 && form.Status != undefined) {
    return;
  }
  if (!checkIsSameDevice()) {
    events.emit("porpertyChange", propertyData);
  } else {
    Modal.warning({
      title: "警告",
      content: "同一层中不能有相同的投料位置",
    });
  }
}

const handleSelect = function (value: any) {

}

const checkIsSameDevice = function () {
  //@ts-ignore
  let model = graph.value.getModel()
  let cells = model.cells
  let targetCell = null
  for (const i in cells) {
    if (cells[i].id == cellID.value) {
      targetCell = cells[i]
      break
    }
  }
  let parent = targetCell.parent
  let child = parent.children;
  let bRet = false;
  for (let i = 0; i < child.length; i++) {
    //检查是否有相同的投料位置存在
    if (
      child[i].cellType == "Channel" &&
      child[i].RecipeStyle == form.RecipeStyle
    ) {
      if (child[i].id != cellID.value) {
        //排除掉本身的干扰
        bRet = true;
        break;
      }
    }
  }
  return bRet;
}


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




</script>

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

.codeRow {
  height: 500px;
}

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