<template>
  <a-layout style="height: 380px;">
    <a-layout-content>
      <list :MultiMats="MultiMats" :QCItemCols="ErpBomCols" :showOperate="false" :rowSelection="rowSelection"
        v-model:selectRowData="selectedData" v-model:selectionData="selection" @row-dbclick="handleDbClick"></list>
    </a-layout-content>
    <a-layout-footer style="text-align: right;padding: 10px;height: 40px;background-color: #fff">
      <a-button v-on:click="handleSelect" type="primary">
        <template #icon>
          <check-outlined />
        </template>
        确认
      </a-button>
      <a-button v-on:click="handleDlgCancel" style="margin-left: 10px;">
        <template #icon>
          <reload-outlined />
        </template>
        取消 </a-button>
    </a-layout-footer>
  </a-layout>
</template>

<script setup lang="ts">

import { onBeforeMount, ref, PropType } from "vue"
import list from "../multi-mat-list/list.vue"
import type { ColStruct } from "@/components/lt-graph/src/hooks/type"


const props = defineProps(
  {
    ErpBomCols: {
      type: Array as PropType<ColStruct[]>,
      default: () => {
        return []
      }
    },
    ErpBomFilter: {
      type: Array,
      default: () => {
        return []
      }
    },
    MultiMats: {
      type: Array,
      default() {
        return []
      },
    },
    showOperate: {
      type: Boolean,
      default: true,
    },
    showEdit: {
      type: Boolean,
      default: true
    },
    rowSelection: {
      type: Object,
      default() {
        return null
      },
    }
  }
)

const emits = defineEmits(["ok", "dlgCancel"])

const dlgTitle = ref("替换物料选择")
const selectedData = ref(null)
const selection = ref([])
const tableParams = ref(null)

const handleSelect = function (ifDbClick: boolean) {
  
  if (ifDbClick == true) {
    emits('ok', [selectedData.value], 'MultiMat')
  } else {
    emits('ok', selection.value, 'MultiMat')
  }
  
}
const handleDlgCancel = function () {
  emits('dlgCancel')
}

const handleDbClick = function () {
  handleSelect(true)
}
</script>

<style scoped>
.el-header {
  padding: 5px;
  border-bottom: solid 1px rgb(209, 219, 229);
}

.el-footer {
  text-align: center;
  padding: 5px;
}
</style>