<template>
  <div class="spectrum-analysis">
    <!-- 顶部操作栏 -->
    <div class="spectrum-analysis-operators">
      <a-dropdown
        class="spectrum-analysis-operators-item"
        overlayClassName="spectrum-analysis-operators-dropdown-overlay"
        :overlay-style="operation.style"
        v-for="operation in operations"
        :key="operation.title"
      >
        <a-button type="primary">{{ operation.title }}</a-button>
        <div slot="overlay">
          <template v-for="(child, index) in operation.children">
            <component :is="child.type" :key="index" v-bind="child.attrs" v-on="child.on">
              <component :is="item.type" v-for="item in child.children" :key="item.title" @click="item.handler">
                {{ item.title }}
              </component>
            </component>
          </template>
        </div>
      </a-dropdown>
    </div>
    <!-- 顶部操作栏结束 -->

    <!-- 二级交互栏 -->
    <div class="spectrum-analysis-SubOperators">
      <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" v-model="spectraVisible">
          Spectra
          <spectra slot="content" v-model="spectraType" @input="spectraVisible = false" />
        </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>
    <!-- 频谱分析部分结束 -->

    <!-- 从数据库加载开始 -->
    <load-from-db-modal v-model="loadFromDbModalVisible" />
    <!-- 从数据库加载结束 -->

    <!-- 从文件加载开始 -->
    <load-from-file-modal v-model="loadFromFileModalVisible" />
    <!-- 从文件加载结束 -->

    <!-- Peak Infomation 弹窗开始 -->
    <peak-infomation v-model="peakInfomationModalVisible" />
    <!-- Peak Infomation 弹窗结束 -->

    <!-- Nuclide Activity and MDC 弹窗开始 -->
    <nuclide-activity-and-mdc-modal v-model="nuclideActivityAndMDCModalVisible" />
    <!-- Nuclide Activity and MDC 弹窗结束 -->

    <!-- Save Setting 弹窗开始 -->
    <save-setting-modal v-model="saveSettingModalVisible" />
    <!-- Save Setting 弹窗结束 -->

    <!-- 分析-设置弹窗开始 -->
    <analyze-setting-modal v-model="analyzeConfigureModalVisible" />
    <!-- 分析-设置弹窗结束 -->

    <!-- 分析工具弹窗开始 -->
    <analyze-interactive-tool-modal v-model="analyzeInteractiveToolModalVisible" />
    <!-- 分析工具弹窗结束 -->
  </div>
</template>
<script>
import ButtonWithSwitchIcon from './components/SubOperators/ButtonWithSwitchIcon.vue'
import DetailedInfomation from './components/SubOperators/DetailedInfomation.vue'
import GraphAssistance from './components/SubOperators/GraphAssistance.vue'
import NuclearLibrary from './components/SubOperators/NuclearLibrary.vue'
import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
import QcFlags from './components/SubOperators/QcFlags.vue'
import GammaAnalysis from './gamma-analysis.vue'
import BetaGammaAnalysis from './beta-gamma-analysis.vue'
import Spectra from './components/SubOperators/Spectra.vue'
import SpectraListInMenu from './components/SpectraListInMenu.vue'
import LoadFromDbModal from './components/Modals/LoadFromDBModal.vue'
import LoadFromFileModal from './components/Modals/LoadFromFileModal.vue'
import PeakInfomation from './components/PeakInfomation.vue'
import NuclideActivityAndMdcModal from './components/Modals/NuclideActivityAndMDCModal.vue'
import MultiLevelMenu from './components/MultiLevelMenu.vue'
import SaveSettingModal from './components/Modals/SaveSettingModal.vue'
import AnalyzeSettingModal from './components/Modals/AnalyzeSettingModal.vue'
import AnalyzeInteractiveToolModal from './components/Modals/AnalyzeInteractiveToolModal.vue'

// 分析类型
const ANALYZE_TYPE = {
  GAMMA: 'gammaAnalysis',
  BETA_GAMMA: 'betaGammaAnalysis'
}
export default {
  components: {
    PopOverWithIcon,
    ButtonWithSwitchIcon,
    BetaGammaAnalysis,
    GammaAnalysis,
    QcFlags,
    GraphAssistance,
    DetailedInfomation,
    NuclearLibrary,
    Spectra,
    SpectraListInMenu,
    LoadFromDbModal,
    LoadFromFileModal,
    PeakInfomation,
    NuclideActivityAndMdcModal,
    MultiLevelMenu,
    SaveSettingModal,
    AnalyzeSettingModal,
    AnalyzeInteractiveToolModal
  },
  data() {
    this.ANALYZE_TYPE = ANALYZE_TYPE

    return {
      analysisType: ANALYZE_TYPE.BETA_GAMMA, // 分析类型
      spectraType: 'Sample Data',
      spectraVisible: false,

      spectraList: [
        { id: 1, name: 'AUX01 003-20151223 1855 S FULL 40183.7.PHD' },
        { id: 2, name: 'AUX02 003-20151223 1855 S FULL 40183.7.PHD' }
      ],

      loadFromDbModalVisible: false, // 从数据库加载弹窗
      loadFromFileModalVisible: false, // 从文件加载弹窗

      peakInfomationModalVisible: false,

      nuclideActivityAndMDCModalVisible: false,

      saveSettingModalVisible: false, // 保存设置弹窗

      analyzeConfigureModalVisible: false, // 分析设置弹窗

      analyzeInteractiveToolModalVisible: true // 分析工具弹窗
    }
  },
  methods: {
    // 从数据库加载
    handleLoadFromDb() {
      this.loadFromDbModalVisible = true
    },

    // 从文件加载
    handleLoadFromFile() {
      this.loadFromFileModalVisible = true
    },

    // 清理全部
    handleCleanAll() {
      this.spectraList = []
    },

    // 保存结果到文件， 服务端生成文件，前端下载
    handleSaveResultsToFile() {
      this.saveSettingModalVisible = true
    },

    /**
     * 保存结果到数据库
     * @param { 'all' | 'current' } type
     */
    handleSaveResultsToDB(type) {
      console.log('%c [ saveResultsToDB ]-157', 'font-size:13px; background:pink; color:#bf2c9f;', type)
    },

    /**
     * 将谱列表中所有谱数据均以IMS2.0格式保存为PHD文件，
     * 服务端生成文件，前端下载
     * @param { 'all' | 'current' } type
     */
    handleSavePHDToFile(type) {
      console.log('%c [ savePHDToFile ]-162', 'font-size:13px; background:pink; color:#bf2c9f;', type)
    },

    // 显示分析设置弹窗
    handleShowConfigureModal() {
      this.analyzeConfigureModalVisible = true
    },

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

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

    // 显示分析工具弹窗
    handleShowInteractiveTool() {
      this.analyzeInteractiveToolModalVisible = true
    },

    // 弹出能量刻度界面
    handleEnergy() {
      console.log('%c [ handleEnergy ]-163', 'font-size:13px; background:pink; color:#bf2c9f;')
    },

    // 弹出分辨率刻度界面
    handleResolution() {
      console.log('%c [ handleResolution ]-167', 'font-size:13px; background:pink; color:#bf2c9f;')
    },

    // 弹出分辨率刻度界面
    handleEfficiency() {
      console.log('%c [ handleEfficiency ]-167', 'font-size:13px; background:pink; color:#bf2c9f;')
    },

    // 弹出 Nuclide Library 弹窗
    handleNuclideLib() {
      console.log('%c [ handleNuclideLib ]-178', 'font-size:13px; background:pink; color:#bf2c9f;')
    },

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

    // 查看自动处理报告
    handleViewARR() {
      console.log('%c [ handleViewARR ]-186', 'font-size:13px; background:pink; color:#bf2c9f;')
    },

    // 查看交互分析报告
    handleViewRRR() {
      console.log('%c [ handleViewRRR ]-192', 'font-size:13px; background:pink; color:#bf2c9f;')
    },

    // 显示接收到的原始谱文件
    handleViewSpectrum() {
      console.log('%c [ handleViewSpectrum ]-198', 'font-size:13px; background:pink; color:#bf2c9f;')
    },

    // 可浏览原始谱中台站操作员对样品采集和测量过程的注释信息；可以浏览分析人员对分析过程的注释信息
    handleViewComments() {
      console.log('%c [ viewComments ]-162', 'font-size:13px; background:pink; color:#bf2c9f;')
    },

    // 可添加能谱分析注释
    handleAddComments() {
      console.log('%c [ handleAddComments ]-167', 'font-size:13px; background:pink; color:#bf2c9f;')
    },

    // 查看自动处理日志
    handleAutoAnalysisLog() {
      console.log('%c [ handleAutoAnalysisLog ]-211', 'font-size:13px; background:pink; color:#bf2c9f;')
    },

    // 查看交互分析日志
    handleGammaViewerLog() {
      console.log('%c [ handleGammaViewerLog ]-211', 'font-size:13px; background:pink; color:#bf2c9f;')
    },

    // 查看软件操作帮助文档
    handleHelp() {
      console.log('%c [ handleHelp ]-221', 'font-size:13px; background:pink; color:#bf2c9f;')
    },

    // 设置软件中主界面和交互分析界面中各曲线的颜色
    handleLineColorConfig() {
      console.log('%c [ handleLineColorConfig ]-225', '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: [
            {
              type: 'a-menu',
              children: [
                {
                  type: 'a-menu-item',
                  title: 'Load From DB',
                  handler: this.handleLoadFromDb
                },
                {
                  type: 'a-menu-item',
                  title: 'Load From File',
                  handler: this.handleLoadFromFile
                },
                {
                  type: 'a-menu-item',
                  title: 'Clean All',
                  handler: this.handleCleanAll
                }
              ]
            },
            {
              type: 'a-divider',
              attrs: {
                style: {
                  marginTop: '5px',
                  marginBottom: '5px',
                  display: this.spectraList.length ? '' : 'none'
                }
              }
            },
            {
              type: 'SpectraListInMenu',
              attrs: {
                list: this.spectraList
              },
              on: {
                change: event => {
                  console.log('%c [ event ]-187', 'font-size:13px; background:pink; color:#bf2c9f;', event)
                  console.log('%c [  ]-188', 'font-size:13px; background:pink; color:#bf2c9f;', this)
                }
              }
            }
          ]
        },
        {
          title: 'SAVE',
          children: [
            {
              type: 'MultiLevelMenu',
              attrs: {
                children: [
                  {
                    title: 'Save Results to File'
                  },
                  {
                    title: 'Save Results to DB',
                    children: [
                      {
                        title: 'Save Current',
                        key: 'current'
                      },
                      {
                        title: 'Save All',
                        key: 'all'
                      }
                    ]
                  },
                  {
                    title: 'Save PHD to File',
                    children: [
                      {
                        title: 'Save Current',
                        key: 'current'
                      },
                      {
                        title: 'Save All',
                        key: 'all'
                      }
                    ]
                  }
                ],
                width: '170px'
              },
              on: {
                menuClick: () => {
                  this.handleSaveResultsToFile()
                },
                submenuClick: ({ item, child }) => {
                  if (item.title == 'Save Results to DB') {
                    this.handleSaveResultsToDB(child.key)
                  } else if (item.title == 'Save PHD to File') {
                    this.handleSavePHDToFile(child.key)
                  }
                }
              }
            }
          ]
        },
        {
          title: 'ANALYZE',
          children: [
            {
              type: 'a-menu',
              children: [
                {
                  type: 'a-menu-item',
                  title: 'Configure',
                  handler: this.handleShowConfigureModal
                },
                {
                  type: 'a-menu-item',
                  title: 'Processing',
                  handler: this.handleProcessing
                },
                {
                  type: 'a-menu-item',
                  title: 'Reprocess All',
                  handler: this.handleReprocessAll
                },
                {
                  type: 'a-menu-item',
                  title: 'Interactive Tool',
                  handler: this.handleShowInteractiveTool
                }
              ]
            }
          ]
        },
        {
          title: 'CALIBRATION',
          children: [
            {
              type: 'a-menu',
              children: [
                {
                  type: 'a-menu-item',
                  title: 'Energy',
                  handler: this.handleEnergy
                },
                {
                  type: 'a-menu-item',
                  title: 'Resolution',
                  handler: this.handleResolution
                },
                {
                  type: 'a-menu-item',
                  title: 'Efficiency',
                  handler: this.handleEfficiency
                }
              ]
            }
          ]
        },
        {
          title: 'NUCLIDELIBRARY',
          children: [
            {
              type: 'a-menu',
              children: [
                {
                  type: 'a-menu-item',
                  title: 'Nuclide Library',
                  handler: this.handleNuclideLib
                },
                {
                  type: 'a-menu-item',
                  title: 'Config User Library',
                  handler: this.handleConfigUserLib
                }
              ]
            }
          ]
        },
        {
          title: 'COMMENTS',
          children: [
            {
              type: 'a-menu',
              children: [
                {
                  type: 'a-menu-item',
                  title: 'View Comments',
                  handler: this.handleViewComments
                },
                {
                  type: 'a-menu-item',
                  title: 'Add Comments',
                  handler: this.handleAddComments
                }
              ]
            }
          ]
        },
        {
          title: 'REPORTS',
          children: [
            {
              type: 'a-menu',
              children: [
                {
                  type: 'a-menu-item',
                  title: 'View ARR',
                  handler: this.handleViewARR
                },
                {
                  type: 'a-menu-item',
                  title: 'View RRR',
                  handler: this.handleViewRRR
                },
                {
                  type: 'a-menu-item',
                  title: 'View Spectrum',
                  handler: this.handleViewSpectrum
                }
              ]
            }
          ]
        },
        {
          title: 'LOG',
          children: [
            {
              type: 'a-menu',
              children: [
                {
                  type: 'a-menu-item',
                  title: 'Automatic Analysis Log',
                  handler: this.handleAutoAnalysisLog
                },
                {
                  type: 'a-menu-item',
                  title: 'GammaViewer Log',
                  handler: this.handleGammaViewerLog
                }
              ]
            }
          ]
        },
        {
          title: 'HELP',
          children: [
            {
              type: 'a-menu',
              children: [
                {
                  type: 'a-menu-item',
                  title: 'Help',
                  handler: this.handleHelp
                },
                {
                  type: 'a-menu-item',
                  title: 'Line Color Config',
                  handler: this.handleLineColorConfig
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</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;
      }
    }
  }
  // 顶部操作栏结束

  // 二级操作栏开始
  &-SubOperators {
    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>
<style lang="less">
.spectrum-analysis-operators-dropdown-overlay {
  background-color: #03353f;
  .ant-menu {
    background: transparent;
    padding: 0;
    position: relative;
    border-right: 0;

    &-submenu {
      &-active {
        background-color: #055565 !important;
      }

      &-title {
        height: 30px !important;
        line-height: 30px !important;
        color: #fff;
        margin: 0;

        &:active {
          background-color: #055565 !important;
        }

        .ant-menu-submenu-arrow {
          &::before,
          &::after {
            background: #fff !important;
          }
        }
      }
    }

    &-item {
      color: #fff;
      font-family: Arial;
      border: 0;
      background-color: transparent !important;
      padding: 4px 14px;
      height: 30px;
      line-height: 22px;
      margin: 0 !important;

      &:hover {
        background-color: #055565 !important;
      }
      &-selected {
        font-weight: normal;
      }
      &-disabled {
        color: #476d74 !important;
        &:hover {
          background-color: transparent !important;
        }
      }
    }
  }
}
</style>
