<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__flipInY"
    leave-active-class="animate__flipOutY"
  >
    <div class="widget-CustomToolBox" ref="widget-CustomToolBox">
      <div class="tool-list">
        <div class="list-item" v-for="item of toolList" :key="item.name" :title="item.name" @click="activeTool(item)">
          <!-- :class="{ isActive: currentActive === item.name }"
          @click="currentActive = item.name" -->
          <div class="wrap">
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import monitorTree from '@/views/groupPage/districtPageModules/customTools/monitorTree.vue'
import layerControl from '@/views/groupPage/districtPageModules/customTools/layerControl.vue'
//自定义工具栏
@Component({ name: 'CustomToolBox', components: {} })
export default class CustomToolBox extends Vue {
  toolList: Array<any> = [
    { name: '图层控制', com: layerControl },
    { name: '设备监测树', com: monitorTree },
    { name: '进度查看', com: null },
    { name: '开挖分析', com: null }
  ]
  currentActive = null
  mounted() {
    let target = this.$refs['widget-CustomToolBox'] as any
    target.style.setProperty('--left', '2.291667rem')
    target.style.setProperty('--bottom', '0.052083rem')
  }
  activeTool(item) {
    if (item.name !== '进度查看' && item.name !== '开挖分析') {
      this.$store.dispatch('bigScreen/changeToolList', item)
    } else {
      if (item.name == '进度查看') {
        this.$store.state.bigScreen.isShowPipeSpeedInfoCheck = true
      }
      if (item.name == '开挖分析') {
        this.$store.state.bigScreen.isShowExcavationAnalysis = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.animate__flipInY,
.animate__flipOutY {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-CustomToolBox {
  z-index: 2;
  //position
  bottom: var(--bottom); //0.052083rem /* 10/192 */;
  margin-left: var(--left); //2.291667rem /* 440/192 */;
  position: absolute;
  left: 0;
  //size
  //background
  color: #eee;
  //font
  font-family: Source Han Sans CN;
  .tool-list {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-end;
    .list-item {
      width: 0.520833rem /* 100/192 */;
      height: 0.223958rem /* 43/192 */;
      background: url('~@/views/groupPage/images/工具栏/未选中.png') no-repeat center center;
      background-size: 100% 100%;
      border-radius: 0.010417rem /* 2/192 */;
      margin: 0.026042rem /* 5/192 */;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: width 0.3s;
      margin: -2px 0;
      .wrap {
        height: inherit;
        width: inherit;
        position: relative;
      }
      .wrap::after {
        content: '';
        position: absolute;
        width: 0.010417rem /* 2/192 */;
        height: 0.145833rem /* 28/192 */;
        background: rgba(14, 167, 255, 0.24);
        top: 0;
        bottom: 0.03125rem /* 6/192 */;
        left: 0.015625rem /* 3/192 */;
        margin: auto 0;
      }
      .name {
        font-size: 0.072917rem /* 14/192 */;
        font-weight: 500;
        color: #0ea7ff;
        text-align: center;
        margin-left: 0.104167rem /* 20/192 */;
        margin-top: 0.026042rem /* 5/192 */;
      }
    }
    .list-item:hover {
      color: #eee;
      background: url('~@/views/groupPage/images/工具栏/选中.png') no-repeat center center;
      background-size: 100% 100%;
      .name {
        color: #eee !important;
      }
      .wrap::after {
        background: rgba(14, 167, 255, 1);
      }
    }
    .isActive {
      color: #eee;
      background: url('~@/views/groupPage/images/工具栏/选中.png') no-repeat center center;
      background-size: 100% 100%;
      .name {
        color: #eee !important;
      }
      .wrap::after {
        background: rgba(14, 167, 255, 1);
      }
    }
  }
}
</style>