<template>
  <a-layout style="height: 100%; padding: 5px; padding-left: 0px; min-width: 300px;width: 100%;">
    <a-layout-header
      style="padding-left:5px;border: 1px solid #d1dbe5;background-color: white;height: 47px;line-height: 47px;align-items: center;">
      <a-radio-group v-model:value="dataType">
        <a-radio-button value="device" v-if="DeviceParamaData.length > 0">设备参数</a-radio-button>
        <a-radio-button value="multiMat" v-if="MultiMats.length > 0">替换物料</a-radio-button>
      </a-radio-group>
    </a-layout-header>
    <a-layout-content style="padding: 5px; border: 1px solid #d1dbe5;height: calc(100% - 47px);">
      <a-row v-if="DeviceParamaData.length > 0 && dataType == 'device'" style="height: 100%;overflow: auto;">
        <a-card v-for="(list, index) in DeviceParamaData" :key="index" class="box-card" style="padding: 0px"
          :body-style='{ padding: "5px", height: "100%" }'>
          <lt-a-form contendPadding="5px" :fill="true" :fit="false" style="border-width: 0px">
            <a-form ref="refFormDeviceReadOnly" :inline="false" :model="form" :inline-message="true" label-width="100px"
              style="width: 100%;" :labelCol="{
                span: 6
              }">
              <a-row>
                <a-col :span="24">
                  <a-form-item label="设备ID">
                    <a-input :readonly="true" :value="deviceName(list.DeviceId)"></a-input>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row style="height:300px;padding: 2px;">
                <modelList v-if="list.Items.length > 0" :DeviceModelCols="DeviceModelCols" :data="list.Items" />
              </a-row>
            </a-form>
          </lt-a-form>
        </a-card>
      </a-row>
      <a-row style="width: 100%;" v-if="MultiMats.length > 0 && dataType == 'multiMat'">
        <modelList style="width: 100%;min-height: 300px;" :DeviceModelCols="multiMatCols" :data="MultiMats" />
      </a-row>
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">
import { reactive, ref, onBeforeMount, watch, PropType, computed } from "vue";
import modelList from "./device-model/index.vue"; //设备参数
import { ColStruct, DeviceParamaStruct, DeviceStruct } from "../../../../hooks/type";

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

  planDevice: {
    type: Array as PropType<DeviceStruct[]>,
    default() {
      return []
    }
  }
})

let form = reactive({})
let DeviceParamaData = ref([] as DeviceParamaStruct[])
let MultiMats = ref([] as any)
const dataType = ref("")


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

const getShowType = function () {
  if (DeviceParamaData.value.length > 0) {
    dataType.value = "device"
  } else if (MultiMats.value.length > 0) {
    dataType.value = "multiMat"
  } else {
    dataType.value = ""
  }

}

const initFormVal = function () {
  const newValue = props.formData
  const cell = newValue.cell
  if (cell && typeof cell != 'undefined') {
    if (cell.cellType == "Common") {
      if (typeof cell.DeviceCtlParama != 'undefined') {
        DeviceParamaData.value = cell.DeviceCtlParama.Items;
      } else {
        DeviceParamaData.value = [];
      }
      if (typeof cell.MultiMats != 'undefined') {
        MultiMats.value = cell.MultiMats;
      } else {
        MultiMats.value = [];
      }
    }
  }
}

const deviceName = function (id: string | number) {
  let deviceName = ""
  for (let i = 0; i < props.planDevice.length; i++) {
    if (props.planDevice[i].DeviceId == id) {
      deviceName = props.planDevice[i].DeviceName
      break
    }
  }
  return deviceName
}

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



</script>

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

.codeRow {
  height: 500px;
}

.ltui-form label.a-form-item__label {
  overflow: hidden !important;
}

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