<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('/gasdata/list')" label="燃气智能监测终端" name="gas">
        <list-gas-data ref="gasdatacomp"/>
      </el-tab-pane>
      <el-tab-pane v-if="hasPerm('/digdata/list')" label="开挖监测仪" name="dig">
        <list-dig-data ref="digdatacomp"/>
      </el-tab-pane>
      <el-tab-pane v-if="hasPerm('/harmfuldata/list')" label="有害气体监测仪" name="harmful">
        <list-harmful-data ref="harmfuldatacomp"/>
      </el-tab-pane>
      <el-tab-pane v-if="hasPerm('/tempdata/list')" label="温湿度监测仪" name="temp">
        <list-temp-data ref="tempdatacomp"/>
      </el-tab-pane>
      <el-tab-pane v-if="hasPerm('/welllocadata/list')" label="井盖定位监测仪" name="wellloca">
        <list-well-loca-data ref="welllocadatacomp"/>
      </el-tab-pane>
      <el-tab-pane v-if="hasPerm('/hyetodata/list')" label="雨量计" name="hyetometer">
        <list-hyetometer-data ref="hyetometerdatacomp"/>
      </el-tab-pane>
      <el-tab-pane v-if="hasPerm('/flowdata/list')" label="流量计" name="flowmeter">
        <list-flowmeter-data ref="flowmeterdatacomp"/>
      </el-tab-pane>
      <el-tab-pane v-if="hasPerm('/meterdata/list')" label="水质监测仪" name="meter">
        <list-meter-data ref="meterdatacomp"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ListLiquidData from './deviceData/listLiquidData'
import ListWellCoverData from './deviceData/listWellCoverData'
import ListGasData from './deviceData/listGasData'
import ListDigData from './deviceData/listDigData'
import ListHarmfulData from './deviceData/listHarmfulData'
import ListTempData from './deviceData/listTempData'
import ListWellLocaData from './deviceData/listWellLocaData'
import ListHyetometerData from './deviceData/listHyetometerData'
import ListFlowmeterData from './deviceData/listFlowmeterData'
import ListMeterData from './deviceData/listMeterData'
import { parseUrl } from '@/utils/parseutils'
import { hasPermission } from '@/utils/permission'
export default {
  name: 'DataManage',
  components: { ListMeterData, ListFlowmeterData, ListHyetometerData, ListWellLocaData, ListTempData, ListHarmfulData, ListDigData, ListGasData, ListLiquidData, ListWellCoverData },
  data() {
    return {
      activeName: 'wellcover'
    }
  },
  created() {
    // 如果路径里带参数，自己解析deviceType参数
    if (window.location.href) {
      const params = parseUrl(window.location.href)
      if (params && params.deviceType) {
        this.changeTab(params.deviceType)
      } else {
        this.caclActive()
      }
    }
  },
  activated() {
    if (this.$route.query && this.$route.query.deviceType) {
      this.changeTab(this.$route.query.deviceType)
    } else {
      this.caclActive()
    }
  },
  methods: {
    // 处理Tab点击事件，每次点击更新数据
    handleClick(tab, event) {
      if (tab.name === 'wellcover') {
        this.$refs.welldatacomp.refreshTimeRange()
        this.$refs.welldatacomp.fetchData()
      } else if (tab.name === 'liquid') {
        this.$refs.liquiddatacomp.refreshTimeRange()
        this.$refs.liquiddatacomp.fetchData()
      } else if (tab.name === 'harmful') {
        this.$refs.harmfuldatacomp.refreshTimeRange()
        this.$refs.harmfuldatacomp.fetchData()
      } else if (tab.name === 'gas') {
        this.$refs.gasdatacomp.refreshTimeRange()
        this.$refs.gasdatacomp.fetchData()
      } else if (tab.name === 'temp') {
        this.$refs.tempdatacomp.refreshTimeRange()
        this.$refs.tempdatacomp.fetchData()
      } else if (tab.name === 'dig') {
        this.$refs.digdatacomp.refreshTimeRange()
        this.$refs.digdatacomp.fetchData()
      } else if (tab.name === 'wellloca') {
        this.$refs.welllocadatacomp.refreshTimeRange()
        this.$refs.welllocadatacomp.fetchData()
      } else if (tab.name === 'hyetometer') {
        this.$refs.hyetometerdatacomp.refreshTimeRange()
        this.$refs.hyetometerdatacomp.fetchData()
      } else if (tab.name === 'flowmeter') {
        this.$refs.flowmeterdatacomp.refreshTimeRange()
        this.$refs.flowmeterdatacomp.fetchData()
      } else if (tab.name === 'meter') {
        this.$refs.meterdatacomp.refreshTimeRange()
        this.$refs.meterdatacomp.fetchData()
      }
    },
    changeTab(deviceType) {
      if (deviceType === '1') {
        this.activeName = 'wellcover'
      } else if (deviceType === '2') {
        this.activeName = 'liquid'
      } else if (deviceType === '3') {
        this.activeName = 'harmful'
      } else if (deviceType === '4') {
        this.activeName = 'gas'
      } else if (deviceType === '5') {
        this.activeName = 'temp'
      } else if (deviceType === '6') {
        this.activeName = 'dig'
      } else if (deviceType === '7') {
        this.activeName = 'wellloca'
      } else if (deviceType === '8') {
        this.activeName = 'meter'
      } else if (deviceType === '9') {
        this.activeName = 'flowmeter'
      } else if (deviceType === '10') {
        this.activeName = 'hyetometer'
      }
    },
    // 计算那个是当前第一个tab
    caclActive() {
      if (hasPermission('/welldata/list')) {
        this.activeName = 'wellcover'
      } else if (hasPermission('/liquiddata/list')) {
        this.activeName = 'liquid'
      } else if (hasPermission('/gasdata/list')) {
        this.activeName = 'gas'
      } else if (hasPermission('/digdata/list')) {
        this.activeName = 'dig'
      } else if (hasPermission('/harmfuldata/list')) {
        this.activeName = 'harmful'
      } else if (hasPermission('/tempdata/list')) {
        this.activeName = 'temp'
      } else if (hasPermission('/welllocadata/list')) {
        this.activeName = 'wellloca'
      } else if (hasPermission('/hyetodata/list')) {
        this.activeName = 'hyetometer'
      } else if (hasPermission('/flowdata/list')) {
        this.activeName = 'flowmeter'
      } else if (hasPermission('/meterdata/list')) {
        this.activeName = 'meter'
      }
    }
  }
}
</script>

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