import BaseButton from '@elements/BaseButton/index.vue';
import BaseCard from '@elements/BaseCard/index.vue';
import BannerOrder from './index.vue';
import store from '../../GlobalContextStore/GlobalContexts'
import draggable from 'vuedraggable';

export default {
  name: 'BannerOrder',
  components: {
    BannerOrder,
    BaseCard,
    BaseButton,
    draggable,
  },
  model: {
    prop: 'ordernationList',
    event: 'change',
  },
  data() {
    return {
      ordernationList: [],
    };
  },
  watch:{
    ordernationList: function (){
      let order = [];

      this.ordernationList.map((values, key) => {
        values.order = key;
        order.push(values);
      });

      this.$emit('change', order);
    }
  },
  methods: {
    printOrder() {
      DATA.banner_extensions.banner_homepage.banner_group.map(orderBanner => {
        this.ordernationList.push({
          name: orderBanner.name,
          order: orderBanner.order
        });
      });
    },
    getLanguage(label){
      return store.state.language[label];
    },
  },
  computed:{
    dragOptions() {
      return {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost"
      };
    },
  },
  mounted() {
    this.printOrder();
  },
};
