<template>
  <div>
    <d2-container>
      <!-- <template slot="header">首页/数据查询</template> -->
      <div class="main">
        <div class="left">
          <!-- <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          </el-input> -->

          <el-tree
            class="filter-tree"
            v-loading="loading"
            :data="leftList"
            node-key="id"
            :props="defaultProps"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            default-expand-all
            highlight-current
            :default-expanded-keys="this.defaultExpanded"
            ref="tree"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span v-if="node.level == 1">
                <i :class="node.icon"></i>{{ node.label }}
              </span>
              <span v-if="node.level == 2">
                <i :class="node.icon"></i>{{ node.label }}
              </span>
              <span v-if="node.level == 3">
                <i :class="node.icon"></i>{{ node.label }}
              </span>
              <span v-if="node.level == 4"> <i></i>{{ node.label }} </span>
            </span>
          </el-tree>
        </div>
        <div class="right">
          <!-- <template slot="header">首页/数据查询</template> -->
          <div class="nav">当前所在位置:首页>数据查询</div>
          <div class="right_main">
            <div class="right_title">
              <i
                class="fa fa-pie-chart"
                aria-hidden="true"
                style="padding-right: 5px"
              ></i
              >数据查询
            </div>
            <div class="right_table">
              <!-- <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
                id="formLabel"
              > -->
                <!-- <el-form-item label="扫描时间">
                  <el-date-picker
                    v-model="formInline.scanTime"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd hh:mm"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </el-form-item> -->
                <!-- <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="search"
                    >查询</el-button
                  >
                </el-form-item> -->

                <!-- <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-refresh-left"
                    @click="reset"
                    >重置</el-button
                  >
                </el-form-item> -->
              <!-- </el-form> -->
              <el-table
                :data="dataSearchList"
                show-overflow-tooltip
                border
                 height='calc(100% - 51)'

                style="width: 100%"
                :header-cell-style="{ background: '#0064b9', color: '#c9f5fa' }"
              >
                <!-- <el-table-column
                  prop="zsk"
                  label="所属直属库"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="fk"
                  label="所属分库"
                  align="center"
                >
                </el-table-column> -->
                 <el-table-column
                  prop="zsk"
                  label="企业名称"
                  align="center"
                  width="190px"
                >
                </el-table-column>
                <el-table-column prop="equiName" label="仓房名称" align="center">
                </el-table-column>
                <el-table-column
                  prop="beginTime"
                  label="扫描开始时间"
                  width="180px"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="endTime"
                  label="扫描结束时间"
                  align="center"
                  width="180px"
                >
                </el-table-column>
                 <el-table-column prop="lkVolume" label="体积(立方米)" align="center"  width="120px">
                </el-table-column>
                <el-table-column prop="lkWeight" label="重量(吨)" align="center">
                </el-table-column>

                <el-table-column prop="caPolic" label="是否报警" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.caPolic==='1'">报警</div>
                    <div v-if="scope.row.caPolic==='2'">不报警</div>
                  </template>
                </el-table-column>

                <el-table-column prop="hstatus" label="仓房状态" align="center">
                   <template slot-scope="scope">
                <div v-if="scope.row.hstatus==='1'">空仓</div>
              <div v-if="scope.row.hstatus==='2'">入库</div>
              <div v-if="scope.row.hstatus==='3'">库存</div>
              <div v-if="scope.row.hstatus==='4'">出库</div>
              </template>
                </el-table-column>
               
                <!-- <el-table-column fixed="right" label="操作" width="100" align="center">
                  <template slot-scope="scope">
                    <el-button
                      @click="detail(scope.row)"
                      type="text"
                      size="small"
                      >详情</el-button
                    >
                  </template>
                </el-table-column> -->
              </el-table>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </d2-container>
  </div>
</template>
<script>
import api from "@/api";

export default {
  name: "dataQuery",
  data() {
    return {
      filterText: "",
      // 默认展开的节点
      defaultProps: {
        children: "children",

        label: "orgName",
      },
      loading: false,
      //默认展开的节点
      defaultExpanded: [],
      cfbh: "",

      // 左侧树数据
      leftList: [],
      // 日期插件
      //
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      formInline: {
        scanTime: [],
      },
      // 表格字段
      dataSearchList: [],

      pagination: {
        // 每页显示的条数
        pageSize: 10,
        // 当前页
        curPage: 1,
        // 总数
        total: 20,
      },
    };
  },

  methods: {
    //获取左侧树
    getLeftTree() {
      this.loading = true;
      let params = {
        orgName: this.orgName,
      };

      api
        .leftTree(params)
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.leftList = [];
            if (res.data) {
              this.leftList = res.data;

              // if (res.data[0].id) {
              //   this.defaultExpanded.push(res.data[0].id);
              //   if (res.data[0].children) {
              //     this.defaultExpanded.push(
              //       res.data[0].children[0].children[0].id
              //     );

              //     this.cfbh =
              //       res.data[0].children[0].children[0].children[0].id;
                 
                  
              //     setTimeout(() => {
              //       // document.getElementsByClassName("el-tree-node__content")[0].style.display="none"
              //       // document.getElementsByClassName("el-tree-node__content")[1].style.display="none"
              //       this.$refs.tree.setCurrentKey(this.cfbh);
              //     }, 100);
              //     console.log(this.leftList);
              //     this.getList();
              //   }
              // }

              var lastLevel=res.data;
              if(lastLevel.length>0){
                lastLevel=res.data[0]
                while(lastLevel.children&&lastLevel.children.length>0){
                  lastLevel=lastLevel.children[0];
                }
           
                this.defaultExpanded.push(lastLevel.id);
                this.cfbh=lastLevel.id
                setTimeout(()=>{
                    this.$refs.tree.setCurrentKey(this.cfbh);
                
                },200)
                this.getList();
              }
            }
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
          console.log(error);
        });
    },
    //获取列表数据
 //获取列表数据
    getList() {
      console.log("....");
      console.log(this.cfbh)
      var condition = {
        houseId: this.cfbh,
        beginTime:this.formInline.scanTime[0],
        endTime:this.formInline.scanTime[1],
      
      };
      condition = JSON.stringify(condition);
      var data = {
        pageIndex: this.pagination.curPage,
        pageSize: this.pagination.pageSize,
        condition: condition,
      };
      api
        .dataList(data)
        .then((res) => {
          if (res.code == 200) {
            this.dataSearchList = res.data.records;
            this.pagination.pageSize = res.data.size;
            this.pagination.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //点击左侧树节点
    handleNodeClick(data, node) {
      console.log(node, "'''");
      // if (node.level === 4) {
      //   this.cfbh = data.id;
      //   console.log(this.cfbh, ";;;");
      //   this.getList();
      // }
      if(node.childNodes.length===0){
            this.cfbh = data.id;
        console.log(this.cfbh, ";;;");
        this.getList();
      }
      
    },
    search() {
      this.getList();
    },
    reset() {
      this.formInline.scanTime = [];
      this.getList();
    },
    // 每页条数改变
    handleSizeChange(val) {
       this.pagination.pageSize = val;
      this.getList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.curPage = val;
      this.getList();
    },
    detail() {},
  },
  mounted() {
    this.getLeftTree();
  },
};
</script>
<style lang="scss" scoped>
/* .main .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  border-bottom: none ;
} */
.main {
  height: 100%;
  display: flex;

 .left{
   height:100%;
 }
  .right {
    margin-left: 20px;
    width: calc(100% - 280px);
    .nav {
      padding: 10px 0 10px 10px;
      color: #fff;

      font-size: 14px;

      background: #004a93;
    }
    .right_main{
      height:calc(100% - 50px);
      .right_table{
        height:calc(100% - 80px);
     
      }
        .right_table>.el-table{
          width:100%;
          height:calc(100% - 51px);
          // height:calc(100% - 40px);
          overflow: auto;
        }
    }
  }
}
::v-deep.el-table::before{
   height:0px;
   

}
::v-deep.el-table{
 background:#003052;
 border-bottom:1px solid #519dd7;

}

</style>
