<script setup>
import {ref, onMounted} from "vue";
import Sortable from "sortablejs";
import {useStore} from "vuex";


// 注册store
const store = useStore()

const tabsRef = ref(null);

const select_data = store.state.ec_api_data

const tabs = ref([]);


onMounted(() => {
  // 处理拖拽
  const elTabsHeader = tabsRef.value.$el.querySelector('.el-tabs__header .el-tabs__nav');
  new Sortable(elTabsHeader, {
    animation: 150,
    ghostClass: 'dragging',
    draggable: '.el-tabs__item',
    onEnd: ({ oldIndex, newIndex }) => {
      const movedTab = tabs.value.splice(oldIndex-1, 1)[0];
      tabs.value.splice(newIndex-1, 0, movedTab);
    },
  });


});
</script>

<template>
  <el-tabs ref="tabsRef">
    <el-tab-pane
        v-for="tab in store.state.ec_select_api"
        :key="tab.id"
        :label="tab.desc"
        :name="tab.id"
    >
      {{ tab.desc }}
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped>

</style>
