<template>
  <div @click="resizeClick" :class="theme + ' window-container pop-window'" v-if="show">
    <div class="window-body">
      <div class="window-header">
        <span class="window-title">
          <slot name="header"></slot>
        </span>
        <span class="window-close" title="关闭" @click="closeClick">×</span>
      </div>
      <div class="window-body">
        <slot name="content"></slot>
      </div>
      <div class="window-footer">
        <div class="window-footer-content" :class="theme">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ToolsTipWindow",
  components: {
  },
  props: {
    // dark || light
    theme: {type: String, default: 'dark'},
    //object类型方便后期数据拓展
    options: {type: Object},
  },
  data(){
    return {
      show: true,
    }
  },
  methods: {
    closeClick() {
      if (this.closeEvent) {
        this.closeEvent();
      }
    },
    resizeClick: function(){
      if (this.clickEvent) {
        this.clickEvent();
      }
    },

  },
  beforeMount(){
    console.log("this.options", this.options)
  },
  beforeDestroy() {
  },
};
</script>

<style lang="less" scoped>
.pop-window{
  z-index: 1;
}
.window-container {
  // position: absolute;
  // left: 0px;
  // bottom: 0px;
  padding: 2px 5px;
  color: white;
  border-radius: 5px;
  background: rgba(0, 34, 102, 0.7);
  min-width: 60px;
  text-align: left;
  font-size: 14px;
}

.window-container.light{
  background: rgba(255, 255, 255, 0.9);
  color: #333;
}

.window-container.dark{
  background: rgba(0, 34, 102, 0.7);
  color: #fff;
}

.window-container::after {
  content: "";
  position: absolute;
  left: 20px;
  width: 10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(0, 34, 102, 0.7);
  bottom: -10px;
}

.window-container.dark::after {
   border-top: 10px solid rgba(0, 34, 102, 0.7);
}


.window-container.light::after {
   border-top: 10px solid rgba(255, 255, 255, 0.9);
}

.window-header {
  height: 2rem;
  line-height: 2rem;
  color: #303133;
  min-width: 200px;
  padding: 0px 10px;
  position: relative;
  user-select: none;
}
.light .window-header {
  color: #303133;
}
.dark .window-header {
  color: #FFFFFF;
}

.window-header .window-title{
  font-weight: 600;
}

.window-close {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 25px;
  cursor: pointer;
  width: 29px;
  opacity: 0.4;
}

.window-close:hover{
  opacity: 1;
}


.window-body {
  padding: 5px;
}

.window-info-title{
  font-weight: 600;
}

.window-info-item {
  display: flex;
}


.window-info-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-align: justify;
  text-align-last: justify;
  padding-right: 1rem;
  font-weight: 400;
}

.window-info-text{
  flex: 1;
}
.window-footer-content {
  & > div {
    display: flex;
    align-items: center;
    font-size: 13px;
    padding: 2px 5px;
  }
  &.light,
  &.dark {
    background: none;
  }
  &.light .btn {
    border: 1px solid #ccc;
    padding: 2px 8px;
    border-radius: 3px;
    margin: 10px 5px 0;
    cursor: pointer;
    transition: 0.3s;
    &:hover {
      color: #4076F6;
      border: 1px solid #4076F6;
    }
  }
  &.dark .btn {
    border: 1px solid #ccc;
    padding: 2px 8px;
    border-radius: 3px;
    margin: 10px 5px 0;
    cursor: pointer;
    transition: 0.3s;
    &:hover {
      color: #4076F6;
      border: 1px solid #4076F6;
    }
  }
}
.textColor {
  color: #4076F6;
}
</style>