<template>
  <div class="container-main" ref="main">
    <div class="tabClassHeader">
      <div
        class="tabItems"
        :class="changeNum == index ? 'color1' : 'color2'"
        v-for="(item, index) in options"
        :key="item.id"
        @click="handoff(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div v-if="changeNum == 0">
      <xuncha></xuncha>
    </div>
    <div v-if="changeNum == 1">
      <yinhuan></yinhuan>
    </div>
  </div>
</template>

<script>
import yinhuan from "../trouble/index";
import xuncha from "../hcheck/index.vue";
export default {
  name: "Order",
  //注释字典
  data() {
    return {
      options: [
        {
          id: 0,
          name: "巡查工单",
        },
        {
          id: 1,
          name: "隐患工单",
        },
      ],
      changeNum: 0,
    };
  },
  created() {},
  components: {
    yinhuan,
    xuncha,
  },
  methods: {
    handoff(item) {
      this.changeNum = item.id;
    },
  },
};
</script>
<style lang="scss" scoped>
.container-main {
  height: calc(100vh - 84px);
  // height: 100%;
  overflow: hidden;
  padding: 0 10px;
}
::v-deep .el-descriptions-row th {
  background: #f5f5f5;
  color: #333;
  font-weight: bold !important;
  width: 16% !important;
}
::v-deep .el-descriptions-row td {
  width: 34% !important;
}
.layui-table-tool {
  display: flex;
}
::v-deep .upload-demo {
  margin: 0 8px;
}
::v-deep .el-date-editor.el-input {
  width: 50%;
}
::v-deep .el-select {
  width: 50%;
}
::v-deep .upload-demo {
  margin: 0;
}
.tabClassHeader {
  border-bottom: 1px solid #dce3ec;
  margin: 10px 0;
  display: flex;
  .tabItems {
    width: 100px;
    height: 25px;
    border-radius: 10px 10px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-right: 10px;
    font-size: 13px;
    cursor: pointer;
  }
  .color1 {
    background: linear-gradient(180deg, #3976f1 0%, #79a5fe 100%);
  }
  .color2 {
    background: #f8f9f9;
    border: 1px solid #dce3ec;
    border-bottom: none;
    color: #313332;
  }
}
::v-deep .el-table .el-table__body-wrapper {
  height: 350px !important;
}
</style>
