<template>
  <div style="width: 100%;height: 315px;">
    <lt-a-table :show-overflow-tooltip="true" ref="refTableMat" :searchBox="false" size="small"
      style="border:0px;border-left-width:0px;" bordered data-name="Materials" :pagination="pagination"
      :remoteQueryMode="3" :queryParams="postData" :showToolBar="false" :columnFilter="columnFilter" :columns="columns"
      :url="url" :highlight-current-row="true" @row-dblclick="handleDblclick" @row-click="handleClick"
      @size-change="handleSizeChnage" @page-change="handlePageChange">
    </lt-a-table>
  </div>
</template>

<script setup lang="ts">
import { watch, getCurrentInstance, reactive, onBeforeMount, computed, ref } from "vue"
import { formatShowCols, formatCols } from "../commonMethods/commonMethods"
const currentInstance = getCurrentInstance()
const emits = defineEmits(["row-dbclick", "update:selectRowData", "row-click"])

const props = defineProps({
  prodName: {
    type: String,
    default: null,
  },
  matFilter: {
    type: Array,
    default() {
      return [];
    },
  },
  matCol: {
    type: Array,
    default() {
      return [];
    },
  },
  MaterialCateOption: {
    type: Array,
    default() {
      return [];
    },
  },
})

watch(() => props.prodName, (val) => {
  //@ts-ignore
  currentInstance.refs.refTableMat.reload()
})

const url = "InterpretateMaterialService/SelectMaterial"

const columnFilter = ref(["MaterialCode", "TechMaterialName"])
const columns = computed(() => {
  //@ts-ignore
  const innerCols = formatCols(props.matCol)
  const targetCols = innerCols.filter((item) => {
    return item.Field == 'MaterialCategory'
  })
  const option = props.MaterialCateOption
  //formatMaterialCate(option)

  if (targetCols.length) {
    //@ts-ignore
    targetCols[0].treeOption = option
  }

  return formatShowCols(innerCols, 'MaterialCategory', 'label', 'children', false)
})

const formatMaterialCate = (data: any) => {
  for (let i = 0; i < data.length; i++) {
    Object.assign(data[i], data[i].MaterialCategory)
    data[i].id = data[i].MaterialCategory
    data[i].key = data[i].MaterialCategory
    data[i].value = data[i].MaterialCategory
    data[i].title = data[i].Description
    data[i].label = data[i].Description

    if (data[i].Child) {
      data[i].children = data[i].Child
    } else {
      data[i].children = []
    }
    if (data[i].Child.length > 0) {
      formatMaterialCate(data[i].Child)
    }
  }
}
const postData = reactive(
  {
    Product: props.prodName,
    Request: {
      Conditions: [],
    },
  }
)

const pagination = {
  pageSize: 10,
  simple: true,
  hideOnSinglePage: true,
  showQuickJumper: false,
  showSizeChanger: false
}

const handleDblclick = function (row: any, dataIndex: number, evt: any) {
  emits("row-dbclick", row, dataIndex, evt);
}
const handleClick = function (row: any, dataIndex: number, evt: any) {
  emits("row-click", row, dataIndex, evt);
  emits("update:selectRowData", row);
}
const handleSizeChnage = function (value: number | string) {
  //@ts-ignore
  currentInstance.refs.refTableMat.reload()
}
const handlePageChange = function (value: number | string) {
  //@ts-ignore
  currentInstance.refs.refTableMat.reload()
}
const _initCloumFilter = function () {
  $.extend(true, columnFilter.value, props.matFilter);
  const option = props.MaterialCateOption
  //formatMaterialCate(option)

  _getTreeFilter("MaterialCategory", "MaterialCategory", option);


}
const _getTreeFilter = function (Field: string, type: string, data: any) {
  var bFind = false;
  for (var i = 0; i < columnFilter.value.length; i++) {
    if (columnFilter.value[i] == Field) {
      bFind = true;
      columnFilter.value.splice(i, 1);
      break;
      //@ts-ignore
    } else if (typeof columnFilter.value[i].prop != "undefined") {
      //@ts-ignore
      if (columnFilter.value[i].prop == Field) {
        bFind = true;
        columnFilter.value.splice(i, 1);
        break;
      }
    }
  }
  if (bFind) {
    const temp = {
      prop: Field,
      type: "Tree",
      options: data,
    };
    //@ts-ignore
    columnFilter.value.push(temp);
  }
}

onBeforeMount(() => {
  _initCloumFilter();
})



</script>
