<template>
  <div class="tickets_index">
    <el-card :body-style="{ padding: 10 }">
      <!-- tab切换 -->
      <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="content-wrapper" style="margin-left: 10px">
        <component :is="activeComp"></component>
      </div>
    </el-card>
  </div>
</template>

<script>
  import patrolInspection from './patrolInspection';
  import maintenance from './maintenance';
  import delivery from './delivery';
  import repair from './repair';
  export default {
    components: {
      patrolInspection,
      maintenance,
      delivery,
      repair
    },
    data() {
      return {
        activeComp: 'patrolInspection',
        tabOptions: [
          { key: 'patrolInspection', name: '巡点检工单' },
          { key: 'maintenance', name: '保养工单' },
          { key: 'repair', name: '维修工单' }
          // { key: 'delivery', name: '量具送检工单' }
          // { key: 'repair', name: '计划性维修工单' },
          // { key: 'malfunction', name: '盘点工单' }
        ]
      };
    },
    mounted() {
      switch (this.$route.query.title) {
        case '巡点检工单':
          this.activeComp = 'patrolInspection';
          break;
        case '保养工单':
          this.activeComp = 'maintenance';
          break;
        case '量具送检工单':
          this.activeComp = 'delivery';
          break;
        default:
          break;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tickets_index {
    width: 100%;
    height: calc(100vh - 96px);
    ::v-deep .el-card {
      height: 100%;
      width: 100%;
      .el-card__body {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        .switch {
          flex: 0 0 50px;
        }
        .content-wrapper {
          flex: 1;
        }
      }
    }
  }
  .content-wrapper {
    background-color: #fff;
  }
  .page-title {
    background: #fff;
    padding: 26px 10px 15px;
    border-bottom: 1px solid #eaeefb;
  }
</style>
