<template>
  <a-layout style="height:100%;padding:5px;padding-left:0px;min-width: 300px;">
    <a-layout-content style="padding:5px;height:100%;border: 1px solid #d1dbe5;">
      <a-card v-for="list in showFormArray" :key="list.label + GuidID()" class="box-card" style="padding:0px;"
        :body-style='{ padding: "5px" }'>
        <lt-a-form contendPadding="5px" :fill="true" :fit="false" style="border-width:0px;">
          <a-form ref="refFormComFunctQC" :inline="false" :model="form" :inline-message="true" label-width="100px"
            style="width: 100%;" :labelCol="{
              span: 6
            }">
            <a-row v-for="item in list" :key="item.label + new Date().getTime()" style="width: 100%;">
              <a-col :span="24">
                <a-form-item :label="item.label">
                  <a-input :readonly="true" v-model:value="item.value"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </lt-a-form>
      </a-card>
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">

import { computed, ref, reactive, watch, onBeforeMount, PropType } from "vue";
import { GuidID } from "../commonMethods/commonMethods"
import type { ColStruct } from "../../../hooks/type"
const props = defineProps({
  formData: {
    type: Object,
    default() {
      return null;
    },
  },
  QCItemCols: {
    type: Array as PropType<ColStruct[]>,
    default() {
      return [];
    },
  },
  QCfunOption: {
    type: Array,
    default() {
      return [];
    },
  },
  QCItemOptions: {
    //QC检验细项
    type: Array as PropType<QCItemStruct[]>,
    default() {
      return [];
    },
  },
  QCVariable: {
    //QC检验变量
    type: Array,
    default() {
      return [];
    },
  },
})
interface selectOptionStruct {
  value: string
  label: string
}

interface QCItemStruct {
  ItemId: string | number
  QCName: string
  QCStyle: number
  Standard: string | number
  UpperLimit: string | number
  QCSelected: string
  LowerLimit: string | number
  Unit: string
  Remark: string
  Field01: string
  Field02: string
  Field03: string
  Field04: string
  Field05: string
  [key: string]: string | number | boolean | any;
}
let form = reactive({})
let QCItems = ref([] as QCItemStruct[]) //QC细项

const showFormArray = computed(() => {
  let tempArrray = [] as any[];
  
  for (const i in QCItems.value) {
    let showArray = [];
    for (const j in props.QCItemCols) {

      if (props.QCItemCols[j].Field == "ItemId") {
        continue;
      }
      if (
        QCItems.value[i][props.QCItemCols[j].Field] != "" &&
        typeof QCItems.value[i][props.QCItemCols[j].Field] != 'undefined'
      ) {
        var temp = {} as selectOptionStruct;
        if (props.QCItemCols[j].Field == "QCStyle") {
          temp.value = getQCNameByStyle(
            QCItems.value[i][props.QCItemCols[j].Field]
          );
          temp.label = props.QCItemCols[j].NameZH;
        } else {
          temp.value = QCItems.value[i][props.QCItemCols[j].Field];
          temp.label = props.QCItemCols[j].NameZH;
        }

        let copy = {};
        $.extend(true, copy, temp);
        showArray.push(copy);
      }
    }
    tempArrray.push(showArray);
  }

  return tempArrray;
})


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

const initFormVal = function () {
  const newValue = props.formData
  if (newValue && typeof newValue != 'undefined') {
    const cell = newValue.cell
    if (cell.cellType == "Qc") {
      if (typeof cell.QCItems != 'undefined') {
        QCItems.value = cell.QCItems;
      } else {
        QCItems.value = [];
      }
    }
  }
}

watch(QCItems.value, (val) => {
  for (let i = 0; i < val.length; i++) {
    for (const j in val[i]) {
      let itemVlue = val[i][j];
      if (!itemVlue || itemVlue == "" || typeof itemVlue == 'undefined') {
        delete val[i].j;
      }
    }
  }
})

const getQCNameByStyle = function (styleID: string | number) {
  let text = "";

  for (const i in props.QCItemOptions) {
    
    if (props.QCItemOptions[i].key.toString() == styleID) {
      text = props.QCItemOptions[i].description;
      break;
    }
  }
  return text;
}

onBeforeMount(() => {
  initFormVal()
})
</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;
}
</style>
