<template>
  <custom-modal v-model="visible" :width="490" title="Config User Library" :footer="null">
    <a-spin :spinning="isLoading">
      <div class="config-user-library">
        <a-transfer
          :titles="['Total Nuclides', 'User Nuclides']"
          :dataSource="list"
          :list-style="{
            width: '200px',
            height: '400px',
          }"
          :target-keys="targetKeys"
          :render="(item) => item.title"
          :showSearch="true"
          :showSelectAll="false"
          @change="handleChange"
        ></a-transfer>

        <!--<div class="config-user-library-btns">
           <div>
            <a-button type="primary" @click="handleDefault">Default</a-button>
            <a-button type="primary">Load</a-button>
          </div> 
          <div>
            <a-button type="primary" :loading="isSaving" @click="handleSave">Save</a-button>
            <a-button type="primary">Apply</a-button>
          </div>
          <a-button type="primary" :loading="isSaving" @click="handleSave">Save</a-button>
        </div>-->
        <div style="margin-top: 20px; display: flex; justify-content: end">
          <a-button type="primary" :loading="isSaving" @click="handleSave">Save</a-button>
        </div>
      </div>
    </a-spin>
  </custom-modal>
</template>

<script>
import ModalMixin from '@/mixins/ModalMixin'
import { getAction, postAction } from '@/api/manage'
import SampleDataMixin from '../../SampleDataMixin'
import { cloneDeep } from 'lodash'

export default {
  mixins: [ModalMixin, SampleDataMixin],
  data() {
    return {
      list: [],
      targetKeys: [],
      isSaving: false,
    }
  },
  methods: {
    handleChange(targetKeys) {
      this.targetKeys = targetKeys
    },

    // 获取信息
    async getInfo() {
      try {
        this.isLoading = true
        const { sampleId, inputFileName: fileName } = this.sampleData
        const { success, result, message } = await getAction('/gamma/configUserLibrary', {
          sampleId,
          fileName,
        })
        if (success) {
          this.isLoading = false
          const { AllNuclides, UserNuclides } = result
          this.list = AllNuclides.map((item) => ({
            key: item,
            title: item,
          }))

          this.targetKeys = UserNuclides.map((item) => item)

          this.initialTargetKeys = cloneDeep(this.targetKeys)
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      }
    },

    beforeModalOpen() {
      this.getInfo()
    },

    // 默认
    handleDefault() {
      this.targetKeys = cloneDeep(this.initialTargetKeys)
    },

    // 保存
    async handleSave() {
      try {
        this.isSaving = true
        const { inputFileName: fileName } = this.sampleData
        const { success, result, message } = await postAction('/gamma/saveUserLibrary', {
          fileName,
          userLibraryName: this.targetKeys,
        })
        if (success) {
          this.$message.success('Save Success')
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.isSaving = false
      }
    },
  },
}
</script>

<style lang="less" scoped>
.config-user-library {
  &-btns {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    > div {
      width: 200px;
      display: flex;
      justify-content: space-between;
    }
  }
}

::v-deep {
  .ant-transfer-list-header {
    text-align: center;

    &-selected {
      span:first-child {
        display: none;
      }
    }

    &-title {
      position: static;
    }
  }
}
</style>
