<template>
    <div class="widgetdiv" :style="widgetstyle"  v-show="show">     
        <div class="widgettitle" style="cursor: move;"  v-drag><i class="fa fa-tasks"></i>&nbsp;{{title}}
        <span class="widget-setwin"><a class="widget-close" href="javascript:;" @click="$emit('btn-close')"></a></span></div> 
        <div class="widgetcontent" :style="{height:contentheight + 'px'}">           
            <slot>
                <div>widgetd</div>
            </slot>
        </div>       
    </div>    
</template>

<script>
export default {
  name: 'widgetdiv',
  props: {
    top: {
      type: Number,
      default: 60
    },
    width: {
      type: Number,
      default: 260
    },
    height: {
      type: Number,
      default: 700
    },
    //内容div的高度
    contentheight: {
      type: Number,
      default: 660
    },
    left: {
      type: Number,
      default: 6
    },    
    zIndex: {
      type: Number,
      default: 9999
    },
    show: {
      type:Boolean,
      default: true
    },
    title: {
      type:String,
      default: ""
    },
    widgetstyle: {
        type:Object,
        default:function(){
	        return{
                top:'60px',
                width:'260px',
                left:'6px',
                height:'700px'
           }   
        }
    }
  },
  data() {
    return {
      active: false,
      position: '',  
      isSticky: false,
      className: ''     
    }  
  },
  methods: {

  }
}
</script>
<style lang="scss"  scoped>
  .widgetdiv{   
    position:absolute;     
    background-color: transparent !important;
    border: 1px solid rgba(32,160,255,0.6);
    border-radius: 5px !important;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
  }
  .widgettitle {
    padding: 0 80px 0 10px;
    border-color: rgba(32,160,255,0.3);
    background: rgba(30,36,50,0.6);
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
    font-size: 16px;
    border-bottom: 1px solid rgba(32,160,255,0.6);
}
.widgetcontent {
    color: #FFFFFF;
    background-color: rgba(30,36,50,0.6);
    border: 0;    
}
.widgetsetwin {
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 0;
    line-height: initial;
}

::v-deep .el-tabs--card>.el-tabs__header {
    border-bottom: 1px solid rgba(32,160,255,0.6)!important;
    .el-tabs__nav{
        border: 0.1px solid rgba(32,160,255,0.6)!important;
    }
    .el-tabs__item{
        border-left:0px!important;
    }
    .el-tabs__item.is-active {
    border-bottom-color: #FF9933;
}
}
::v-deep .el-tabs__item
{
    color: #ffffff!important;
    &.is-active {
        color: #ffffff!important;
    }
}
.widget-setwin{
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 0;
    line-height: initial;
     a:hover, a:focus {
         opacity: .7;
    }
}
.widget-close{
    background-image: url('~@/assets/images/close-1.svg');
    -webkit-background-size: 18px 18px;
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    font-size: 12px;
    display: inline-block;
    vertical-align: top;
}
</style>
