<template>
  <edit-list :data="mciData" :isEditable="showTreeOperate" :showOperate="showOperate" :EXItemCols="EXItemCols"
    :funStyle="funStyle" height="368px" @addItem="handleAdd" @deleteItem="handleDel" @row-click="handleCellClick"
    @rowChange="handleRowChange"></edit-list>
</template>

<script setup lang="ts">
import { cloneDeep } from "lodash-es";
import editList from "./expression-cols.vue";
import { watch, onMounted, ref, PropType } from "vue"
import { ColStruct } from "../../../hooks/type";
const props = defineProps({
  data: {
    type: Array as PropType<mciDataStruct[]>,
    default() {
      return;
    },
  },
  showTreeOperate: {
    type: Boolean,
    default: true,
  },
  showOperate: {
    type: Boolean,
    default: true,
  },
  EXItemCols: {
    type: Array as PropType<ColStruct[]>,
    default() {
      return [];
    },
  },
  funStyle: {
    type: Number,
  },
})

type mciDataStruct = {
  RecipeID: string,
  DetailOrderKey: number,
  FormularMCIId: number,
  MaterialCode: string,
  MCIValiantId: string,
  MCIValiantOption: any,
  DefaultMCI: any,
}

const emits = defineEmits(['changeMCI'])
let mciData = ref([] as mciDataStruct[])  //本地MCI数据
let FormularMCIIndex = ref(0)  //索引值


watch(props.data, (value) => {
  mciData.value = [];

  mciData.value = cloneDeep(value)

})

const handleAdd = function () {
  FormularMCIIndex.value++;
  let temp = {
    RecipeID: "",
    DetailOrderKey: -1,
    FormularMCIId: new Date().getTime(),
    MaterialCode: "",
    MCIValiantId: "",
    MCIValiantOption: null,
    DefaultMCI: null,
  } as mciDataStruct;

  mciData.value.push(temp);
}
const handleDel = function (row: any) {
  for (let i = 0; i < mciData.value.length; i++) {
    if (row.FormularMCIId == mciData.value[i].FormularMCIId) {
      mciData.value.splice(i, 1);
      break;
    }
  }
}
const handleCellClick = function (row: any, rowIndex: number, dataIndex: number, event: any, column: any, colFiled: any) {
  if (colFiled == "MaterialCode") {
    emits("changeMCI", row);
  }
}
const handleRowChange = function (row: any) {
  for (const i in mciData.value) {
    if (mciData.value[i].FormularMCIId == row.FormularMCIId) {
      //Vue.set(mciData.value, i, row);
    }
  }
}
const getMciData = function () {
  return mciData.value;
}

onMounted(() => {
  for (let i = 0; i < props.data.length; i++) {
    var copy = cloneDeep(props.data[i])
    mciData.value.push(copy);
  }
})

</script>
<style>
.el-table__body-wrapper.is-scrolling-left {
  height: 100%;
}

.el-table.el-table--border.el-table--scrollable-x.el-table--mini {
  height: 100% !important;
}
</style>
