<template>
	<div>
		<el-dialog
			title="选择应用"
			class="selectAppDialog"
			:visible.sync="show"
			:close-on-click-modal="false"
			width="1400px"
			@before-close="beforeClose"
			:destroy-on-close="true"
			top="8vh"
		>
			<div v-loading="loading" class="sad_body">
				<div
					class="appItem"
					:class="{ appActive: selectList.map((i) => i.id).includes(item.id) }"
					v-for="item in dataList"
					:key="item.id"
					@click="selectApp(item)"
				>
					<div class="ai_left">
						<!-- <div class="ai_l_image"> -->
						<el-image
							style="width: 100%; height: 100%"
							:src="item.json.icon"
							fit="cover"
						></el-image>
						<!-- </div> -->
					</div>
					<div class="ai_right">
						<div>{{ item.name }}</div>
						<span>{{ item.detail }}</span>
					</div>
				</div>
			</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: [],
			selectList: [],
			max: 0,
		};
	},
	methods: {
		// 表头的背景色
		headerCellStyle() {
			return { backgroundColor: "#f1f1f1" };
		},
		open({ select, max = 0 }) {
			this.selectList = JSON.parse(JSON.stringify(select));
			this.max = max;
			this.getData();
			this.show = true;
		},
		close() {
			this.show = false;
		},
		init() {
			this.dataList = [];
			this.selectList = [];
		},
		getData() {
			new Promise((resolve) => {
				let params = [
					{
						functionName: "select_schUsuallyApp",
						userid: "",
						stand: "cn",
					},
				];
				this.loading = true;
				this.$ajax
					.post(API_CONFIG.baseUrl, params)
					.then((res) => {
						console.log("👉", res);
						let _data = res.data;
						let _list = _data[0];
						_list.forEach((i) => {
							i.json = JSON.parse(i.json);
						});
						this.dataList = _list;
						this.loading = false;
						resolve();
					})
					.catch((err) => {
						console.log(err);
						this.loading = false;
						this.$message.error("获取应用数据失败");
					});
			});
		},
		submit() {
			this.$emit("success", this.selectList);
		},
		selectApp(item) {
			if (this.selectList.map((i) => i.id).includes(item.id)) {
				this.selectList = this.selectList.filter((i) => i.id !== item.id);
			} else {
				if (this.selectList.length < this.max || this.max == 0) {
					this.selectList.push(item);
				} else {
					this.$message.error(`最多能选择${this.max}个`);
				}
			}
		},
		beforeClose(done) {
			this.init();
			done();
		},
	},
};
</script>

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

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

.sad_body {
	width: 100%;
	height: 800px;
	overflow: auto;
	display: flex;
	/* align-items: center; */
	/* justify-content: center; */
	display: flex;
	flex-wrap: wrap;
}

.appItem {
	width: 315px;
	height: 100px;
	background-color: white;
	box-sizing: border-box;
	border: solid 1px #f3f4f6;
	padding: 10px;
	border-radius: 8px;
	cursor: pointer;
	margin-bottom: 20px;
	margin-right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.3s;
}

.appActive {
	border-color: #409eff;
	box-shadow: 0px 6px 30px 5px #00000015;
}

.appItem:hover {
	box-shadow: 0px 6px 30px 5px #00000015;
}

.ai_left {
	width: 80px;
	height: 80px;
	box-sizing: border-box;
	padding: 10px;
	margin-right: 10px;
}

.ai_right {
	width: calc(100% - 80px - 10px);
}

.ai_right > div {
	max-width: 100%;
	font-weight: bold;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 16px;
	color: #000;
	margin-bottom: 10px;
}

.ai_right > span {
	font-size: 14px;
	color: #00000099;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
