<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/Api'
  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": ""
        },
        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")
        }
        getOrgTree(querys).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 });
            this.checkTreeId = _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.checkTreeId = node.id
        this.getUserList({ id: node.id })
      }
    }
  }
</script>

<style scoped>
   ::v-deep .el-checkbox{
    margin-top: 4px!important;
  }
  ::v-deep .el-checkbox__inner{
    background-color: transparent;
    border: 0.0625rem solid #00b2ff;
    color: #fff;
    border-radius: 0px
  }
  ::v-deep .el-dialog__title {
    color: #fff;
    font-size: 14px;
  }

  ::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>