<template>
	<div>
		<el-dialog
			:title="type == 'edit' ? '编辑办学特色' : '编辑师资力量'"
			class="table"
			:visible.sync="show"
			:close-on-click-modal="false"
			width="800px"
			top="8vh"
		>
			<div v-loading="loading">
				<el-image
					style="
						width: 50px;
						height: 50px;
						cursor: pointer;
						display: flex;
						align-items: center;
						justify-content: center;
					"
					:src="form.icon"
					fit="cover"
					v-if="this.type == 0"
					@click="addUrlIcon()"
				>
					<div slot="error" class="image-slot" @click="addUrlIcon()">
						<i class="el-icon-picture-outline"></i>
					</div>
				</el-image>

				<div>
					<div class="Tit">标题</div>
					<div>
						<el-input v-model="form.name" placeholder="请输入内容"></el-input>
					</div>
				</div>

				<div>
					<div class="Tit">描述</div>
					<div>
                        <el-input
                            type="textarea"
                            :rows="3"
                            resize="none"
                            placeholder="请输入描述"
                            v-model="form.bri">
                        </el-input>
					</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 "@/common/aws-sdk-2.235.1.min.js";
export default {
	data() {
		return {
			show: false,
			loading: false,
			form: {
				name: "",
				icon: "",
				bri: "",
			},
			type: null,
		};
	},
	methods: {
		open(data, type) {
			this.form = JSON.parse(JSON.stringify(data));

			this.type = type;
			this.show = true;
		},
		close() {
			this.show = false;
			this.init();
		},
		init() {
			this.form = {
				name: "",
				icon: "",
				bri: "",
			};
		},
		submit() {
			if (this.type == 0) {
				if (!this.form.name || !this.form.icon || !this.form.bri)
					return this.$message.error("请完善表单");
			} else {
				if (!this.form.name || !this.form.bri)
					return this.$message.error("请完善表单");
			}
			this.$emit("success", { item: this.form });
            this.close()
		},
		async addUrlIcon() {
			let _url = await this.uploadFile("image/*");
			console.log("addUrlIcon", _url);

			if (_url) {
				this.form.icon = _url;
			} 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();
			});
		},
	},
};
</script>

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

.table >>> .el-dialog__title {
	color: #fff;
}
.Tit{
    padding: 15px 0;
    font-size: 14px;
}
</style>
