<template>
  <div class="beta-gamma-analysis">
    <a-spin :spinning="isLoading">
      <!-- 二级交互栏 -->
      <div class="spectrum-analysis-sub-operators">
        <pop-over-with-icon placement="bottomLeft">
          Detailed-Information
          <beta-gamma-detailed-infomation slot="content" :data="spectrumData" />
        </pop-over-with-icon>
        <pop-over-with-icon placement="bottomLeft">
          QC Flags
          <beta-gamma-qc-flags slot="content" :data="qcFlags" @click="handleQcFlagClick" />
        </pop-over-with-icon>
        <custom-select
          v-model="spectraType"
          :options="SampleType"
          @change="changeChartByType"
          style="width: 246px"
          class="sample-select"
        ></custom-select>
      </div>
      <!-- 二级交互栏结束 -->

      <!-- 主体部分 -->
      <div class="beta-gamma-analysis-main">
        <!-- 中间图表部分 -->
        <div class="beta-gamma-analysis-main-charts">
          <div class="beta-gamma-analysis-main-charts-left">
            <beta-gamma-chart-container>
              <template slot="title"> Beta-Gamma Spectrum: Sample </template>
              <beta-gamma-spectrum
                ref="betaChartRef"
                :betaEnergyData="betaEnergyData"
                :gammaEnergyData="gammaEnergyData"
                :histogramDataList="histogramDataList"
                :boundary="boundaryList"
                :isLoading.sync="isLoading"
                :currIdx="currIdx"
                @refreshRoi="refreshRoi"
              />
            </beta-gamma-chart-container>
          </div>
          <div class="beta-gamma-analysis-main-charts-right">
            <beta-gamma-chart-container>
              <template slot="title"> ROI LIMITS </template>
              <roi-limits ref="RoiChartRef" :ROILists="ROILists" @sendIndex="getIndex" />
            </beta-gamma-chart-container>
          </div>
        </div>
        <!-- 中间图表部分结束 -->
        <!-- 底部显示 -->
        <div class="beta-gamma-analysis-main-bottom">
          <div class="beta-gamma-analysis-main-bottom-left">
            <beta-gamma-chart-container>
              <template slot="title"> Result display </template>
              <result-display-beta :data="resultDisplay" @sendFlag="handleGetFlag"></result-display-beta>
            </beta-gamma-chart-container>
          </div>
          <div class="beta-gamma-analysis-main-bottom-right">
            <beta-gamma-chart-container>
              <template slot="title"> ROI Param </template>
              <roi-param :roiParamList="roiParamList" />
            </beta-gamma-chart-container>
          </div>
        </div>
        <!-- 底部显示结束 -->
      </div>
      <!-- 主体部分结束 -->
    </a-spin>
  </div>
</template>

<script>
import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
import BetaGammaDetailedInfomation from './components/SubOperators/BetaGammaDetailedInfomation.vue'
import BetaGammaQcFlags from './components/SubOperators/BetaGammaQcFlags.vue'
import CustomSelect from '@/components/CustomSelect/index.vue'
import BetaGammaChartContainer from './components/BetaGammaChartContainer.vue'
import ResultDisplayBeta from './components/ResultDisplay-Beta.vue'
import BetaGammaSpectrum from './components/BetaGammaSpectrum.vue'
import RoiLimits from './components/RoiLimits.vue'
import RoiParam from './components/RoiParam.vue'
import axios from 'axios'
import { getAction, postAction, deleteAction } from '../../api/manage'
const SampleType = [
  {
    label: 'Sample Data',
    value: 'sample',
  },
  {
    label: 'GasBg Data',
    value: 'gasBg',
  },
  {
    label: 'DetBg Data',
    value: 'detBg',
  },
  {
    label: 'QC Data',
    value: 'qc',
  },
]
export default {
  components: {
    PopOverWithIcon,
    BetaGammaDetailedInfomation,
    BetaGammaQcFlags,
    CustomSelect,
    BetaGammaChartContainer,
    ResultDisplayBeta,
    BetaGammaSpectrum,
    RoiLimits,
    RoiParam,
  },
  props: {
    sample: {
      type: Object,
    },
  },
  data() {
    this.SampleType = SampleType
    return {
      isLoading: false,
      spectrumData: {}, // Detailed Infomation 信息
      spectraType: 'sample',
      histogramDataList: [],
      gammaEnergyData: [],
      betaEnergyData: [],
      ROILists: [],
      roiParamList: [],
      boundaryList: [],
      sampleDetail: {},
      qcFlags: {},
      resultDisplay: [],
      currIdx: 0,
    }
  },
  watch: {
    sample: {
      async handler(newVal, oldVal) {
        this.resultDisplay = []
        const sampleData = await this.$store.dispatch('GET_SAMPLE_DATA', newVal.inputFileName)
        if (sampleData) {
          const { data, from } = sampleData
          this.sampleDetail = data
          this.handleChangeResult(data)
          if (from == 'db') {
            this.sampleDetail = data
            this.emitGetFiles(data)
          }
        } else {
          if (newVal.sampleId) {
            this.getSampleDetail()
          } else {
            this.getSelfStationSampleDetail()
          }
        }
        this.$refs.betaChartRef.handleUnzoom()
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    refreshRoi(data) {
      const { list, start, stop } = data
      let currRoiParam = { start, stop }
      let currBoundary = { minX: start, maxX: stop, minY: 0, maxY: 4096 }
      this.ROILists.splice(this.currIdx, 1, list)
      this.roiParamList.splice(this.currIdx, 1, currRoiParam)
      this.boundaryList.splice(this.currIdx, 1, currBoundary)
    },
    getIndex(val) {
      this.currIdx = val
    },
    async handleDetalSelfStationCache() {
      const { inputFileName } = this.sample
      let params = {
        sampleFileName: inputFileName,
      }
      try {
        const { success, result, message } = await deleteAction('/selfStation/deleteSelfStationCache', params)
      } catch (error) {
        console.error(error)
      }
    },
    async getSelfStationSampleDetail() {
      const { inputFileName, detFileName } = this.sample
      let params = {
        sampleFileName: inputFileName,
        detFileName: detFileName,
        // sampleFileName: 'ABC01_001-20240108_1405_S_FULL_40186.0.PHD',
        // detFileName: detFileName || 'ABC01_001-20240108_1327_D_FULL_381505.PHD',
      }
      try {
        this.isLoading = true
        this.cancelLastRequest()
        const cancelToken = this.createCancelToken()
        const { success, result, message } = await getAction('/selfStation/loadFromFile', params, cancelToken)
        if (success) {
          this.$store.commit('ADD_SAMPLE_DATA', {
            inputFileName,
            data: result,
            from: 'file',
          })
          this.sampleDetail = result
          this.handleChangeResult(result)
          this.isLoading = false
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      }
    },
    handleChangeResult(res) {
      const {
        spectrumData,
        betaEnergyData,
        gammaEnergyData,
        histogramDataList,
        ROIOneList,
        ROITwoList,
        ROIThreeList,
        ROIFourList,
        ROIOneStart,
        ROIOneStop,
        ROITwoStart,
        ROITwoStop,
        ROIThreeStart,
        ROIThreeStop,
        ROIFourStart,
        ROIFourStop,
      } = this.sampleDetail
      this.spectrumData = spectrumData
      this.histogramDataList = histogramDataList
      this.gammaEnergyData = gammaEnergyData
      this.betaEnergyData = betaEnergyData
      this.ROILists = [ROIOneList, ROITwoList, ROIThreeList, ROIFourList]
      let roiParam1 = { start: ROIOneStart, stop: ROIOneStop }
      let roiParam2 = { start: ROITwoStart, stop: ROITwoStop }
      let roiParam3 = { start: ROIThreeStart, stop: ROIThreeStop }
      let roiParam4 = { start: ROIFourStart, stop: ROIFourStop }
      this.roiParamList.push(roiParam1, roiParam2, roiParam3, roiParam4)
      let boundary1 = { minX: ROIOneStart, maxX: ROIOneStop, minY: 0, maxY: 4096 }
      let boundary2 = { minX: ROITwoStart, maxX: ROITwoStop, minY: 0, maxY: 4096 }
      let boundary3 = { minX: ROIThreeStart, maxX: ROIThreeStop, minY: 0, maxY: 4096 }
      let boundary4 = { minX: ROIFourStart, maxX: ROIFourStop, minY: 0, maxY: 4096 }
      this.boundaryList.push(boundary1, boundary2, boundary3, boundary4)
    },
    cancelLastRequest() {
      if (this._cancelToken && typeof this._cancelToken == 'function') {
        this._cancelToken()
      }
    },

    createCancelToken() {
      const cancelToken = new axios.CancelToken((c) => {
        this._cancelToken = c
      })
      return cancelToken
    },
    changeChartByType(val) {
      console.log(val)
    },
    handleQcFlagClick(item) {
      console.log(item)
    },
    handleGetFlag(val, obj) {
      console.log(val, obj)
    },
    resize() {},
  },
  destroyed() {
    this.cancelLastRequest()
  },
}
</script>

<style lang="less" scoped>
.beta-gamma-analysis {
  height: 100%;
  .ant-spin-nested-loading {
    height: 100%;

    ::v-deep {
      .ant-spin-container {
        height: 100%;
      }
    }
  }
  .sample-select {
    ::v-deep {
      .ant-select-selection {
        background-color: transparent !important;
        color: #ade6ee;
      }
    }
  }
  &-main {
    height: calc(100% - 51px);
    overflow: auto hidden;
    &-charts {
      height: calc(100% - 220px);
      display: flex;
      gap: 30px;
      overflow: auto hidden;
      &-left {
        flex: 1;
      }
      &-right {
        flex: 1;
      }
    }
    &-bottom {
      margin-top: 20px;
      height: 234px;
      display: flex;
      gap: 30px;
      overflow: auto hidden;
      &-left {
        flex: 1;
      }
      &-right {
        flex: 1;
      }
    }
  }
}
</style>