<template>
  <div class="processing-container">
    <el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane v-for="tab in tabs" :label="tab.title" :name="tab.name">
        <DoPage 
          v-if="activeTab === tab.name"
          :label="tab.label" 
          :tabs="tab.tabs" 
          :useSpecialSplit="tab.useSpecialSplit" 
        />
      </el-tab-pane>
    </el-tabs>
    
  </div>
</template>

<script>
import DoPage from '@/views/wms/coil/panels/do.vue';

export default {
  name: 'AcidProcessing',
  components: {
    DoPage
  },
  data() {
    return {
      activeTab: 'typing',
      tabs: [
        { 
          title: '酸轧加工',
          name: 'typing',
          label: '酸轧工序',
          tabs: [
            {value: '1988150044862377986', label: '酸连轧原料库'},
            {value: '1988150099140866050', label: '酸连轧成品库'}, 
            {value: '1988150263284953089', label: '镀锌原料库'}, 
            {value: '1988150545175736322', label: '脱脂原料库'},
          ],
          useSpecialSplit: false,
        },
        {
          title: '酸轧分条',
          name: 'split',
          label: '分条',
          useSpecialSplit: false,
        },
        {
          title: '合卷',
          name: 'merge',
          label: '酸轧合卷',
          useSpecialSplit: false,
        },
        { 
          title: '酸轧修复',
          name: 'repair',
          label: '酸轧修复工序',
          tabs: [
            {value: '1988150044862377986', label: '酸连轧原料库'},
            {value: '1988150099140866050', label: '酸连轧成品库'}, 
            {value: '1988150263284953089', label: '镀锌原料库'}, 
            {value: '1988150545175736322', label: '脱脂原料库'},
          ],
          useSpecialSplit: true,
        },
      ]
      
    };
  },
};
</script>

<style scoped lang="scss">
.processing-container {
  width: 100%;
  height: 100%;
}
</style>
