<template>
  <custom-modal v-model="visible" title="Zero Time" :width="1020" :footer="null">
    <a-spin :spinning="isLoading">
      <div class="zero-time">
        <!-- 左侧 -->
        <div class="zero-time-left">
          <title-over-border title="Fission Product Infomation">
            <div class="fission-product">
              <div class="fission-product-container">
                <div class="fission-product-title">Fission Product 1</div>
                <div class="fission-product-list">
                  <div
                    class="fission-product-list-item"
                    :class="model.nuclide1 == item ? 'active' : ''"
                    v-for="(item, index) in fissionProductList1"
                    :key="index"
                    @click="handleFissonSelect(item, 1)"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="fission-product-container">
                <div class="fission-product-title">Fission Product 2</div>
                <div class="fission-product-list">
                  <div
                    class="fission-product-list-item"
                    :class="model.nuclide2 == item ? 'active' : ''"
                    v-for="(item, index) in fissionProductList2"
                    :key="index"
                    @click="handleFissonSelect(item, 2)"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
            </div>
          </title-over-border>
          <!-- Result of Zero Time -->
          <title-over-border class="mt-20" title="Result of Zero Time">
            <div class="result-of-zero-time">{{ result.zeroTime }}</div>
          </title-over-border>
        </div>
        <!-- 左侧结束 -->

        <!-- 右侧 -->
        <div class="zero-time-right">
          <!-- Active of Fission Product -->
          <title-over-border title="Active of Fission Product">
            <div class="active-of-fission-product">
              <div class="item">
                <div class="title">Fission Product 1</div>
                <div>
                  <a-input v-model="model.product1"></a-input>
                </div>
              </div>
              <div class="operator">-----Bq-----</div>
              <div class="item">
                <div class="title">Fission Product 2</div>
                <div>
                  <a-input v-model="model.product2"></a-input>
                </div>
              </div>
            </div>
          </title-over-border>
          <div class="zero-time-right-center mt-20">
            <!-- Fission Target -->
            <title-over-border class="fission-target" title="Fission Target">
              <a-radio-group v-model="model.target">
                <a-radio value="U-235">U-235</a-radio>
                <a-radio value="U-238">U-238</a-radio>
                <a-radio value="PU-239">PU-239</a-radio>
              </a-radio-group>
            </title-over-border>
            <title-over-border class="fission-energy" title="Energy of Fission Neutron">
              <a-radio-group v-model="model.energyTFH">
                <a-radio value="T">T&gt;Thermal_spectrum</a-radio>
                <a-radio value="F">F&gt;Fission_spectrum</a-radio>
                <a-radio value="H">H-&gt;Fast_Neutron</a-radio>
              </a-radio-group>
            </title-over-border>
          </div>
          <title-over-border class="mt-20" title="Reference Time">
            <a-form-model layout="inline">
              <a-form-model-item label="Date">
                <custom-date-picker valueFormat="YYYY-MM-DD" v-model="model.date" />
              </a-form-model-item>
              <a-form-model-item label="Time">
                <a-time-picker valueFormat="HH:mm:ss" v-model="model.time" />
              </a-form-model-item>
            </a-form-model>
          </title-over-border>

          <div class="zero-time-right-buttons mt-20">
            <a-button type="primary" :disabled="disabled" :loading="isAnalyzing" @click="handleAnalysis">
              Analysis
            </a-button>
            <a-button type="primary" :disabled="disabled" @click="handleSave">Save</a-button>
            <a-button type="primary" @click="visible = false">Exit</a-button>
          </div>
        </div>
        <!-- 右侧结束 -->
      </div>
    </a-spin>
  </custom-modal>
</template>

<script>
import ModalMixin from '@/mixins/ModalMixin'
import TitleOverBorder from '../TitleOverBorder.vue'
import { getAction, getFileAction } from '@/api/manage'
import { saveAs } from 'file-saver'

export default {
  components: { TitleOverBorder },
  mixins: [ModalMixin],
  props: {
    sampleId: {
      type: Number,
    },
  },
  data() {
    return {
      isLoading: false,
      fissionProductList1: [],
      fissionProductList2: [],

      model: {},

      isAnalyzing: false,

      result: {},
      fileName: '',
    }
  },
  methods: {
    async getInfo() {
      try {
        this.isLoading = true
        const { success, result, message } = await getAction('/gamma/ZeroTime', {
          sampleId: this.sampleId,
        })
        if (success) {
          this.isLoading = false
          const { Date, Time, list_fission1, list_fission2 } = result
          this.fissionProductList1 = list_fission1
          this.fissionProductList2 = list_fission2

          this.model.date = Date
          this.model.time = Time
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      }
    },

    // 选中Fission
    handleFissonSelect(item, which) {
      if (which == 1) {
        this.model.nuclide1 = item
      } else {
        this.model.nuclide2 = item
      }
    },

    beforeModalOpen() {
      this.model = {
        nuclide1: '',
        nuclide2: '',
        product1: '',
        product2: '',
        target: 'U-235',
        energyTFH: 'T',
        date: undefined,
        time: undefined,
      }

      this.result = {
        zeroTime: '2015-05-30 17:30:60',
      }
      this.getInfo()
    },

    // 分析
    async handleAnalysis() {
      if (!this.model.product1 || !this.model.product2) {
        this.$message.warn('The Fission Product is invalid!')
        return
      }

      try {
        this.isAnalyzing = true
        const { success, result, message } = await getAction('/gamma/ZeroTimeAnalyse', this.model)
        if (success) {
          this.result = result
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.isAnalyzing = false
      }
    },
    handleSave() {
      if (!this.model.product1 || !this.model.product2) {
        this.$message.warn('The Fission Product is invalid!')
        return
      }
      this.fileName = ''
      let _this = this
      this.$confirm({
        title: 'Please enter file name',
        content: (h) => <a-input v-model={_this.fileName} />,
        okText: 'Cancle',
        cancelText: 'Save',
        okButtonProps: { style: { backgroundColor: '#b98326', color: '#fff', borderColor: 'transparent' } },
        cancelButtonProps: { style: { color: '#fff', backgroundColor: '#31aab0', borderColor: 'transparent' } },
        onOk() {
          console.log('Cancel')
        },
        onCancel() {
          if (_this.fileName) {
            getFileAction('/gamma/exportZeroTimeAnalyse', _this.model).then((res) => {
              if (res.code && res.code == 500) {
                this.$message.warning('This operation fails. Contact your system administrator')
              } else {
                const blob = new Blob([res], { type: 'text/plain;charset=utf-8' })
                saveAs(blob, `${_this.fileName}`)
              }
            })
          }
        },
      })
    },
  },
  computed: {
    disabled() {
      return !this.model.nuclide1 || !this.model.nuclide2 || this.model.nuclide1 == this.model.nuclide2
    },
  },
}
</script>

<style lang="less" scoped>
.zero-time {
  display: flex;
  gap: 30px;

  &-left {
    width: 40%;

    .fission-product {
      display: flex;
      gap: 15px;

      &-container {
        flex: 1;
      }

      &-title {
        height: 32px;
        line-height: 32px;
        font-size: 16px;
        background-color: #497e9d;
        text-align: center;
      }

      &-list {
        margin-top: 5px;
        height: 255px;
        overflow: auto;
        background-color: #275466;

        &-item {
          height: 32px;
          line-height: 32px;
          padding: 0 10px;
          cursor: pointer;

          &.active {
            background-color: #296d81;
          }
        }
      }
    }

    .result-of-zero-time {
      height: 32px;
      line-height: 32px;
      text-align: center;
      background-color: #00ff7f;
      font-size: 18px;
    }
  }

  // 右侧开始
  &-right {
    flex: 1;

    .active-of-fission-product {
      display: flex;
      align-items: end;
      padding: 0 60px;

      .item {
        flex: 1;

        .title {
          font-size: 16px;
          margin-bottom: 10px;
        }
      }

      .operator {
        margin: 5px 15px;
      }
    }

    &-center {
      display: flex;
      gap: 20px;

      .fission-target {
        width: 40%;
      }

      .fission-energy {
        flex: 1;
      }

      .ant-radio-wrapper {
        display: block;

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

    &-buttons {
      display: flex;
      justify-content: space-between;

      .ant-btn {
        width: 150px;
      }
    }
  }
}

.mt-20 {
  margin-top: 20px;
}
</style>
