<template>
	<div>
		<div class="m-table">
			<table class="table" border="0" cellspacing="0" cellpadding="0">
				<col
					:align="item.align"
					:width="item.width"
					:key="'col' + index"
					v-for="(item, index) in colList"
				/>

				<thead>
					<tr class="table-header">
						<th
							class="table-header-th"
							v-for="item in header"
							:key="item"
						>
							{{ item }}
						</th>
					</tr>
				</thead>
				<!-- <el-scrollbar :style="{height:treeHeight}"
                      class="g-scrollar"> -->
				<tbody v-if="!loading" class="table-body">
					<tr
						class="table-body-tr"
						v-for="(value, index) in list"
						:key="index"
						@click="handleClickRow(index)"
					>
						<td
							class="td"
							v-for="(item, indexs) in value"
							:key="indexs"
						>
							<div
								v-if="
									typeof item === 'string' ||
									typeof item === 'number'
								"
								:title="item"
							>
								{{ item }}
							</div>
                            <div
								v-if="
									typeof item === 'object' ||
									typeof item.type === 'object'
								"
								:title="item.name"
								:class="item.class"
							>
								{{ item.name }}
							</div>
							<div
								v-if="
									typeof item === 'object' &&
									item.type === 'img'
								"
							>
								<!-- <span>{{  item.type+  item.src}}</span> -->
								<img
									style="width: 18px; height: 18px"
									:src="item.src"
									alt=""
								/>
							</div>

							<div
								v-if="
									typeof item === 'object' &&
									item &&
									item.type == 'index'
								"
							>
								<img
									v-if="highlightTop3 && index == 0"
									src="@/assets/img/shuju/top/1.png"
									alt=""
								/>
								<img
									v-else-if="highlightTop3 && index == 1"
									src="@/assets/img/shuju/top/2.png"
									alt=""
								/>
								<img
									v-else-if="highlightTop3 && index == 2"
									src="@/assets/img/shuju/top/3.png"
									alt=""
								/>
								<span v-else>{{ index + 1 }}</span>
							</div>

							<a
								v-else-if="
									typeof item === 'object' &&
									item &&
									item.type == 'operate'
								"
								fixed
								v-for="btn in item.list"
								:key="'operate' + index + btn"
								@click.stop="handleClickBtn(index, btn)"
								>{{ btn }}</a
							>
							<a
								v-else-if="
									typeof item === 'object' &&
									item &&
									item.type == 'people'
								"
								@click="handleClickPeople(item)"
								>{{ item.name }}</a
							>
						</td>
					</tr>
				</tbody>
				<!-- </el-scrollbar> -->
			</table>

			<div class="table-status" v-if="loading">
				<screen-loading>加载中</screen-loading>
			</div>

			<div class="table-status" v-if="list.length == 0 && !loading">
				<div class="no-data">
					<img
						src="~@/assets/images/shuju/renfang/index/empty.png"
						class="no-data-img"
					/>
				</div>
			</div>
		</div>

		<div class="m-pagination">
			<el-pagination
				:current-page="pageNo"
				:page-size="pageSize"
				background
				:total="total"
				layout="total"
			>
			</el-pagination>
			<el-pagination
				:current-page="pageNo"
				:page-size="pageSize"
				background
				:total="total"
				layout="prev, pager, next, jumper, sizes"
				@current-change="handlePageNoChange"
				@size-change="handleSizeChange"
			>
			</el-pagination>
		</div>
	</div>
</template>

<script>
import ScreenLoading from "./loading";
import { mapGetters } from "vuex";

export default {
	name: "list",
	components: {
		ScreenLoading,
	},
	props: {
		//各列对齐方式、宽度等属性
		colList: {
			type: Array,
			default: () => {
				return [
					// {
					//   align: "center",
					//   width: "50%",
					// },
				];
			},
		},
		//表头
		header: {
			type: Array,
			required: false,
			default: () => {
				return [];
			},
		},
		//每行数据
		list: {
			type: Array,
			required: false,
			default: () => {
				return [];
			},
		},
		//数据总数
		total: {
			type: Number,
			default: 0,
		},
		loading: {
			type: Boolean,
			default: true,
		},
		highlightTop3: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			pageSize:
				parseInt(localStorage.getItem("dataBoard_PageSize")) || 20,
			pageNo: 1,
		};
	},
	watch: {},
	computed: {
		treeHeight() {
			return this.$store.state.inIframe
				? this.clientHeight - 300 + this.iframeHeight + "px"
				: this.clientHeight - 300 + "px";
		},
		treeWidth() {
			return document.documentElement.clientWidth;
		},

		...mapGetters(["clientHeight", "iframeHeight"]),
	},
	mounted() {},

	created() {},

	methods: {
		//点击某一行
		handleClickRow(index) {
			this.$emit("handleClickRow", index);
		},
		handleClickBtn(index, type) {
			this.$emit("operate", index, type);
		},
		handleClickPeople(item) {
			this.$router.push({
				path: `/main-shuju/visual-basicinfo-people/${item.uid}`,
			});
		},

		handlePageNoChange(val) {
			this.$emit("handlePageNoChange", val);
		},
		handleSizeChange(val) {
			this.$emit("handleSizeChange", val);
		},
	},
};
</script>

<style lang="scss" scoped>
.m-table {
	margin-top: 9px;
	// width: 100%;
	overflow: hidden;
	min-height: 300px;

	.table {
		box-sizing: border-box;
		width: 100%;
		border: none;
		table-layout: fixed;

		&-header {
			width: 100%;
			height: 56px;
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.65);
			line-height: 20px;

			&-th {
				text-align: left;
				border: none;
				padding: 18px 5px 18px 24px;
				// width: calc(100% / 5);
			}
		}

		&-body {
			box-sizing: border-box;
			width: 100%;
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			line-height: 20px;

			&-tr {
				box-sizing: border-box;
				width: 100%;
				min-height: 56px;

				.td {
					box-sizing: border-box;
					text-align: left;
					border: none;
					padding: 18px 5px 18px 24px;

					> div {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						word-wrap: normal;
					}

					a {
						font-size: 14px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1a95ff;
						line-height: 20px;
						cursor: pointer;
					}
				}
			}

			&-tr:nth-child(2n-1) {
				background: rgba(26, 149, 255, 0.15);
			}

			// &-tr:hover {
			//   background: url("../../../../assets/img/modules/visual/hover-bac.png")
			//     no-repeat center;
			//   background-size: 100% 100%;
			// }
		}

		/deep/ .el-scrollbar__wrap {
			width: 100% !important;
			overflow-x: hidden !important;
		}
	}
	.g-scrollar {
		width: 100%;
	}
.orange{
	color:#FFAA00
}
.green{
	color:#04C790
}
	.table-status {
		position: relative;
		height: 300px;

		// 暂无数据
		.no-data {
			&-img {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 120px;
			}
		}
	}
}

.m-pagination {
	box-sizing: border-box;
	margin-top: 24px;
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: space-between;

	/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;

		color: #ffffff;
		border-radius: 2px;
		border: 1px solid rgba(26, 149, 255, 0.45);
		background: #1a95ff;
	}

	/deep/ .el-pagination .el-pager li {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.65);
		border-radius: 2px;
		border: 1px solid rgba(26, 149, 255, 0.45);
		background: #00023a;
	}

	/deep/ .el-pagination .btn-prev {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.65);
		border-radius: 2px;
		border: 1px solid rgba(26, 149, 255, 0.45);
		background: #00023a;
	}

	/deep/ .el-pagination .btn-next {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.65);
		border-radius: 2px;
		border: 1px solid rgba(26, 149, 255, 0.45);
		background: #00023a;
	}
	/deep/ .el-pagination__editor.el-input .el-input__inner {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.65);
		border-radius: 2px;
		border: 1px solid rgba(26, 149, 255, 0.45);
		background: #00023a;
	}

	/deep/ .el-pagination .el-select .el-input .el-input__inner {
		margin-left: 14px;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.65);
		border-radius: 2px;
		border: 1px solid rgba(26, 149, 255, 0.45);
		background: #00023a;
	}
}
</style>
