<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)">
            <div class="img" :class="{ active: currentActive == item.name }">
              <div class="num">{{ item.title }}</div>
            </div>
          </div>
          <div class="sub-list" v-if="currentActive == item.name">
            <div
              class="sub-item"
              v-for="sub of subList"
              :key="sub"
              :class="{ 'sub-active': childrenActive == sub }"
              @click="activeChildren(sub)"
            >
              {{ sub }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import ProjectPipeSpeedInfoCheck from '@/views/groupPage/districtPageModules/customTools/projectPipeSpeedInfoCheck.vue'
//统计分析专题切换
@Component({ name: 'specialSwitch' })
export default class specialSwitch extends Vue {
  dataList: Array<any> = [
    { title: '进度', name: 'progress' },
    { title: '质量', name: 'quality' },
    { title: '安全', name: 'security' },
    { title: '投资', name: 'invest' }
  ]
  subList: Array<any> = ['进度专题', '管道开挖']
  childrenActive = null
  prjPSICInstance = null
  get currentActive() {
    return this.$store.state.bigScreen.currentStatisticalActive
  }
  created() {
    this.$store.state.bigScreen.currentStatisticalActive = 'progress'
    // this.initPrjPSIC()
  }
  initPrjPSIC() {
    const prjPSICConstructor = Vue.extend(ProjectPipeSpeedInfoCheck)
    this.prjPSICInstance = new prjPSICConstructor({
      store: this.$store
    }).$mount()
  }
  active({ title, name }) {
    this.$store.state.bigScreen.currentStatisticalActive = name
    this.subList = name == 'progress' ? ['进度专题', '管道开挖'] : [`${title}专题`]
    this.childrenActive = null
    this.clear()
  }
  activeChildren(item) {
    this.childrenActive = item
    this.clear()
    switch (item) {
      case '进度专题':
        ;(window as any).viewer.camera.setView(this.$store.state.bigScreen.initView)
        this.$store.state.bigScreen.isShowPipeSpeedInfoCheck = true
        break
      case '管道开挖':
        this.$store.state.bigScreen.isShowExcavationAnalysis = true
        break
    }
  }
  clear() {
    //清除进度专题页面
    // this.$store.state.bigScreen.isShowPipeSpeedInfoCheck = false
    //清除管道开挖页面
    // this.$store.state.bigScreen.isShowExcavationAnalysis = false
  }
  beforeDestroy() {
    this.clear()
  }
}
</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: -1.276042rem /* 245/192 */;
  height: 0.416667rem /* 80/192 */;
  width: 2.552083rem /* 490/192 */;
  position: absolute;
  font-family: Source Han Sans CN;
  .boxpanel {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    .statisticitem {
      display: flex;
      flex-flow: column;
      align-items: center;
      cursor: pointer;
      .itemName {
        display: flex;
        justify-content: center;
        width: 0.583333rem /* 112/192 */;
        height: 0.229167rem /* 44/192 */;
        .img {
          height: 100%;
          width: 100%;
          background: url('~@/views/groupPage/images/模块图标/统计分析/默认tab.png') no-repeat center center;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          white-space: nowrap;
          line-height: 0.182292rem /* 35/192 */;
          .num {
            font-size: 0.083333rem /* 16/192 */;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #ffffff;
          }
        }
        .active {
          // height: 0.286458rem /* 55/192 */;
          height: 0.229167rem /* 44/192 */;
          background: url('~@/views/groupPage/images/模块图标/统计分析/当前tab.png') no-repeat center center;
          background-size: 100% 100%;
        }
      }
      .sub-list {
        width: 0.5625rem /* 108/192 */;
        display: none;
        background: linear-gradient(0deg, #026ea9 0%, rgba(15, 81, 133, 0) 100%);
        .sub-item {
          margin: 0.052083rem /* 10/192 */;
          padding: 0.052083rem /* 10/192 */;
          font-size: 0.072917rem /* 14/192 */;
          font-weight: 400;
          color: #eee;
          text-align: center;
        }
        .sub-item:hover,
        .sub-active {
          background: url('~@/views/groupPage/images/模块图标/统计分析/子项高亮.png') no-repeat center center;
          background-size: 100% 100%;
        }
      }
    }
    .statisticitem:hover .sub-list {
      display: block;
    }
  }
}
</style>
