<template>
	<el-container class="mainBox">
		<el-main class="nopadding" v-loading="listLoading" element-loading-text="加载中...">
			<div class="mailView">
				<div class="headerBox">
					<div class="title">自动维修邮件同步</div>
					<div class="item">
						<el-switch v-model="mail.active_status" :size="size"></el-switch>
					</div>
				</div>
				<div class="headerBox">
					<div class="boxItem">
						<div class="name">维修数据确认模式</div>
						<div class="boxView">
							<el-radio-group :size="size" v-model="mail.is_auto_repair">
								<el-radio label="false">手动确认</el-radio>
								<el-radio label="true">自动确认</el-radio>
							</el-radio-group>
						</div>
					</div>
					<div class="msg">邮件数据确认到维保库的模式，选择自动时无需在邮件明细操作，反之则需手动确认。</div>
				</div>
				<div class="mailMain">
					<div class="title">获取数据源邮件地址</div>
					<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',
			listLoading:false,
			loading:false,
			mail:{
				active_status:false,
				is_auto_repair:true,
				alias:'',
				email:'',
				client_id:'',
				client_secret:'',
			}
		}
	},
	mounted() {
		this.getMail();
	},
	methods:{
		async getMail() {
			this.listLoading = true;
			const res = await this.$API.setup.mail.get.post();
			this.listLoading = false;
			if(res.code == 200){
				if(res.data && res.data.alias){
					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{
			.title{
				font-weight: 500;
				padding: 10px 0;
			}
			.item{
				margin-bottom: 15px;
				.name{
					width: 50px;
					display: inline-block;
					text-align: left;
					margin-right: 10px;
				}
			}
			.boxItem{
				display: flex;align-items: center;
				.boxView{
					margin-left: 15px;
				}
			}
			.msg{
				color: var(--el-text-color-placeholder);
				margin: 10px 0 20px 0;
			}
		}
		.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: left;
					margin-right: 10px;
				}
			}
		}
		::v-deep .el-input{
			width: 480px;
		}
	}
</style>
