<template>
  <div>
    <d2-container>
       <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"
          >
            
          </el-tree>
        </div>
        <div class="right">
       <div class="nav">当前所在位置:首页>仓房信息</div>
     
        <div class="right_main">
          <div class="right_title">
            <i
              class="fa fa-university"
              aria-hidden="true"
              style="padding-right: 5px"
            ></i
            >仓房信息
          </div>
          <div class="right_table">
            <el-form
            style="display:flex;justify-content:sapce-betweeen"
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              id="formLabel"
            >
           
           
              <el-form-item label="仓房名称:">
                <el-cascader :options="options" v-model="formInline.orgName"></el-cascader>
              </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="cfInfoList"
              border
              style="width: 100%"
              :header-cell-style="{ background: '#0064b9', color: '#c9f5fa' }"
            >
              <el-table-column
                  align="center"
                  label="序号"
                  type="index"
                  width="100px"
                   height="height:calc(100% - 51px)"
                  :index="indexMethod"
                  show-overflow-tooltip
                ></el-table-column>
              <!-- <el-table-column
                prop="ssfgs"
                label="所属分公司"
                align="center"
              >
              </el-table-column> -->
              <!-- <el-table-column
                prop="sszsk"
                label="所属直属库"
                align="center"
              >
              </el-table-column> -->
              <!-- <el-table-column
                prop="ssfk"
                label="所属分库"
                align="center"
              >
              </el-table-column> -->
              <el-table-column prop="orgName" label="仓房名称" align="center">
              </el-table-column>
              <!-- <el-table-column prop="orgName" label="品种" align="center">
              </el-table-column> -->
              <el-table-column prop="keeperName" label="保管员" align="center">
              </el-table-column>
              <el-table-column prop="lxfs" label="联系方式" align="center">
              </el-table-column>
<!-- 
              <el-table-column
                prop="lastScan"
                label="最近一次扫描时间"
                align="center"
                width="180px"
              >
              </el-table-column> -->

              <el-table-column
                prop="orgState"
                label="当前仓房状态"
                align="center"
              >
              <template slot-scope="scope">
                <div v-if="scope.row.cfStatus===1">空仓</div>
              <div v-if="scope.row.cfStatus===2">入库</div>
              <div v-if="scope.row.cfStatus===3">库存</div>
              <div v-if="scope.row.cfStatus===4">出库</div>
              </template>
              </el-table-column>
       <el-table-column align="center" label="操作" width="250">
                <template slot-scope="scope">
                  <el-button
                    @click="handleCheck(scope.row,1)"
                  type="detailbtn" class="fa fa-info-circle" size="mini"
                    >查看</el-button
                  >
                  <el-button    @click="handleEdit(scope.row,2)" type="editbtn" class="fa fa-edit" size="mini"
                    >编辑</el-button
                  >
                  <el-button    @click="deleted(scope.row)" type="delebtn" class="fa fa-remove"  size="mini"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table> 
         <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :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: "warehouseInfo",

  data() {
    // 1---空仓   2---入库   3--库存   4---出库
    return {
      //options
      options: [],
      
      //头部查询条件
      formInline: {
        orgName: "",
        // scanTime: [],
      },
      //表格字段
      cfInfoList: [],
       // 默认展开的节点
      defaultProps: {
        children: "children",

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

      // 左侧树数据
      leftList: [],
    
       //分页

      pagination: {
        //当前页数
        curPage: 1,
        //每页显示的条数
        pageSize: 10,
        //总条数
        total: 0,
      },
    };
  },
  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);
        });
    },
    //点击左侧树节点
    handleNodeClick(data, node) {
      console.log(node, "'''");
      
      if(node.childNodes.length===0){
            this.cfbh = data.id;
        console.log(this.cfbh, ";;;");
        this.getList();
      }
      
    },
    search() {
      this.getList();
    },
    reset() {
      this.formInline.orgName="";
      this.getList();
    },
     //获取列表数据
    getList() {
      console.log("....")
      var condition = {
        id: this.cfbh,
     
      };
      condition = JSON.stringify(condition);
      var data = {
        pageIndex: this.pagination.curPage,
        pageSize: this.pagination.pageSize,
        condition: condition,
      };
      api
        .wareInfoList(data)
        .then((res) => {
          console.log(res,"仓房信息")
          if (res.code == 200) {
            // console.log(res.data.records,"仓房信息")
            this.cfInfoList = res.data.records;
            this.pagination.pageSize = res.data.size;
            this.pagination.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //查看
    handleCheck(row,type){
      this.$router.push(
        {
          path:"/warehouseInfo-check",
          query:{
            row:row,
            type:type
            }
      
        }
      )
    },
    //编辑
    handleEdit(row,type){
      console.log(row,"编辑row")
         this.$router.push(
        {
          path:"/warehouseInfo-check",
          query:{
            row:row,
            type:type
            }
      
        }
      )

    },



       //删除
    deleted(row){
      console.log(row,"////")
      this.$confirm("删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
       
        let
          id=row.id
        
          
          api.deleteWareInfo(id)
            .then(res => {
          
              if (res.code && res.code == 200) {
                this.$message.success("删除成功");
                this.getList();
              } 
            })
            .catch(err=>{
              console.log(err)
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //表格序号
    indexMethod(index) {
      return (
        (this.pagination.curPage - 1) * this.pagination.pageSize + index + 1
      );
    },
     //当前页改变时
    handleCurrentChange(val) {
      this.pagination.curPage = val;
      this.getList();
    },
     //每页显示的页数改变时
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.getList();
    },
    
  },

    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);
      box-sizing: border-box;
      .right_table{
        height:calc(100% - 138px);
     
      }
        .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>