<template>
	<el-container class="mainBox">
		<el-main class="nopadding" v-loading="listLoading" element-loading-text="加载中...">
			<div class="mailView">
				<div class="headerBox">
					<div class="title">K3接口配置</div>
					<div class="item">
						<span class="name">账号ID</span>
						<el-input type="text" v-model="inter.account_id" :size="size" placeholder="账号ID"></el-input>
					</div>
					<div class="item">
						<span class="name">账户名称</span>
						<el-input type="text" v-model="inter.account_name" :size="size" placeholder="账户名称"></el-input>
					</div>
					<div class="item">
						<span class="name">语言</span>
						<el-input type="text" v-model="inter.language" :size="size" placeholder="语言"></el-input>
					</div>
					<div class="item">
						<span class="name">接口地址</span>
						<el-input type="text" v-model="inter.api_url" :size="size" placeholder="接口地址"></el-input>
					</div>
					<div class="item">
						<span class="name">APP_ID</span>
						<el-input type="text" v-model="inter.app_id" :size="size" placeholder="APP_ID"></el-input>
					</div>
					<div class="item">
						<span class="name">APP_SECRET</span>
						<el-input type="text" v-model="inter.app_secret" :size="size" placeholder="APP_SECRET"></el-input>
					</div>
				</div>
				<div class="headerBox mailMain">
					<div class="title">接口同步</div>
					<div class="item">
						<el-switch v-model="inter.active_status" :size="size"></el-switch>
					</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: "interface",
	data(){
		return{
			size:'small',
			loading:false,
			listLoading:false,
			inter:{
				active_status:false,
				account_id:'',
				account_name:'',
				app_id:'',
				app_secret:'',
				language:'',
				api_url:'',
			}
		}
	},
	mounted() {
		this.getMail();
	},
	methods:{
		async getMail() {
			this.listLoading = true;
			const res = await this.$API.setup.k3.get.post();
			this.listLoading = false;
			if(res.code == 200){
				if(res.data && res.data.account_id){
					this.inter = res.data;
				}
			}
		},
		async save() {
			this.loading = true;
			const res = await this.$API.setup.k3.set.post(this.inter);
			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: 90px;
				display: inline-block;
				text-align: left;
				margin-right: 10px;
			}
		}
	}
	.mailMain{
		border-top: 1px solid #e8e8e8;
		padding: 5px 0;
		display: flex;align-items: center;
		.title{
			font-weight: 500;
			padding: 10px 0;
			width: 100px;
		}
		.item{
			margin-bottom: 0;
			.name{
				width: 100px;
				display: inline-block;
				text-align: left;
				margin-right: 10px;
			}
		}
	}
	::v-deep .el-input{
		width: 480px;
	}
}
</style>
