<template>
  <!-- 工具框 -->
  <div v-if="panelVisible" class="widget-ComInfoBox" v-drag>
    <!-- <div class="header">
      <div class="title">工具集</div>
      <span class="close" @click="handelClose()"><i class="el-icon-close" /></span>
    </div> -->
    <span class="close" @click="handelClose()">
      <i class="el-icon-close" />
    </span>
    <el-tabs :tab-position="tabPosition" :value="activeName" closable @tab-remove="removeTab">
      <el-tab-pane v-for="item in panels" :key="item.name" :label="item.name" :name="item.name">
        <component :is="item.com" class="content"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang='ts'>
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
//工具集窗
@Component({
  name: 'ComInfoBox'
})
export default class ComInfoBox extends Vue {
  tabPosition = 'top'
  get panelVisible() {
    return this.$store.state.bigScreen.customToolList.length != 0
  }
  get panels() {
    return this.$store.state.bigScreen.customToolList
  }
  get activeName() {
    return this.$store.state.bigScreen.currentTool
  }
  removeTab(targetName) {
    this.$store.dispatch('bigScreen/removeSingleTool', targetName)
  }
  handelClose() {
    this.$store.dispatch('bigScreen/removeAllTool')
  }
  beforeDestroy() {
    this.$store.dispatch('bigScreen/removeAllTool')
  }
}
</script>
<style lang='scss' scoped>
.widget-ComInfoBox {
  position: absolute;
  top: 0.78125rem /* 150/192 */;
  left: 2.34375rem /* 450/192 */;
  width: 1.526042rem /* 293/192 */;
  height: 2.604167rem /* 500/192 */;
  z-index: 999;
  // background: linear-gradient(0deg, rgba(14, 167, 255, 0.16) 0%, rgba(14, 167, 255, 0.08) 100%);
  background: rgba(7, 44, 73, 0.86);
  border-radius: 10px;
  .header {
    width: 100%;
    height: 0.177083rem /* 34/192 */;
    padding: 0.052083rem /* 10/192 */;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(11, 32, 70, 0.68);
    .title {
      font-size: 0.072917rem /* 14/192 */;
      font-family: Source Han Sans CN;
      font-weight: bold;
      background: linear-gradient(0deg, #a3d3ff 0%, #e4f3ff 100%);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .close {
      color: #a3d3ff;
      cursor: pointer;
      >>> .el-icon-close {
        color: #a3d3ff;
        font-size: 0.083333rem /* 16/192 */;
      }
    }
  }
  .close {
    position: absolute;
    right: 0.052083rem /* 10/192 */;
    top: 0.104167rem /* 20/192 */;
    color: #a3d3ff;
    font-size: 0.083333rem /* 16/192 */;
    z-index: 10;
    cursor: pointer;
  }
  >>> .el-tabs {
    height: calc(100% - 0.052083rem /* 10/192 */);
    width: 100%;
    font-family: Source Han Sans CN;
    padding: 0.052083rem /* 10/192 */;
    // .el-tabs__header {
    //   margin: 0px 0.104167rem /* 20/192 */ 0.078125rem /* 15/192 */ !important;
    // }
    .el-tabs__item {
      font-size: 0.072917rem /* 14/192 */;
      font-weight: 500;
      color: #0ea7ff;
    }
    .el-tabs__item.is-active {
      color: #ffffff;
      background: linear-gradient(0deg, rgba(14, 167, 255, 0.8) 0%, rgba(14, 167, 255, 0) 100%);
    }
    .el-tabs__item:hover {
      color: #fff;
    }
    .el-tabs__content {
      height: calc(100% - 42px);
    }
    .el-tab-pane {
      height: 100%;
      width: 100%;
    }
    .el-tabs__nav-wrap::after {
      background-color: rgba(14, 167, 255, 0.2);
    }
  }
  .content {
    height: 100%;
    width: 100%;
  }
}
</style>
