<template>
	<div>
		<el-dialog
			:title="form.id?'修改工具':'新增工具'"
			class="table"
			:visible.sync="show"
			:close-on-click-modal="false"
			width="800px"
			top="8vh"
		>
			<div v-loading="loading">
				<el-form ref="form" :model="form" label-width="80px">
					<div class="f_aRow">
						<el-form-item label="标识">
							<el-input style="width: 150px" v-model="form.toolId"></el-input>
						</el-form-item>
						<el-form-item label="宽度">
							<el-input style="width: 80px" v-model="form.dialogWidth"></el-input>
						</el-form-item>
						<el-form-item label="高度">
							<el-input style="width: 80px" v-model="form.dialogHeight"></el-input>
						</el-form-item>

						<el-form-item label="仅管理员可见" label-width="140px">
							<el-switch
								v-model="form.isAdmin"
								active-color="#13ce66"
								inactive-color=""
								active-value="1"
								inactive-value="0"
							>
							</el-switch>
						</el-form-item>
					</div>

					<el-form-item label="描述">
						<el-input
							type="textarea"
							v-model="form.description"
							:rows="3"
							resize="none"
						></el-input>
					</el-form-item>

					<div>
						<el-form-item label="参数">
							<div class="argumentList">
								<el-tag
									:key="tag"
									v-for="tag in form.argumentList"
									closable
									:disable-transitions="false"
									effect="plain"
									@close="addArg(tag)"
								>
									{{ tag }}
								</el-tag>
								<el-dropdown :hide-on-click="false" @command="addArg">
									<el-button
										type="primary"
										size="small"
										style="margin-left: 10px"
									>
										添加参数<i class="el-icon-arrow-down el-icon--right"></i>
									</el-button>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item
											v-for="(item, index) in argumentSelectList"
											:command="item.value"
											:key="index"
											><span
												:class="{
													activeArg: form.argumentList.includes(item.value),
												}"
												>{{ item.label }}</span
											></el-dropdown-item
										>
									</el-dropdown-menu>
								</el-dropdown>
							</div>
						</el-form-item>
					</div>

					<el-form-item label="应用设置">
						<div v-for="(item, index) in form.url" :key="index">
							<div class="regionTitle">{{ item.region }}</div>
							<div class="f_aRow">
								<div class="f_ar_input">
									<span>工具名称</span>
									<el-input style="width: 200px" v-model="item.name"></el-input>
								</div>

								<div class="f_ar_input" style="margin-left: 20px">
									<span>地址链接</span>
									<el-input style="width: 300px" v-model="item.url"></el-input>
								</div>
							</div>
							<div class="f_aRow" style="margin: 10px 0">
								<div class="f_aRow f_ar_icon">
									<span>桌面图标</span>
									<div class="f_icon">
										<el-tooltip
											class="item"
											effect="dark"
											:content="item.icon ? '更改图标' : '上传图标'"
											placement="top"
										>
											<el-image
												style="width: 100%; height: 100%"
												:src="item.icon"
												fit="cover"
												@click="addUrlIcon(index, 'icon')"
											>
												<div
													slot="error"
													class="image-slot"
													@click="addUrlIcon(index, 'icon')"
												>
													<i class="el-icon-picture-outline"></i>
												</div>
											</el-image>
										</el-tooltip>
									</div>
								</div>
								<div class="f_aRow f_ar_icon">
									<span>平台图标</span>
									<div class="f_icon" style="margin-left: 10px">
										<el-tooltip
											class="item"
											effect="dark"
											:content="item.platformIcon ? '更改图标' : '上传图标'"
											placement="top"
										>
											<el-image
												style="width: 100%; height: 100%"
												:src="item.platformIcon"
												fit="cover"
												@click="addUrlIcon(index, 'platformIcon')"
											>
												<div
													slot="error"
													class="image-slot"
													@click="addUrlIcon(index, 'platformIcon')"
												>
													<i class="el-icon-picture-outline"></i>
												</div>
											</el-image>
										</el-tooltip>
									</div>
								</div>

								<div class="f_aRow f_ar_icon">
									<span>默认图标</span>
									<div class="f_icon" style="margin-left: 10px">
										<el-tooltip
											class="item"
											effect="dark"
											:content="item.defaultIcon ? '更改图标' : '上传图标'"
											placement="top"
										>
											<el-image
												style="width: 100%; height: 100%"
												:src="item.defaultIcon"
												fit="cover"
													@click="addUrlIcon(index, 'defaultIcon')"
											>
												<div
													slot="error"
													class="image-slot"
													@click="addUrlIcon(index, 'defaultIcon')"
												>
													<i class="el-icon-picture-outline"></i>
												</div>
											</el-image>
										</el-tooltip>
									</div>
								</div>

								<div class="f_aRow f_ar_icon">
									<span>激活图标</span>
									<div class="f_icon" style="margin-left: 10px">
										<el-tooltip
											class="item"
											effect="dark"
											:content="item.activeIcon ? '更改图标' : '上传图标'"
											placement="top"
										>
											<el-image
												style="width: 100%; height: 100%"
												:src="item.activeIcon"
												fit="cover"
												@click="addUrlIcon(index, 'activeIcon')"
											>
												<div
													slot="error"
													class="image-slot"
														@click="addUrlIcon(index, 'activeIcon')"
												>
													<i class="el-icon-picture-outline"></i>
												</div>
											</el-image>
										</el-tooltip>
									</div>
								</div>

								<div class="f_aRow f_ar_icon">
									<span>hover图标</span>
									<div class="f_icon" style="margin-left: 10px">
										<el-tooltip
											class="item"
											effect="dark"
											:content="item.hoverIcon ? '更改图标' : '上传图标'"
											placement="top"
										>
											<el-image
												style="width: 100%; height: 100%"
												:src="item.hoverIcon"
												fit="cover"
												@click="addUrlIcon(index, 'hoverIcon')"
											>
												<div
													slot="error"
													class="image-slot"
														@click="addUrlIcon(index, 'hoverIcon')"
												>
													<i class="el-icon-picture-outline"></i>
												</div>
											</el-image>
										</el-tooltip>
									</div>
								</div>
							</div>
							<div class="f_hr"></div>
						</div>
						<span class="tips">如果未设置内容则使用cn的内容</span>
					</el-form-item>
				</el-form>
			</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 "@/common/aws-sdk-2.235.1.min.js";
export default {
	data() {
		return {
			show: false,
			loading:false,
			form: {
				toolId:"",
				dialogWidth: "100",
				dialogHeight: "100",
				argumentList: [],
				url: [
					{
						region: "cn",
						url: "",
						icon: "",
						name: "",
						platformIcon: "",
						activeIcon: "",
						defaultIcon: "",
						hoverIcon:""
					},
					{
						region: "beta",
						url: "",
						icon: "",
						name: "",
						platformIcon: "",
						activeIcon: "",
						defaultIcon: "",
						hoverIcon:""
					},
					{
						region: "hk",
						url: "",
						icon: "",
						name: "",
						platformIcon: "",
						activeIcon: "",
						defaultIcon: "",
						hoverIcon:""
					},
					{
						region: "com",
						url: "",
						icon: "",
						name: "",
						platformIcon: "",
						activeIcon: "",
						defaultIcon: "",
						hoverIcon:""
					},
				],
				json: "",
				isAdmin: "0",
				description: "",
				status: "0",
			},
			argumentSelectList: [
				{ value: "userid", label: "userid" },
				{ value: "oid", label: "oid" },
				{ value: "org", label: "org" },
				{ value: "type", label: "type" },
				{ value: "role", label: "role" },
				{ value: "classId", label: "classId" },
				{ value: "TscreenType", label: "TscreenType" },
				{ value: "SscreenType", label: "SscreenType" },
			],
		};
	},
	methods: {
		open(data) {
			if(data){
				this.form = JSON.parse(JSON.stringify(data));
			}else{
				this.init();
			}
			this.show = true;
		},
		close() {
			this.show = false;
			this.init();
		},
		init() {
			this.form = {
				toolId:"",
				dialogWidth: "100",
				dialogHeight: "100",
				argumentList: [],
				url: [
					{
						region: "cn",
						url: "",
						icon: "",
						name: "",
						platformIcon: "",
						activeIcon: "",
						defaultIcon: "",
						hoverIcon:""
					},
					{
						region: "beta",
						url: "",
						icon: "",
						name: "",
						platformIcon: "",
						activeIcon: "",
						defaultIcon: "",
						hoverIcon:""
					},
					{
						region: "hk",
						url: "",
						icon: "",
						name: "",
						platformIcon: "",
						activeIcon: "",
						defaultIcon: "",
						hoverIcon:""
					},
					{
						region: "com",
						url: "",
						icon: "",
						name: "",
						platformIcon: "",
						activeIcon: "",
						defaultIcon: "",
						hoverIcon:""
					},
				],
				json: "",
				isAdmin: "0",
				description: "",
				status: "0",
			};
		},
		submit() {
			let _rule = this.form.url[0];
			if(!this.form.toolId){
				return this.$message.error("请完善工具标识的设置！");
			}
			if(!_rule.url || !_rule.icon || !_rule.name || !_rule.platformIcon){
				return this.$message.error("请完善cn站点的设置！")
			}
			
			this.$emit("success", this.form);
		},
		async addUrlIcon(index, type = "icon") {
			let _url = await this.uploadFile("image/*");
			if (_url) {
				this.form.url[index][type] = _url;
				this.$forceUpdate();
			} else {
				return console.log("无图片");
			}
		},
		uploadFile(accept = "*") {
			return new Promise((resolve) => {
				const input = document.createElement("input");
				input.type = "file";
				input.accept = accept;
				input.onchange = (event) => {
					const file = event.target.files[0];
					if (file) {
						let credentials = {
							accessKeyId: "AKIATLPEDU37QV5CHLMH",
							secretAccessKey: "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",
						}; //秘钥形式的登录上传
						window.AWS.config.update(credentials);
						window.AWS.config.region = "cn-northwest-1"; //设置区域
						let bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
						// let _name = file.name;
						// let size = file.size;
						let params = {
							Key:
								file.name.split(".")[0] +
								new Date().getTime() +
								"." +
								file.name.split(".")[file.name.split(".").length - 1],
							ContentType: file.type,
							Body: file,
							"Access-Control-Allow-Credentials": "*",
							ACL: "public-read",
						}; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
						let options = {
							partSize: 2048 * 1024 * 1024,
							queueSize: 2,
							leavePartsOnError: true,
						};

						bucket
							.upload(params, options)
							.on("httpUploadProgress", (evt) => {
								console.log(evt);
							})
							.send((err, data) => {
								if (err) {
									this.$message.error("上传失败");
									return resolve("");
								} else {
									return resolve(data.Location);
								}
							});
					} else {
						resolve("");
					}
				};
				input.click();
			});
		},
		addArg(value) {
			if (this.form.argumentList.includes(value)) {
				this.form.argumentList.splice(this.form.argumentList.indexOf(value), 1);
			} else {
				this.form.argumentList.push(value);
			}
		},
	},
};
</script>

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

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

.f_aRow {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.f_icon {
	width: 40px;
	height: 40px;
	margin-left: 10px;
	cursor: pointer;
}

.f_icon >>> .image-slot {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.el-tag + .el-tag {
	margin-left: 10px;
}
.button-new-tag {
	margin-left: 10px;
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}
.input-new-tag {
	width: 90px;
	margin-left: 10px;
	vertical-align: bottom;
}

.f_ar_input > span {
	margin-right: 10px;
	white-space: nowrap;
}
.tips {
	color: #949494;
	margin-left: -65px;
}

.regionTitle {
	font-size: 16px;
	font-weight: bold;
}

.f_hr {
	width: 100%;
	height: 2px;
	margin-top: 10px;
	background-color: #ebeef5;
}

.f_ar_icon {
	margin-right: 20px;
}

.activeArg {
	color: #409eff;
}
</style>
