<template>
  <div class="container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="闸井" name="well">
        <list-device ref="welldevice"/>
      </el-tab-pane>
      <el-tab-pane label="开孔机" name="kkj">
        <list-device-kkj ref="kkjdevice"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ListDevice from './listDevice'
import ListDeviceKkj from './listDeviceKkj'
// import { parseUrl } from '@/utils/parseutils'

export default {
  name: 'DeviceManage',
  components: { ListDevice, ListDeviceKkj },
  data() {
    return {
      activeName: 'well'
    }
  },
  created() {
    this.$nextTick(() => {
      this.$refs.welldevice.fetchData()
    })
    // 如果路径里带参数，自己解析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 === 'well') {
        this.$refs.welldevice.fetchData()
      } else if (tab.name === 'kkj') {
        this.$refs.kkjdevice.fetchData()
      }
    }
  }
}
</script>

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