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

<template>
	<el-table
		:data="tableDataWithIndex"
		:border="true"
		:max-height="tableH"
		@selection-change="handleSelectionChange"
		style="width: 100%"
		:header-cell-style="{
			background: '#f2f4f9',
			color: '#606266',
		}"
		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]"
			label="巡检单名称"
			:show-overflow-tooltip="true"
			prop="name"></el-table-column>
		<el-table-column
			v-if="selectedBox[1]"
			label="部门"
			:show-overflow-tooltip="true"
			prop="planName">
			<template slot-scope="scope">
				{{ scope.row.department || '---' }}
			</template>
		</el-table-column>
		<el-table-column
			v-if="selectedBox[2]"
			label="巡检时间"
			width="160"
			:show-overflow-tooltip="true"
			prop="planCheckTime">
			<template slot-scope="scope">
				{{ scope.row.planCheckTime | timeFilter }}
			</template>
		</el-table-column>
		<el-table-column
			v-if="selectedBox[3]"
			label="班次"
			:show-overflow-tooltip="true"
			prop="groupClass">
			<template slot-scope="scope">
				{{ scope.row.groupClass || '---' }}
			</template>
		</el-table-column>
		<el-table-column
			v-if="selectedBox[4]"
			label="确认截止时间"
			width="160"
			:show-overflow-tooltip="true"
			prop="confirmDueTime">
			<template slot-scope="scope">
				{{ scope.row.confirmDueTime | timeFilter }}
			</template>
		</el-table-column>
		<el-table-column
			v-if="selectedBox[5]"
			label="备注"
			:show-overflow-tooltip="true"
			prop="remark">
			<template slot-scope="scope">
				{{ scope.row.remark }}
			</template>
		</el-table-column>

		<el-table-column
			width="188"
			label="操作">
			<template slot-scope="scope">
				<el-tooltip
					v-if="$auth.hasPermi('equipment:check:update')"
					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
					v-if="$auth.hasPermi('equipment:check:query')"
					style="margin: 0 4px; font-size: 18px; color: #e5e7eb">
					|
				</span>
				<el-tooltip
					v-if="$auth.hasPermi('equipment:check:query')"
					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
					v-if="
						$auth.hasPermiAnd([
							'equipment:check:update',
							'base:core-worker:query',
							'base:group-classes:query',
							'base:core-department:query',
							'equipment:check:query',
							'equipment:check:create',
							'equipment:check:delete',
							'base:core-equipment:query',
						])
					"
					style="margin: 0 4px; font-size: 18px; color: #e5e7eb">
					|
				</span>
				<el-tooltip
					v-if="
						$auth.hasPermiAnd([
							'equipment:check:update',
							'base:core-worker:query',
							'base:group-classes:query',
							'base:core-department:query',
							'equipment:check:query',
							'equipment:check:create',
							'equipment:check:delete',
							'base:core-equipment:query',
						])
					"
					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
					v-if="$auth.hasPermi('equipment:check:delete')"
					style="margin: 0 4px; font-size: 18px; color: #e5e7eb">
					|
				</span>
				<el-tooltip
					v-if="$auth.hasPermi('equipment:check:delete')"
					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';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';

export default {
	name: 'CheckOrderListTable',
	components: {},
	mixins: [tableHeightMixin],
	props: ['tableData', 'page', 'limit', 'permissionGuard'],
	filters: {
		timeFilter: (val) =>
			val ? moment(val).format('yyyy-MM-DD HH:mm:ss') : '---',
	},
	data() {
		return {
			tablePropsLabelList: [
				{
					label: '巡检单名称',
				},
				{
					label: '部门',
				},
				{
					label: '巡检时间',
				},
				{
					label: '班次',
				},
				{
					label: '确认截止时间',
				},
				{
					label: '备注',
				},
			],
			selectedBox: [true, true, true, true, true, true],
			selectedOrder: [],
		};
	},
	computed: {
		tableDataWithIndex() {
			return this.tableData.map((item, index) => ({
				...item,
				_pageIndex: (this.page - 1) * this.limit + index + 1,
			}));
		},
	},
	methods: {
		checkSelectable(row, index) {
			return this.permissionGuard(row);
		},
		handleSelectionChange(val) {
			this.selectedOrder = val;
		},
	},
};
</script>

<style scoped>
@import '../../../styles/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>
