<template>
  <div class="container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-if="hasPerm('/welldata/list')" label="井盖状态监测仪" name="wellcover">
        <list-well-cover-data ref="welldatacomp"/>
      </el-tab-pane>
      <el-tab-pane v-if="hasPerm('/liquiddata/list')" label="液位监测仪" name="liquid">
        <list-liquid-data ref="liquiddatacomp"/>
      </el-tab-pane>
      <el-tab-pane v-if="hasPerm('/data/gas')" label="燃气智能终端" name="gas">燃气数据</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ListLiquidData from './deviceData/listLiquidData'
import ListWellCoverData from './deviceData/listWellCoverData'
export default {
  name: 'DataManage',
  components: { ListLiquidData, ListWellCoverData },
  data() {
    return {
      activeName: 'wellcover'
    }
  },
  mounted() {
    if (window.location.href) {
      var query = window.location.href.split('?')
      var values = query[1].split('&')
      for (var i = 0; i < values.length; i++) {
        var pos = values[i].indexOf('=')
        if (pos === -1) continue
        var paramname = values[i].substring(0, pos)
        var value = values[i].substring(pos + 1)
        if (paramname === 'deviceType') {
          if (value === '1') {
            this.activeName = 'wellcover'
          } else if (value === '2') {
            this.activeName = 'liquid'
          }
        }
      }
    }
    if (this.$route.params && this.$route.params.deviceType && this.$route.params.deviceType !== '') {
      if (this.$route.params.deviceTypedeviceType === '1') {
        this.activeName = 'wellcover'
      } else if (this.$route.params.deviceType === '2') {
        this.activeName = 'liquid'
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === 'wellcover') {
        this.$refs.welldatacomp.fetchData()
      } else if (tab.name === 'liquid') {
        this.$refs.welldatacomp.fetchData()
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .container{
    padding: 5px;
  }
</style>