<template>
  <div class="app-container">
    <div class="tabs boxShadow">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="粮情检测" name="EquipGrainDetection"></el-tab-pane>
        <el-tab-pane label="气调" name="AirHandling"></el-tab-pane>
        <el-tab-pane label="氮气" name="Nitrogen"> </el-tab-pane>
        <el-tab-pane label="气体检测" name="GasDetectionEquip"> </el-tab-pane>
        <el-tab-pane label="虫情检测" name="PestDetectionEquip"></el-tab-pane>
        <el-tab-pane label="能耗检测" name="EnergyMonitoring"></el-tab-pane>
        <el-tab-pane label="气象站" name="WeatherStation"></el-tab-pane>
        <el-tab-pane label="气密性检测" name="GasTightness"></el-tab-pane>
        <el-tab-pane label="通风" name="VentilationEquip"></el-tab-pane>
        <el-tab-pane label="照明" name="LightingEquip"></el-tab-pane>
        <el-tab-pane label="控温" name="TemperatureControlEquip">
          
        </el-tab-pane>
      </el-tabs>
    </div>
    <div id="main">

      <router-view id="mainRight" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'NewGrain',
  data () {
    return {
      activeName: 'GrainDetection',
      formInline:{
        cnameOrNumber:''
      }
    }
  },
  mounted () {
    this.activeName = this.$route.name
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
      this.$router.push(tab.name)
    },
    search() {

    },
    add(name) {
      console.log(this.$route,'route')
      this.$router.push({
        name:this.activeName+'Add'
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.app-container {
  width: 100%;
  height: 100%;
  // background-color: purple;
  .tabs {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px 20px;
    .el-tab-pane {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .tab-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tab-content_item {
        // width: px;
        display: flex;
        justify-content: flex-start;
        .imgdiv {
          width: 66px;
          height: 66px;
          img {
            width: 66px;
            height: 66px;
          }
        }
        .textdiv {
          width: 105px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 5px 10px;
          font-size: 12px;
          .text-total {
            color: #aaa3a3;
          }
          .text-number {
            font-size: 20px;
            font-weight: 700;
          }
          .textCompare {
            display: flex;
            align-items: center;
            // justify-content: space-between;
          }
          .triangle-down {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 8px solid red;
          }
          .triangle-up {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 8px solid green;
          }
        }
      }
    }
  }
}
</style>
