<template>
  <div class="patrol">
    <div class="ele-body">
      <el-card shadow="never">
        <div class="switch">
          <div class="switch_left">
            <ul>
              <li
                v-for="item in tabOptions"
                :key="item.key"
                :class="{ active: activeComp == item.key }"
                @click="activeComp = item.key"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
        </div>
        <div class="main">
          <div v-if="activeComp == 'plan'">
            <plan />
          </div>
          <div v-else>
            <workOrder />
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
  import plan from './plan';
  import workOrder from './workOrder';
  export default {
    components: { plan, workOrder },
    data() {
      return {
        activeComp: 'plan',
        tabOptions: [
          { key: 'plan', name: '计划' },
          { key: 'workOrder', name: '工单' }
        ]
      };
    }
  };
</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>
