<template>
	<div class="mesBusLog-container">
		<el-dialog v-model="state.isShowDialog" v-if="state.isShowDialog" width="60%" draggable="" :close-on-click-modal="false">
			<template #header>
				<div style="color: #fff">
					<span>{{ props.title }}</span>
				</div>
			</template>
			<div style="width: 100%">
				<el-table :data="attaTableData" style="width: 100%" tooltip-effect="light" row-key="id" border="">
					<!-- <el-table-column type="selection" width="55" /> -->
					<el-table-column type="index" label="序号" width="55" align="center" />
					<el-table-column type="expand">
						<template #default="scope">
							<div style="padding: 10px">
								<el-table :data="scope.row.packUseRecordList" style="width: 100%" tooltip-effect="light" row-key="id" border="">
									<!-- <el-table-column type="selection" width="55" /> -->
									<el-table-column type="index" label="序号" width="55" align="center" />
									<el-table-column prop="packCode" label="载具编码" show-overflow-tooltip="" />
									<el-table-column prop="packName" label="载具名称" show-overflow-tooltip="" />
									<el-table-column prop="materialCode" label="MES编码" show-overflow-tooltip="" />
									<el-table-column prop="materialName" label="MES名称" show-overflow-tooltip="" />
									<el-table-column prop="unitUse" label="单位用量" show-overflow-tooltip="" />
									<el-table-column prop="batchNo" label="批次号" show-overflow-tooltip="" />
									<el-table-column prop="processCode" label="来源工序" show-overflow-tooltip="" />
									<el-table-column prop="produceWorkOrderNo" label="生产工单" show-overflow-tooltip="" />
									<el-table-column prop="num" label="装载数量" show-overflow-tooltip="" />
									<el-table-column prop="useNum" label="消耗数量" show-overflow-tooltip="" />
								</el-table>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="packCode" label="载具编码" show-overflow-tooltip="" />
					<el-table-column prop="packName" label="载具名称" show-overflow-tooltip="" />
					<el-table-column prop="materialCode" label="MES编码" show-overflow-tooltip="" />
					<el-table-column prop="materialName" label="MES名称" show-overflow-tooltip="" />
					<el-table-column prop="unitUse" label="单位用量" show-overflow-tooltip="" />
					<el-table-column prop="batchNo" label="批次号" show-overflow-tooltip="" />
					<el-table-column prop="processCode" label="来源工序" show-overflow-tooltip="" />
					<el-table-column prop="produceWorkOrderNo" label="生产工单" show-overflow-tooltip="" />
					<el-table-column prop="num" label="实际装载数量" show-overflow-tooltip="" />
					<el-table-column prop="maxNum" label="最大载容量" show-overflow-tooltip="" />
					<el-table-column prop="relPackCode" label="关联载具" show-overflow-tooltip="" />
				</el-table>

				<!-- <el-pagination v-model:currentPage="tableParams.page" v-model:page-size="tableParams.pageSize" :total="tableParams.total" :page-sizes="[10, 20, 50, 100, 200, 500]" small="" background="" @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" /> -->
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">关 闭</el-button>
					<!-- <el-button type="primary" @click="submit">确 定</el-button> -->
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<style lang="scss" scoped>
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}
</style>
<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormRules } from 'element-plus';
import { formatDate } from '/@/utils/formatTime';
import { finishWork, getOnlineRecord, getAttaPackList } from '/@/api/mes/mesControlBoard';

//父级传递来的参数
var props = defineProps({
	title: {
		type: String,
		default: '',
	},
});

//自行添加其他规则
const rules = ref<FormRules>({});

//父级传递来的函数，用于回调
const emit = defineEmits(['reloadTable', 'reflashWorkOrderInfo']);
const ruleFormRef = ref();
const handleQuery = () => {};

const ruleForm = ref<any>({});
const state = reactive({
	isShowDialog: false,
	batchDisabled: false,
});
const attaTableData = ref<any>([]);
// 页面加载时
onMounted(() => {});

const sign = ref(1);
// 打开弹窗
const openDialog = async (row: any) => {
	// 改用detail获取最新数据来编辑
	let rowData = JSON.parse(JSON.stringify(row));
	state.isShowDialog = true;

	var res = await getAttaPackList({ packCode: rowData.packCode, produceWorkOrderNo: rowData.produceWorkOrderNo });
	var tab = res.data.result || [];

	attaTableData.value = tab;
};

// 关闭弹窗
const closeDialog = () => {
	ruleForm.value = {};
	emit('reloadTable');
	state.isShowDialog = false;
};

// 取消
const cancel = () => {
	state.isShowDialog = false;
};
//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>
