<template>
	<el-container>
		<el-main>
			<div class="mailView">
				<div class="headerBox">
					<div class="item">
						<span class="name">邮件别名</span>
						<el-input type="text" v-model="mail.alias" :size="size" placeholder="邮件别名"></el-input>
					</div>
					<div class="item">
						<span class="name">邮件地址</span>
						<el-input type="text" v-model="mail.email" :size="size" placeholder="邮件地址"></el-input>
					</div>
				</div>
				<div class="mailMain">
					<div class="title">企业邮箱接口调用密钥</div>
					<div class="item">
						<span class="name">CLIENT_ID</span>
						<el-input type="text" v-model="mail.client_id" :size="size" placeholder="请输入CLIENT_ID"></el-input>
					</div>
					<div class="item">
						<span class="name">CLIENT_SECRET</span>
						<el-input type="text" v-model="mail.client_secret" :size="size" placeholder="请输入CLIENT_SECRET"></el-input>
					</div>
				</div>
				<div class="btnView">
					<el-button type="primary" :size="size" @click="save" :loading="loading">保存配置</el-button>
				</div>
			</div>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: "mail",
	data(){
		return{
			size:'small',
			loading:false,
			mail:{
				alias:'',
				email:'',
				client_id:'',
				client_secret:'',
			}
		}
	},
	mounted() {
		this.getMail();
	},
	methods:{
		async getMail() {
			const res = await this.$API.setup.mail.get.post();
			if(res.code == 200){
				this.mail = res.data;
			}
		},
		async save() {
			this.loading = true;
			const res = await this.$API.setup.mail.set.post(this.mail);
			this.loading = false;
			if (res.code == 200) {
				this.$message.success('保存成功');
			}
		}
	}
}
</script>

<style scoped lang="scss">
	.mailView{
		.headerBox{
			.item{
				margin-bottom: 15px;
				.name{
					width: 50px;
					display: inline-block;
					text-align: right;
					margin-right: 10px;
				}
			}
		}
		.mailMain{
			border-top: 1px solid #e8e8e8;
			padding: 5px 0;
			.title{
				font-weight: 500;
				padding: 10px 0;
			}
			.item{
				margin-bottom: 15px;
				.name{
					width: 100px;
					display: inline-block;
					text-align: right;
					margin-right: 10px;
				}
			}
		}
		::v-deep .el-input{
			width: 280px;
		}
	}
</style>
