<template>
  <div class="mini-box" id="mini-box">
    <div class="mini-item" v-for="(item,index) in miniList" :key="index">
      <el-tooltip :content="item.title? item.title:$t(`message.menu.${item.type}`)">
        <div class="title">
          <span v-if="!item.title">{{ $t(`message.menu.${item.type}`) }}</span>
          <span v-else>{{ item.title }}</span>
        </div>
      </el-tooltip>
      <div class="operation">
        <span @click="showDialog(item)" class="el-icon-full-screen"></span>
        <span @click="closeDialog(item)" class="el-icon-close"></span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator'
import MiniUtil from "@/util/mini";
import DialogUtil from "@/util/new-dialog";

@Component({})
export default class MiniBox extends Vue {
  private miniList: any[] = (this as any).$MiniList

  /**
   * 从最小化变成正常显示
   * @param data
   * @private
   */
  private showDialog(data: any) {
    MiniUtil.delMini(data.type)
    DialogUtil.showCom(data.type)
  }

  /**
   * 在最小化状态下关闭弹窗
   * @param data
   * @private
   */
  private closeDialog(data: any) {
    DialogUtil.closeMini(data.type)
  }
}
</script>

<style scoped lang="scss">
.mini-box {
  width: 18.75rem;
  z-index: 2;
  height: 100%;
  position: absolute;
  right: 0;
  padding: 3.125rem 0 2.5rem 0;
  background: transparent;
  pointer-events: none;

  .mini-item {
    width: 17.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    background: var(--theme-color);
    border-left: 0.625rem solid #ffc412;
    box-sizing: border-box;
    margin: 0.3125rem 0;
    pointer-events: auto;

    .title {
      width: 12.5rem;
      color: #FFFFFF;
      font-size: 1.125rem;
      padding: 0 0.625rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .operation {
      width: 5rem;
      color: #FFFFFF;
      font-size: 1.5rem;
      display: flex;
      justify-content: space-around;
      padding: 0 0.625rem;
      box-sizing: border-box;
    }
  }
}
</style>
