<template>
	<div class="common-page page-t1 module-config">
		<div class="mc-head">
			<div class="mcin-head" id="mcHead">
				<span></span>
				<!-- <el-input style="width:4rem" id="mainTitle"></el-input> -->
				<input class="el-input--small el-input__inner" type="text" placeholder="请输入大屏标题">
				<i class="el-icon-check"></i>
			</div>
		</div>
		<div class="mc-view" id="mcView">
			<div class="b2_a1">
				<div v-for="(item, i) in area.b2_a1" class="view-item">
					<div class="view-flx">
						<div class="panel">
							<div class="p-flx">
								<ul>
									<li v-for="item2 in item.children">
										<span>{{item2.sumtitle}}</span>
										<i class="el-icon-delete" :data-id="item2.id"></i>
									</li>
								</ul>
								<div class="add el-icon-s-operation" :data-id="item.id">
									<!-- <span class="">编辑</span> -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="b2_a2">
				<div class="b2a_2a">
					<div v-for="(item, i) in area.b2a_2a" class="view-item">
						<div class="view-flx">
							<div class="panel">
								<div class="p-flx">
									<ul>
										<li v-for="item2 in item.children">
											<span>{{item2.sumtitle}}</span>
											<i class="el-icon-delete" :data-id="item2.id"></i>
										</li>
									</ul>
									<div class="add el-icon-s-operation" :data-id="item.id">
										<!-- <span class="">编辑</span> -->
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="b2a_2b">
					<div v-for="(item, i) in area.b2a_2b" class="view-item">
						<div class="view-flx">
							<div class="panel">
								<div class="p-flx">
									<ul>
										<li v-for="item2 in item.children">
											<span>{{item2.sumtitle}}</span>
											<i class="el-icon-delete" :data-id="item2.id"></i>
										</li>
									</ul>
									<div class="add el-icon-s-operation" :data-id="item.id">
										<!-- <span class="">编辑</span> -->
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="b2_a3">
				<div v-for="(item, i) in area.b2_a3" class="view-item">
					<div class="view-flx">
						<div class="panel">
							<div class="p-flx">
								<ul>
									<li v-for="item2 in item.children">
										<span>{{item2.sumtitle}}</span>
										<i class="el-icon-delete" :data-id="item2.id"></i>
									</li>
								</ul>
								<div class="add el-icon-s-operation" :data-id="item.id">
									<!-- <span class="">编辑</span> -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { reqApi, Config } from '@/assets/js/httpApi.js';
import { Tools } from '@/assets/js/common.js';

export default {
	name: 'Dashboard',
	components: {
	},
	data() {
		return {
			loading: false,
			area:{
				b2_a1:[],
				b2a_2b:[],
				b2_a3:[],
			},
		}
	},
	mounted() {
		// 获取基本信息
		this.pageApi = Config.getModuleInfo(this);

		this.$nextTick(() => {
			this.loadData();

			// 事件
			var mcView = document.getElementById("mcView");
			mcView.onclick = (e) => {
				var tag = e.target || e.srcElement;
				if(tag.className.match('add')){
					var self = this, result = {};
					result.viewId = tag.dataset.id;
					qf.UI.popupLayer({
						title:'设置监测项',width:'420px',
						onload: function(el){
							var selectList = [];
							self.pageApi.getMonitorList({mdcode:result.viewId}).then((res) => {
								if(res && res.code){
									var body = res.body || {}, list = body.list || [], select = body.select;
									selectList = [];
									for(var item of list){
										selectList.push({name:item.title, value:item.id})
									};
									Tools.checkbox({
										vue:self,
										el:el,
										list:selectList,
										select:select,
										result:result,
										change: function(val, item){
										},
									});
								}else{
									self.$notify({
										title: res.msg,
										type: 'error',
										duration: 2500
									})
								};
							}).catch(function(error) {
								//this.table.loading = false;
							});
						},
						confirm: function(){
							var num = result.viewId === '11' ? 2 : 5;
							var flag = num > 2 ? '子' : '主';
							if(result.values.length > num){
								self.$alert('<span style="color:red">'+flag+'模块最多不能超过'+num+'个监测项！</span>', '编辑失败', {
									dangerouslyUseHTMLString: true,
									showConfirmButton:true,
									showClose:false,
								});
							}else{
								self.addViewItems(result);
							};
						},
					})
				}else if(tag.className.match('el-icon-delete')){
					this.$confirm('确认删除该条数据吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then((e) => {
						this.reqRemoveItem({id:~~tag.dataset.id})
					});
				};
			};
		})
	},
	methods: {
		// 创建区域列表
		loadData(){
			var self = this;
			this.pageApi.getAreaModule({}).then((res)=>{
				var body = res.body;
				for(var key in body){
					var list = body[key];
					this.area[key] = list;
				};
			});

			// 标题设置
			this.pageApi.reqScreenTitle('get').then((res)=>{
				var body = res.body || {};
				var mcHead = this.$el.querySelector("#mcHead");
				var inputEl = mcHead.firstElementChild.nextElementSibling;
				var flag = mcHead.lastElementChild;
				inputEl.value = body.title || '';

				var showFilter = qf.Async.timeoutFilter(500);
				var reqFilter = qf.Async.timeoutFilter(50);
				inputEl.oninput = function(e){
					reqFilter(()=>{
						var value = e.target.value;
						if(value.length > 15){
							return self.$notify({
								title: '标题长度不能超过15位！',
								type: 'error',
								duration: 2500
							});
						};
						self.pageApi.reqScreenTitle('post', {title:value}).then((res)=>{
							if(res.code === 200){
								flag.classList.add('show');
								showFilter(function(){
									flag.classList.remove('show');
								});
							};
						});
					});
				};
			});
		},
		addViewItems(result){
			var param = {mdcode:~~result.viewId, values:result.values}
			this.pageApi.getSelectItem('post', param).then((res)=>{
				if(res.code === 200){
					this.$notify({
						title: '添加成功！',
						type: 'success',
						duration: 2500
					});
					this.loadData()
				};
			});
		},
		reqRemoveItem(param){
			this.pageApi.getSelectItem('delete', param).then((res)=>{
				if(res.code === 200){
					this.$notify({
						title: '删除成功！',
						type: 'success',
						duration: 2500
					});
					this.loadData()
				};
			});
		},
	}
}
</script>

<style rel="stylesheet/scss" lang="scss">
	.module-config{
		padding:.1rem .30rem;display:flex;flex-direction:column;
		.mc-head{
			background-color:#fff;margin-bottom:.10rem;padding:.05rem .20rem;display:flex;justify-content:center;
			.mcin-head{
				display:flex;align-items:center;position:relative;padding-right:30px
			}
			span{font-size:16px;margin-right:.10rem;color:#aaa;line-height:35px;}
			input{width:4rem;height:35px;}
			i{
				opacity:0;position:absolute;right:0;font-size:20px;color:#67C23A;
				transition:opacity .3s ease;
				&.show{opacity:1;}
			}
		}
		.mc-view{
			flex:1;display:flex;position:relative;background-color:#fff;padding:.20rem;

			.b2_a2{
				width:8.84rem;margin:0 .08rem;
			}
			.b2_a1, .b2_a3{
				flex:1;
				>div{
					//border:1px solid pink;
					//background-color:pink;
					flex:1;
				}
			}
			.b2_a1, .b2_a2, .b2_a3{
				display:flex;flex-direction:column;
				>div{margin-bottom:.08rem;}
				>div:last-child{margin-bottom:0;}
			}
			.b2_a2{
				width:8.84rem;margin:0 .08rem;
				>div:first-child{
					flex:1;display:flex;
					>div{
						flex:1;
					}
				}
				>div:last-child{
					height:2.46rem;
					display:flex;
					//height:22.777vh;
					>div{
						flex:1;margin-right:.08rem;
						&:last-child{
							margin-right:0;
						}
					}
				}
			}

			.view-item{
				border:2px solid #004a8b;
				position:relative;
				//box-shadow:inset 0rem 0rem .15rem .04rem rgba(10,106,180,.8);
				&:before, &:after, .view-flx:before, .view-flx:after{
					content:"";position:absolute;height:.10rem;width:.10rem;z-index:1;
					border-style:solid;border-color:#02f6ff;
				}
				&:before, &:after{top:-1px;}
				&:before{
					left:-1px;
					border-width:.02rem 0 0 .02rem;
				}
				&:after{
					right:-1px;
					border-width:.02rem .02rem 0 0;
				}
				.view-flx{
					position:absolute;top:0;left:0;height:100%;width:100%;display:flex;
					&:before, &:after{bottom:-1px;}
					&:before{
						left:-1px;
						border-width:0 0 .02rem .02rem;
					}
					&:after{
						right:-1px;
						border-width:0 .02rem .02rem 0;
					}
				}

				.panel{
					flex:1;position:relative;margin:.10rem;
					display:flex;flex-direction:column;align-items:center;justify-content:center;
					.p-flx{
						width:100%;text-align:center;
					}
					ul{
						flex:1;margin:0 .10rem;
						li{
							display:flex;justify-content:space-between;align-items:center;margin-bottom:.08rem;
							background-color:#eee;padding:0 .10rem;
							span{
								display:flex;align-items:center;
								&:before{
									content:"";height:.08rem;width:.08rem;display:inline-block;
									border-radius:.10rem;background-color:#0E82D7;margin-right:.05rem;
								}
							}
							i{font-size:.22rem;cursor:pointer;}
						}
					}
					.add{
						font-size:.404rem;line-height:1;cursor:pointer;color:#0383BF;
						span{font-size:.25rem;}
					}
					.hide{display:none;}
				}
			}
		}
	}

</style>
