<template>
	<div :style="bgcolors">
		<div class="i-layout-page-header header-title">
			<span class="ivu-page-header-title mr20">{{ $route.meta.title }}</span>
			<div>
				<div style="float: right">
					<el-button class="bnt" type="primary" @click="save">保存</el-button>
				</div>
			</div>
		</div>
		<div class="box-wrapper">
			<div>
				<div class="content">
					<div class="right-box">
						<div class="hot_imgs">
							<div class="list-box">
								<draggable class="dragArea list-group" :list="tabList.list" group="peoples"
									handle=".move-icon">
									<div class="item" v-for="(item, index) in tabList.list" :key="index">
										<div class="info">
											<div class="info-item">
												<span>推荐贡献值：</span>
												<div class="input-box">
													<el-input v-model="item.recommend_speed" placeholder="请设置推荐贡献值" />
												</div>
											</div>
											<div class="info-item">
												<span>生效比例：</span>
												<div class="input-box">
													<el-input v-model="item.speed_ratio" placeholder="请设置生效比例" />
												</div>
											</div>
										</div>
										<div class="delect-btn" @click.stop="bindDelete(item, index)">
											<i class="el-icon-circle-close" style="font-size: 24px" />
										</div>
									</div>
								</draggable>
							</div>
							<template>
								<div class="add-btn">
									<el-button type="primary" ghost
										style="width: 100px; height: 35px; background-color: var(--prev-color-primary); color: #ffffff"
										@click="addBox">添加
									</el-button>
								</div>
							</template>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		groupDataListApi,
		groupSaveApi
	} from '@/api/system';
	import draggable from 'vuedraggable';
	import {
		getCookies
	} from '@/libs/util';

	export default {
		name: 'speed_setting',
		components: {
			draggable,
		},
		computed: {
			bgcolors() {
				return {
					'--color-theme': this.bgCol,
				};
			},
		},
		data() {
			return {
				bgCol: '',
				bgimg:0,
				name: 'speed_setting',
				loading: false,
				url: '',
				pageId: 0,
				theme3: 'light',
				tabList: [],
				lastObj: {
					add_time: '',
					recommend_speed: '',
					speed_ratio: '',
					gid: '',
					id: '',
					img: '',
					link: '',
					sort: '',
					status: 1,
				},
				loadingExist: false,
				header: {}
			};
		},
		mounted() {
			this.info();
		},
		methods: {
			color() {
				getColorChange('color_change').then((res) => {
					switch (res.data.status) {
						case 1:
							this.bgCol = '#3875EA';
							this.bgimg = 1;
							break;
						case 2:
							this.bgCol = '#00C050';
							this.bgimg = 2;
							break;
						case 3:
							this.bgCol = '#E93323';
							this.bgimg = 3;
							break;
						case 4:
							this.bgCol = '#FF448F';
							this.bgimg = 4;
							break;
						case 5:
							this.bgCol = '#FE5C2D';
							this.bgimg = 5;
							break;
					}
				});
			},
			// 添加表单
			info() {
				groupDataListApi({
						config_name: this.name
					}, 'setting/group_data')
					.then(async (res) => {
						this.tabList = res.data;
					})
					.catch((res) => {
						console.log(res,'res');
						this.loading = false;
						this.$message.error(res.msg);
					});
			},
			addBox() {
				if (this.tabList.list.length == 0) {
					this.tabList.list.push(this.lastObj);
					this.lastObj = {
						add_time: '',
						recommend_speed: '',
						speed_ratio: '',
						gid: '',
						id: '',
						img: '',
						link: '',
						sort: '',
						status: 1,
					};
				} else {
					console.log(this.tabList.list.length);
					if (this.tabList.list.length == 5) {
						this.$message.warning('最多添加五张呦');
					} else {
						let obj = JSON.parse(JSON.stringify(this.lastObj));
						this.tabList.list.push(obj);
					}
				}
			},
			// 删除
			bindDelete(item, index) {
				this.tabList.list.splice(index, 1);
			},
			save() {
				groupSaveApi({
						gid: this.pageId,
						config_name: this.name,
						data: this.tabList.list,
					})
					.then((res) => {
						this.loadingExist = false;
						this.$message.success(res.msg);
					})
					.catch((err) => {
						this.loadingExist = false;
						this.$message.error(err.msg);
					});
			},
			// 删除
			del(row, tit, num) {
				let delfromData = {
					title: tit,
					num: num,
					url: 'setting/group_data/' + row.id,
					method: 'DELETE',
					ids: '',
				};
				this.$modalSure(delfromData)
					.then((res) => {
						this.info();
						this.$message.success(res.msg);
					})
					.catch((res) => {
						this.$message.error(res.msg);
					});
			},
		},
	};
</script>

<style scoped lang="scss">
	.save {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		background-color: #fff;
		bottom: 0;
		padding: 16px;
		border-top: 3px solid #f5f7f9;
	}

	.item {
		margin-right: 15px;
		border: 1px dashed #dbdbdb;
		padding-bottom: 10px;
		padding-right: 15px;
		padding-top: 20px;
	}

	.content {
		// width 510px;
		.right-box {
			margin-left: 40px;
		}
	}

	.hot_imgs {
		margin-bottom: 20px;

		.list-box {
			margin-top: 14px;

			.item {
				position: relative;
				display: flex;
				margin-top: 14px;

				.move-icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 30px;
					height: 80px;
					cursor: move;
					color: #d8d8d8;
				}


				.info {
					flex: 1;
					margin-left: 22px;

					.info-item {
						display: flex;
						align-items: center;
						margin-bottom: 10px;

						span {
							// width 40px
							font-size: 13px;
						}

						.input-box {
							flex: 1;
						}
					}
				}

				.delect-btn {
					position: absolute;
					right: -12px;
					top: -12px;
					color: #999999;
				}
			}
		}

		.add-btn {
			margin-top: 14px;
		}
	}


	.bnt {
		// width 80px!important
	}

	/deep/.ivu-page-header {
		border-bottom: unset;
		position: fixed;
		z-index: 9;
		width: 100%;
	}

	/deep/.i-layout-page-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.box-wrapper {
		display: flex;
		flex-wrap: nowrap;
		padding: 20px;
		background-color: #fff;
		border-radius: 5px;
		min-height: 600px;
	}
</style>