<template>
    <div class="row"
         :dir="dir">
        <div class="col-md-5">
            <label class="label">{{source.label}}</label>
            <j-dragger :group="group"
                       :list="source.list"
                       :direction="dir">
                <slot name="source"
                      slot-scope="{item, index}"
                      v-bind:item="item"
                      v-bind:index="index">
                    {{ source.valueProp === undefined || source.valueProp == null || source.valueProp.length === 0 ? item : item[source.valueProp] }}
                </slot>
            </j-dragger>
        </div>
        <div class="col-md-2"
             style="text-align: center;margin-top: 20px">
            <span style="font-size: 48px"
                  class="d-none d-md-block">
                {{dir === 'rtl' ? '&#8656;' : '&#8658;'}}
            </span>
            <span style="font-size: 48px"
                  class="d-block d-md-none">&#8659;</span>
        </div>
        <div class="col-md-5">
            <label class="label">{{dest.label}}</label>
            <j-dragger :group="group"
                       :list="dest.list"
                       :direction="dir">
                <slot name="dest"
                      slot-scope="{item, index}"
                      v-bind:item="item"
                      v-bind:index="index">
                    {{ dest.valueProp === undefined || dest.valueProp === null || dest.valueProp.length === 0 ? item : item[dest.valueProp] }}
                </slot>
            </j-dragger>
        </div>
    </div>
</template>

<script>
import { cultureManager } from "libj-core";
export default {
    props: {
        group: {
            default: 'a'
        },
        origList: {
            default() {
                return [];
            }
        },
        comparer: {
            default() {
                return (a, b) => a === b;
            }
        },
        source: {
            default() {
                return {
                    label: '',
                    keyProp: '',
                    valueProp: '',
                    list: [],
                };
            }
        },
        dest: {
            default() {
                return {
                    label: '',
                    keyProp: '',
                    valueProp: '',
                    list: []
                };
            }
        },
        direction: {
            default: ''
        }
    },
    mounted() {
        this.$nextTick(this.reset);
    },
    computed: {
        dir() {
            return this.direction === undefined || this.direction === null || this.direction.length === 0 ?
                cultureManager.getActiveCulture().direction : this.direction;
        }
    },
    methods: {
        reset() {
            this.source.list.splice(0, this.source.list.length);
            this.origList.forEach(a => {
                var i = this.dest.list.findIndex(b => this.comparer(a, b));
                if (i < 0) {
                    this.source.list.push(a);
                }
            });
        }
    }
}
</script>