<template>
  <div class="demo-tabs-dynamic">
    <ui-tabs
      v-model="editableTabsValue"
      type="card"
      editable
      @edit="handleTabsEdit">
      <ui-tab
        v-for="item in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name">
        {{ item.content }}
      </ui-tab>
    </ui-tabs>
  </div>
</template>

<script>
import { Tabs, Tab } from "amumu-ui"

export default {
  components: {
    "ui-tabs": Tabs,
    "ui-tab": Tab,
  },
  data() {
    return {
      editableTabsValue: "2",
      editableTabs: [
        {
          title: "Tab 1",
          name: "1",
          content: "Tab 1 content",
        },
        {
          title: "Tab 2",
          name: "2",
          content: "Tab 2 content",
        },
      ],
      tabIndex: 2,
    }
  },
  methods: {
    handleTabsEdit(targetName, action) {
      if (action === "add") {
        let newTabName = ++this.tabIndex + ""
        this.editableTabs.push({
          title: "New Tab",
          name: newTabName,
          content: "New Tab content",
        })
        this.editableTabsValue = newTabName
      }
      if (action === "remove") {
        let tabs = this.editableTabs
        let activeName = this.editableTabsValue
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }

        this.editableTabsValue = activeName
        this.editableTabs = tabs.filter(tab => tab.name !== targetName)
      }
    },
  },
}
</script>
