<template>
  <custom-modal v-model="visible" :width="800" title="Spectrum" :footer="null">
    <a-spin :spinning="isLoading">
      <a-tabs :animated="false">
        <a-tab-pane tab="phd" key="1">
          <pre key="1">{{ spectrum }}</pre>
        </a-tab-pane>
        <a-tab-pane tab="phd:raw" key="2">
          <pre key="2">{{ phdSpectrum }}</pre>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </custom-modal>
</template>

<script>
import ModalMixin from '@/mixins/ModalMixin'
import { getAction } from '@/api/manage'
import SampleDataMixin from '../../SampleDataMixin'
export default {
  mixins: [ModalMixin, SampleDataMixin],
  data() {
    return {
      spectrum: '',
      phdSpectrum: '',
      isLoading: true,
    }
  },
  methods: {
    async getContent() {
      try {
        this.isLoading = true
        const { sampleId, inputFileName: fileName } = this.sampleData
        const { success, result, message } = await getAction('/gamma/Spectrum', {
          sampleId,
          fileName,
        })
        if (success) {
          const { Spectrum, phdSpectrum } = result
          this.spectrum = Spectrum
          this.phdSpectrum = (phdSpectrum || []).join('\r\n')
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.isLoading = false
      }
    },

    beforeModalOpen() {
      this.getContent()
    },
  },
}
</script>

<style lang="less" scoped>
pre {
  height: 450px;
  padding: 5px;
  overflow: auto;
  background-color: #285367;
}
</style>
