<template>
  <el-row class="tac">
    <el-col :span="2">
      <!--      <h5>默认颜色</h5>-->
      <el-menu
        :default-active="menuActive"
        class="el-menu-vertical-demo"
        @open="handleOpen">
        <el-menu-item :index=0 @click="clickMenuItem(0)">
          <i class="el-icon-menu"></i>
          <span slot="title">处理单据</span>
        </el-menu-item>
        <el-menu-item :index=1 @click="clickMenuItem(1)">
          <i class="el-icon-menu"></i>
          <span slot="title">工位上货</span>
        </el-menu-item>
        <el-menu-item :index=2 @click="clickMenuItem(2)">
          <i class="el-icon-document"></i>
          <span slot="title">工位退货</span>
        </el-menu-item>
        <el-menu-item :index=3 @click="clickMenuItem(3)">
          <i class="el-icon-setting"></i>
          <span slot="title">工位存量</span>
        </el-menu-item>
        <el-menu-item :index=4 @click="clickMenuItem(4)">
          <i class="el-icon-setting"></i>
          <span slot="title">待处理单</span>
        </el-menu-item>
        <el-menu-item :index=5 @click="clickMenuItem(5)">
          <i class="el-icon-setting"></i>
          <span slot="title">已完成单</span>
        </el-menu-item>
      </el-menu>
    </el-col>

    <el-col :span="22">
      <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="upodateMenuActive">
        <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"

        >
          <component :is="item.component" v-bind="item.componentProps"/>
        </el-tab-pane>
      </el-tabs>


      <!--      <el-tabs :tab-position="tabPosition" style="height: 100%">-->
      <!--        <el-tab-pane label="处理单据" style="height: 100%"  @click="addTab('DealOrderBlank')">-->
      <!--          <DealOrderBlank>-->
      <!--          </DealOrderBlank>-->
      <!--        </el-tab-pane>-->

      <!--        <el-tab-pane label="工位上货"style="height: 100%"  @click="addTab('IoCreateOrderBlankReturn')">-->
      <!--          <IoCreateOrderBlankReturn-->
      <!--            :splitType="'return'"-->
      <!--          >-->
      <!--          </IoCreateOrderBlankReturn>-->
      <!--        </el-tab-pane>-->

      <!--        <el-tab-pane label="工位退货" style="height: 100%"  @click="addTab('IoCreateOrderBlankOut')">-->
      <!--          <IoCreateOrderBlankOut-->
      <!--            :splitType="'out'"-->
      <!--          >-->
      <!--          </IoCreateOrderBlankOut>-->
      <!--        </el-tab-pane>-->

      <!--        <el-tab-pane label="工位存量" style="height: 100%"  @click="addTab('ioSplitFifoCodeBlank')">-->
      <!--          <ioSplitFifoCodeBlank>-->
      <!--          </ioSplitFifoCodeBlank>-->
      <!--        </el-tab-pane>-->

      <!--        <el-tab-pane label="待处理单" style="height: 100%"  @click="addTab('CollectOrderAllotBlank')">-->
      <!--          <CollectOrderAllotBlank>-->
      <!--          </CollectOrderAllotBlank>-->
      <!--        </el-tab-pane>-->

      <!--        <el-tab-pane label="已完成单" style="height: 100%"  @click="addTab('CollectOrderEndBlank')">-->
      <!--          <CollectOrderEndBlank>-->
      <!--          </CollectOrderEndBlank>-->
      <!--        </el-tab-pane>-->

      <!--      </el-tabs>-->
    </el-col>
  </el-row>


</template>

<script>
import DealOrderBlank from "@/views/collect/DealOrderBlank.vue";
import CollectOrderAllotBlank from "@/views/collect/CollectOrderAllotBlank.vue";
import CollectOrderEndBlank from "@/views/collect/CollectOrderEndBlank.vue";
import IoCreateOrderBlankReturn from "@/views/collect/IoCreateOrderBlank.vue";
import IoCreateOrderBlankOut from "@/views/collect/IoCreateOrderBlank.vue";
import ioSplitFifoCodeBlank from "@/views/collect/ioSplitFifoCodeBlank.vue";


export default {
  components: {
    DealOrderBlank,
    IoCreateOrderBlankReturn,
    IoCreateOrderBlankOut,
    ioSplitFifoCodeBlank,
    CollectOrderAllotBlank,
    CollectOrderEndBlank
  },
  name: 'CollectOrderTabs',
  data() {
    return {
      tabPosition: 'left',
      editableTabsValue: 'DealOrderBlank',
      componentTables: [
        {
          number: 0,
          title: '处理单据',
          name: 'DealOrderBlank',
          component: DealOrderBlank,
          // 假设你需要传递的参数
          componentProps: {
            title: '这是单据的标题'
          }
        },
        {
          number: 1,
          title: '工位上货',
          name: 'IoCreateOrderBlankOut',
          component: IoCreateOrderBlankOut,
          // 假设你需要传递的参数
          componentProps: {
            fromSplitType: 'out'
          }
        },
        {
          number: 2,
          title: '工位退货',
          name: 'IoCreateOrderBlankReturn',
          component: IoCreateOrderBlankReturn,
          // 假设你需要传递的参数
          componentProps: {
            fromSplitType: 'return'
          }
        },
        {
          number: 3,
          title: '工位存量',
          name: 'ioSplitFifoCodeBlank',
          component: ioSplitFifoCodeBlank,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 4,
          title: '待处理单',
          name: 'CollectOrderAllotBlank',
          component: CollectOrderAllotBlank,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 5,
          title: '已完成单',
          name: 'CollectOrderEndBlank',
          component: CollectOrderEndBlank,
          // 假设你需要传递的参数
          componentProps: {}
        }],
      editableTabs: [{
        number: 0,
        title: '处理单据',
        name: 'DealOrderBlank',
        component: DealOrderBlank,
        // 假设你需要传递的参数
        componentProps: {
          title: '这是单据的标题'
        }
      },
      ],
      tabIndex: 0,
      menuActive: 0
    }
  },
  methods: {
    upodateMenuActive(tab, event) {
      const foundTab = this.findTabByName(tab.name);
      if (foundTab) {
        // 如果找到了，执行一些操作
        this.menuActive = foundTab.number;
      }
    },
    clickMenuItem(val) {
      //分两种 一种已存在 一种未存在
      let item = this.componentTables[(val)]

      const foundTab = this.findTabByName(item.name);
      if (foundTab) {
        // 如果找到了，执行一些操作
        this.editableTabsValue = foundTab.name;
      } else {
        // 如果没有找到，执行其他操作
        this.addTab(item)
      }

    },
    findTabByName(name) {
      // 使用find方法找到ID等于tabId的对象
      const tab = this.editableTabs.find(tab => tab.name === name);
      // 如果找到了，返回该对象；否则返回undefined
      return tab;
    },
    addTab(item) {
      ++this.tabIndex;
      this.editableTabs.push(item);
      this.editableTabsValue = item.name;
    },
    removeTab(targetName) {
      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.menuActive = nextTab.number;
            }
          }
        });
      }

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

<style scoped>

</style>
