<!--
 * @Author: gtz
 * @Date: 2022-06-06 15:34:34
 * @LastEditors: gtz
 * @LastEditTime: 2022-06-09 17:45:35
 * @Description: file content
 * @FilePath: \mt-bus-fe\src\views\DataAnalysis\components\hoverBox.vue
-->
<template>
  <div v-if="visible" class="hover-box" :style="{ left: buttonWidth + 'px' }">
    <el-row class="hover-box-title">
      {{ injectData.title }} <span style="margin: 0 16px">|</span> {{ injectData.line }} {{ injectData.process }} {{ injectData.equipmentName }} {{ moment(new Date()).format('YYYY-MM-DD') }}
    </el-row>
    <el-row class="hover-box-main" />
  </div>
</template>

<script>
import moment from 'moment'
export default {
  props: {
    injectData: {
      type: Object,
      default: () => ({})
    },
    buttonWidth: {
      type: Number,
      default: () => 0
    }
  },
  data() {
    return {
      visible: false,
      moment
    }
  },
  methods: {
    init() {
      this.visible = true
    },
    remove() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.hover-box{
  position: absolute;
  left: 0;
  top: 0;
  min-width: 600px;
  background: #020F1B;
  color: #fff;
  border-radius: 4px;
  opacity: 0.85;
  backdrop-filter: blur(6px);
  background: #000;
  z-index: 1;
  font-size: 14px;
  text-align: left;
  .hover-box-title {
    height: 48px;
    line-height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .45);
  }
  .hover-box-main{
    height: 50px;
  }
}
</style>
