<template>
  <div class="legend">
      <div v-for="(item,index) in legendObj" :key="index" v-show="(item.name!='平均温度')||avgTemp">
          <span :style="{background:index==legendObj.length-1?'':item.color,border:item.color=='#ffffff'?'':`2px solid ${item.color}`}" :class="{'dotLine':dotLine}"></span>{{numType?item.numName:item.name}}
      </div>
  </div>
</template>

<script>
export default {
    props:{
        lineShow:{
            type:Boolean,
            default:false
        },
        numType:{
            type:Boolean,
            default:true
        },
        dotLine:{
            type:Boolean,
            default:false
        },
        avgTemp:{
            type:Boolean,
            default:true
        },
        legendType:{
            type:String,
            default:'Tdb'
        }
    },
    data(){
        return {
            legendObj:[
                {name:"偏冷占比",numName:"偏冷",color:"#0091FF"},
                {name:"达标占比",numName:"达标",color:"#ffffff"},
                {name:"偏热占比",numName:"偏热",color:"#F9908B"},
                {name:"平均温度",numName:"平均温度",color:"#ffffff"},
            ],
            legendMap:{
                Tdb:[
                    {name:"偏冷占比",numName:"偏冷",color:"#0091FF"},
                    {name:"达标占比",numName:"达标",color:"#ffffff"},
                    {name:"偏热占比",numName:"偏热",color:"#F9908B"},
                    {name:"平均温度",numName:"平均温度",color:"#ffffff"},
                ],
                'CO2':[
                    {name:"正常",color:"#ffffff"},
                    {name:"超标",color:"#DCAA04"},
                    {name:"平均值",color:"#3EA832"},
                ],
                'HCHO':[
                    {name:"正常",color:"#ffffff"},
                    {name:"超标",color:"#C6322B"},
                    {name:"平均值",color:"#3EA832"},
                ],
                'RH':[
                    {name:"正常",color:"#ffffff"},
                    {name:"偏干",color:"#F58300"},
                    {name:"偏湿",color:"#0091FF"},
                    {name:"平均值",color:"#3EA832"},
                ],
                'PM2d5':[
                     {name:"正常",color:"#ffffff"},
                    {name:"超标",color:"#DCAA04"},
                    {name:"平均值",color:"#3EA832"},
                ],
            }
        }
    },
    mounted(){
        this.legendObj=this.legendMap[this.legendType];
    },
    watch:{
        legendType(n,o){
            this.legendType=n;
            this.legendObj=this.legendMap[this.legendType];
        }
    }
}
</script>

<style lang="less" scoped>
.legend{
    display: inline-block;
    color: #848484;
    &>div{
        display: inline-block;
        margin-right: 16px;
        &>span{
            display: inline-block;
            vertical-align: middle;
            margin-right: 4px;
            width:12px;
            height:12px;
            border:1px solid rgba(214,218,223,1);
        }
    }
    &>div:last-child{
        position: relative;
        z-index: 2;
        &>span{
            width:8px;
            height:8px;
            border-radius: 50%;
            position: relative;
            background: #ffffff;
            border:2px solid #0091ff;
        }
        &>span.dotLine::after{
            content: '';
            box-sizing: content-box;
            top: 1px;
            left:-4px;
            z-index: -1;
            background: #0091ff;
            position: absolute;
            display: inline-block;
            width: 12px;
            height: 2px;
        }
    }
}
</style>