<!-- 
    filename: WaitingListTable.vue
    author: liubin
    date: 2024-02-05 16:12:55
    description: 
-->

<template>
	<el-table
		:data="tableDataWithIndex"
		:border="true"
		@selection-change="handleSelectionChange"
		style="width: 100%"
		:header-cell-style="{
			background: '#f2f4f9',
			color: '#606266',
		}"
		:max-height="tableH"
		class="waiting-list-table">
		<el-table-column
			type="selection"
			:width="50"
			:selectable="checkSelectable" />
		<el-table-column prop="_pageIndex" width="80" align="center">
			<template slot="header">
				<el-popover placement="bottom-start" width="300" trigger="click">
					<div class="setting-box" style="max-height: 400px; overflow-y: auto">
						<el-checkbox
							v-for="(item, index) in tablePropsLabelList"
							:key="'cb' + index"
							v-model="selectedBox[index]"
							:label="item.label" />
					</div>
					<i slot="reference" class="el-icon-s-tools" />
				</el-popover>
			</template>
		</el-table-column>
		<el-table-column
			v-if="selectedBox[0]"
			width="160"
			label="设备保养单号"
			:show-overflow-tooltip="true"
			prop="maintainOrderNumber"></el-table-column>
		<el-table-column v-if="selectedBox[1]" width="128" label="保养计划名称" prop="planName">
			<template slot-scope="scope">
				{{ scope.row.planName || '---' }}
			</template>
		</el-table-column>
		<el-table-column v-if="selectedBox[2]" label="部门" prop="departmentName">
			<template slot-scope="scope">
				{{ scope.row.departmentName || '---' }}
			</template>
		</el-table-column>
		<el-table-column v-if="selectedBox[3]" label="产线名" prop="lineName">
			<template slot-scope="scope">
				{{ scope.row.lineName || '---' }}
			</template>
		</el-table-column>
		<el-table-column
			v-if="selectedBox[4]"
			width="150"
			label="计划开始时间"
			prop="planStartTime">
			<template slot-scope="scope">
				{{ scope.row.planStartTime | timeFilter }}
			</template>
		</el-table-column>
		<el-table-column
			v-if="selectedBox[5]"
			width="150"
			label="计划结束时间"
			prop="planEndTime">
			<template slot-scope="scope">
				{{ scope.row.planEndTime | timeFilter }}
			</template>
		</el-table-column>
		<el-table-column
			v-if="selectedBox[6]"
			width="150"
			label="实际开始时间"
			prop="startTime">
			<template slot-scope="scope">
				{{ scope.row.startTime | timeFilter }}
			</template>
		</el-table-column>
		<el-table-column
			v-if="selectedBox[7]"
			width="150"
			label="实际结束时间"
			prop="endTime">
			<template slot-scope="scope">
				{{ scope.row.endTime | timeFilter }}
			</template>
		</el-table-column>
		<el-table-column
			v-if="selectedBox[8]"
			width="150"
			label="确认截止时间"
			prop="confirmDueTime">
			<template slot-scope="scope">
				{{ scope.row.confirmDueTime | timeFilter }}
			</template>
		</el-table-column>
		<el-table-column
			v-if="selectedBox[9]"
			width="150"
			label="保养计划类型"
			prop="relatePlan">
			<template slot-scope="scope">
				{{ scope.row.relatePlan | relatePlanFilter }}
			</template>
		</el-table-column>
		<!-- <el-table-column v-if="selectedBox[10]" width="60" label="详情">
			<template slot-scope="scope">
				<el-button type="text" @click="handelDetail(scope.row)">详情</el-button>
			</template>
		</el-table-column> -->
		<!-- btns  -->
		<el-table-column width="188" label="操作">
			<template slot-scope="scope">
				<el-tooltip content="确认" placement="top">
					<el-button
						type="text"
						style="margin: 5px 0; padding: 0"
						:disabled="!checkSelectable(scope.row)"
						@click="$emit('confirm', scope.row)">
						确认
					</el-button>
				</el-tooltip>
				<!-- line  -->
				<span style="margin: 0 4px; font-size: 18px; color: #e5e7eb">|</span>
				<el-tooltip content="查看详情" placement="top">
					<el-button
						type="text"
						style="margin: 5px 0; padding: 0"
						@click="$emit('detail', scope.row)">
						<i class="iconfont icon-detail primary-color" />
					</el-button>
				</el-tooltip>
				<!-- line  -->
				<span style="margin: 0 4px; font-size: 18px; color: #e5e7eb">|</span>
				<el-tooltip content="编辑" placement="top">
					<el-button
						type="text"
						style="margin: 5px 0; padding: 0"
						@click="$emit('edit', scope.row)">
						<i class="iconfont icon-edit primary-color" />
					</el-button>
				</el-tooltip>
				<!-- line  -->
				<span style="margin: 0 4px; font-size: 18px; color: #e5e7eb">|</span>
				<el-tooltip content="删除" placement="top">
					<el-button
						type="text"
						style="margin: 5px 0; padding: 0"
						@click="$emit('delete', scope.row)">
						<i class="iconfont icon-delete delete-color" />
					</el-button>
				</el-tooltip>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
import moment from 'moment';

export default {
	name: 'WaitingListTable',
	components: {},
	props: ['tableData', 'page', 'limit'],
	filters: {
		timeFilter: (val) =>
			val ? moment(val).format('yyyy-MM-DD HH:mm:ss') : '---',
		relatePlanFilter: (val) =>
			val != null ? ['-', '计划型', '非计划型'][val] : '-',
	},
	data() {
		return {
			tablePropsLabelList: [
				{
					label: '设备保养单号',
				},
				{
					label: '保养计划名称',
				},
				{
					label: '部门',
				},
				{
					label: '产线名',
				},
				{
					label: '计划开始时间',
				},
				{
					label: '计划结束时间',
				},
				{
					label: '实际开始时间',
				},
				{
					label: '实际结束时间',
				},
				{
					label: '确认截止时间',
				},
				{
					label: '保养计划类型',
				},
				{
					label: '详情',
				},
			],
			selectedBox: [
				true,
				true,
				true,
				true,
				true,
				true,
				true,
				true,
				true,
				true,
				true,
			],
			selectedPlan: [],
			tableH: this.tableHeight(260),
		};
	},
	computed: {
		tableDataWithIndex() {
			return this.tableData.map((item, index) => ({
				...item,
				_pageIndex: (this.page - 1) * this.limit + index + 1,
			}));
		},
	},
	created() {
		window.addEventListener('resize', () => {
      this.tableH = this.tableHeight(260)
    })
	},
	destroyed() {
		window.removeEventListener('resize', () => {
			this.tableH = this.tableHeight(260)
		});
	},
	methods: {
		checkSelectable(row, index) {
			return (
				row.relatePlan == 2 ||
				(row.relatePlan == 1 &&
					(!row.confirmDueTime || +row.confirmDueTime >= new Date().getTime()))
			);
		},
		handleSelectionChange(val) {
			this.selectedPlan = val;
		},
		handleDelete(row) {},
		handleDetail(row) {},
		handleEdit(row) {},
		handleConfirm(row) {},
	},
};
</script>

<style scoped>
@import './iconfont/iconfont.css';
.delete-color {
	color: #ff5454;
}
.primary-color {
	color: #0b58ff;
}

.baseTable .show-col-btn {
	margin-right: 5px;
	line-height: inherit;
	cursor: pointer;
}
.baseTable .el-icon-refresh {
	cursor: pointer;
}
</style>
<style>
.waiting-list-table .el-table__body tr.current-row > td.el-table__cell {
	background-color: #eaf1fc;
}
.waiting-list-table.el-table .el-table__cell {
	padding: 0;
	height: 35px;
}
.waiting-list-table .addButton {
	width: 100%;
	height: 35px;
	border-top: none;
	color: #0b58ff;
	border-color: #ebeef5;
	border-radius: 0;
}
.waiting-list-table .addButton:hover {
	color: #0b58ff;
	border-color: #ebeef5;
	background-color: #fff;
}
.waiting-list-table .addButton:focus {
	border-color: #ebeef5;
	background-color: #fff;
}

.el-tooltip__popper.is-dark {
	background: rgba(0, 0, 0, 0.6) !important;
}
.el-tooltip__popper .popper__arrow,
.el-tooltip__popper .popper__arrow::after {
	border-top-color: rgba(0, 0, 0, 0.4) !important;
}
</style>
