<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" @click="createDialog">编辑</el-button>
      <el-button icon="el-icon-delete" size="mini" type="danger" @click="deleteWg">删除</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%;height: 100%;"
          @selection-change="handleSelectionChange">

          <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="titleStr" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form :model="ruleForm" size="mini" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="网格名称：" prop="areaName">
          <el-input v-model="ruleForm.areaName"></el-input>
        </el-form-item>


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

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


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

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



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

        <el-form-item label="政治面貌：" prop="politicalOutlook">
          <el-select v-model="ruleForm.politicalOutlook" placeholder="请选择">
            <el-option label="群众" value="群众"></el-option>
            <el-option label="中共党员" value="中共党员"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="学历：" prop="education">
          <el-select v-model="ruleForm.education" placeholder="请选择">
            <el-option label="小学" value="小学"></el-option>
            <el-option label="初中" value="初中"></el-option>
            <el-option label="高中" value="高中"></el-option>
            <el-option label="专科" value="专科"></el-option>
            <el-option label="本科" value="本科"></el-option>
            <el-option label="研究生" value="研究生"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="网格员类型：" prop="userType">
          <el-select v-model="ruleForm.userType" placeholder="请选择">
            <el-option v-for="item in WGYTypesList" :label="item.descprtion" :value="item.descprtion" :key="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="退伍军人：" prop="veteran">
          <el-checkbox v-model="ruleForm.veteran"></el-checkbox>
        </el-form-item>

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

        <el-form-item>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')" v-if="typeName == 'add'">立即创建</el-button>
          <el-button type="primary" @click="createForm('ruleForm')" v-else>保存</el-button>
        </el-form-item>

      </el-form>

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

<script>
  import { getMethodCommon } from '../../../api/common'
  // import { getOrgTree, getGridUser, getGridUserInfo, getWGYTypes, editGrid, addGrid, DeleteGrid } from '../../api/monitor'
  import { validateMobile, validID, validateStock } from './widget/validate.js'

  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": false,
          "phone": "",
          "imaUrl": ""
        },
        titleStr:null,
        rules: {
          areaName: [
            { required: true, message: '网格名称不能为空', trigger: 'blur' },
          ],
          households: [
            { required: true, message: '户数', trigger: 'blur' },
            { validator: validateStock.bind(this), trigger: 'blur' }
          ],
          peopleNum: [
            { required: true, message: '人数', trigger: 'blur' },
            { validator: validateStock.bind(this), trigger: 'blur' }
          ],
          userName: [
            { required: true, message: '网格员名称不能为空', trigger: 'blur' },
          ],
          phone: [
            { required: true, message: '联系电话不能为空', trigger: 'blur' },
            { validator: validateMobile.bind(this), trigger: 'blur' }
          ],
          cardNo: [
            { required: true, message: '身份证号不能为空', trigger: 'blur' },
            { validator: validID.bind(this), trigger: 'blur' }
          ],
          politicalOutlook: [
            { required: true, message: '政治面貌不能为空', trigger: 'blur' },
          ],
          education: [
            { required: true, message: '学历不能为空', trigger: 'blur' },
          ],
          userType: [
            { required: true, message: '网格员类型不能为空', trigger: 'blur' },
          ],
          veteran: [
            { required: true, message: '退伍军人不能为空', trigger: 'blur' },
          ]
        },
        dialogVisible: false,
        total: 100,
        listQuery: {
          pageSize: 10,
          pageNum: 1,
        },
        data: null,
        defaultProps: {
          children: 'child',
          label: 'areaName'
        },
        tableData: [],
        checkTreeId: null,
        selectIdList: [],
        WGYTypesList: [],
        typeName: 'add'
      }
    },
    created() {
      this.getTree();
    },
    mounted() {

    },
    methods: {
      submitForm() {
        var _this = this
        console.log(this.ruleForm)
        this.ruleForm.pId = this.checkTreeId
        this.ruleForm.households = Number(this.ruleForm.households)
        this.ruleForm.peopleNum = Number(this.ruleForm.peopleNum)
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            addGrid(_this.ruleForm).then(res => {
              if (res.data.code == 200) {
                this.$message.success(res.data.msg);
                _this.dialogVisible = false
                _this.getUserList({ id: _this.checkTreeId });
              }
            })
          }
        })
      },
      createForm() {
        var _this = this
        console.log(this.ruleForm)
        this.ruleForm.areaId = this.selectIdList[0]
        this.ruleForm.pId = this.checkTreeId
        this.ruleForm.households = Number(this.ruleForm.households)
        this.ruleForm.peopleNum = Number(this.ruleForm.peopleNum)
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            editGrid(_this.ruleForm).then(res => {
              if (res.data.code == 200) {
                this.$message.success(res.data.msg);
                _this.dialogVisible = false
                _this.getUserList({ id: _this.checkTreeId });
              }
            })
          }
        })
      },
      getTypes() {
        var _this = this
        getWGYTypes().then((res) => {
          console.log(res.data.data)
          _this.WGYTypesList = res.data.data
        })
      },
      handleSelectionChange(e) {
        this.selectIdList = []
        e.forEach(item => {
          this.selectIdList.push(item.id)
        })
      },
      // 关闭弹窗
      handleClose(done) {
        this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => { });
      },
      addDialog() {
        this.dialogVisible = true;
        this.titleStr = '添加'
        this.typeName = 'add'
        this.getTypes()
        this.ruleForm = {
          "areaId": 0,
          "areaName": "",
          "areaType": 0,
          "createId": "",
          "households": 0,
          "peopleNum": 0,
          "remake": "",
          "pId": 0,
          "userId": 0,
          "cardNo": "",
          "userName": "",
          "userType": "",
          "politicalOutlook": "",
          "education": "",
          "veteran": false,
          "phone": "",
          "imaUrl": ""
        }

      },
      createDialog() {
        if (this.selectIdList.length == 0) {
          this.$message.warning('至少选中一个进行编辑');
          return
        }else if(this.selectIdList.length > 1) {
          this.$message.warning('只能选中一个进行编辑');
          return
        }
        this.getTypes()

        var _this = this
        this.dialogVisible = true;
        this.titleStr = '编辑'
        this.typeName = 'create'
        getGridUserInfo({ id: _this.selectIdList[0] }).then(res => {
          if (res.data.code == 200) {
            console.log(res.data.data)
            _this.ruleForm = res.data.data[0]
          }
        })
      },
      deleteWg() {
        var _this = this
        if (this.selectIdList.length == 0) {
          this.$message.warning('至少选中一个进行删除');
          return
        }else if(this.selectIdList.length > 1) {
          this.$message.warning('只能选中一个进行删除');
          return
        }
        this.$confirm("确认删除？")
          .then(() => {
            DeleteGrid({ AreaId: _this.selectIdList[0] }).then(res => {
              if (res.data.code == 200) {
                this.$message.success(res.data.msg);
                _this.dialogVisible = false
                _this.getUserList({ id: _this.checkTreeId });
              }
            })
          })
          .catch((_) => { });

      },
      getTree() {
        let _this = this;
        var querys = {
          regionName: localStorage.getItem("areaENName")
        }
        
        getMethodCommon("/Grid/LoadAllGrid",querys).then(res => {
          console.log("data", res.data);
          if (res.code == 200) {
            _this.data = res.data;
            // this.getUserList({ id: _this.data[0].child[0].child[0].id });
            // this.checkTreeId = _this.data[0].child[0].child[0].id
            console.log("_this.data", _this.data);
          }
        })
      },
      getUserList(data) {
        getMethodCommon("/Grid/LoadChildGridUser",data).then(res => {
          if (res.code == 200) {
            this.tableData = res.data.dataInfo;
          }
        })
      },
      handleNodeClick(node) {
        this.checkTreeId = node.id
        console.log("node",node);
        this.getUserList({ id: node.id })
      }
    }
  }
</script>

<style scoped>

  .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:0px 20px;
  }

  /*  */
  ::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--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;
  }


  .page-container {
    width: 100%;
    height: 60px;
    padding: 15px 0px;
    border-top: 1px solid #ccc;
  }

::v-deep .el-pagination__jump{
    color: #fff;
  }
  ::v-deep .sticky{
    background: rgba(0, 9, 34, 0.6);
  }
  ::v-deep .dialog-mini .el-dialog__header {
    background: rgba(10,39,78, 1);
  }

  ::v-deep .dialog-mini .el-dialog__header .el-dialog__title {
    color: #fff;

  }

  ::v-deep .el-descriptions__body {
    background: rgba(0, 9, 34, 1);
    color: #fff;
  }

  ::v-deep .el-descriptions-item__label.is-bordered-label {
    background: rgba(0, 9, 34, 0.6);
    color: #fff;
  }

  ::v-deep .el-input__inner {
    background: rgba(0, 9, 34, 1);
    color: #fff;
  }

  ::v-deep .el-dialog {
    background: rgba(10,39,78, 1);

  }

  ::v-deep .el-loading-mask {
    background: rgba(0, 9, 34, 0.9);

  }

  ::v-deep .el-table {
    background: rgba(0, 9, 34, 0.6);
    border-left: 1px solid #00EDE8;
  }

  ::v-deep .el-table .el-table__body tr:hover td {
    background: rgba(24, 77, 143, 0.4) !important;
    cursor: pointer;
  }

  ::v-deep .el-table .el-table__body tr.current-row td {
    cursor: pointer;
    background: rgba(24, 77, 143, 0.4) !important;
  }

  ::v-deep .el-table tr {
    background: rgba(0, 9, 34, 0.6);
    border: none;
    color: #fff;

  }

  ::v-deep .el-table th.el-table__cell {
    background: rgba(0, 9, 34, 0.6);
    color: #fff;
    border: 1px solid #00EDE8;

  }

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

  ::v-deep .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid #00EDE8;
  }

  ::v-deep .el-table--border .el-table__cell,
  .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #00EDE8;
  }

  ::v-deep .pagination-container {
    background: rgba(0, 9, 34, 0.6) !important;
    border: none;
  }
  
</style>