<template>
  <custom-modal v-model="visible" :width="400" title="Processing Monitor" :footer="null">
    <div class="processing">
      <div v-if="calibrationUpdatesFlag" style="margin-bottom: 20px">
        <!-- 标题 -->
        <div class="processing-title">Calibration Updates</div>
        <!-- 列表 -->
        <div class="processing-list">
          <div class="processing-list-item">
            <status :status="status_ener1" />
            <div class="description">Energy - Mariscotti Centroids</div>
          </div>
          <div class="processing-list-item">
            <status :status="status_reso" />
            <div class="description">Resolution</div>
          </div>
          <div class="processing-list-item">
            <status :status="status_ener2" />
            <div class="description">Energy - Fitted Centroids</div>
          </div>
        </div>
      </div>
      <div>
        <!-- 标题 -->
        <div class="processing-title">Spectrum Analysis</div>
        <!-- 列表 -->
        <div class="processing-list">
          <div class="processing-list-item">
            <status :status="status_peak" />
            <div class="description">Peak Search</div>
          </div>
          <div class="processing-list-item">
            <status :status="status_base" />
            <div class="description">Baseline Fitting</div>
          </div>
          <div class="processing-list-item">
            <status :status="status_net" />
            <div class="description">Net Area Fitting</div>
          </div>
          <div class="processing-list-item">
            <status :status="status_nucl" />
            <div class="description">Nuclide Identification</div>
          </div>
          <div class="processing-list-item">
            <status :status="status_acti" />
            <div class="description">Activity and MDA</div>
          </div>
          <div class="processing-list-item">
            <status :status="status_qc" />
            <div class="description">QC Test</div>
          </div>
        </div>
      </div>
    </div>
  </custom-modal>
</template>

<script>
import Status from './components/status.vue'
export default {
  components: {
    Status,
  },
  props: {
    value: {
      type: Boolean,
    },
    bAnalyed: {
      type: Boolean,
    },
    checkBoxFlag: {
      type: Boolean,
    },
    newCheckBoxFlag: {
      type: String,
    },
    currStep: {
      type: String,
    },
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
  },
  watch: {
    newCheckBoxFlag: {
      handler(val) {
        console.log('flag', val)
        if (val === '0') {
          this.calibrationUpdatesFlag = false
          this.status_peak = 1
          this.status_base = 2
          this.status_net = 2
          this.status_nucl = 2
          this.status_acti = 2
          this.status_qc = 2
        } else if (val === '1') {
          this.calibrationUpdatesFlag = true
          this.status_ener1 = 1
          this.status_reso = 1
          this.status_ener2 = 1
          this.status_peak = 2
          this.status_base = 2
          this.status_net = 2
          this.status_nucl = 2
          this.status_acti = 2
          this.status_qc = 2
        } else {
          this.calibrationUpdatesFlag = this.checkBoxFlag
          this.status_peak = this.checkBoxFlag ? 2 : 1
          this.status_ener1 = 1
          this.status_reso = 1
          this.status_ener2 = 1
          this.status_base = 2
          this.status_net = 2
          this.status_nucl = 2
          this.status_acti = 2
          this.status_qc = 2
        }
      },
      immediate: true,
    },
    currStep: {
      handler(val) {
        if (val === '0' && this.calibrationUpdatesFlag) {
          this.status_ener1 = 0
          this.status_reso = 0
          this.status_ener2 = 0
          this.status_peak = 1
        } else if (val === '1') {
          this.status_ener1 = 0
          this.status_reso = 0
          this.status_ener2 = 0
          this.status_peak = 0
          this.status_base = 1
        } else if (val === '2') {
          this.status_ener1 = 0
          this.status_reso = 0
          this.status_ener2 = 0
          this.status_peak = 0
          this.status_base = 0
          this.status_net = 1
        } else if (val === '3') {
          this.status_ener1 = 0
          this.status_reso = 0
          this.status_ener2 = 0
          this.status_peak = 0
          this.status_base = 0
          this.status_net = 0
          this.status_nucl = 1
        } else if (val === '4') {
          this.status_ener1 = 0
          this.status_reso = 0
          this.status_ener2 = 0
          this.status_peak = 0
          this.status_base = 0
          this.status_net = 0
          this.status_nucl = 0
          this.status_acti = 1
        } else if (val === '5') {
          this.status_ener1 = 0
          this.status_reso = 0
          this.status_ener2 = 0
          this.status_peak = 0
          this.status_base = 0
          this.status_net = 0
          this.status_nucl = 0
          this.status_acti = 0
          this.status_qc = 1
        } else if (val === '6') {
          this.status_ener1 = 0
          this.status_reso = 0
          this.status_ener2 = 0
          this.status_peak = 0
          this.status_base = 0
          this.status_net = 0
          this.status_nucl = 0
          this.status_acti = 0
          this.status_qc = 0
          setTimeout(() => {
            this.$emit('closeModal')
          }, 500)
        }
      },
    },
  },
  data() {
    return {
      calibrationUpdatesFlag: true,
      status_ener1: 1,
      status_reso: 1,
      status_ener2: 1,
      status_peak: 2,
      status_base: 2,
      status_net: 2,
      status_nucl: 2,
      status_acti: 2,
      status_qc: 2,
    }
  },
}
</script>

<style lang="less" scoped>
@color: #325050;
.processing {
  &-title {
    height: 32px;
    line-height: 32px;
    background-color: @color;
    text-align: center;
  }

  &-list {
    &-item {
      margin-top: 20px;
      display: flex;
      gap: 20px;
      height: 26px;
      line-height: 26px;

      .description {
        flex: 1;
        background-color: @color;
        text-align: center;
      }
    }
  }
}
</style>
