<template>
  <custom-modal v-model="visible" :width="980" title="Nuclide Library" :footer="null">
    <a-spin :spinning="isLoading">
      <div class="nuclide-library">
        <div class="nuclide-library-list">
          <div
            class="nuclide-library-list-item"
            :class="{ active: selectedNuclide == item }"
            v-for="(item, index) in nuclideList"
            :key="index"
            @click="handleNuclideItemClick(item)"
          >
            {{ item }}
          </div>
        </div>
        <div class="nuclide-library-settings">
          <div class="nuclide-library-settings-select">
            <title-over-border class="select-library" title="Select Library">
              <a-radio-group v-model="model.libraryName" @change="handleSearch">
                <a-radio value="UserLibrary">User Library</a-radio>
                <a-radio value="FULLLibrary">Full Library</a-radio>
                <a-radio value="RelevantLibrary">Relevant Library</a-radio>
              </a-radio-group>
            </title-over-border>
            <div class="parent-and-daughters">
              <div class="parents">
                <div class="title">Parents</div>
                <div class="content">
                  <div
                    class="parent-item"
                    :class="selectedParent == parentItem ? 'active' : ''"
                    v-for="(parentItem, index) in parentList"
                    :key="index"
                    @dblclick="handleParentDBClick(parentItem)"
                    @click="handleParentClick(parentItem)"
                  >
                    {{ parentItem }}
                  </div>
                </div>
              </div>
              <div class="daughters">
                <div class="title">Daughters</div>
                <div class="content">
                  <custom-table
                    size="small"
                    :class="daughterList.length ? 'has-data' : ''"
                    :columns="daughterColumns"
                    :list="daughterList"
                    :pagination="false"
                    :scroll="{ y: 123 }"
                    rowKey="daughters"
                    @rowDblClick="handleParentDBClick($event.daughters)"
                  ></custom-table>
                </div>
              </div>
            </div>
          </div>
          <div class="nuclide-library-settings-main">
            <a-form-model layout="inline">
              <a-form-model-item label="Name">
                <a-input v-model="model.nuclideName"></a-input>
              </a-form-model-item>
              <a-form-model-item label="Half Life">
                {{ nuclideInfo.lab_halfLife }}
              </a-form-model-item>
              <a-form-model-item label="Half Life Err">
                {{ nuclideInfo.lab_halfLifeErr }}
              </a-form-model-item>
              <a-form-model-item label="Lines">
                {{ nuclideInfo.lab_lines }}
              </a-form-model-item>
            </a-form-model>
            <!-- 主体表格 -->
            <a-table
              size="small"
              :class="nuclLinesLibs.length ? 'has-data' : ''"
              :columns="mainColumns"
              :dataSource="nuclLinesLibs"
              :pagination="false"
              :scroll="{ y: 175 }"
            >
              <template slot="keyLine" slot-scope="text">
                <span v-if="text == 1" class="green-check-mark"> </span>
              </template>
            </a-table>
          </div>
          <div class="nuclide-library-settings-operation">
            <a-space :size="10">
              <span>
                Energy:
              </span>
              <a-input v-model="model.editEnergy"></a-input>
              <a-input-number
                v-model="model.err"
                :min="0"
                :step="0.5"
                :precision="2"
                @blur="handleErrInputBlur"
              ></a-input-number>
              <a-button type="primary" @click="handleSearch">Search</a-button>
            </a-space>
            <a-space :size="10">
              <a-button type="primary" @click="handleReset">Reset</a-button>
              <a-button type="primary" @click="visible = false">Close</a-button>
            </a-space>
          </div>
        </div>
      </div>
    </a-spin>
  </custom-modal>
</template>

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

// 右上角表格配置
const daughterColumns = [
  {
    title: 'Name',
    dataIndex: 'daughters',
    align: 'center'
  },
  {
    title: 'Ratio',
    dataIndex: 'branchingratios',
    align: 'center'
  },
  {
    title: 'Status',
    dataIndex: 'daughtersstable',
    align: 'center'
  }
]

// 主体表格配置
const mainColumns = [
  {
    title: 'Id',
    width: 80,
    customRender: (_, __, index) => {
      return index + 1
    }
  },
  {
    title: 'Full Name',
    dataIndex: 'fullName'
  },
  {
    title: 'Energy(keV)',
    dataIndex: 'energy',
    width: 100
  },
  {
    title: 'Energy Uncert(%)',
    dataIndex: 'energyUncert',
    width: 120
  },
  {
    title: 'Yield',
    dataIndex: 'yield',
    width: 80
  },
  {
    title: 'Yield Uncert(%)',
    dataIndex: 'yieldUncert',
    width: 120
  },
  {
    title: 'KeyLine',
    dataIndex: 'keyFlag',
    width: 100,
    align: 'center',
    scopedSlots: {
      customRender: 'keyLine'
    }
  }
]

export default {
  mixins: [ModalMixin, SampleDataMixin],
  components: {
    TitleOverBorder
  },
  data() {
    this.daughterColumns = daughterColumns
    this.mainColumns = mainColumns
    return {
      isLoading: false,
      nuclideList: [],
      nuclideInfo: {},
      daughterList: [],
      parentList: [],
      nuclLinesLibs: [],
      model: {},

      selectedNuclide: {}, // 当前选中的Nuclide
      selectedParent: {} // 当前选中的Parent
    }
  },
  methods: {
    // 获取详情
    async getInfo(selectFirst = false) {
      this.selectedParent = {}

      try {
        this.isLoading = true
        const { sampleId, inputFileName: fileName } = this.sampleData
        const { success, result, message } = await getAction('/gamma/NuclideLibrary', {
          sampleId,
          fileName,
          ...this.model
        })
        if (success) {
          const {
            daughter: { list_parent, table_daughter },
            nuclLinesLibs,
            nuclideInfo,
            nuclides
          } = result

          this.nuclideList = nuclides
          this.parentList = list_parent ? list_parent.filter(item => item) : []
          this.daughterList = table_daughter ? table_daughter.filter(item => item.daughters) : []
          this.nuclideInfo = nuclideInfo
          this.nuclLinesLibs = nuclLinesLibs

          if (selectFirst) {
            this.selectedNuclide = nuclides[0]
            this.model.nuclideName = nuclides[0]
          }
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.isLoading = false
      }
    },

    beforeModalOpen() {
      this.model = {
        libraryName: 'UserLibrary',
        err: 0.5,
        editEnergy: '',
        nuclideName: ''
      }
      this.getInfo(true)
    },
    handleNuclideItemClick(item) {
      this.selectedNuclide = item
      this.model.nuclideName = item
      this.getInfo()
    },

    handleErrInputBlur() {
      if (!this.model.err) {
        this.model.err = 0
      }
    },

    // 搜索
    handleSearch() {
      this.getInfo(true)
    },

    // 重置
    handleReset() {
      this.model.editEnergy = ''
      this.getInfo(true)
    },

    handleParentClick(item) {
      this.selectedParent = item
    },

    // 在Parents选项上双击
    handleParentDBClick(item) {
      this.model.nuclideName = item
      this.getInfo()
    }
  }
}
</script>

<style lang="less" scoped>
.nuclide-library {
  display: flex;
  gap: 20px;

  &-list {
    padding: 5px;
    width: 150px;
    height: 516px;
    overflow: auto;
    background-color: #275466;

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

  &-settings {
    flex: 1;

    &-select {
      display: flex;
      gap: 15px;

      .select-library {
        width: 200px;
        height: 128px;

        .ant-radio-group {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }

      .parent-and-daughters {
        flex: 1;
        display: flex;
        gap: 10px;

        .title {
          height: 32px;
          line-height: 32px;
          background-color: #497e9d;
          text-align: center;
        }

        .content {
          height: 150px;
        }

        .parents {
          width: 180px;

          .content {
            background-color: #275466;
            overflow: auto;

            .parent-item {
              padding: 3px 5px;
              cursor: pointer;
              user-select: none;
            }
          }
        }

        .daughters {
          flex: 1;

          .ant-table-wrapper {
            &.has-data {
              ::v-deep {
                .ant-table-body {
                  height: 123px;
                  background-color: #06282a;
                }
              }
            }

            ::v-deep {
              .ant-table {
                &-placeholder {
                  height: 124px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }
            }
          }
        }
      }
    }

    &-main {
      margin-top: 20px;

      .ant-form {
        display: flex;
        justify-content: space-between;
      }

      .ant-table {
        &-wrapper {
          margin-top: 20px;

          &.has-data {
            ::v-deep {
              .ant-table-body {
                height: 175px;
                background-color: #06282a;
              }
            }
          }

          ::v-deep {
            .ant-table {
              &-placeholder {
                height: 176px;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
      }
    }

    &-operation {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
    }
  }
}

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

.green-check-mark {
  &::after {
    @color: #3df9a7;

    content: '';
    border-radius: 0px;
    width: 16px;
    height: 9px;
    display: inline-block;
    border-bottom: 3px solid @color;
    border-left: 3px solid @color;
    transform: rotate(-45deg);
  }
}
</style>
