<template>
  <div class="grid-container">
      <div class="operate-container">
          <el-input type="text" size="mini" style="width:300px;margin-right:14px;"  placeholder='请输入搜索关键字'></el-input>
          <el-button icon="el-icon-search" size="mini" type="default">查询</el-button>
          <el-button icon="el-icon-plus" size="mini" type="primary" @click="addDialog">添加</el-button>
          <el-button icon="el-icon-edit" size="mini" type="primary">编辑</el-button>
          <el-button icon="el-icon-delete" size="mini" type="danger">删除</el-button>
      </div>
        <el-row :gutter="0">
            <el-col :span="4" style="margin-right:0px;height: calc( 100vh - 190px);">
                <div style="background:#1a274b;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="20" style="background:#1a274b;height: calc( 100vh - 190px);">
                <el-table
                    :data="tableData"
                    size="mini"
                    height=" "
                    border
                    style="width: 100%">
                   
                   <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>

                    <el-table-column
                    prop="areaName"
                    label="网格名称"
                    >
                    </el-table-column>

                    <el-table-column
                    prop="households"
                    label="户数"
                    >
                    </el-table-column>

                    <el-table-column
                    prop="peopleNum"
                    label="人数"
                    >
                    </el-table-column>

                    <el-table-column
                    prop="phone"
                    label="联系电话"
                    >
                    </el-table-column>

                    <el-table-column
                    prop="politicalOutlook"
                    label="身份"
                    >
                    </el-table-column>

                    <el-table-column
                    prop="userName"
                    label="网格员姓名"
                    >
                    </el-table-column>

                    <el-table-column
                    prop="userType"
                    label="网格员类型"
                    >
                    </el-table-column>
                  
                </el-table>
                <!-- <div class="page-container">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="listQuery.pageNum"
                        :page-sizes="[20,50,100, 200, 300, 400]"
                        :page-size="listQuery.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div> -->
                
            </el-col>
        </el-row>
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
            <el-form :model="ruleForm" size="mini" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="村(社区)：" prop="name">
                    <el-input v-model="ruleForm.areaName"></el-input>
                </el-form-item>


                 <el-form-item label="户数：" prop="desc">
                    <el-input type="number" v-model="ruleForm.households"></el-input>
                </el-form-item>

                <el-form-item label="人数：" prop="desc">
                    <el-input type="number" v-model="ruleForm.peopleNum"></el-input>
                </el-form-item>

                <el-form-item label="备注信息：" prop="desc">
                    <el-input type="text" v-model="ruleForm.remake"></el-input>
                </el-form-item>


                <el-form-item label="网格员名称：" prop="desc">
                    <el-input type="text" v-model="ruleForm.userName"></el-input>
                </el-form-item>

                <el-form-item label="联系电话：" prop="desc">
                    <el-input type="text" v-model="ruleForm.phone"></el-input>
                </el-form-item>

               

                <el-form-item label="身份证号：" prop="desc">
                    <el-input type="text" v-model="ruleForm.cardNo"></el-input>
                </el-form-item>

                <el-form-item label="政治面貌：" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="：" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="网格员类型：" prop="resource">
                    <el-radio-group v-model="ruleForm.userType">
                    <el-radio label="线上品牌商赞助"></el-radio>
                    <el-radio label="线下场地免费"></el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>

            </el-form>
        </el-dialog>
  </div>
</template>

<script>
import { getMethodCommon } from '../../api/Api'
import { getOrgTree,getGridUser } from '../../api/monitor'
  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 : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
                },{
                areaName: '网格名称',
                households: '户数',
                peopleNum : '人数',
                phone : '手机号码',
                politicalOutlook : '身份',
                userName : '网格员姓名',
                userType : '类型',
            },]
        }
    },
    created(){
        this.getTree();
        
    },
    mounted(){

    },
    methods:{
        addDialog(){
            this.dialogVisible = true;
        },
        getTree(){
            let _this = this;
            getOrgTree().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){
            getGridUser(data).then(res=>{
                if(res.data.code == 200){
                    this.tableData = res.data.data.dataInfo;
                }
            })
        },
        handleNodeClick(node){
            this.getUserList({id:node.id})
        }
    }
  }
</script>

<style scoped>
::v-deep .el-dialog{
    background:rgba(0,0,0,0.7);
    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;
}

::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 #00b2ff;
  color: #fff;
  border-radius:0px;
}

::v-deep .el-button{
  border-radius:0px;
}
 ::v-deep .el-form-item__label {
  color: #00b2ff;
  /* 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: #266a94;
  color: #00f261;
  border: 0;
}
 ::v-deep .el-button--info {
  background: #482c27;
  color: #8ac2da;
  border: 0;
}
 ::v-deep.el-button--primary {
  background: #266a94;
  color: #8ac2da;
  border: 0;
}
 ::v-deep.el-button--primary {
  background: #578ef0;
  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(37, 61, 75, 0.7) !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:#ccc;
}

::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:hsl(212, 43%, 49%,0.5);
  color:#eee;
  font-weight: bold;
}

::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell{
  border-color:hsl(212, 43%, 49%,1);
}



::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:#304156;
  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(0,0,0,0.3);
  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(0,0,0,0.3);
  background-color:rgba(0,0,0,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;
}

</style>