<template>
  <custom-modal v-model="visible" :width="490" title="Config User Library" :footer="null">
    <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"
        @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>
  </custom-modal>
</template>

<script>
import ModalMixin from '@/mixins/ModalMixin'
export default {
  mixins: [ModalMixin],
  data() {
    return {
      list: [
        {
          key: '1',
          title: 'Ac228'
        },
        {
          key: '2',
          title: 'Ag106M'
        }
      ],
      targetKeys: []
    }
  },
  methods: {
    handleChange(targetKeys) {
      this.targetKeys = targetKeys
    }
  }
}
</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;
    }
  }
}
</style>
