<template>
  <div class="grid-container">
        <el-row :gutter="0">
            <el-col :span="6" style="margin-right:0px;height:400px;">
                <div style="padding-top:20px;padding-left:20px;height:100%;width: calc( 100% - 10px);overflow-y:auto;">
                    <el-tree :data="data" default-expand-all :props="defaultProps"  @node-click="handleNodeClick"></el-tree>
                </div>
            </el-col>
            <el-col :span="18" style="height:400px;overflow-y:auto;">
                <div class="grid-item" v-for="(item,index) in tableData" :key="index">
                    <p><span style="font-size:24px;">{{item.areaName}}</span><span>{{item.households}}户{{item.peopleNum}}人</span></p>
                    <p>{{item.userName}} &nbsp;&nbsp;{{item.phone}}</p>
                    <p>{{item.politicalOutlook}}</p>
                    <p>{{item.userType}}</p>
                </div>
            </el-col>
        </el-row>
  </div>
</template>

<script>
import axios from 'axios';
let BASE_URL = process.env.VUE_APP_BASE_API
  export default {
    name: 'index',
    data(){
        return {
            ruleForm:{
                "areaId": 0,
                "areaName": "",
                "areaType": 0,
                "createId": "",
                "households": 0,
                "peopleNum": 0,
                "remake": "",
                "pId": 0,
                "userId": 0,
                "cardNo": "",
                "userName": "",
                "userType": "",
                "politicalOutlook": "",
                "education": "",
                "veteran": true,
                "phone": "",
                "imaUrl": ""
            },
            dialogVisible:false,
            total:100,
            listQuery:{
                pageSize:10,
                pageNum:1,
            },
            data:null,
            defaultProps: {
                children: 'child',
                label: 'areaName'
            },
            tableData: [{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
            },]
        }
    },
    created(){
        this.getTree();
        
    },
    mounted(){

    },
    methods:{
        addDialog(){
            this.dialogVisible = true;
        },
        getTree(){
            let _this = this;
            axios({method:"get",url:BASE_URL+"/Grid/LoadGridXZ",params:{'regionName':'feixian'},headers:{'X-Token':localStorage.getItem("X-Token")}}).then(res=>{
                console.log("data",res.data.data);
                if(res.data.code == 200){
                    _this.data = res.data.data;
                    this.getUserList({id:_this.data[0].child[0].child[0].id});
                    console.log("_this.data",_this.data);
                }
            })
        },
        getUserList(data){
            axios({method:"get",url:BASE_URL+"/Grid/LoadChildGridUser",params:data,headers:{'X-Token':localStorage.getItem("X-Token")}}).then(res=>{
                if(res.data.code == 200){
                    this.tableData = res.data.data.dataInfo;
                }
            })
        },
        handleNodeClick(node){
            this.getUserList({id:node.id})
        }
    }
  }
</script>

<style scoped>

.grid-item{
    width:194px;
    padding:15px 15px;
    height:140px;
    background:rgb(12, 69, 76);
    float:left;
    margin:6px;
    color:#eee;
    line-height:18px;
}
::v-deep .el-dialog{
    background:rgba(10, 235, 216, 0.295);
    color:#fff;
}
.operate-container{
    text-align:right;
    width:100%;
    height:44px;
    border-bottom:1px solid #108eff;
    margin-bottom:10px;
}
  .grid-container{
      width: calc( 100% - 0px);
      min-height:500px;
      padding:40px;
  }
/*  */
::v-deep .el-tree {

  color: #ffffff;
  /* // 整体背景透明 */
  background: rgba(0, 0, 0, 0);
}
::v-deep .el-checkbox__inner {
  /*// checkbox 背景透明  */
  background: rgba(0, 0, 0, 0);
}
::v-deep .el-tree-node__content:hover {
  /* // hover 节点背景色，否则是白色 */
  background: rgba(104, 147, 215, 0.4);
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
  /*  // focus 节点背景透明，否则是白色 */
  background-color: rgba(0, 0, 0, 0);
}


::v-deep .el-table{
  background:none;
  color:#fff;
}

::v-deep .el-table thead{
    color:#fff;
}

::v-deep .el-form-item__label{
  /* padding:0px; */
}

::v-deep .el-form-item{
  /* margin-bottom:5px; */
}


::v-deep .el-table__fixed-right::before, .el-table__fixed::before{
  height:0px;
}
::v-deep .el-table::before{
  height:0px;
}
::v-deep .el-form--inline{
  height:30px;
}
::v-deep .mapboxgl-ctrl{
  display:block;
}
::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
  border-bottom:1px solid hsl(240, 100%, 37%,0.2);
}


 ::v-deep .el-input__inner {
  background-color: transparent;
  border: 0.0625rem solid #0cf0dd;
  color: #fff;
  border-radius:0px;
}

::v-deep .el-button{
  border-radius:0px;
}
 ::v-deep .el-form-item__label {
  color: #11edf5;
  /* line-height: 2.1875rem; */
}
 ::v-deep .el-button--small {
  padding: 0.625rem 2.1875rem;
}
 ::v-deep .el-form--inline .el-form-item {
  /* margin-left: 1.875rem; */
}
 ::v-deep .el-table,
.el-table__expanded-cell {
  background: transparent !important;
}
/* “表格内背景颜色“ */
 ::v-deep.el-table th,
 ::v-deep.el-table tr,
 ::v-deep.el-table td {
  background-color: transparent !important;
}
/*  按钮样式修改 */
 ::v-deep .el-button--success {
  background: #26947c;
  color: #00f261;
  border: 0;
}
 ::v-deep .el-button--info {
  background: #482c27;
  color: #8ac2da;
  border: 0;
}
 ::v-deep.el-button--primary {
  background: #10fad3;
  color: #8ac2da;
  border: 0;
}
 ::v-deep.el-button--primary {
  background: #10f3cd;
  color: #fff;
  border: 0;
}
/*修改element-ui的table 在鼠标悬停hover时的高亮颜色*/
 ::v-deep.el-table tbody tr:hover > td {
  background-color: black !important;
}
/* 第一个 dialog修改  */
 ::v-deep.dialog_one .el-dialog {
  background: #266a94 !important;
  border: 1px solid #10a2e1;
}
 ::v-deep.dialog_one .el-dialog__title {
  color: #00b2ff;
  font-size: 2rem;
}
 ::v-deep.dialog_one .el-dialog__header {
  text-align: center;
}
/* 第二个 dialog 修改 */
 ::v-deep.dialog_two .el-dialog {
  background: rgba(21, 236, 218, 0.603) !important;
  border: 1px solid #797979;
}
 ::v-deep.dialog_two .el-dialog__body {
  padding: 10px 0;
}
 ::v-deep.dialog_two .el-dialog__header {
  padding: 0;
}


::v-deep .el-table__cell{
  background:none;
  padding:0px;
  font-size:14px;
  color:#fff!important;
}

::v-deep .cell{
  padding:0px;
  height:40px;
  line-height:40px;
  /* background:hsl(212, 43%, 49%,0.5); */
  text-align:center;
  font-size:12px;
}

::v-deep .number{
  background:none;
  color:#fff;
}

::v-deep .btn-next{
  background:none;
  color:#fff;
}

::v-deep .btn-prev{
  background:none;
  color:#fff;
}

::v-deep .el-pagination__total{
  color:#fff;
}

::v-deep .el-pagination__jump{
  color:#fff;
}

::v-deep .el-pagination button:disabled{
  background:none;
}
::v-deep .disabled{
  background:none;
}

::v-deep .el-descriptions__body{
  background:none;
  color:#ccc;
}

::v-deep .el-descriptions-row{
  background:none;
  color:#eee;
}


::v-deep .el-descriptions-item__label{
  background:rgba(14, 231, 213, 0.5);
  color:#eee;
  font-weight: bold;
}

::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell{
  border-color:rgb(71, 166, 179);
}



::v-deep .el-checkbox{
  margin-top:14px;
}

::v-deep  .el-table--scrollable-y .el-table__body-wrapper{
  overflow-x:auto;
  overflow-y:auto;
}

::v-deep .el-table--scrollable-x .el-table__body-wrapper{
  
}

::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
  display: block !important;
  z-index:99999999999999;
}
/* 滑道样式 */
::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar{
  width:0px;
  height:10px;
  background:#10e1f0;
  border-radius: 6px;
  z-index:99999999999999;
}
/* 定义滑块的样式 */
::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb{
  border-radius: 0px;
  -webkit-box-shadow:inset 0 0 6px rgba(20, 231, 247, 0.753);
  background-color:rgba(0,0,0,0.3);
  z-index:99999999999999;
}
/* 定义滑块鼠标移入时的样式 */
::v-deep .el-table--scrollable-x .el-table__body-wrapper .el-table__body-wrapper .is-scrolling-left::-webkit-scrollbar-thumb:hover{
  border-radius: 10px;
  -webkit-box-shadow:inset 0 0 6px rgba(13, 240, 228, 0.3);
  background-color:rgba(23, 221, 211, 0.4);
  z-index:99999999999999;
}

::v-deep .el-pagination__jump{
  margin-left:0px;
}


::v-deep  .el-pagination .el-select {
  width:80px;
}

::v-deep .el-pager li{
  width:10px!important;
}

::v-deep .el-pager .number{
  padding:0px;
  width:10px!important;
}

::v-deep .el-pagination .el-input__inner{
  width:80px;
}

::v-deep .mapboxgl-ctrl{
  /* display:none; */
}
::v-deep .mapboxgl-ctrl-attrib-inner{
  display:none;
}

::v-deep .el-form-item__content .is-disabled .el-input__inner{
  background-color:none!important;
}

::v-deep .mapboxgl-map canvas {
  position: absolute;
  top: 0;
  left: 0;
}

::v-deep .el-pager li{
  min-width:25px !important;
}

::v-deep .el-table--border::after, .el-table--group::after, .el-table::before{
    background:none;
}
::v-deep .el-table--border, .el-table--group{
    border:0px;
}

::v-deep .el-table--border th.el-table__cell, .el-table__fixed-right-patch{
    /* border:0px; */
}

::v-deep .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
    border:0px;
}
.page-container{
  width: 100%;
  height:60px;
  padding:15px 0px;
    border-top:1px solid #ccc;
}

     ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
  border: 0
}

::-webkit-scrollbar {
  height: 10px;
  width: 10px;
  background: transparent;
  border-radius: 5px
}

::-webkit-scrollbar-thumb {
  padding-top: 100px;
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
  background-color: #797979;
  min-height: 28px;
  border-radius: 4px;
  background-clip: padding-box
}

::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
  border: 0
}

::-webkit-scrollbar-thumb:hover {
  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
  background-color: rgba(0, 0, 0, .4)
}

::-webkit-scrollbar-thumb:active {
  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
  background-color: rgba(0, 0, 0, .5)
}
</style>