<template>
  <div class="spectrum-analysis">
    <!-- 顶部操作栏 -->
    <div class="spectrum-analysis-operators">
      <a-dropdown class="spectrum-analysis-operators-item" v-for="operation in operations" :key="operation.title">
        <a-button type="primary">{{ operation.title }}</a-button>
        <template slot="overlay">
          <a-menu>
            <a-menu-item v-for="child in operation.children" :key="child.title" @click="child.handler">
              {{ child.title }}
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
    <!-- 顶部操作栏结束 -->

    <!-- 二级交互栏 -->
    <div class="spectrum-analysis-sub-operators">
      <pop-over-with-icon placement="bottomLeft">
        Detailed-Information
        <detailed-infomation slot="content" />
      </pop-over-with-icon>
      <pop-over-with-icon placement="bottomLeft">
        QC Flags
        <qc-flags slot="content" :data="{ collectionTime: '123' }" />
      </pop-over-with-icon>

      <!-- gamma 独有的二级交互栏 -->
      <template v-if="analysisType == ANALYZE_TYPE.GAMMA">
        <pop-over-with-icon>
          Graph Assistance
          <graph-assistance slot="content" />
        </pop-over-with-icon>
        <pop-over-with-icon>
          Nuclide Library
          <nuclear-library slot="content" />
        </pop-over-with-icon>
        <div class="peak-info">
          <button-with-switch-icon @change="handlePeakInfoChange">
            Peak Information
          </button-with-switch-icon>
        </div>
      </template>
      <!-- gamma 独有的二级交互栏结束 -->

      <!-- beta-gamma 独有的二级交互栏 -->
      <template v-if="analysisType == ANALYZE_TYPE.BETA_GAMMA">
        <pop-over-with-icon placement="bottomLeft" style="width: 159px">
          Spectra
          <spectra slot="content" />
        </pop-over-with-icon>
      </template>
      <!-- beta-gamma 独有的二级交互栏结束 -->
    </div>
    <!-- 二级交互栏结束 -->

    <!-- 频谱分析部分 -->
    <div class="spectrum-analysis-main">
      <gamma-analysis v-if="analysisType == ANALYZE_TYPE.GAMMA" ref="gammaAnalysisRef" />
      <beta-gamma-analysis v-if="analysisType == ANALYZE_TYPE.BETA_GAMMA" ref="betaGammaAnalysisRef" />
      <resize-observer @notify="handleResize" />
    </div>
    <!-- 频谱分析部分结束 -->
  </div>
</template>
<script>
import ButtonWithSwitchIcon from './components/sub-operators/ButtonWithSwitchIcon.vue'
import DetailedInfomation from './components/sub-operators/DetailedInfomation.vue'
import GraphAssistance from './components/sub-operators/GraphAssistance.vue'
import NuclearLibrary from './components/sub-operators/NuclearLibrary.vue'
import PopOverWithIcon from './components/sub-operators/PopOverWithIcon.vue'
import QcFlags from './components/sub-operators/QcFlags.vue'
import GammaAnalysis from './gamma-analysis.vue'
import BetaGammaAnalysis from './beta-gamma-analysis.vue'
import Spectra from './components/sub-operators/Spectra.vue'

// 分析类型
const ANALYZE_TYPE = {
  GAMMA: 'gammaAnalysis',
  BETA_GAMMA: 'betaGammaAnalysis'
}
export default {
  components: {
    PopOverWithIcon,
    ButtonWithSwitchIcon,
    BetaGammaAnalysis,
    GammaAnalysis,
    QcFlags,
    GraphAssistance,
    DetailedInfomation,
    NuclearLibrary,
    Spectra
  },
  data() {
    this.ANALYZE_TYPE = ANALYZE_TYPE

    return {
      analysisType: ANALYZE_TYPE.BETA_GAMMA // 分析类型
    }
  },
  methods: {
    handleLoadFromDb() {
      console.log('%c [ handleLoadFromDb ]-46', 'font-size:13px; background:pink; color:#bf2c9f;')
    },

    handleLoadFromFile() {
      console.log('%c [ handleLoadFromFile ]-46', 'font-size:13px; background:pink; color:#bf2c9f;')
    },

    // peak info 点击左右方向
    handlePeakInfoChange(direction) {
      this.$refs.gammaAnalysisRef.moveMarkLine(direction)
    },

    handleResize() {
      this.$refs.gammaAnalysisRef && this.$refs.gammaAnalysisRef.resize()
      this.$refs.betaGammaAnalysisRef && this.$refs.betaGammaAnalysisRef.resize()
    }
  },
  computed: {
    operations() {
      return [
        {
          title: 'SAMPLE',
          children: [
            {
              title: 'Load From DB',
              handler: this.handleLoadFromDb
            },
            {
              title: 'Load From File',
              handler: this.handleLoadFromFile
            }
          ]
        },
        {
          title: 'SAVE',
          children: [
            {
              title: 'Load From DB',
              handler: this.handleLoadFromDb
            },
            {
              title: 'Load From File',
              handler: this.handleLoadFromFile
            }
          ]
        },
        {
          title: 'ANALYZE',
          children: [
            {
              title: 'Load From DB',
              handler: this.handleLoadFromDb
            },
            {
              title: 'Load From File',
              handler: this.handleLoadFromFile
            }
          ]
        },
        {
          title: 'CALIBRATION',
          children: [
            {
              title: 'Load From DB',
              handler: this.handleLoadFromDb
            },
            {
              title: 'Load From File',
              handler: this.handleLoadFromFile
            }
          ]
        },
        {
          title: 'NUCLIDELIBRARY',
          children: [
            {
              title: 'Load From DB',
              handler: this.handleLoadFromDb
            },
            {
              title: 'Load From File',
              handler: this.handleLoadFromFile
            }
          ]
        },
        {
          title: 'COMMENTS',
          children: [
            {
              title: 'Load From DB',
              handler: this.handleLoadFromDb
            },
            {
              title: 'Load From File',
              handler: this.handleLoadFromFile
            }
          ]
        },
        {
          title: 'REPORTS',
          children: [
            {
              title: 'Load From DB',
              handler: this.handleLoadFromDb
            },
            {
              title: 'Load From File',
              handler: this.handleLoadFromFile
            }
          ]
        },
        {
          title: 'LOG',
          children: [
            {
              title: 'Load From DB',
              handler: this.handleLoadFromDb
            },
            {
              title: 'Load From File',
              handler: this.handleLoadFromFile
            }
          ]
        },
        {
          title: 'HELP',
          children: [
            {
              title: 'Load From DB',
              handler: this.handleLoadFromDb
            },
            {
              title: 'Load From File',
              handler: this.handleLoadFromFile
            }
          ]
        }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.spectrum-analysis {
  padding-top: 17px;
  height: 100%;
  display: flex;
  flex-direction: column;

  // 顶部操作栏开始
  &-operators {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow: auto;

    &-item {
      width: 158px;
      border: 1px solid rgba(12, 235, 201, 0.6);
      border-top-width: 3px;
      height: 30px;
      background-color: rgba(51, 202, 217, 0.2);
      color: #ccede8;

      &:not(:last-child) {
        margin-right: 15px;
      }

      ::v-deep {
        span {
          text-shadow: none;
          line-height: 26px;
          letter-spacing: 2px;
        }
      }

      &:nth-child(4) {
        width: 224px;
      }
      &:nth-child(5) {
        width: 268px;
      }
      &:nth-child(6) {
        width: 257px;
      }
      &:nth-child(7) {
        width: 234px;
      }
      &:nth-child(8) {
        width: 125px;
      }
    }
  }
  // 顶部操作栏结束

  // 二级操作栏开始
  &-sub-operators {
    flex-shrink: 0;
    margin-top: 15px;
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;

    .pop-over-with-icon {
      height: 32px;

      &:not(:last-child) {
        margin-right: 11px;
      }

      &:nth-child(1) {
        width: 256px;
      }
      &:nth-child(2) {
        width: 186px;
      }
      &:nth-child(3) {
        width: 246px;
      }
      &:nth-child(4) {
        width: 246px;
      }
    }

    .peak-info {
      width: 306px;
      height: 32px;
      display: inline-block;
    }
  }
  // 二级操作栏结束

  // 主体部分开始
  &-main {
    flex: 1;
    margin-top: 19px;
    height: calc(100% - 100px);
  }
  // 主体部分结束
}
</style>
