<template>
	  <div class="main-card">
          <el-row>
            <el-col :span="3">
              <div class="menu-all">
                <div class="menu-head">
                  <span class="menu-head-title">倉(cāng)庫(kù)管理</span>/<span class="menu-head-title" @click="goBack"
                    >大屏</span
                  >
                </div>
                <!-- <div class="menu-body">
                <div class="menu-item" @click="openTabs(item)" v-for="item in menuItems" :key="item">
                  <i class="el-icon-s-home" v-if="item.value === '01'"></i>{{ item.name }}
                </div>
              </div> -->
                <a-menu
                  mode="inline"
                  theme="dark"
                  :openKeys="openKeys"
                  v-model="SelectedKeys"
                  @openChange="onOpenChange"
                >
                  <a-sub-menu v-for="item in menuItems" :key="item.value">
                    <span slot="title"
                      ><a-icon type="appstore" /><span>{{ item.name }}</span></span
                    >
                    <a-menu-item
                      v-for="childrenItem in item.children"
                      :key="childrenItem.value"
                      @click="addTabs(childrenItem)"
                      >{{ childrenItem.name }}
                    </a-menu-item>
                  </a-sub-menu>
                </a-menu>
              </div>
            </el-col>
            <el-col :span="21">
              <el-row>
                <el-col :span="24">
                  <div>
                    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                      <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
                        <component :is="item.content"></component>
                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
</template>
<script>
	export default {
		data(){
			return{
				   openKeys: [],//控制一級(jí)菜單折疊展開的數(shù)組 存放一級(jí)菜單的value
      SelectedKeys: '',//控制二級(jí)菜單高亮 存放二級(jí)菜單value
      //側(cè)邊導(dǎo)航菜單數(shù)組
      menuItems: [
        {
          name: '應(yīng)入應(yīng)出報(bào)表',
          value: '0',
          children: [
            {
              name: '應(yīng)入庫(kù)單量報(bào)表',
              value: '01',
              content: () => import('@/views/main/index/qtyReportIndex.vue'),
            },
            {
              name: '應(yīng)入庫(kù)臺(tái)數(shù)報(bào)表',
              value: '02',
              content: () => import('@/views/main/index/qtyReportIndexQty.vue'),
            },
            {
              name: '應(yīng)出庫(kù)單量報(bào)表',
              value: '03',
              content: () => import('@/views/main/index/handoverReportIndex.vue'),
            },
            {
              name: '應(yīng)出庫(kù)臺(tái)數(shù)報(bào)表',
              value: '04',
              content: () => import('@/views/main/index/handoverReportIndexQty.vue'),
            },
          ],
        },
        {
          name: '預(yù)測(cè)',
          value: '1',
          children: [
            {
              name: '到貨登記',
              value: '11',
              content: () => import('@/views/main/index/asnHdrDockIndex.vue'),
            },
            {
              name: '倉(cāng)庫(kù)利用率',
              value: '12',
              content: () => import('@/views/main/index/whUteIndex.vue'),
            },
            {
              name: '庫(kù)內(nèi)庫(kù)存',
              value: '13',
              content: () => import('@/views/main/index/imOdsStorageIndex.vue'),
            },
          ],
        },
        {
          name: '指標(biāo)',
          value: '2',
          children: [
            {
              name: '單倉(cāng)提貨率',
              value: '201',
              content: () => import('@/views/main/index/singleWhDeliveryScaleIndex.vue'),
            },
            {
              name: '中轉(zhuǎn)在庫(kù)時(shí)長(zhǎng)',
              value: '202',
              content: () => import('@/views/main/index/transitDurationInWhIndex.vue'),
            },
            {
              name: '重復(fù)SN',
              value: '203',
              content: () => import('@/views/main/index/dwExceptionBarcodeIndex.vue'),
            },
            {
              name: '盤點(diǎn)日清單',
              value: '204',
              content: () => import('@/views/main/index/inventoryRqIndex.vue'),
            },
            {
              name: '移庫(kù)指標(biāo)監(jiān)控',
              value: '205',
              content: () => import('@/views/main/index/transferIndexIndex.vue'),
            },
            {
              name: '揀貨庫(kù)位分析匯總報(bào)表',
              value: '206',
              content: () => import('@/views/main/index/pickingByLocSumIndex.vue'),
            },
            {
              name: '裝車報(bào)表匯總',
              value: '207',
              content: () => import('@/views/main/index/loadingSummaryIndex.vue'),
            },
            {
              name: '出庫(kù)SN報(bào)錯(cuò)率',
              value: '208',
              content: () => import('@/views/main/index/dwBarcodeErrorRptIndex.vue'),
            },
            {
              name: '揀貨庫(kù)位分析明細(xì)',
              value: '209',
              content: () => import('@/views/main/index/dwPickFxmxIndex.vue'),
            },
            {
              name: '不按批次揀貨庫(kù)區(qū)維度',
              value: '210',
              content: () => import('@/views/main/index/notPickingByBatchIndex.vue'),
            },
          ],
        },
      ],
      editableTabsValue: '',//tab頁(yè)當(dāng)前active的item
      editableTabs: [],//tab頁(yè)數(shù)組
			}
		},
		methods:{
	// 用于其他頁(yè)面跳轉(zhuǎn)來到主頁(yè)并打開tab頁(yè)的方法
	//	 goTable(item) {
     // this.openKeys = [item.value.substring(0, 1)]
     // this.SelectedKeys = item.value
     // this.$store.commit('updateHomeOrIndexSwitch', false)
     // this.openTabs(item)
    //},
		addTab(item) {
      let onOff = false;
      this.editableTabs.forEach((x) => {
        if (x.name == item.name) {
           this.editableTabsValue = item.name
           onOff=true
           return;
        }
      })
      if(!onOff){
      this.editableTabs.push({
        title: item.name,
        name: item.name,
        content: item.content,
      })
      this.editableTabsValue = item.name
      }
    },
    //關(guān)閉tab頁(yè)觸發(fā) targetName = 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
            } else {
              this.openKeys = []
              this.SelectedKeys = ''
            }
          }
        })
      }
      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName)
    },
		},
		watch:{
			    editableTabsValue(val) {
      this.menuItems.forEach((menuItem) => {
        if (menuItem.children) {
          menuItem.children.forEach((childrenItem) => {
            if (childrenItem.name === val) {
              this.openKeys = [childrenItem.value.substring(0, 1)]
              this.SelectedKeys = childrenItem.value
              return
            }
          })
        }
      })
    },
		}
	}
</script>