<template>
	<el-table
		:data="tableData"
		style="width: 100%; font-size: 12px"
		:border="true"
		:height="tableOptions.height"
		:max-height="tableOptions.maxHeight"
		@select-all="selectRow"
		@select="selectRow"
		@selection-change="handleSelectionChange"
		@row-dblclick="handleRowDblclick"
		element-loading-text="数据加载中..."
		:element-loading-spinner="svg"
		element-loading-svg-view-box="-10, -10, 50, 50"
		v-loading="tableOptions.isLoading"
		ref="table"
	>
		<!-- :cell-class-name="tableCellClassName" -->
		<!-- 选择框 -->
		<el-table-column type="selection" width="40" v-if="isCheckend" fixed />

		<template v-for="item in columns" :key="item.prop">
			<el-table-column
				:prop="item.prop"
				:fixed="item.fixed"
				:align="item.align ? item.align : 'center'"
				:label="item.label"
				:width="item.width ? item.width : 'auto'"
				v-show="item.show"
			>
				<!-- 这个是有远程功能的1 -->
			</el-table-column>
		</template>
	</el-table>
</template>
<script setup>
import { ref, reactive, computed, toRefs } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
const props = defineProps({
	columns: {
		type: Array,
		default: [],
		required: true,
	},
	tableData: {
		type: Array,
		default: [],
		required: true,
	},
	tableOptions: {
		type: Object,
		default: {},
		required: true,
	},
	isCheckend: {
		type: Boolean,
		default: false,
		required: true,
	},
	selectRow: {
		type: Function,
		default: () => {},
		required: true,
	},
	handleRowDblclick: {
		type: Function,
		default: () => {},
		required: true,
	},
});

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

//表格实例
const table = ref(null);
const state = toRefs(props);
const { columns, isCheckend, tableOptions, tableData } = state;
console.log(tableData.value, '=tableData=');
//emit
// const emits = defineEmits({
// 	(e: 'handleRowDblclick', row?: any, column?: any, event?: any): void;
// 	(e: 'toDetail', row?: any): void;
// 	(e: 'selectRow', selection?: any, row?: any): void;
// 	(e: 'selectAll', row?: any): void;
// 	(e: 'handleSelectChange', obj: any): void;
// 	(e: 'selectQuery', val?: any, scope?: any, name?: any): void;
// 	(e: 'getRowCol', row?: any, column?: any, cell?: any, event?: any): void;
// 	(e: 'handleBlur', val?: any, row?: any, type?: any): void;
// });
//复选框选择事件
const handleSelectionChange = (val) => {
	//emits('handleSelectionChange', val);
};
//行双击
const handleRowDblclick = (row, column, event) => {
	//emits('handleRowDblclick', row, column, event);
};

//单选
const selectRow = (selection, row) => {
	//emits('selectRow', selection, row);
};

//编码单元格被点击
const open = (row) => {
	//emits('toDetail', row);
};

// defineExpose({
// 	clearSelection,
// });
</script>
<style lang="scss" scoped>
@import '@/assets/style/saleOrder/saleOrderCommon.scss';
</style>
