<template>
  <div class="container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="tab of showTabList" :key="tab.name" :label="tab.label" :name="tab.name">
        <component :is="tab.comp" :ref="tab.name" :name="tab.label" :type="tab.type" />
      </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 ListLiquidGasData from './deviceData/listLiquidGasData'
import ListNoiseData from './deviceData/listNoiseData'
import ListTubeData from './deviceData/listTubeData'
import ListGasdectorData from '@/views/dataManage/deviceData/listGasdectorData'
import ListPantiltData from '@/views/dataManage/deviceData/listPantiltData'
import ListHydrantData from '@/views/dataManage/deviceData/listHydrantData'
import ListH2SData from '@/views/dataManage/deviceData/listH2SData'
import ListWellLiquidData from '@/views/dataManage/deviceData/listWellLiquidData'
import { parseUrl } from '@/utils/parseutils'

export default {
  name: 'DataManage',
  components: { ListH2SData, ListHydrantData, ListPantiltData, ListGasdectorData, ListTubeData, ListNoiseData, ListWellLocaData, ListTempData, ListHarmfulData, ListDigData, ListGasData, ListLiquidData, ListWellCoverData, ListLiquidGasData, ListWellLiquidData },
  data() {
    return {
      activeName: 'wellcover',
      tabList: [
        { permission: '/welldata/list-page', label: '井盖状态监测仪', name: 'wellcover', type: '1', comp: 'list-well-cover-data' },
        { permission: '/liquiddata/list-page', label: '液位监测仪', name: 'liquid', type: '2', comp: 'list-liquid-data' },
        { permission: '/gasdata/list-page', label: '燃气智能监测终端', name: 'gas', type: '4', comp: 'list-gas-data' },
        { permission: '/digdata/list-page', label: '开挖监测仪', name: 'dig', type: '6', comp: 'list-dig-data' },
        { permission: '/noisedata/list-page', label: '噪声记录仪', name: 'noise', type: '8', comp: 'list-noise-data' },
        { permission: '/harmfuldata/list-page', label: '有害气体监测仪', name: 'harmful', type: '3', comp: 'list-harmful-data' },
        { permission: '/tempdata/list-page', label: '温湿度监测仪', name: 'temp', type: '5', comp: 'list-temp-data' },
        { permission: '/welllocadata/list-page', label: '井盖定位监测仪', name: 'wellloca', type: '7', comp: 'list-well-loca-data' },
        { permission: '/liquidGasData/list-page', label: '燃气智能终端(一体化)', name: 'liquidgas', type: '10', comp: 'list-liquid-gas-data' },
        { permission: '/tubedata/list-page', label: '管盯', name: 'tube', type: '12', comp: 'list-tube-data' },
        { permission: '/gasdector/list-page', label: '可燃气体智能监测终端', name: 'gasdector', type: '101', comp: 'list-gasdector-data' },
        { permission: '/pantilt/list-page', label: '激光甲烷遥测云台', name: 'pantilt', type: '21', comp: 'list-pantilt-data' },
        { permission: '/hydrantdata/list-page', label: '消防栓防盗水监测仪', name: 'hydrant', type: '11', comp: 'list-hydrant-data' },
        { permission: '/wellliquiddata/list-page', label: '硫化氢浓度监测仪', name: 'H2S', type: '14', comp: 'list-H2S-data' },
        { permission: '/wellliquiddata/list-page', label: '井盖液位一体机', name: 'wellliquid', type: '13', comp: 'list-well-liquid-data' }
      ] // 所有tab列表
    }
  },
  computed: {
    showTabList() { // 根据权限获取可见tab
      return this.tabList.filter(item => {
        return this.hasPerm(item.permission)
      })
    }
  },
  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()
    }
  },
  mounted() {
    if (this.$route.query && this.$route.query.deviceType) {
      this.changeTab(this.$route.query.deviceType)
    }
  },
  methods: {
    // 处理Tab点击事件，每次点击更新数据
    handleClick(tab, event) {
      const tabname = tab.name
      const comp = this.$refs[tabname][0]
      comp.fetchData()
    },
    // 切换tab
    changeTab(deviceType) {
      const res = this.showTabList.filter(item => item.type === deviceType)
      if (res.length > 0) {
        this.activeName = res[0].name
      } else {
        this.activeName = this.showTabList[0].name
      }
    },
    // 计算那个是当前第一个tab
    caclActive() {
      this.activeName = this.showTabList[0].name
    }
  }
}
</script>

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