<template>
  <el-container class="content-height-fit">
    <inner-sidebar>
      <project-section-device-tree device-type="1" @node-click="handleTreeClick" />
    </inner-sidebar>
    <data-history v-if="showDataList" ref="list" :query="listQuery" @viewData="viewData" />
    <el-container v-else class="resize-fit-container">
      <div class="app-container  blue-top-border">
        <div class="filter-container" style="padding: 0px;height: 100%;">
          <el-tabs type="border-card">
            <el-tab-pane label="历史回放">
              <data-list ref="dataList" :query="listQuery" />
            </el-tab-pane>
            <el-tab-pane label="整车">
              <data-whole ref="dataWhole" :query="listQuery" />
            </el-tab-pane>
            <el-tab-pane label="前天车">
              <data-front ref="dataFront" :query="listQuery" />
            </el-tab-pane>
            <el-tab-pane label="后天车">
              <data-after ref="dataAfter" :query="listQuery" />
            </el-tab-pane>
            <el-tab-pane label="问题点">
              <DeviceWarnings ref="DeviceWarnings" :query="listQuery" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-container>
  </el-container>
</template>

<script>
import ProjectSectionDeviceTree from '@/views/projects/components/ProjectSectionDeviceTree'
import dataHistory from './components/data-history.vue'
import dataList from './components/data-list.vue'
import dataWhole from './components/data-whole.vue'
import dataFront from './components/data-front.vue'
import dataAfter from './components/data-after.vue'
import DeviceWarnings from '@/views/projects/DeviceWarnings'
import InnerSidebar from '@/components/InnerSidebar'

export default {
  name: 'DeviceHistoryMng',
  components: { ProjectSectionDeviceTree, dataList, InnerSidebar, dataWhole, dataFront, dataAfter, dataHistory, DeviceWarnings },
  data() {
    return {
      list: [],
      listQuery: {
        deviceType: 1,
        projectId: undefined,
        projectName: '',
        sectionId: undefined,
        sectionName: '',
        deviceId: undefined,
        skipCount: 0,
        maxResultCount: 20,
        isOnline: undefined
      },
      showDataList: true
    }
  },
  computed: {
  },
  watch: {
  },
  mounted() {
    //  this.$refs.dataList.queryDataList()  父组件调用子组件的方法
  },
  created() {

  },
  methods: {
    viewData(val) {
      if (val) {
        this.listQuery = val
        this.showDataList = false
      }
    },
    // 点击项目
    handleTreeClick(data, node) {
      var that = this
      if (data.isProject) {
        that.listQuery.projectId = data.id
        that.listQuery.projectName = data.name
        that.listQuery.sectionId = undefined
        that.showDataList = true
      }
      if (data.isSection) {
        that.listQuery.projectId = data.projectId
        that.listQuery.projectName = data.projectName
        that.listQuery.sectionId = data.id
        that.listQuery.sectionName = data.name
        that.showDataList = true
      }
      if (data.isDevice) {
        that.showDataList = false
        that.listQuery.projectId = data.projectId
        that.listQuery.projectName = node.parent.data.projectName
        that.listQuery.sectionId = data.sectionId
        that.listQuery.sectionName = node.parent.data.name
        that.listQuery.deviceId = data.id
        that.listQuery.deviceNoShow = data.deviceNo
      }
    }
  }
}
</script>

<style scoped>
.el-tabs--border-card
{
  height: 100%;
}
</style>
