<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <div class="switch">
        <div class="switch_left">
          <ul>
            <li
              v-for="item in tabOptions"
              :key="item.key"
              :class="{ active: activeComp == item.key }"
              @click="handleClick(item)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <!-- <div class="right" style="padding: 10px">
          <el-button @click="$router.go(-1)">返回</el-button>
        </div> -->
      </div>
      <div class="main">
        <div v-if="activeComp == 'plan'">
          <plan ref="tableRef"></plan>
        </div>
        <div v-if="activeComp == 'workOrder'">
          <workOrder ref="tableRef"></workOrder>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import plan from './components/plan.vue';
  import workOrder from './components/workOrder.vue';

  export default {
    components: {
      plan,
      workOrder
    },
    data() {
      return {
        activeComp: 'plan',
        tabOptions: [
          { key: 'plan', name: '计划' },
          { key: 'workOrder', name: '工单' }
        ],
        // 加载状态
        loading: false
      };
    },
    mounted() {
      console.log(this.$route.query);
      switch (this.$route.query.title) {
        case '计划':
          this.activeComp = 'plan';
          break;
        case '工单':
          this.activeComp = 'workOrder';
          break;
        default:
          break;
      }
    },
    methods: {
      handleClick(val) {
        this.activeComp = val.key;
        this.$refs.tableRef && this.$refs.tableRef.reload();
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-card__body {
    padding-top: 0;
    padding-left: 0;
  }
  .main {
    padding-left: 17px;
    .plan {
      padding-top: 15px;
    }
  }
</style>
