fj-dc-ui/.svn/pristine/e0/e005d42f564f488192731bac2c29a0acf25f16a8.svn-base

<template>
	<div id="legendId" class="legendwrapper" :style="{'max-width':testWidth+'px'}" :class="status ? 'active': ''">
		<el-collapse-transition>
			<div v-show="status" class="legendbody">
				<div v-for="(val,index1) in legendShowArr" :key="index1">
					<p style="padding-left:10px">{{val.title}}:</p>
					<div v-for="(item,index) in val.list" :key="index" style="display: flex;align-items: center;padding-left:10px;
						padding-right:10px;min-width: 75px;">
						<el-checkbox :checked="true" @change="checkedChange(item)"></el-checkbox>
						<img :src="item.url" style="width:16px;height:16px;" :alt="item.name">
						<div style="padding-left: 5px;color:#2C9EFF;font-size: 14px;">{{item.name}}</div>
					</div>
					<div v-show="index1<legendShowArr.length-1" style="float:left;width: 1px;height: 15px; background: #000;"></div> 
				</div>
			</div>
		</el-collapse-transition>
	</div>
</template>

<script>
import {legendData} from '../config/legendConfig.js'
export default {
	props: ['checkedLayerList'],
	data() {
		return {
			checked:true,
			status: true,
			legendShowArr:[],
			legendShowData:{},
			checkedLayerList1:[],
			testWidth:window.innerWidth,
		};
	},
	watch:{
		checkedLayerList(n,o){
			this.checkedLayerList1 = n;
			this.handleLayerChange();
		}
	},
	mounted(){
		this.checkedLayerList1 = this.checkedLayerList;
		this.handleLayerChange();
	},
	methods:{
		handleLayerChange(){
			var _self = this;
			_self.legendShowArr = [];
			legendData.forEach((item)=>{
				_self.checkedLayerList1.forEach((val)=>{
					if(item.id == val.id){
						_self.legendShowArr.push(item);
					}
				})
			})
		},
		checkedChange(val){
			this.$emit('lengendChangeHandler',val);
		}
	}
};
</script>
<style scoped>
.el-checkbox__inner{
	border: 1.2px solid #2C9EFF;
}
.legendwrapper {
	position: fixed;
    right: 0;
    bottom: 0;
    min-width: 80px;
    color: #000000;
    border: 1px solid #edebec;
	background-color: #ffffff;
	box-shadow:0px 2px 4px 0px rgba(0,0,0,0.5);
	border-radius:4px;
	overflow-x:auto;
}
.legendtitle {
	position: relative;
	line-height: 30px;
	font-size: 16px;
	text-align: center;
	cursor: pointer;
	user-select: none;
}
.legendtitle::after {
	position: absolute;
	content: "";
	top: 10px;
	right: 10px;
	width: 14px;
	height: 10px;
	/* background: url(/src/views/zongHeXinXiNew/assets/row.png) 0 0 no-repeat; */
	background-size: 14px 10px;
	transform: rotate(180deg);
}
.active .legendtitle::after {
  	transform: rotate(0deg);
}
.legendbody {
	display:flex;
	flex-wrap: wrap;
	/* box-sizing: border-box; */
	padding: 0 10px;
	/* display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	border-top: 1px solid #edebec; */
}
.legendbody > div {
	display: flex;
	align-items: center;
	/* width: 100%; */
	height: 46px;
	font-size: 16px;
}
.legendbody img {
	flex-shrink: 0;
	padding: 4px;
	flex-grow: 0;
	width: 12px;
	height: 12px;
}
</style>