<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input v-model="areaName" placeholder="请输入服务区名称" clearable size="small" prefix-icon="el-icon-search"
                    style="margin-bottom: 20px" />
        </div>
        <div class="head-container">
          <el-tree :data="areaOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree"
                   node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-tabs v-model="activeTab" @tab-click="handleTabChange">
          <el-tab-pane label="总览" name="first">

          </el-tab-pane>
          <el-tab-pane label="个户" name="second">

          </el-tab-pane>

        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { areaTreeSelect, areaTreeSelectByTag } from '@/api/basecfg/area'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'


export default {
  name: 'Device',
  components: { Treeselect },
  data() {
    const nowDay = new Date()
    return {
      activeTab: 'first',
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 计量设备表格数据
      deviceList: [],
      // 弹出层标题
      title: '',
      // 记录表单开启
      recListOpen: false,
      // 填报表单开启
      fillFormOpen: false,
      // 区域名称
      areaName: undefined,
      areaOptions: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 能源分类树
      emsClsOptions: [
        { code: 45, name: '电表' },
        { code: 70, name: '水表' }
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        areaCode: null,
        deviceCode: null,
        meterCls: 45
      },
      // 电表表单参数
      recListForm: {
        year: '',
        deviceCode: '',
        recList: []
      },
    }
  },
  created() {
    this.handleTabChange();
    this.getList()
  },
  methods: {
    getList() {

    },
    handleTabChange() {
      // 根据newTabName给someParam赋值
      if (this.activeTab === 'first') {
        this.getAreaTree('Area')
      } else if (this.activeTab === 'second') {
        this.getAreaTreeByTag('Zoning', 'Area_01')
      }
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },


    getObjTagName(objTag) {
      const tagMap = {
        0: '公摊表',
        1: '个户表'
      }
      return tagMap[objTag] || '未知'
    },
    /** 查询区域树结构 */
    getAreaTree(tier) {
      areaTreeSelect(tier).then(response => {
        this.areaOptions = response.data
      })
    },
    /** 查询区域树结构 */
    getAreaTreeByTag(tier, tagCode) {
      areaTreeSelectByTag(tier, tagCode).then(response => {
        this.areaOptions = response.data
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.areaCode = data.id
      this.handleQuery()
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  ::v-deep .el-tabs__content {
    overflow: initial;
  }
}
.sub-table {
  .el-icon-delete {
    cursor: pointer;
  }
  .operateBtns {
    cursor: pointer;
    i {
      color: #1990ff;
      margin-left: 5px;
    }
  }
  ::v-deep .el-date-editor {
    width: 100% !important;
  }
}
.custom-checkbox-group {
  max-height: 120px;
  overflow-y: auto;
}
.strategyForm {
  ::v-deep .el-input.is-disabled .el-input__inner {
    color: #606266;
    background: #fff;
  }
}
</style>
<style lang="scss">
.custom-dialog {
  .el-dialog__body {
    padding-bottom: 0;
  }
}
</style>
