<template>
  <div class="repair">
    <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 class="right" style="padding: 10px">
          <el-button @click="$router.go(-1)">返回</el-button>
        </div> -->
        </div>
        <div class="main">
          <div v-if="activeComp == 'repairNotes'">
            <repairNotes />
          </div>
          <div v-if="activeComp == 'workOrder'">
            <workOrder />
          </div>
          <div v-if="activeComp == 'outsourcingOrder'">
            <outsourcingOrder />
          </div>
          <div v-if="activeComp == 'planRepair'">
            <planRepair />
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
  import repairNotes from './repairNotes';
  import workOrder from './workOrder';
  import outsourcingOrder from './outsourcingOrder';
  import planRepair from './planRepair';
  export default {
    components: { repairNotes, workOrder, outsourcingOrder, planRepair },
    data() {
      return {
        activeComp: 'repairNotes',
        tabOptions: [
          { key: 'repairNotes', name: '报修记录' },
          { key: 'workOrder', name: '工单' },
          { key: 'outsourcingOrder', name: '委派单' },
          { key: 'planRepair', name: '计划性维修' }
        ]
      };
    },
    mounted() {
      switch (this.$route.query.title) {
        case '工单':
          this.activeComp = 'workOrder';
          break;
        default:
          break;
      }
    }
  };
</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>
