<template>
    <div >
    <div :style="`height:${vh}`" v-loading="loading"  element-loading-text="数据加载中">
        <el-form :inline="true" :model="form" >
            <el-form-item >
                <timePicker  @querfromdata="querfromdata" :treenode="treenode" :interval="interval" :name="name" :dataTree="dataTree" ref="hg"></timePicker>
            </el-form-item>
        </el-form>
        <div id="wthgl">
        <div style="position:absolute;right:10px;top:10px;font-weight:bold;z-index:200000">
              <el-tag  style="background:#CC0000;width:30px;height:15px;border:1px solid #CC0000;margin-top:2px"></el-tag>
                  <span style="color:#CC0000;font-weight:400;">&nbsp&nbsp合格率<60% &nbsp&nbsp</span>
                  <el-tag  style="background:#FFCC33;width:30px;height:15px;border:1px solid #FFCC33;margin-top:2px"></el-tag>
                  <span style="color:#FFCC33;font-weight:400;" >&nbsp&nbsp60%≤合格率<90% &nbsp&nbsp</span>
                  <el-tag style="background:#339966;width:30px;height:15px;border:1px solid #339966;margin-top:2px"></el-tag>
                  <span style="color:#339966;font-weight:400;margin-right:10px" >&nbsp&nbsp合格率≥90%</span>
                  <el-button  style=" float:right;margin-top:-8px"
                    type="text"
                    icon="el-icon-download"
                    title="生成图片"
                    @click="download"
                    >下载</el-button>
            </div>
           
        <div  ref="zhuEchartshg"  id="steadyqualification" 

           ></div>
          </div>
          <!-- -->
    </div>
</div>
</template>
<script>
import api from '@/api/harmonic/onlineData'
import html2canvas from "html2canvas";
import yan from "@/assets/commjs/color";
import TimePicker from '../components/TimePicker/index'
import echarts from "echarts"
export default {
    name:'wtzbhgl',
    components:{
      TimePicker
    },
    data(){
        return {
          zoom:'',
          vh:null,
          loading:false,
          echartsheight:undefined,
          echartswidth:undefined,
          device:1,
          interval:3,
          form:{},
          formData:{
          area:'0',
          interference:[],
          manufacturer:[],
          searchBeginTime:'',
          searchEndTime:'',
          statisticalType:0,
          voltageLevel:[]
        },
          timehuanbiValue:[],
          timehbValue:[],
          periodBeginTime:'',
          periodEndTime:'',
          searchBeginTime:'',
          ping:"",
          time:"",
          thname:'',
          year1:undefined,
          year2:undefined,
          yData:[],
          yData1:[],
          myChartes:null,
          series:[]
        }
    },
    props:{
      treenode:{
          type:Object,
          default:undefined
        },
        dataTree:{
          type:Array,
          default:undefined   
        },
        name:{
          type:String,
          default:undefined
        },
         treeid:{
          type:String,
          default:undefined   
        },
         view:{
          type:Boolean,
          default:undefined
        }
    },
    created(){
     
    },
    mounted(){
        this.resizeEchart()
        this.zoom = 1 / document.body.style.zoom;
        this.vh = window.sessionStorage.getItem('appheight') - 80 + "px";
        window.addEventListener("resize", () => {
        this.zoom = 1 / document.body.style.zoom;
        if(this.myChartes !==''){
            this.myChartes.resize();
        }
        
       });
 
      this.$nextTick(()=> {  
       this.steadyqualification()
      })
    },
    methods:{
   download() {
    // 转换成canvas
    html2canvas(document.getElementById("wthgl"), {
        background:'#fff',
      scale: 1,
    }).then(function (canvas) {
      // 创建a标签，实现下载
      var creatIMg = document.createElement("a");
      creatIMg.download ="稳态指标合格率.png"; // 设置下载的文件名，
      creatIMg.href = canvas.toDataURL(); // 下载url
      creatIMg.click();
      creatIMg.remove(); // 下载之后把创建的元素删除
    });
  },
          //时间格式转化
      dateFormat(dateData1,dateData2) {
        var timearr=[]
        var date = new Date(dateData1)
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        var d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        var h = date.getHours()
        h = h< 10 ? ('0' + h) : h
        var f = date.getMinutes()
        f = f< 10 ? ('0' + f) : f
        var s = date.getSeconds()
        s = s< 10 ? ('0' + s) : s
         this.formData.searchBeginTime = y + '-' + m + '-' + d
         timearr.push(this.formData.startTime)
        var date = new Date(dateData2)
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        var d = date.getDate()
        d = d < 10 ? ('0' + d) : d
           var h = date.getHours()
        h = h< 10 ? ('0' + h) : h
        var f = date.getMinutes()
        f = f< 10 ? ('0' + f) : f
        var s = date.getSeconds()
        s = s< 10 ? ('0' + s) : s
         this.formData.searchEndTime = y + '-' + m + '-' + d
         timearr.push(this.formData.endTime)
        return timearr
      },
      formatDate(date) {
        
          
          date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Data();
        
          var y = date.getFullYear();
       
          var m = date.getMonth() + 1;
          m = m < 10 ? '0' + m : m;
          var d = date.getDate();
          d = d < 10 ? ('0' + d) : d;
          return y + '-' + m + '-' + d;
      },
       //2次组件触发事件
      querfromdata(data,timehbValue){
        this.loading = true
        this.timeValue = data
        this.timehuanbiValue = timehbValue
        this.periodBeginTime = this.timehuanbiValue[0]
        this.periodEndTime = this.timehuanbiValue[1]
            let startTime = data[0]
            let year =  parseInt(startTime.substring(0, 4))
            this.year1 = year
            if(this.$refs.hg.intervald==2){           
            let month = parseInt(startTime.substring(5, 7))
            if(month==1){
                this.time =year+'年1季度'
            }
            if(month==4){
                this.time =year+'年2季度'
            }
            if(month==7){
                this.time =year+'年3季度'
            }
            if(month==10){
                this.time =year+'年4季度'
            }
            let date = parseInt(startTime.substring(8, 10))
           
            }else if(this.$refs.hg.intervald==3){
            let month = parseInt(startTime.substring(5, 7))
            this.time =year+'年'+month+'月'
            }else if(this.$refs.hg.intervald==4 || this.$refs.hg.intervald==5){
           
            this.time= this.$refs.hg.timeValue[0]+'至'+this.$refs.hg.timeValue[1]
            }else if(this.$refs.hg.intervald==1){
               this.time = year+'年'
            }
           
           //this.time= this.$refs.time.timeValue[0]+'至'+this.$refs.time.timeValue[1]
       
         if(timehbValue != ''){
           
            this.timehbValue = timehbValue
            let t2 = timehbValue[0]
            let year2 =  parseInt(t2.substring(0, 4))
            this.year2 = year2
            if(this.$refs.hg.intervald==2){           
            let month2 = parseInt(t2.substring(5, 7))
            if(month2==1){
                this.ping =year2+'年1季度'
            }
            if(month2==4){
                this.ping =year2+'年2季度'
            }
            if(month2==7){
                this.ping =year2+'年3季度'
            }
            if(month2==10){
                this.ping =year2+'年4季度'
            }
            let date = parseInt(startTime.substring(8, 10))
           
            }else if(this.$refs.hg.intervald==3){
            let month2 = parseInt(t2.substring(5, 7))
            this.ping=year2+'年'+month2+'月' 
           }else if(this.$refs.hg.intervald==4 ||  this.$refs.hg.intervald==5){
            let month2 = parseInt(t2.substring(5, 7))
            let date = parseInt(t2.substring(8, 10))
            this.ping = this.$refs.hg.timehbValue[0]+'至'+this.$refs.hg.timehbValue[1]
           }else if(this.$refs.hg.intervald==1){
            this.ping = year2+'年'
           }  
         
          this.dateFormat(this.timeValue[0],this.timeValue[1])
          
          if(this.year1>this.year2){ 
            this.thname = '同比'
          }else if(this.year1==this.year2 ){ 
            this.thname = '环比' 
            }
          var data ={
                  id:this.treeid,
                  searchBeginTime:this.timeValue[0],
                  searchEndTime:this.timeValue[1],
                  periodBeginTime: this.periodBeginTime,
                  periodEndTime: this.periodEndTime
             }
             this.yData = []
             this.yData1 = []
            api.getSteadyData(data).then(res=>{
            if(res.code=='A0000'){
              var data =  res.data.steadyInfoList
              var data1 =  res.data.steadyInfoData
              var arr=[],arr2=[]
               for(var i=0;i<data.length;i++){
                   if(data[i]==3.1415){
                       data[i]=1
                    arr.push(data[i])
                   }else if(data[i]==3.14159){
                       data[i]=1
                    arr.push(data[i])
                   }else if(data[i] !==3.14159){
                    arr.push(data[i])
                   }
                }
               this.yData = arr
               for(var i=0;i<data1.length;i++){
                   if(data1[i]==3.1415){
                       data1[i]=1
                    arr2.push(data1[i])
                   }else if(data1[i]==3.14159){
                       data1[i]=1
                    arr2.push(data1[i])
                   }else if(data1[i] !==3.14159){
                    arr2.push(data1[i])
                   }
                }
                this.yData1 = arr2
                this.series =[]
                const echarts = require('echarts')
                let Object = {
                            name: this.time,
                            type: 'bar',
                        // stack: '余额',
                            barMaxWidth:yan.EchartObject.barMaxWidth,
                            label: {
                            show: true,
                            position: 'top',
                            distance: 2,
                            color: '#fff',
                            fontWeight: 'bolder',
                            fontSize: yan.EchartObject.NamefontSize,
                            },
                        data:this.yData ,
                          markLine: { 
                               silent:false,  
                               symbol :'circle',     
                                        data: [
                                            {
                                                name:"",
                                                yAxis: 100,
                                                lineStyle:{
                                                    color:yan.ColorObject.qualifiedRate1,   
                                                },
                                                 label: {
                                                    color: yan.ColorObject.qualifiedRate1,  // 文字颜色
                                                   // position: "middle",
                                                    padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
                                                    show: true,
                                                    formatter:function (params){
                                                    // alert(params)
                                                    var tips = "";
                                                        tips+=''
                                                      
                                                    return tips
                                                    }
                                                 }
                                            },
                                            {
                                                name:"",
                                                yAxis: 90,
                                                lineStyle:{
                                                    color:yan.ColorObject.qualifiedRate2,   
                                                },
                                                label: {
                                                    //position: "middle",
                                                    color: yan.ColorObject.qualifiedRate2,  // 文字颜色
                                                    padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
                                                    show: true,
                                                    formatter:function (params){
                                                    // alert(params)
                                                    var tips = "";
                                                        tips+=''
                                                      
                                                    return tips
                                                    }
                                                 }
                                            },
                                        {
                                                name:"",
                                                yAxis: 60,
                                                lineStyle:{
                                                    color:yan.ColorObject.qualifiedRate3,   
                                                },
                                                label: {
                                                   // position: "middle",
                                                    color: yan.ColorObject.qualifiedRate3,  // 文字颜色
                                                    padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
                                                    show: true,
                                                    formatter:function (params){
                                                    // alert(params)
                                                    var tips = "";
                                                        tips+=''
                                                      
                                                    return tips
                                                    }
                                                 }
                                            },
                                    
                                    
                                        ]
                                        },
                        itemStyle: {
                                normal: {
                                color:function(params){
                                        if(params.value >=90 && params.value<=100){
                                            return   new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: yan.ColorObject.qualifiedRate1 
                                            }
                                            ],false)
                                        }else if(params.value >=60 && params.value<=90 ){
                                            return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: yan.ColorObject.qualifiedRate2 
                                            }
                                            ],false)
                                        }else if(params.value <=60 && params.value >=10){
                                            return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: yan.ColorObject.qualifiedRate3
                                            }
                                            ],false)
                                        }else if(params.value <=5 && params.value >0){
                                             return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: '#ccc'
                                            }
                                            ],false)
                                        }else if(params.value <=8 && params.value >5){
                                             return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: '#ccc'
                                            }
                                            ],false)
                                        }
                                    
                                    } 

                                },
                        }
                        }
                let Object1 =    {
                            name: this.ping,
                            type: 'bar',
                        // stack: '余额',
                            barMaxWidth: yan.EchartObject.barMaxWidth,
                            label: {
                            show: true,
                            position: 'top',
                            distance: 2,
                            color: '#fff',
                            fontWeight: 'bolder',
                            fontSize: yan.EchartObject.yNamefontSize,
                            },
                        data:this.yData1 ,
                        itemStyle: {
                                normal: {
                                color:function(params){
                                        if(params.value >=90 && params.value<=100){
                                            return   new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: yan.ColorObject.qualifiedRate1 
                                            }
                                            ],false)
                                        }else if(params.value >=60 && params.value<=90 ){
                                            return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: yan.ColorObject.qualifiedRate2 
                                            }
                                            ],false)
                                        }else if(params.value <=60 && params.value >=10){
                                            return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: yan.ColorObject.qualifiedRate3
                                            }
                                            ],false)
                                        }else if(params.value <=5 && params.value >0){
                                             return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: '#ccc'
                                            }
                                            ],false)
                                        }else if(params.value <=8 && params.value >5){
                                             return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: '#ccc'
                                            }
                                            ],false)
                                        }
                                    
                                    } 

                                },
                        }
                        }  

                this.series.push(Object)
                this.series.push(Object1)
                  this.$nextTick(()=> {  
                      this.steadyqualification()
                 })
                }
            })  
           
        }else {
           
            var data ={
                  id:this.treeid,
                  searchBeginTime:this.timeValue[0],
                  searchEndTime:this.timeValue[1],
                  periodBeginTime: "",
                  periodEndTime: ""
             }
             this.yData = []
            api.getSteadyData(data).then(res=>{
                 var arr=[]
                if(res.code=='A0000'){
               var data =  res.data.steadyInfoList
             
               for(var i=0;i<data.length;i++){
                   if(data[i]==3.1415){
                       data[i]=1
                    arr.push(data[i])
                   }else if(data[i]==3.14159){
                       data[i]=1
                    arr.push(data[i])
                   }else{
                    arr.push(data[i])
                   }
               }
               this.yData = arr
               const echarts = require('echarts')
               this.series =[]
               let Object =  {
                            name: this.time,
                            type: 'bar',
                        // stack: '余额',
                            barMaxWidth:yan.EchartObject.barMaxWidth,
                            label: {
                            show: true,
                            position: 'top',
                            distance: 2,
                            color: '#fff',
                            fontWeight: 'bolder',
                            fontSize: yan.EchartObject.NamefontSize,
                            },
                        data:this.yData ,
                          markLine: { 
                               silent:false,  
                               symbol :'circle',     
                                        data: [
                                            {
                                                name:"",
                                                yAxis: 100,
                                                lineStyle:{
                                                    color:yan.ColorObject.qualifiedRate1,   
                                                },
                                                 label: {
                                                    color: yan.ColorObject.qualifiedRate1,  // 文字颜色
                                                   // position: "middle",
                                                    padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
                                                    show: true,
                                                    formatter:function (params){
                                                    // alert(params)
                                                    var tips = "";
                                                        tips+=''
                                                      
                                                    return tips
                                                    }
                                                 }
                                            },
                                            {
                                                name:"",
                                                yAxis: 90,
                                                lineStyle:{
                                                    color:yan.ColorObject.qualifiedRate2,   
                                                },
                                                label: {
                                                    //position: "middle",
                                                    color: yan.ColorObject.qualifiedRate2,  // 文字颜色
                                                    padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
                                                    show: true,
                                                    formatter:function (params){
                                                    // alert(params)
                                                    var tips = "";
                                                        tips+=''
                                                      
                                                    return tips
                                                    }
                                                 }
                                            },
                                        {
                                                name:"",
                                                yAxis: 60,
                                                lineStyle:{
                                                    color:yan.ColorObject.qualifiedRate3,   
                                                },
                                                label: {
                                                   // position: "middle",
                                                    color: yan.ColorObject.qualifiedRate3,  // 文字颜色
                                                    padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
                                                    show: true,
                                                    formatter:function (params){
                                                    // alert(params)
                                                    var tips = "";
                                                        tips+=''
                                                      
                                                    return tips
                                                    }
                                                 }
                                            },
                                    
                                    
                                        ]
                                        },
                        itemStyle: {
                                normal: {
                                color:function(params){
                                        if(params.value >=90 && params.value<=100){
                                            return   new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: yan.ColorObject.qualifiedRate1 
                                            }
                                            ],false)
                                        }else if(params.value >=60 && params.value<=90 ){
                                            return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: yan.ColorObject.qualifiedRate2 
                                            }
                                            ],false)
                                        }else if(params.value <=60 && params.value >=10){
                                            return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: yan.ColorObject.qualifiedRate3
                                            }
                                            ],false)
                                        }else if(params.value <=5 && params.value >0){
                                             return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: '#ccc'
                                            }
                                            ],false)
                                        }else if(params.value <=8 && params.value >5){
                                             return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                                {
                                                offset: 1,
                                                color: '#ccc'
                                            }
                                            ],false)
                                        }
                                    
                                    } 

                                },
                        },
                        }
               this.series.push(Object)
               this.thname = ''
               this.$nextTick(()=> {  
                      this.steadyqualification()
                    })
                }
              })
          }
      },

                //稳态合格率图表
      steadyqualification(){
                    //debugger
               
                    const echarts = require('echarts')
                    let domID1 = document.getElementById('steadyqualification')
                 
                    setTimeout(() => {
                        domID1.style.width =document.getElementById("wthgl").offsetWidth - 0 + "px", 
                       //domID1.style.width='100%'
                        domID1.style.height = window.sessionStorage.getItem('appheight') - 130+"px";
                    }, 0);
                    this.myChartes = echarts.init(domID1,null, { renderer: "svg" })
                    let echartsColor = JSON.parse(window.localStorage.echartsColor);
                    var xData=['频率偏差', '闪变', '三相电压不平衡', '谐波电压', '谐波电流', '电压偏差', '负序电流', '间谐波电压含有率']
                    this.myChartes.clear()  
                    var option = {
                        title: {
                        text: "稳态指标合格率"+this.thname,
                        left: "center",
                        top:"0px",
                        // subtext:this.thname , //副标题
                        textStyle: {
                            color:  echartsColor.WordColor,
                            fontSize:  yan.EchartObject.titleNamefontSize,
                        },
                        subtextStyle: {
                            name:this.thname,
                            color: '#000',
                            fontSize:  yan.EchartObject.xNamefontSize,
                        },
                    },
                        tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: "shadow",
                            label: {
                            color: "#fff",
                            fontSize: 16,
                            },
                        },
                        textStyle: {
                            color: "#fff",
                            fontStyle: "normal",
                            opacity: 0.35,
                            fontSize: 14,
                        },
                        backgroundColor: "rgba(0,0,0,0.35)",
                        formatter: function(params) {
                            //console.log(params)
                            var msg = "";
                            msg += params[0].name+'<br/>' ;
                            for (let i in params) {
                                 if(params[i].data==1){
                                    msg +=params[i].seriesName +":暂无数据<br/>"
                                 
                                }else{
                                    msg +=params[i].seriesName +':'+params[i].data+'<br/>'
                                 
                                }
                            
                            }
                            return msg;
                        }
                    },
                    grid:  yan.EchartObject.grid1,
                    xAxis: {
                        name:yan.EchartObject.Indicatortype,
                        nameTextStyle: {
                        color: echartsColor.WordColor,
                        },
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color:  echartsColor.thread,
                                width: 1
                            },
                            symbol:['none', 'arrow']
                        },
                        axisTick: {
                        show: false,
                        },
                        axisLabel: {
                            textStyle: {
                            fontFamily: 'dinproRegular',
                            color:  echartsColor.WordColor
                        },
                        rotate: yan.rotate(this.yData.length), 
                        },
                        data: xData,
                    },
                    //   toolbox: {
                    //         feature: {
                    //        // restore: {},
                    //         saveAsImage: {}
                    //         }
                    //     },
                    yAxis: [
                        {
                        name: yan.EchartObject.nuit1,
                        type: "value",
                        min:0,
                        max:100,
                        nameTextStyle: {
                                color: echartsColor.WordColor,
                                fontSize:yan.EchartObject.NamefontSize ,
                               // left:'0%'
                            
                        },
                        position:'left',
                        splitLine: {
                        show:false
                        },
                        axisLine: {
                            lineStyle: {
                                color:  echartsColor.thread,
                                width: 1
                            },
                            symbol:['none', 'arrow']
                        },
                        axisLabel: {
                            textStyle: {
                            fontFamily: yan.EchartObject.fontFamily,
                            color:  echartsColor.WordColor
                        },
                        rotate:0,  
                        },
                       },
                        {
                        position:'left',
                        axisLine: {
                            show:true,
                            lineStyle: {
                                color: echartsColor.thread,
                                    
                            },
                             symbol:['none', 'arrow']
                        },
                        splitLine: { //分割线配置
                            lineStyle: {
                                color: "#fff",
                            }
                        },
                    }],
                
                    series:this.series
                    }; 
                    this.myChartes.setOption(option)
window.echartsArr.push(this.myChartes);
                    this.loading = false


                    let _this = this;
                    _this.$erd.listenTo(_this.$refs.zhuEchartshg, (element) => {
                        _this.$nextTick(() => {
                       //  domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
                         domID1.style.width =document.getElementById("wthgl").offsetWidth - 0 + "px", 
                        _this.myChartes.resize();
                       
                       
                        });
                    });
                    this.myChartes.hideLoading();
                    },
       resizeEchart(){
         var elementResizeDetectorMaker = require("element-resize-detector")
         var erd = elementResizeDetectorMaker()
         erd.listenTo(document.getElementById("wthgl"), (element) => {
        let  domeId=document.getElementById("wthgl")
        let  domeId2=document.getElementById("steadyqualification")
        domeId2.style.width= domeId.offsetWidth - 0 + "px"
        this.$nextTick(() => {
            if( this.myChartes!==''){
                this.myChartes.resize();
            }
       
        });
      });
    }
    

    }
    }
</script>
<style lang="less" scoped>
@import url("../../styles/comStyle.less");
.cfd {
    display: inline-block;
   // margin-bottom: 10px;
    width: 100%;
    margin-top: 0%;
    position:relative;
    z-index: 100000;
}
.cf {
    display: inline-block;
    //margin-bottom: 10px;
    width: 100%;
    margin-top: 0%;
    position:relative;
     z-index: 100000;
}

</style>