<template>
  <div class="bi_button-contanier">
    <div ref="button" class="bi_button">
        <span> <slot></slot>  </span>
     </div>
     <div class="export_choose" ref="exportbox" @mouseleave="isChoose=false" :style="{top: topHeight+'px',left:leftWidth+'px'}" v-show="isChoose">
      <div class="export_name" @click="exportExcel" style="border-bottom:solid 1px #ccc">导出Excel</div>
      <div class=" export_name" @click="exportSvc">导出CSV</div>
     </div>
  </div>
</template>
<script>
import _ from 'lodash'
export default {
  name: 'suqareSign',
  props: {
  },
  data() {
    return {
        topHeight:30,
        isChoose:false,
        leftWidth:0,
        allheight:'100%',
    }
  },
  created() {},
  mounted() {
     this.$nextTick(()=>{
     this.topHeight = this.$refs.button.offsetHeight + 3
     })
  },
  watch:{
    isChoose:{
      handler(n){
        this.addBody(n)
      },
      deep:true,
    }
  },
  methods: {
    addBody(type){
         let emo =    this.$refs.button.getBoundingClientRect()
         this.topHeight = emo.height + emo.top
         this.leftWidth = emo.left
        this.$nextTick(() => {
        const body = document.querySelector('body')
        if (type) {
          let selectWin = this.$refs.exportbox
          let pTabName = selectWin.parentNode
            ? selectWin.parentNode.tagName
            : ''
          if (pTabName != 'body') {
            // 未加入，body，选择加入
            if (body.append) {
              body.append(selectWin)
            } else {
              body.appendChild(selectWin)
            }
          }
        } else {
          body.removeChild(body.lastChild)
        }
      })
    },
    exportExcel() {
      this.isChoose=false
      this.$emit('exportExcel','xlsx')
    },
    exportSvc() {
      this.isChoose=false
      this.$emit('exportExcel','csv')
    },
  },
}
</script>
<style lang="less" scoped>
.export_choose {
  background: #fff;
  z-index: 999999;
  position:absolute;
  left:0px;
  top:30px;
  min-width:70px;
  height:50px;
  border-radius: 3px;
  border:1px solid #ccc;
  .export_name{
    height: 23px;
    line-height: 23px;
    text-align: center;
    width:100%;
    font-size: 12px;
    cursor: pointer;
    color: var(--light-font-grey);
  }
  .export_name:hover{
    color:#444;
    // font-weight: bold;
  }
}
.bi_button-contanier {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  padding:2px 3px 3px 2px;
  position: relative;
 .bi_button{
   text-align: center;
   background: var(--button_color) !important;
    border: 1px var(--button_color) solid !important;
    border-radius: 3px !important;
    color: #fff;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
 }
//  .bi_button :hover{
  //  border: 1px var(--button_color) solid;
  //  box-shadow: var(--button_color) 2px 2px 2px 1px
//  }
}
</style>
