<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">Default</a-button>
            <a-button type="primary">Load</a-button>
          </div>
          <div>
            <a-button type="primary">Save</a-button>
            <a-button type="primary">Apply</a-button>
          </div>
        </div>
      </div>
    </a-spin>
  </custom-modal>
</template>

<script>
import ModalMixin from '@/mixins/ModalMixin'
import { getAction } from '@/api/manage'
export default {
  mixins: [ModalMixin],
  props: {
    sampleId: {
      type: Number
    }
  },
  data() {
    return {
      list: [],
      targetKeys: []
    }
  },
  methods: {
    handleChange(targetKeys) {
      this.targetKeys = targetKeys
    },

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

          this.targetKeys = UserNuclides.map(item => item)
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      }
    },

    beforeModalOpen() {
      this.getInfo()
    }
  }
}
</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>
