<template>
    <div class="app-container">
        <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
            <el-form-item label="组织名称" prop="deptName">
                <el-input
                v-model="queryParams.deptName"
                placeholder="请输入组织名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
                />
            </el-form-item> -->
            <!-- <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="部门状态" clearable size="small">
                <el-option
                    v-for="dict in dictList"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
                </el-select>
            </el-form-item> -->
            <!-- <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form> -->

        <!-- <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                >新增</el-button>
            </el-col>
        </el-row> -->
        
        <el-row>
            <el-col :span="24" style="margin-left: 10px;margin-top: 10px;margin-bottom: 20px;">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item v-for="(breadcrumb, index) in breadcrumbArr" :key="breadcrumb.id">
                        <el-link v-if="breadcrumb.id === currentBreadCrumbKey" type="primary" @click.native="refreshThisPage(index)">{{ breadcrumb.name }}</el-link>
                        <el-link v-else type="info" @click.native="refreshThisPage(index)">{{ breadcrumb.name }}</el-link>
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>
        <!-- 组织列表 -->
        <el-table v-show="OrganizationList"
        height="250"
        :data="tableData"
        style="width: 100%">
            <el-table-column prop="agencyName" label="组织名字" width="260"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot="header" slot-scope="scope">
                    <el-button size="mini"
                        type="primary"
                        icon="el-icon-plus"
                        @click="addAgency(scope.row)"
                    >新增</el-button>
                </template>
                <template slot-scope="scope">
                <el-button size="mini"
                    type="warning"
                    icon="el-icon-plus"
                    @click="entryAgency(scope.row.agencyId)"
                >进入</el-button>
                </template>
            </el-table-column>
        </el-table>
        
         <!-- 下级机关单位/基层科室列表 -->
        <el-table v-show="officeList"
        height="250"
        :data="communityData"
        style="width: 100%">
            <el-table-column prop="departmentName" label="下级机关单位/基层科室" width="260"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot="header" slot-scope="scope">
                    <el-button size="mini"
                        type="primary"
                        icon="el-icon-plus"
                        @click="addCommunity(scope.row)"
                    >新增</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button 
                        size="mini"
                        type="warning"
                        icon="el-icon-plus"
                        @click="entryDepartment(scope.row.departmentId)"
                    >进入</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 网格列表 -->
        <el-table v-show="GridList"
        height="250"
        :data="gridData"
        style="width: 100%">
            <el-table-column prop="gridName" label="网格名字" width="260"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot="header" slot-scope="scope">
                    <el-button size="mini"
                        type="primary"
                        icon="el-icon-plus"
                        @click="addGrid(scope.row)"
                    >新增</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button 
                        size="mini"
                        type="warning"
                        icon="el-icon-plus"
                        @click="entryGrid(scope.row.gridId)"
                    >进入</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 本级工作人员 -->
        <el-table v-show="levelWorkPeoList"
        :data="agencyDataPeo"
        style="width: 100%"
        height="250">
            <el-table-column prop="name" label="本级工作人员名字" width="260"></el-table-column>
            <el-table-column prop="roles" label="本级工作人员职责" width="260"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
                <template slot="header" slot-scope="scope">
                <el-button v-if="levelPeo"
                    size="mini"
                    type="primary"
                    icon="el-icon-plus"
                    @click="addPeo(scope.row)"
                >新增</el-button>
                </template>
                <template slot-scope="scope">
                <el-button 
                    size="mini"
                    type="warning"
                    icon="el-icon-plus"
                    @click="xiuPeo(scope.row)"
                >修改</el-button>
                <el-button 
                    size="mini"
                    type="success"
                    icon="el-icon-plus"
                    @click="lookAngency(scope.row)"
                >查看</el-button>
                <el-button 
                    size="mini"
                    type="info"
                    icon="el-icon-plus"
                    @click="transfer(scope.row)"
                >调动</el-button>
                <el-button 
                    size="mini"
                    type="danger"
                    icon="el-icon-plus"
                    @click="DisablePeo(scope.row)"
                >禁用</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 下级机关单位/基层科室工作人员 -->
        <el-table height="250" v-show="ListOfOrganPersonnel"
        :data="communityDataPeo"
        style="width: 100%">
            <el-table-column prop="name" label="下级机关单位/基层科室工作人员" width="260"></el-table-column>
            <el-table-column prop="roles" label="下级机关单位/基层科室工作人员职责" width="260"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot="header" slot-scope="scope">
                <el-button v-if="deptPeo"
                    size="mini"
                    type="primary"
                    icon="el-icon-plus"
                    @click="addCommunityPeo(scope.row)"
                >新增</el-button>
                </template>
                <template>
                <el-button 
                    size="mini"
                    type="warning"
                    icon="el-icon-plus"
                    @click="xiuCommunityPeo(scope.row)"
                >修改</el-button>
                <el-button 
                    size="mini"
                    type="success"
                    icon="el-icon-plus"
                    @click="lookAngency(scope.row)"
                >查看</el-button>
                <el-button 
                    size="mini"
                    type="info"
                    icon="el-icon-plus"
                    @click="transfer(scope.row)"
                >调动</el-button>
                <el-button 
                    size="mini"
                    type="danger"
                    icon="el-icon-plus"
                    @click="DisablePeo(scope.row)"
                >禁用</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 网格工作人员 -->
        <el-table v-show="GridWorkPeoList"
        :data="gridDataPeo"
        style="width: 100%"
        height="250">
            <el-table-column prop="name" label="网格工作人员名字" width="260"></el-table-column>
            <el-table-column prop="roles" label="网格工作人员职责" width="260"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot="header" slot-scope="scope">
                <el-button v-if="GridWorkPeo"
                    size="mini"
                    type="primary"
                    icon="el-icon-plus"
                    @click="addGridPeo(scope.row)"
                >新增</el-button>
                </template>
                <template>
                <el-button 
                    size="mini"
                    type="warning"
                    icon="el-icon-plus"
                    @click="xiuGridPeo(scope.row)"
                >修改</el-button>
                <el-button 
                    size="mini"
                    type="success"
                    icon="el-icon-plus"
                    @click="lookAngency(scope.row)"
                >查看</el-button>
                <el-button 
                    size="mini"
                    type="info"
                    icon="el-icon-plus"
                    @click="transfer(scope.row)"
                >调动</el-button>
                <el-button 
                    size="mini"
                    type="danger"
                    icon="el-icon-plus"
                    @click="DisablePeo(scope.row)"
                >禁用</el-button>
                </template>
            </el-table-column>
        </el-table>

  
        <!-- 新增下级机关单位/基层科室 -->
        <el-dialog 
        title="新增部门"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
            <el-form :rules="rules">
                <el-form-item label="部门名称" prop="departmentName">
                    <el-input v-model="insertForm.departmentName" placeholder="请输入部门名称"></el-input>
                </el-form-item>
                <el-form-item label="组织编码" prop="code">
                    <el-input v-model="insertForm.code" placeholder="请输入组织编码"></el-input>
                </el-form-item>
                <el-form-item label="联系人" prop="contacts">
                    <el-input  v-model="insertForm.contacts" placeholder="请输入联系人姓名"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="mobile">
                    <el-input v-model="insertForm.mobile" placeholder="请输入联系电话"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" >
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>


        <!-- 新增网格 -->
        <div v-if="dialogVisibleGrid">
            <el-dialog 
            title="新增网格"
            :visible.sync="dialogVisibleGrid"
            width="60%"
            :before-close="handleClose">
                <el-form :rules="rules">
                    <el-form-item label="网格名称" prop="gridName">
                        <el-input v-model="GridForm.gridName" placeholder="请输入部门名称"></el-input>
                    </el-form-item>
                    <el-form-item label="网格编码" prop="GridCode">
                        <el-input v-model="GridForm.code" placeholder="请输入网格编码"></el-input>
                    </el-form-item>

                    <!-- 网格类型，下拉框 -->
                    <el-form-item label="网格类型" prop="typeTag">
                        <el-select v-model="GridForm.gridType" clearable placeholder="网格类型">
                            <el-option v-for="item in typeList" 
                                :key="item.value" 
                                :label="item.label" 
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="联系人" prop="GridContacts">
                        <el-input  v-model="GridForm.contacts" placeholder="请输入联系人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="GridMobile">
                        <el-input v-model="GridForm.mobile" placeholder="请输入联系电话"></el-input>
                    </el-form-item>

                    <!-- 组织位置 -->
                    <el-form-item>
                        <div id="container">当前点击坐标为：<span id="position"></span></div>
                    </el-form-item>

                </el-form>

                <div slot="footer" >
                    <el-button @click="cancelGrid">取 消</el-button>
                    <el-button type="primary" @click="submitGrid">确 定</el-button>
                </div>
            </el-dialog>
        </div>

        <!-- 新增人员 -->
        <div v-if="dialogVisiblePeo">
            <el-dialog 
            title="新增人员"
            :visible.sync="dialogVisiblePeo"
            width="30%"
            :before-close="handleClose">
                <el-form>
                    <el-form-item label="姓名" prop="peoName">
                        <el-input v-model="peoForm.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="mobile">
                        <el-input v-model="peoForm.mobile" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <!-- 性别下拉框 -->
                    <el-form-item label="性别" prop="gender">
                        <el-select v-model="peoForm.gender" clearable placeholder="性别">
                            <el-option v-for="item in genderList" 
                                :key="item.value" 
                                :label="item.label" 
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 专兼职下拉框 -->
                    <el-form-item label="专兼职" prop="post">
                        <el-select v-model="peoForm.post" clearable placeholder="专兼职">
                            <el-option v-for="item in postList" 
                                :key="item.value" 
                                :label="item.label" 
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 职责下拉框 -->
                    <el-form-item label="职责" prop="duty">
                        <el-select v-model="peoForm.duty" multiple placeholder="请选择">
                            <el-option
                            v-for="item in dutyList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
                <div slot="footer" >
                    <el-button @click="cancelPeo">取 消</el-button>
                    <el-button type="primary" @click="submitPeo">确 定</el-button>
                </div>
            </el-dialog>
        </div>

        <!-- 人员修改 -->
        <el-dialog 
        title="人员修改"
        :visible.sync="modifyPeo"
        width="30%"
        :before-close="handleClose">
            <el-form >
                <el-form-item label="姓名" prop="peoName">
                    <el-input v-model="peoForm.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="peoForm.mobile" placeholder="请输入手机号"></el-input>
                </el-form-item>
                性别下拉框
                <el-form-item label="性别" prop="gender">
                    <el-select v-model="peoForm.gender" clearable placeholder="性别">
                        <el-option v-for="item in genderList" 
                            :key="item.value" 
                            :label="item.label" 
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                专兼职下拉框
                <el-form-item label="专兼职" prop="post">
                    <el-select v-model="peoForm.post" clearable placeholder="专兼职">
                        <el-option v-for="item in postList" 
                            :key="item.value" 
                            :label="item.label" 
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                职责下拉框
                <el-form-item label="职责" prop="duty">
                    <el-select v-model="peoForm.duty" multiple placeholder="请选择">
                        <el-option
                        v-for="item in dutyList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" >
                <el-button @click="cancelXiugai">取 消</el-button>
                <el-button type="primary" @click="updatePeo">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 禁用弹窗 -->
        <el-dialog 
        title="确认禁用"
        :visible.sync="Disable"
        width="30%"
        :before-close="handleClose"
        >
            <span>禁用后该用户将无法登录系统，是否继续？</span>
            <div slot="footer" >
                <el-button @click="cancelDisable">取 消</el-button>
                <el-button type="primary" @click="submitDisable">确 定</el-button>
            </div>
        </el-dialog>


        <!-- 人员查看 -->
        <el-dialog
        title="人员详情"
        :visible.sync="details"
        width="30%"
        :before-close="handleClose">
            <el-form>
                <el-form-item label="姓名" >
                    <el-input  v-model="peoForm.name" placeholder="姓名" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="手机号" >
                    <el-input  v-model="peoForm.mobile" placeholder="手机号" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="组织/部门" >
                    <el-input  v-model="peoForm.zuzhi" placeholder="组织/部门" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="激活时间" >
                    <el-input  v-model="peoForm.activeTime" placeholder="激活时间" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="职位" >
                    <el-input  v-model="peoForm.duty" placeholder="职位" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" >
                <el-button type="primary" style="margin-right:170px" @click="cancelDetails">关 闭</el-button>
            </div>
        </el-dialog>

        <!-- 人员调动 -->
        <el-dialog 
        title="人员调动"
        :visible.sync="transferPeo"
        width="30%"
        :before-close="handleClose">
            <el-form>
                <el-form-item label="姓名">
                    <el-input v-model="transferForm.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="调动至">
                    <el-cascader 
                        clearable
                        :props="{ checkStrictly: true }"
                        v-model="selectValue"
                        :options="options"
                        @change="handleChange">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="调动原因">
                    <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    maxlength="500"
                    show-word-limit
                    v-model="transferForm.remarks">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" >
                <el-button @click="cancelTransfer">取 消</el-button>
                <el-button type="primary" @click="submitTransfer">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 新增组织 -->
        <el-dialog
        title="新增组织"
        :visible.sync="addNewAgency"
        width="60%"
        :before-close="handleClose">
            <el-form>
                <el-form-item label="组织名称">
                    <el-input v-model="agencyForm.agencyName" placeholder="请输入组织名称"></el-input>
                </el-form-item>

                <!-- 组织区划 -->
                <el-form-item label="组织区划">
                    <el-select v-model="zonings.areaCode" placeholder="请选择组织区划" @change="handelZoing">
                        <el-option 
                        v-for="item in zonings"
                        :key="item.areaCode"
                        :label="item.areaName"
                        :value="item.areaCode">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="组织编码">
                    <el-input v-model="agencyForm.code" placeholder="请输入组织编码"></el-input>
                </el-form-item>
                <el-form-item label="负责人">
                    <el-input v-model="agencyForm.contacts" placeholder="请输入负责人名字"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="agencyForm.mobile" placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-form-item>
                    <div id="con"></div>
                </el-form-item>
            </el-form>
            <div slot="footer" >
                <el-button @click="canceladdNewAgency">取 消</el-button>
                <el-button type="primary" @click="submitaddNewAgency">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>

import { requestPost } from "@/js/dai/request";

export default {
    data(){
        return{
            // 新增组织弹窗
            addNewAgency:false,
           // 本级人员是否显示
           levelPeo:true,
           // 部门人员是否显示
           deptPeo:false,
           // 网格人员是否显示
           GridWorkPeo:false,
           // 机关人员列表
           ListOfOrganPersonnel:false,
           // 网格人员列表
           GridWorkPeoList:false,
           // 组织列表
           OrganizationList:true,
           // 本级工作人员列表
           levelWorkPeoList:true,
           // 网格列表
           GridList:true,
           // 机关列表
           officeList:true,
           // 经纬度坐标
           lat:'11',
           lng:'11',
           latitude:'11',
           longitude:'11',
           Navigation:'',
            // 查询参数
            queryParams: {
                deptName: undefined,
                status: undefined
            },
            // 状态列表
            dictList:[],
            // 重新渲染表格状态
            refreshTable: true,
            // 是否展开，默认全部展开
            isExpandAll: true,
            // 显示搜索条件
            showSearch: true,
            // 遮罩层
            loading: true,
            // 表格树数据
            deptList: [],

            // 社区列表
            tableData:[],
            // 社区列表
            communityData:[],
            // 网格列表
            gridData:[],
            // 弹窗开关
            dialogVisible:false,
            dialogVisibleGrid:false,
            dialogVisiblePeo:false,
            Disable:false,
            details:false,
            transferPeo:false,
            // 社区添加表单项
            insertForm:{
                departmentName:'',
                code:'',
                contacts:'',
                mobile:'',
                agencyId:'',
                departmentDuty:'123'
            },
            // 网格添加表单项
            GridForm:{
                gridName:'',
                code:'',
                contacts:'',
                mobile:'',
                agencyId:'',
                manageDistrict:'',
                gridType:'',
                location: '', //坐标位置
                longitude: '11', //经度
                latitude: '11' ,//纬度
                centerAddress:''
            },
            // 新增组织
            agencyForm:{
                parentAgencyId:'',
                agencyName:'',
                level:'',
                areaCodeSwitch:'',
                areaCode:'',
                areaName:'',
                contacts:'',
                mobile:'',
                code:''
            },
            // 树
            tree:[],
            // 新增人员表单项
            peoForm:{
                name:'',
                mobile:'',
                gender:'',
                post:'',
                duty:[],
                orgType:'',
                activeTime:'',
                zuzhi:'',
            },
            // 人员调动
            transferForm:{
                name:'',
                remarks:'',
                transferTo:'',
                staffId:'',
                orgId:'',
                orgType:''
            },
            // 人员禁用
            DisableForm:{
                staffId:'',
                agencyId:'',
                customerId:''
            },
            // 当前用户信息,用于获取组织区划
            userForm:{
                areaCode:'',
                level:'',
                parentAgencyId:''
            },
            keyWords: '',
            typeList:[],
            // 性别字典
            genderList: [
                {value: '1', label: '男'},
                {value: '2', label: '女'},
            ],
            // 专兼职字典
            postList:[
                {value: 'fulltime' , label: '专职'},
                {value: 'parttime' , label: '兼职'}
            ],
            // 职责字典
            dutyList:[
                {value: 'agency_leader' , label: '单位领导'},
                {value: 'dept_leader' , label: '部门领导'},
                {value: 'party_principals' , label: '党建负责人'},
                {value: 'manager' , label: '管理员'},
                {value: 'staff' , label: '工作人员'},
                {value: 'grid_manager' , label: '网格长'},
                {value: 'grid_party_director' , label: '党建宣传员'},
                {value: 'root_manager' , label: '超级管理员'},
                {value: 'grid_member' , label: '网格员'},
            ],
            // angencuId
           agencyId: localStorage.getItem("agencyId"),

           gridOpen: false,
           communityOpen:false,

           gridOrgId:'',
           communityOrgId:'',
           // 网格工作人员列表
           gridDataPeo:[],
           // 社区工作人员列表
           communityDataPeo:[],
           // 本级工作人员列表
           agencyDataPeo:[],
           anId:localStorage.getItem("agencyId"),
           // 新增操作是否展示
           entry:false,
           // 修改操作是否展示
           modifyPeo:false,
           submitOrgid:'',
           // 级联数据
           options:[
               {
                   value:'',
                   label:'',
                   children:[
                       {
                           value:'',
                           label:'',
                           children:[]
                       },
                       {
                           value:'',
                           label:'',
                           children:[]
                       }
                   ],
               }
           ],
           selectValue: [],

            // 顶部 面包屑
            breadcrumbArr: [],
            // 面包屑 当前所属机构ID
            currentBreadCrumbKey: '',
            // 组织区划数据
            zonings:[],
            // 校验
           rules: {
                departmentName:[
                    { required: true, message: '社区名称必填', trigger: 'blur' }
                ],
                gridName:[
                    { required: true, message: '网格名称必填', trigger: 'blur' }
                ]
            }
        }
    },
    created(){
        this.getAgencyList()
        this.getCommunityList()
        this.getGridList()
        this.agencyPeo()
        // this.getNavigation()
        // 更新顶部面包屑
        this.assembleBreadcrumbArr(localStorage.getItem('agencyId'), 'agency')
    },
    
    watch: {
        dialogVisibleGrid(val) {
            if (val) {
                setTimeout(() => {
                    let _that = this
                    this.initMap(_that)
                }, 1000);
            }
        },
        addNewAgency(val) {
            if (val) {
                setTimeout(() => {
                    let _t = this
                    this.createMap(_t)
                }, 1000);
            }
        }
    },
    mounted(){
        // this.initMap()
    },
    methods:{
        // 点击后获取id
        handleChange (e) {
            console.log(e)
            this.transferForm.orgId = e[1]
            if(this.transferForm.orgId != null || ''){
                if(this.transferForm.orgId === 0){
                    this.transferForm.orgId = e[2]
                    this.transferForm.orgType = 'dept'
                } else {
                    this.transferForm.orgId = e[2]
                    this.transferForm.orgType = 'grid'
                }
            }else{
                this.transferForm.orgId = e[0]
                this.transferForm.orgType = 'agency'
            }
            
            
        },
        /** 查询组织列表 */
        async getAgencyList(){
            const url = "/gov/org/agency/agencylist"
            let params = {
                agencyId: this.agencyId
            }

            const { data, code, msg } = await requestPost(url,params)

            if(code === 0){
                this.tableData = data
            }else{
                this.$message.error(msg)
            }
        },
        /** 查询社区列表 */
        async getCommunityList(){
            const url = "/gov/org/department/departmentlist"

            let params = {
                agencyId:this.agencyId
            }

            const { data, code, msg } = await requestPost(url,params)

            if(code === 0){
                this.communityData = data
            }else{
                this.$message.error(msg)
                
            }
        },
        /** 查询网格列表 */
        async getGridList(){
            const url = "/gov/org/grid/allgrids"

            let params = {
                agencyId:this.agencyId
            }

            const { data, code, msg } = await requestPost(url,params)

            if(code === 0){
                this.gridData = data
            }else{
                this.$message.error(msg)
            }
        },

        // 查询网格人员列表
        async GridPeo(){
           const url = "/data/aggregator/org/stafflist"

           let params = {
               orgId:this.gridOrgId,
               orgType:'grid',
               pageNo:1,
               pageSize:100
           }

           const { data, code, msg } = await requestPost(url,params)

           if(code === 0){
               this.gridDataPeo = data.staffList
           } else {
               this.$message.error(msg)
           }
        },
        // 查询组织工作人员
        async agencyPeo(){
            const url = "/data/aggregator/org/stafflist"

            let params = {
                orgId:this.anId,
                orgType:'agency',
                pageNo:1,
                pageSize:100
            }

            const { data, code, msg } = await requestPost(url,params)

            if(code === 0) {
                this.agencyDataPeo = data.staffList
            } else {
                this.$message.error(msg)
            }
        },

        // 查询部门人员
        async communityPeo(){
            const url = "/data/aggregator/org/stafflist"

            let params = {
               orgId:this.communityOrgId,
               orgType:'dept',
               pageNo:1,
               pageSize:100
            }

            const { data, code, msg } = await requestPost(url,params)

            if(code === 0){
                this.communityDataPeo = data.staffList
            } else {
                this.$message.error(msg)
            }
        },
        // 添加组织
        async submit(){
            
            const url = "/gov/org/department/adddepartment"

            let params = {
                agencyId:this.insertForm.agencyId,
                departmentName:this.insertForm.departmentName,
                departmentDuty:this.insertForm.departmentDuty,
                contacts:this.insertForm.contacts,
                mobile:this.insertForm.mobile,
                code:this.insertForm.code
            }

            const { data, code, msg } = await requestPost(url,params)

            if(code === 0){
                this.$message.success("添加成功")
                this.dialogVisible = false
                this.insertForm = []
                this.getAgencyList()
                this.getCommunityList()
                this.getGridList()
                this.agencyPeo()
            }else{
                this.$message.error(msg)
            }
        },
        // 添加网格
        async submitGrid(){
            const url = "/gov/org/grid/addgrid"

            let params = {
                agencyId:this.GridForm.agencyId,
                gridName:this.GridForm.gridName,
                contacts:this.GridForm.contacts,
                mobile:this.GridForm.mobile,
                code:this.GridForm.code,
                manageDistrict:this.GridForm.manageDistrict,
                gridType:this.GridForm.gridType,
                latitude:this.lat,
                longitude:this.lng
            }

            const { data, code, msg } = await requestPost(url,params)

            if(code === 0){
                this.$message.success("添加成功")
                this.dialogVisibleGrid = false
                this.GridForm = []
                this.getAgencyList()
                this.getCommunityList()
                this.getGridList()
                this.agencyPeo()
            } else {
                this.$message.error(msg)
            }
        },

        // 添加人员
        async submitPeo(){
            const url = "/gov/org/staff/addstaffv2"

            let params = {
                orgType:this.peoForm.orgType,
                name:this.peoForm.name,
                mobile:this.peoForm.mobile,
                gender:this.peoForm.gender,
                workType:this.peoForm.post,
                roles:this.peoForm.duty,
                orgId:this.submitOrgid
            }

            const { data, code, msg } = await requestPost(url,params)

            if(code === 0){
                
                this.$message.success("添加成功")
                this.dialogVisiblePeo = false
                this.peoForm = []
                this.getAgencyList()
                this.getCommunityList()
                this.getGridList()
                this.agencyPeo()
            } else {
                this.$message.error(msg)
            }
        },

        // 人员修改
        async updatePeo(){
            const url = "/gov/org/staff/editstaff"

            let params = {
                orgType:this.peoForm.orgType,
                name:this.peoForm.name,
                mobile:this.peoForm.mobile,
                gender:this.peoForm.gender,
                workType:this.peoForm.post,
                roles:this.peoForm.duty,
                orgId:this.submitOrgid,
            }

            const { data, code, msg } = await requestPost(url,params)

            if(code === 0) {
                this.$message.success("添加成功")
                this.dialogVisiblePeo = false
                this.peoForm = []
                this.getAgencyList()
                this.getCommunityList()
                this.getGridList()
                this.agencyPeo()
            } else {
                this.$message.error(msg)
            }
        },

        // 字典
        async getDictionaries(){
            const url = "/sys/dict/data/dictlist"

            let params = {
                dictType:'grid_type'
            }
            
            const { data, code, msg } = await requestPost(url,params)

            if(code === 0){
                this.typeList = data
            } else {
                this.$message.error(msg)
            }
        },

        /** 搜索按钮操作 */
        handleQuery(){
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.deptName = undefined
            this.queryParams.status = undefined
            this.handleQuery();
        },
        /** 新增按钮操作 */
        handleAdd(row){
            this.dialogVisible=true
        },
        // 社区弹框关闭函数
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.insertFormRest()
            done();
          })
          .catch(_ => {});
        },
        // 社区新增弹框重置函数
        insertFormRest(){
            this.insertForm.name = '',
            this.insertForm.contacts = '',
            this.insertForm.code = '',
            this.insertForm.phone = ''
        },
        // 网格新增弹框重置函数
        GridFormRest(){
            this.GridForm.gridName = '',
            this.GridForm.code = '',
            this.GridForm.centerAddress = '',
            this.GridForm.contacts = '',
            this.GridForm.mobile = '',
            this.GridForm.agencyId = '',
            this.GridForm.manageDistrict = '',
            this.GridForm.gridType = '',
            this.GridForm.location = '',
            this.GridForm.longitude = '',
            this.GridForm.latitude = ''
        },
        /** 人员清空 */
        peoFormRest(){
            this.peoForm.name = '',
            this.peoForm.mobile = '',
            this.peoForm.gender = '',
            this.peoForm.post = '',
            this.peoForm.duty = ''
            
        },
        // 人员调动
        transferRest(){
            this.transferForm.name = '',
            this.transferForm.remarks = '',
            this.transferForm.transferTo = ''
            this.transferForm.staffId = '',
            this.transferForm.orgId = '',
            this.transferForm.orgType = ''
            this.selectValue = ''
            
        },
        // 新增组织
        addNewAgencyRest(){
            this.agencyForm.parentAgencyId = '',
            this.agencyForm.agencyName = '',
            this.agencyForm.level = '', 
            this.agencyForm.areaCodeSwitch = '',
            this.agencyForm.areaCode = '',
            this.agencyForm.areaName = '',
            this.agencyForm.contacts = '',
            this.agencyForm.mobile = '',
            this.agencyForm.code = '',
            this.latitude = '',
            this.longitude = ''
        },
        // 社区新增弹框取消按钮
        cancel(){
            this.dialogVisible = false
            this.insertFormRest()
        },
        // 网格新增弹框取消按钮
        cancelGrid(){
            this.dialogVisibleGrid = false
            this.GridFormRest()
            
        },
        /** 取消按钮 */
        cancelPeo(){
            this.dialogVisiblePeo = false
            this.peoFormRest()
        },
        // 修改取消
        cancelXiugai(){
            this.modifyPeo = false
            this.peoFormRest()
        },
        // 查看弹窗
        cancelDetails(){
            this.details = false
        },
        /** 人员调动取消按钮 */
        cancelTransfer(){
            this.transferRest()
            this.transferPeo = false
        },
        // 新增组织取消按钮
        canceladdNewAgency(){
            this.addNewAgencyRest()
            this.addNewAgency = false
        },
        // 进入网格，查询网格所属人员
        entryGrid(gridId){
            this.gridDataPeo = []
            this.communityDataPeo =[]
            this.agencyDataPeo = []
            this.gridOrgId = gridId
            this.deptPeo = false
            this.GridWorkPeo = true
            this.levelPeo = false
            this.GridWorkPeoList = true
            this.ListOfOrganPersonnel = false
            this.levelWorkPeoList = false
            this.OrganizationList = false
            this.officeList = false
            this.GridList = false
            this.GridPeo()
            this.assembleBreadcrumbArr(gridId, 'grid')
        },
        // 进入社区，查询社区所属人员
        entryDepartment(departmentId){
            this.gridDataPeo = []
            this.communityDataPeo = []
            this.agencyDataPeo = []
            this.communityOrgId = departmentId
            this.levelPeo = false
            this.deptPeo = true
            this.GridWorkPeo = false
            this.ListOfOrganPersonnel = true
            this.levelWorkPeoList = false
            this.GridWorkPeoList = false
            this.GridList = false
            this.OrganizationList = false
            this.officeList = false
            this.communityPeo()
            this.assembleBreadcrumbArr(departmentId, 'department')
        },

        // 进入组织，重新渲染
        entryAgency(agencyId){
            this.tableData = []
            this.communityData = []
            this.gridData = []
            this.gridDataPeo = []
            this.agencyDataPeo = []
            this.communityDataPeo = []
            this.agencyId = agencyId
            this.getCommunityList()
            this.getGridList()
            this.communityOpen = true
            this.gridOpen = true
            this.anId = agencyId
            this.agencyPeo()
            this.entry = true
            this.levelPeo = true
            this.agencyId = agencyId
            this.getAgencyList()
            this.assembleBreadcrumbArr(agencyId, 'agency')
        },
        // 新增组织
        addCommunity(row){
            
            this.insertForm.agencyId = this.anId
            this.dialogVisible = true
        },
        // 新增网格
        addGrid(row){
            this.GridForm.agencyId = this.anId
            this.getDictionaries()
            this.dialogVisibleGrid = true
            // this.initMap()
            
        },

        // 新增人员
        addPeo(row){
            
            this.dialogVisiblePeo = true
            this.peoForm.orgType = 'agency'
            this.submitOrgid = this.anId
        },
        // 修改人员
        xiuPeo(row){
            this.modifyPeo = true
            this.peoForm.orgType = 'agency'
            this.submitOrgid = this.anId
            this.peoForm.name = row.name
            this.peoForm.mobile = row.mobile
            this.peoForm.gender = row.gender
            this.peoForm.post = row.post
            this.peoForm.duty = row.roles
            console.log(row)
        },
        // 新增社区人员
        addCommunityPeo(){
            this.dialogVisiblePeo = true
            this.peoForm.orgType = 'dept'
            this.submitOrgid = this.communityOrgId
        },
        // 修改社区人员
        xiuCommunityPeo(row){
            this.modifyPeo = true
            this.peoForm.orgType = 'dept'
            this.submitOrgid = this.communityOrgId
            this.peoForm.name = row.name
            this.peoForm.mobile = row.mobile
            this.peoForm.gender = row.gender
            this.peoForm.post = row.post
            this.peoForm.duty = row.roles
        },
        // 新增网格人员
        addGridPeo(){
            this.dialogVisiblePeo = true
            this.peoForm.orgType = 'grid'
            this.submitOrgid = this.gridOrgId
        },
        // 修改网格人员
        xiuGridPeo(row){
            this.modifyPeo = true
            this.peoForm.orgType = 'grid'
            this.submitOrgid = this.gridOrgId
            this.peoForm.name = row.name
            this.peoForm.mobile = row.mobile
            this.peoForm.gender = row.gender
            this.peoForm.post = row.post
            this.peoForm.duty = row.roles
        },
        // 取消禁用按钮
        cancelDisable(){
            this.Disable = false
        },
        // 人员禁用
        DisablePeo(row){
            console.log(row)
            this.DisableForm.staffId = row.staffId
            this.Disable = true
        },
        // 确定禁用
        async submitDisable(){
            const url = "/epmetuser/customerstaff/disabledstaff"

            let params = {
                staffId:this.DisableForm.staffId,
                agencyId:this.DisableForm.agencyId,
                customerId:this.DisableForm.customerId
            }

            const { data, code, msg } = await requestPost(url,params)

            if(code === 0){
                this.$message.success("禁用成功")
                this.Disable = false
                this.getAgencyList()
                this.getCommunityList()
                this.getGridList()
                this.agencyPeo()
            } else {
                this.$message.error(msg)
            }
        },
        // 查看按钮
        async lookAngency(row){
            const url = "/data/aggregator/org/staffdetailv2"

            let params = {
                staffId:row.staffId
            }

            const { data, code, msg } = await requestPost(url,params)

            if(code === 0){
                this.peoForm.name = data.name
                this.peoForm.mobile = data.mobile
                this.peoForm.activeTime = data.activeTime
                this.peoForm.duty = data.roles
                this.peoForm.zuzhi = data.orgName
                console.log(row)
            }

            
            this.details = true
        },
        
        // 人员调动
        async transfer(row){

            this.transferForm.name = row.name
            this.transferForm.staffId = row.staffId

            this.transferPeo = true
            const url = "/gov/org/customeragency/orgtree"

            let params = {

            }
            
            const { data, code, msg } = await requestPost(url,params)

            if(code === 0){
                console.log(data)
                this.options[0].label = data.agencyName
                this.options[0].value = data.agencyId

                let depart = Array.from(data.departmentList)
                let gr = Array.from(data.gridList)

                depart.forEach(item => {
                    const ob = {
                        value:item.deptId,
                        label:item.deptName                        
                    }
                    this.options[0].children[0].children.push(ob)
                })
                    this.options[0].children[0].value = 0
                    this.options[0].children[0].label = "部门"
                    this.options[0].children[1].value = 1
                    this.options[0].children[1].label = "网格"
                gr.forEach(item => {
                    const obj = {
                        value:item.gridId,
                        label:item.gridName                        
                    }
                    this.options[0].children[1].children.push(obj)
                })
            }else{
                this.$message.error("树查询失败",msg)
            }

            
        },
        // 人员调动确定
        async submitTransfer(){
            const url = "/gov/org/staff/stafftransferv2"

            let params = {
                staffId:this.transferForm.staffId,
                orgId:this.transferForm.orgId,
                orgType:this.transferForm.orgType,
                remarks:this.transferForm.remarks
            }

            const { data, code, msg } = await requestPost(url,params)

            if(code === 0){
                this.$message.success("调动成功")
                this.transferRest()
                this.transferPeo = false
                this.getAgencyList()
                this.getCommunityList()
                this.getGridList()
                this.agencyPeo()

            } else {
                this.$message.error(msg)
            }
        },

        // 获取导航
        // async getNavigation(){

        //     const url = "/gov/org/customeragency/orgtree"

        //     let params = {

        //     }
            
        //     const { data, code, msg } = await requestPost(url,params)

        //     if(code === 0){
        //         this.Navigation = data.agencyName
        //     }
            
        async assembleBreadcrumbArr (id, orgType) {
            this.currentBreadCrumbKey = id
            if (orgType === 'agency') {
                const url = '/gov/org/agency/agencydetail'
                let params = {
                    agencyId : id,
                }
                const { data, code, msg } = await requestPost(url, params)
                if(code === 0){
                    if (data.level === 'community') {
                        this.OrganizationList = false
                    } else {
                        this.OrganizationList = true
                    }
                    if (this.breadcrumbArr.length === 0) {
                        this.breadcrumbArr = [{id: data.agencyId, name: data.agencyName, type: orgType}]
                    } else {
                        let hasBreadcrumbArr = false
                        this.breadcrumbArr.forEach(function (bc) {
                            if (bc.id === id) {
                                hasBreadcrumbArr = true
                            }
                        })
                        if (hasBreadcrumbArr === false) {
                            let breadcrumb = {id: data.agencyId, name: data.agencyName, type: orgType}
                            this.breadcrumbArr.push(breadcrumb)
                        } 
                    }
                } else {
                    this.$message.error(msg)
                }
            } else if (orgType === 'department') {
                const url = '/gov/org/department/departmentdetail'
                let params = {
                    departmentId : id,
                }
                const { data, code, msg } = await requestPost(url, params)
                if(code === 0){
                    if (this.breadcrumbArr.length === 0) {
                        this.breadcrumbArr = [{id: data.departmentId, name: data.departmentName, type: orgType}]
                    } else {
                        let hasBreadcrumbArr = false
                        this.breadcrumbArr.forEach(function (bc) {
                            if (bc.id === id) {
                                hasBreadcrumbArr = true
                            }
                        })
                        if (hasBreadcrumbArr === false) {
                            let breadcrumb = {id: data.departmentId, name: data.departmentName, type: orgType}
                            this.breadcrumbArr.push(breadcrumb)
                        } 
                    }
                } else {
                    this.$message.error(msg)
                }
            } else if (orgType === 'grid') {
                const url = '/gov/org/grid/griddetail'
                let params = {
                    gridId : id,
                }
                const { data, code, msg } = await requestPost(url, params)
                if(code === 0){
                    if (this.breadcrumbArr.length === 0) {
                        this.breadcrumbArr = [{id: data.grid, name: data.gridName, type: orgType}]
                    } else {
                        let hasBreadcrumbArr = false
                        this.breadcrumbArr.forEach(function (bc) {
                            if (bc.id === id) {
                                hasBreadcrumbArr = true
                            }
                        })
                        if (hasBreadcrumbArr === false) {
                            let breadcrumb = {id: data.grid, name: data.gridName, type: orgType}
                            this.breadcrumbArr.push(breadcrumb)
                        } 
                    }
                } else {
                    this.$message.error(msg)
                }
            }
        },

        async refreshThisPage (index) {
            const selectOrg = this.breadcrumbArr[index]
            this.breadcrumbArr = this.breadcrumbArr.slice(0, index + 1)

            const orgId = selectOrg.id
            const orgType = selectOrg.type

            if (orgType === 'agency') {
                this.entryAgency(orgId)
            } else if (orgType === 'department') {
                this.entryDepartment(orgId)
            } else if (orgType === 'grid') {
                this.entryGrid(orgId)
            }
        },
        // 获取当前用户信息
        async getUser(){
            const url = '/data/report/screen/agency/agencydetail-multic'

            let params = {
                agencyId:localStorage.getItem('agencyId')
            }

            const { data, code, msg } = await requestPost(url,params)

            if(code === 0){
                console.log(data)
                this.userForm.areaCode = data.areaCode
                this.userForm.level = data.level
                this.userForm.parentAgencyId = data.agencyId
                this.getZoning()
            }else{
                this.$message.error(msg)
            }
        },
        // 获取组织区划信息
        async getZoning(){
            const url = '/data/aggregator/org/nextlevelareacodelist'

            let params = {
                areaCode:this.userForm.areaCode,
                level:this.userForm.level,
                parentAgencyId:this.userForm.parentAgencyId
            }

            const { data, code, msg } = await requestPost(url,params)

            if(code === 0){
                this.zonings = data
            }else{
                this.$message.error(msg)
            }

        },

        handelZoing(val){
            console.log(val)
        },

        addAgency(row){
            this.addNewAgency = true
            this.getUser()
        },
        // 新增组织确定按钮
        submitaddNewAgency(){

        },

       /** 地图初始化 */
       initMap(_that) {
           
            var position = document.getElementById("position");

            var center = new window.TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
            //初始化地图
            var map = new window.TMap.Map("container", {
                center: center
            });
            
            //绑定点击事件
            map.on("click",function(evt){
                _that.lat = evt.latLng.getLat().toFixed(6);
                _that.lng = evt.latLng.getLng().toFixed(6);
                position.innerHTML = _that.lat + "," + _that.lng;
            })
        },
        createMap(_t){
            document.getElementById("con").innerHTML = ''
            document.getElementById("con").innerHTML = '当前点击坐标为：<span id="pos"></span>'
            var position = document.getElementById("pos");

            var center = new window.TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
            //初始化地图
            var map = new window.TMap.Map("con", {
                center: center
            });
            
            //绑定点击事件
            map.on("click",function(evt){
                _t.latitude = evt.latLng.getLat().toFixed(6);
                _t.longitude = evt.latLng.getLng().toFixed(6);
                position.innerHTML = _t.latitude + "," + _t.longitude;
            })

        }
        
    }
}
</script>

<style scoped>
    #container {
        width: 100%;
        height: 100%;
    }
    #info{
        left: 20px;
        top: 20px;
        font-size: 14px;
        background: #fff;
        width: 270px;
        padding: 10px;
        border-radius: 3px;
    }
    #con {
        width: 100%;
        height: 100%;
    }
</style>