<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" v-for="(item,index) in list" :key="index">
						<span class="name">{{item.label}}</span>
						<span class="inputView" v-if="item.cost">
							<div class="inputItem" v-for="(em,ind) in item.cost" :key="ind">
								<el-input type="text" v-model="em.price" :size="size" placeholder="费用"></el-input>
								<el-input type="text" v-model="em.description" :size="size" placeholder="描述"></el-input>
							</div>
						</span>
					</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: "cost",
	data(){
		return{
			size:'small',
			listLoading:false,
			loading:false,
			list:[],
		}
	},
	mounted() {
		this.getCost();
	},
	methods:{
		async getCost() {
			this.listLoading = true;
			const res = await this.$API.setup.cost.list.post();
			this.listLoading = false;
			if(res.code == 200){
				if(res.data && res.data.length>0){
					res.data.forEach(item=>{
						if(item.cost && item.cost.length ===0){
							item.cost = [
								{code:item.value,description:'',price:''}
							]
						}
					})
				}
				this.list = res.data;
			}
		},
		setList(){
			let arr = new Array();
			this.list.forEach(item=>{
				item.cost.forEach(em=>{
					if(em.price!=''){
						arr.push({code:em.code,price:em.price,description:em.description})
					}
				})
			})
			return arr
		},
		async save() {
			this.loading = true;
			let params = {
				cost:this.setList()
			}
			const res = await this.$API.setup.cost.set.post(params);
			this.loading = false;
			if (res.code == 200) {
				this.$message.success('保存成功');
			}
		}
	}
}
</script>

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