<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="hander(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 == 'demandList'">
            <demandList ref="demandListRef" />
          </div>
          <div v-if="activeComp == 'toDoList'">
            <toDoList ref="toDoListRef" />
          </div>
          <div v-if="activeComp == 'workOrder'">
            <workOrder ref="workOrderRef" />
          </div>
          <div v-if="activeComp == 'evaluate'">
            <evaluate ref="evaluateRef" />
          </div>
          <div v-if="activeComp == 'accessory'">
            <accessory ref="accessoryRef" />
          </div>
          <div v-if="activeComp == 'recycle'">
            <recycle ref="recycleRef" />
          </div>
          <div v-if="activeComp == 'knowledge'">
            <knowledge ref="knowledgeRef" />
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import demandList from './demandList';
import toDoList from './toDoList';
import workOrder from './workOrder';
import evaluate from './evaluate';
import accessory from './accessory';
import knowledge from './knowledge';
import recycle from './recycle';

export default {
  components: {
    demandList,
    toDoList,
    workOrder,
    evaluate,
    accessory,
    knowledge,
    recycle
  },
  data() {
    return {
      activeComp: 'demandList',
      tabOptions: [
        { key: 'demandList', name: '售后需求' },
        { key: 'toDoList', name: '售后计划' },
        { key: 'workOrder', name: '售后工单' },
        { key: 'evaluate', name: '客户评价' },
        { key: 'accessory', name: '配件申请记录' },
        { key: 'recycle', name: '配件回收记录' },
        { key: 'knowledge', name: '故障知识库' },
        { key: '2', name: '统计报表' }
      ]
    };
  },
  mounted() {
    // switch (this.$route.query.title) {
    //   case '工单':
    //     this.activeComp = 'workOrder';
    //     break;
    //   default:
    //     break;
    // }
  },
  methods: {
    hander(key) {
      this.activeComp = key;
    }
  }
};
</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>
