<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__zoomIn"
    leave-active-class="animate__zoomOut"
  >
    <div class="widget-specialSwitch">
      <div class="boxpanel">
        <div class="statisticitem" v-for="item in dataList" :key="item.title">
          <div class="itemName" @click="active(item.name)">
            <div class="img" :class="{ active: currentActive == item.name }">
              <div class="num">{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
//统计分析专题切换
@Component({ name: 'specialSwitch' })
export default class specialSwitch extends Vue {
  dataList: Array<any> = [
    { title: '进度', name: 'progress' },
    { title: '质量', name: 'quality' },
    { title: '安全', name: 'security' }
  ]
  get currentActive() {
    return this.$store.state.bigScreen.currentStatisticalActive
  }
  created() {
    this.$store.state.bigScreen.currentStatisticalActive = 'progress'
  }
  active(name) {
    this.$store.state.bigScreen.currentStatisticalActive = name
  }
}
</script>

<style lang='scss' scoped>
.animate__zoomIn,
.animate__zoomOut {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-specialSwitch {
  top: 0.505208rem /* 97/192 */;
  left: 50%;
  margin-left: -0.833333rem /* 160/192 */;
  height: 0.416667rem /* 80/192 */;
  width: 1.666667rem /* 320/192 */;
  overflow: hidden;
  position: absolute;
  font-family: Source Han Sans CN;
  .boxpanel {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .statisticitem {
      width: 0.645833rem /* 124/192 */;
      height: 100%;
      display: flex;
      cursor: pointer;
      .itemName {
        height: 100%;
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        .img {
          height: 0.447917rem /* 86/192 */;
          width: 0.4375rem /* 84/192 */;
          background: url('~@/views/groupPage/images/模块图标/统计分析/默认tab.png') no-repeat center center;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          white-space: nowrap;
          .num {
            height: 0.083333rem /* 16/192 */;
            font-size: 0.083333rem /* 16/192 */;
            font-family: Source Han Sans CN-HEAVY;
            font-weight: bold;
            color: #1ea1ff;
          }
        }
        .active {
          background: url('~@/views/groupPage/images/模块图标/统计分析/当前tab.png') no-repeat center center;
          background-size: 100% 100%;
          .num {
            color: #feffff !important;
            background: linear-gradient(0deg, #f7d660 0%, #ffffff 81.0791015625%);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
    }
  }
}
</style>
