<template>
	<div>
		<el-dialog
			title="选择工具"
			class="selectToolDialog"
			:visible.sync="show"
			:close-on-click-modal="false"
			width="1400px"
			@before-close="beforeClose"
			:destroy-on-close="true"
			top="8vh"
		>
			<div v-loading="loading" class="std_body">
				<div class="std_b_table">
					<el-table
						ref="form"
						:data="dataList"
						v-if="show"
						stripe
						border
						style="width: 100%"
						:header-cell-style="headerCellStyle"
						row-key="id"
						@selection-change="handleSelectionChange"
					>
						<el-table-column
							type="selection"
							width="45"
							:selectable="selectable"
							:reserve-selection="true"
						></el-table-column>
						<el-table-column label="标识" min-width="100" show-overflow-tooltip>
							<template slot-scope="scope">{{
								scope.row.toolId ? scope.row.toolId : "-"
							}}</template>
						</el-table-column>
						<el-table-column label="宽度" min-width="45" show-overflow-tooltip>
							<template slot-scope="scope">{{
								scope.row.dialogWidth ? scope.row.dialogWidth : "-"
							}}</template>
						</el-table-column>
						<el-table-column label="高度" min-width="45" show-overflow-tooltip>
							<template slot-scope="scope">{{
								scope.row.dialogHeight ? scope.row.dialogHeight : "-"
							}}</template>
						</el-table-column>

						<el-table-column label="描述" min-width="200" show-overflow-tooltip>
							<template slot-scope="scope">{{
								scope.row.description ? scope.row.description : "-"
							}}</template>
						</el-table-column>

						<el-table-column
							label="工具设置"
							min-width="60"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<el-popover placement="bottom" width="840" trigger="click">
									<div class="urlItemBox">
										<div
											class="urlItem"
											v-for="(item, index) in scope.row.url"
											:key="scope.row.id + '-' + index"
										>
											<span>{{ item.region }}</span>
											<div class="ui_message">
												<div>名称：{{ item.name ? item.name : "-" }}</div>
												<div>
													<span>链接：</span
													><a
														:href="item.url"
														v-if="item.url"
														target="_blank"
														>{{ item.url }}</a
													><span v-else>-</span>
												</div>
												<div>
													<span>桌面图标：</span>
													<div class="ui_m_image">
														<el-image
															v-if="item.icon"
															style="width: 100%; height: 100%"
															:src="item.icon"
															fit="cover"
														></el-image>
														<span v-else>-</span>
													</div>
												</div>
												<div>
													<span>平台图标：</span>
													<div class="ui_m_image">
														<el-image
															v-if="item.platformIcon"
															style="width: 100%; height: 100%"
															:src="item.platformIcon"
															fit="cover"
														></el-image>
														<span v-else>-</span>
													</div>
												</div>
												<div>
													<span>默认图标：</span>
													<div class="ui_m_image">
														<el-image
															v-if="item.defaultIcon"
															style="width: 100%; height: 100%"
															:src="item.defaultIcon"
															fit="cover"
														></el-image>
														<span v-else>-</span>
													</div>
												</div>
												<div>
													<span>激活图标：</span>
													<div class="ui_m_image">
														<el-image
															v-if="item.activeIcon"
															style="width: 100%; height: 100%"
															:src="item.activeIcon"
															fit="cover"
														></el-image>
														<span v-else>-</span>
													</div>
												</div>
											</div>
										</div>
									</div>
									<el-button slot="reference" size="small">查看设置</el-button>
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column
							label="仅管理员显示"
							min-width="45"
							show-overflow-tooltip
						>
							<template slot-scope="scope">{{
								scope.row.isAdmin == "1" ? "是" : "否"
							}}</template>
						</el-table-column>
					</el-table>
				</div>

				<el-pagination
					v-if="pageData.show"
					style="margin-top: 10px"
					:current-page="pageData.nowPage"
					:page-size="pageData.lim"
					:total="pageData.total"
					@current-change="handlePageChange"
					layout="total,prev, pager, next, jumper"
				>
				</el-pagination>
			</div>
			<!-- 按钮区域 -->
			<div slot="footer" class="el-dialog__footer">
				<el-button @click="close()">取 消</el-button>
				<el-button type="primary" @click="submit()">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { API_CONFIG } from "@/common/apiConfig";
export default {
	data() {
		return {
			show: false,
			loading: false,
			dataList: [],
			type: null,
			pageData: {
				nowPage: 1,
				lim: 10,
				total: 0,
				show: true,
			},
			selectList: [],
			disableSelectList:[],
		};
	},
	methods: {
		// 表头的背景色
		headerCellStyle() {
			return { backgroundColor: "#f1f1f1" };
		},
		selectable(row){
			if(this.type && ['desktop','admin-index','stuAdmin-index','admin-sidebar2'].includes(this.type)){
				return true;
			}else if(this.type && ['admin-sidebar'].includes(this.type)){
				let _result = true;
				if(this.disableSelectList.findIndex(i=>i.id==row.id)!=-1){
					_result = false
				}
				return _result;
			} else if(this.type && ['stuAdmin-sidebar'].includes(this.type)){
				let _result = true;
				if(this.disableSelectList.findIndex(i=>i.id==row.id)!=-1){
					_result = false
				}
				return _result;
			}

		},
		open(data, type, tableData = []) {
			this.show = true;

			this.init();
			if(type!='admin-sidebar' && type!='stuAdmin-sidebar') this.selectList = data;
			this.disableSelectList = JSON.parse(JSON.stringify(data))
			this.type = type;


			this.$nextTick(() => {
				if (data.length > 0 && (type!='admin-sidebar' && type!='stuAdmin-sidebar')) {
					this.setTableSelect(data);
				}
			});

			if (tableData.length > 0) {
				this.dataList = tableData;
				this.pageData.show = false;
			} else {
				this.getData();
				this.pageData.show = true;
			}



		},
		close() {
			this.$refs.form.clearSelection();
			this.$forceUpdate();
			this.show = false;
		},
		init() {
			this.dataList = [];
			this.type = null;
			this.selectList = [];
			this.pageData = {
				nowPage: 1,
				lim: 10,
				total: 0,
				show: true,
			};
		},
		getData() {
			new Promise((resolve) => {
				let params = [
					{
						functionName: "select_desktopToolByPage",
						status: "0",
						page: this.pageData.nowPage,
						lim: this.pageData.lim,
					},
				];
				this.loading = true;
				this.$ajax
					.post(API_CONFIG.baseUrl, params)
					.then((res) => {
						let _data = res.data;
						let _list = _data[0];
						let _total = _data[1][0].total;
						_list.forEach((i) => {
							i.url = JSON.parse(i.url);
							i.json = JSON.parse(i.json);
							i.argumentList = JSON.parse(i.argumentList);
						});
						this.dataList = _list;
						this.pageData.total = _total;
						this.loading = false;
						resolve();
					})
					.catch((err) => {
						console.log(err);
						this.loading = false;
						this.$message.error("获取工具数据失败");
					});
			});
		},
		handlePageChange(newPage) {
			this.pageData.nowPage = newPage;
			this.getData();
		},
		handleSelectionChange(val) {
			this.selectList = val;
		},
		submit() {
			this.$emit("success", [this.selectList, this.type]);
		},
		setTableSelect(data) {
				data.forEach((i) => {
					this.$refs.form.toggleRowSelection(i, true);
				});
		},
		getRowKeys(row) {
			return row.id;
		},
		beforeClose(done) {
			this.init();
			done();
		},
	},
};
</script>

<style scoped>
.selectToolDialog >>> .el-dialog__header {
	padding: 15px 20px;
	background: #454545;
}

.selectToolDialog >>> .el-dialog__title {
	color: #fff;
}

.urlItemBox {
	display: flex;
	flex-wrap: wrap;
}

.urlItem {
	width: 400px;
	height: 250px;
	overflow: auto;
	position: relative;
	box-sizing: border-box;
	border-bottom: solid 1px #ebeef5;
}

.urlItem:nth-child(2n) {
	margin-left: 20px;
}

.urlItem > span {
	font-size: 18px;
	font-weight: bold;
}

.ui_m_image {
	width: 40px;
	height: 40px;
	float: left;
	display: flex;
	align-items: center;
}

.ui_message > div {
	display: flex;
	align-items: center;
}

.ui_message > div > span {
	white-space: nowrap;
}

.std_body {
	width: 100%;
	height: 662px;
	overflow: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.std_b_table {
	width: 100%;
	height: 620px;
	overflow: auto;
}
</style>
