<template>
  <custom-modal
    v-model="visible"
    :width="900"
    title="Analysis Settings"
    class="analysis-settings"
    :okHandler="handleOk"
  >
    <a-spin :spinning="isLoading">
      <!-- 第一行 -->
      <div class="analysis-settings-item">
        <title-over-border title="Peak Searching">
          <a-form-model :colon="false" :labelCol="{ style: { width: '160px' } }">
            <a-form-model-item label="ECutAnalysis_Low">
              <div class="input-with-unit">
                <a-input v-model="model.edit_ps_low"></a-input>
                KeV
              </div>
            </a-form-model-item>
            <a-form-model-item label="ECutAnalysis_High">
              <div class="input-with-unit">
                <a-input v-model="model.edit_ps_high"></a-input>
                KeV
              </div>
            </a-form-model-item>
            <a-form-model-item label="EnergyTolerance">
              <div class="input-with-unit">
                <a-input v-model="model.edit_energy"></a-input>
                KeV
              </div>
            </a-form-model-item>
            <a-form-model-item label="PSS_low">
              <a-input v-model="model.edit_pss_low"></a-input>
            </a-form-model-item>
          </a-form-model>
        </title-over-border>
        <title-over-border title="Calibration Peak Searching">
          <a-form-model :colon="false" :labelCol="{ style: { width: '170px' } }">
            <a-form-model-item label="CalibrationPSS_low">
              <a-input v-model="model.edit_cal_low" disabled></a-input>
            </a-form-model-item>
            <a-form-model-item label="CalibrationPSS_high">
              <a-input v-model="model.edit_cal_high" disabled></a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-checkbox v-model="model.checkBox_updateCal"> Update Calibration </a-checkbox>
            </a-form-model-item>
            <a-form-model-item>
              <a-checkbox v-model="model.checkBox_keepPeak"> Keep Calibration Peak Search Peaks </a-checkbox>
            </a-form-model-item>
          </a-form-model>
        </title-over-border>
      </div>

      <!-- 第二行 -->
      <div class="analysis-settings-item">
        <title-over-border title="Baseline Param">
          <a-form-model :colon="false" :labelCol="{ style: { width: '90px' } }">
            <a-form-model-item label="k_back">
              <a-input v-model="model.edit_k_back"></a-input>
            </a-form-model-item>
            <a-form-model-item label="k_alpha">
              <a-input v-model="model.edit_k_alpha"></a-input>
            </a-form-model-item>
            <a-form-model-item label="k_beta">
              <a-input v-model="model.edit_k_beta"></a-input>
            </a-form-model-item>
          </a-form-model>
        </title-over-border>
        <div>
          <a-form-model :colon="false" :labelCol="{ style: { width: '150px' } }">
            <title-over-border title="BaseImprove">
              <a-form-model-item label="BaseImprovePSS">
                <a-input v-model="model.edit_bi_pss"></a-input>
              </a-form-model-item>
            </title-over-border>
            <title-over-border title="LC Computing" style="margin-top: 20px">
              <a-form-model-item label="RiskLevelK">
                <a-input v-model="model.edit_riskLevelK"></a-input>
              </a-form-model-item>
            </title-over-border>
          </a-form-model>
        </div>
      </div>

      <!-- 第三行 -->
      <div class="analysis-settings-item">
        <title-over-border title="Activity Reference Time">
          <custom-date-picker
            show-time
            format="YYYY/MM/DD HH:mm:ss"
            valueFormat="YYYY/MM/DD HH:mm:ss"
            v-model="model.dateTime_Act"
          ></custom-date-picker>
        </title-over-border>
        <title-over-border title="Concentration Reference Time">
          <custom-date-picker
            show-time
            format="YYYY/MM/DD HH:mm:ss"
            valueFormat="YYYY/MM/DD HH:mm:ss"
            v-model="model.dateTime_Conc"
          ></custom-date-picker>
        </title-over-border>
      </div>

      <!-- 第四行 -->
      <div class="analysis-settings-item">
        <a-checkbox v-model="model.group_calPS">Apply to All Spectrums</a-checkbox>
      </div>
    </a-spin>
  </custom-modal>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import TitleOverBorder from '../TitleOverBorder.vue'
import ModalMixin from '@/mixins/ModalMixin'
import SampleDataMixin from '../../SampleDataMixin'
import moment from 'moment'

export default {
  components: { TitleOverBorder },
  mixins: [ModalMixin, SampleDataMixin],
  data() {
    return {
      isLoading: false,
      model: {},
    }
  },
  methods: {
    async getInfo() {
      try {
        this.isLoading = true
        const { sampleId, inputFileName: fileName } = this.sampleData
        const { success, result, message } = await getAction('/gamma/configure', {
          sampleId,
          fileName,
        })
        this.isLoading = false
        if (success) {
          if (result.edit_ps_high == -9999) {
            result.edit_ps_high = 'inf'
          }

          result.dateTime_Act = moment(result.dateTime_Act).format('YYYY/MM/DD HH:mm:ss')
          result.dateTime_Conc = moment(result.dateTime_Conc).format('YYYY/MM/DD HH:mm:ss')

          this.model = result
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      }
    },

    beforeModalOpen() {
      this.getInfo()
    },
    async handleOk() {
      try {
        const { inputFileName: fileName } = this.sampleData

        const {
          edit_ps_low,
          edit_ps_high,
          edit_energy,
          edit_pss_low,
          edit_cal_low,
          edit_cal_high,
          edit_k_back,
          edit_k_alpha,
          edit_k_beta,
          edit_bi_pss,
          edit_riskLevelK,
          dateTime_Act,
          dateTime_Conc,
          checkBox_updateCal,
          checkBox_keepPeak,
        } = this.model

        const param = {
          fileName,
          ecutAnalysis_Low: edit_ps_low,
          ecutAnalysis_High: edit_ps_high == 'inf' ? -9999 : edit_ps_high,
          energyTolerance: edit_energy,
          pss_low: edit_pss_low,
          calibrationPSS_low: edit_cal_low,
          calibrationPSS_high: edit_cal_high,
          k_back: edit_k_back,
          k_alpha: edit_k_alpha,
          k_beta: edit_k_beta,
          baseImprovePSS: edit_bi_pss,
          riskLevelK: edit_riskLevelK,
          refTime_act: dateTime_Act,
          refTime_conc: dateTime_Conc,
          updateCalibration: checkBox_updateCal,
          keepCalPeakSearchPeaks: checkBox_keepPeak,
        }

        const { success, message } = await postAction('/gamma/configureSave', param)
        if (success) {
          this.$message.success('Save Success')
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      } finally {
        return false
      }
    },
  },
}
</script>

<style lang="less" scoped>
.analysis-settings {
  &-item {
    display: flex;
    margin-top: 5px;

    &:not(:first-child) {
      margin-top: 20px;
    }

    > div {
      flex: 1;

      &:first-child {
        margin-right: 20px;
      }
    }

    .ant-form {
      &-item {
        margin-bottom: 0;

        &:not(:last-child) {
          margin-bottom: 10px;
        }

        ::v-deep {
          .ant-form-item {
            &-label {
              text-align: left;

              label {
                font-size: 16px;
              }
            }

            &-control-wrapper {
              flex: 1;
            }
          }
        }

        .input-with-unit {
          display: flex;
          align-items: center;

          .ant-input {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>
