<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"
		@row-dblclick="handleRowDblclick"
		element-loading-text="数据加载中..."
		:element-loading-spinner="svg"
		element-loading-svg-view-box="-10, -10, 50, 50"
		v-loading="tableOptions.isLoading"
		ref="tableRef"
	>
		<!-- :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'"
			>
				<template #default="scope" v-if="item.isCode">
					<span style="color: #4178d5" @click="toDetail(scope.row)">{{
						scope.row.billNo
					}}</span>
				</template>
			</el-table-column>
		</template>
	</el-table>
</template>
<script setup>
import { ref, toRefs, nextTick } 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,
	},
	toDetail: {
		type: Function,
		default: () => {},
		required: true,
	},
});
const state = toRefs(props);
const { columns, isCheckend, tableOptions, tableData } = state;
const emits = defineEmits(['toDetail', 'selectRow']);
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 tableRef = ref(null);
const selectNumber = ref([]);
//行双击
const handleRowDblclick = (row, column, event) => {
	emits('toDetail', row, column, event);
};
const selectable = (row, index) => {
	let length = selectNumber.value.length;
	console.log(length, '===========length============');
	if (!length) {
		return false;
	}
	//索引是从0开始，条件1是指只有第2行数据不被禁用

	if (length === 20 && electNumber.value.includes(row.id)) {
		return true; //不禁用
	} else {
		return false; //禁用
	}
};
//单选
const selectRow = (selection, row) => {
	// selectNumber.value = [];
	// row.forEach((item) => {
	// 	selectNumber.value.push(item.id);
	// });
	// console.log(selection, '=selection=');
	emits('selectRow', selection, row);
};

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

const getData = () => {
	nextTick(() => {
		tableRef.value.clearSelection();
	});
};
const setSelectCheck = (row) => {
	nextTick(() => {
		tableRef.value.toggleRowSelection(row, true);
	});
};
defineExpose({
	getData,
	setSelectCheck,
});
</script>
<style lang="scss" scoped>
@import '@/assets/style/saleOrder/saleOrderCommon.scss';
// ::v-deep(.el-checkbox:nth-of-type(1)) {
// 	display: none !important;
// }
</style>
