<template>
  <div class="user">
    <div style="background:#ffff;padding: 10px;">
    <div class="tabcenbox">
      <div :class="choseFlag?'ch1':'ch2'" style="border-right:1px solid #ccc" @click="choseFlag=true">注册用户</div>
      <div :class="!choseFlag?'ch1':'ch2'" @click="choseFlag=false">组织用户</div>
    </div>
    <!-- 当他为注册用户的时候 -->
    <div class="top" style="margin-left:10px" v-if="choseFlag">
        <el-form :inline="true" :model="searchMsg" class="demo-form-inline" ref="searchMsg">
        <el-form-item label="身份" prop="flag">
          <el-input v-if="searchMsg.flag==1" v-model="searchMsg.username" clearable placeholder="请输入">
            <el-select v-model="searchMsg.flag" slot="prepend" class="input-with-select" style="width:140px;" placeholder="请选择" @change="flagchange">
             <el-option label="登陆账号" value="1"></el-option>
             <el-option label="用户名" value="2"></el-option>
            </el-select>
          </el-input>
          <el-input v-else v-model="searchMsg.name" clearable placeholder="请输入">
            <el-select v-model="searchMsg.flag" slot="prepend" class="input-with-select"  style="width:140px;"  placeholder="请选择" @change="flagchange">
             <el-option label="登陆账号" value="1"></el-option>
             <el-option label="用户名" value="2"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="所属组织" prop="orgName">
          <el-input v-model="searchMsg.orgName" clearable placeholder="请输入所属组织名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

        <!-- 当他为组织用户的时候 -->
    <div class="top" style="margin-left:10px" v-else>
        <el-form :inline="true" :model="searchMsg1" class="demo-form-inline" ref="searchMsg1">
        <el-form-item label="身份" prop="flag">
          <el-input v-if="searchMsg1.flag==1" v-model="searchMsg1.username" clearable placeholder="请输入">
            <el-select v-model="searchMsg1.flag" slot="prepend" class="input-with-select" style="width:140px;" placeholder="请选择" @change="flagchange1">
             <el-option label="登陆账号" value="1"></el-option>
             <el-option label="用户名" value="2"></el-option>
            </el-select>
          </el-input>
          <el-input v-else v-model="searchMsg1.name" clearable placeholder="请输入">
            <el-select v-model="searchMsg1.flag" slot="prepend" class="input-with-select"  style="width:140px;"  placeholder="请选择" @change="flagchange1">
             <el-option label="登陆账号" value="1"></el-option>
             <el-option label="用户名" value="2"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="组织类型" prop="queryOrgType">
          <el-select v-model="searchMsg1.queryOrgType" clearable placeholder="请选择">
            <el-option label="平台用户" value="0"></el-option>
             <el-option label="代理商用户" value="1"></el-option>
             <el-option label="公司用户" value="2"></el-option>
             <el-option label="楼盘用户" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户身份" prop="userRoleType">
          <el-select v-model="searchMsg1.userRoleType" clearable placeholder="请选择">
            <el-option label="项目总" value="2"></el-option>
             <el-option label="客服" value="3"></el-option>
             <el-option label="策划" value="4"></el-option>
             <el-option label="经理" value="5"></el-option>
             <el-option label="置业顾问" value="6"></el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="状态" prop="lockFlag">
          <el-select v-model="searchMsg1.lockFlag" clearable placeholder="请选择">
              <el-option label="启用" value="0"></el-option>
              <el-option label="禁用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search1">查询</el-button>
          <el-button type="primary" @click="reset1">重置</el-button>
        </el-form-item>
      </el-form>
    </div>



    <div style="margin: 0  0 10px 10px">
       <!-- <el-button type="primary" :disabled='checkRole.length==0' @click="delIds">批量删除</el-button> -->
        <el-button type="primary" @click="addRole">添加</el-button>
    </div>
  </div>


    <!-- 表格 -->
    <div class="con" style="margin-left:10px;">
      <el-table
      :data="tableData"
       v-if="choseFlag"
       border
      @selection-change="handleSelectionChange"
      style="width: 100%;"
      :header-cell-style="{textAlign: 'center'}"
      :cell-style="{ textAlign: 'center' }"
      >
      <el-table-column
      type="selection"
      width="55"
      >
    </el-table-column>
      <el-table-column
        prop="name"
        label="用户名">
      </el-table-column>
      <el-table-column
        label="登录手机"
        prop="username"
        >
      </el-table-column>
      <el-table-column
        label="性别">
      <template slot-scope="{row}">
        {{row.sex==0?'男':'女'}}
      </template>
      </el-table-column>
      <el-table-column
        prop="orgName"
        label="所属组织">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="注册时间">
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
        <template slot-scope="scope">
          <el-tooltip style="font-size:18px" effect="dark" content="密码重置" placement="top-start">
              <i class="el-icon-unlock" style="color:#ff892a;"  @click="resetPwd(scope.row)"></i>
          </el-tooltip>
          <el-tooltip style="font-size:18px" effect="dark" content="查看" placement="top-start">
              <i class="el-icon-zoom-in" style="color:#008EF2;"  @click="editRole(scope.row,true)"></i>
          </el-tooltip>
           <el-tooltip style="font-size:18px" effect="dark" content="编辑" placement="top-start">
              <i class="el-icon-edit" style="color:red"  @click="editRole(scope.row,false)"></i>
          </el-tooltip>
          <el-tooltip style="font-size:18px" effect="dark" content="删除" placement="top-start">
              <i class="el-icon-close" style="color:#428bca"  @click="deletes(scope.row)"></i>
          </el-tooltip>
          <el-tooltip style="font-size:18px" effect="dark" content="修改客户信息状态" placement="top-start">
              <i class="el-icon-view" style="color:#428bca"  @click="editStatus(scope.row)"></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

      <el-table
      :data="tableData1"
      v-else
      border
      @selection-change="handleSelectionChange"
      style="width: 100%;"
      :header-cell-style="{textAlign: 'center'}"
      :cell-style="{ textAlign: 'center' }"
      >
      <el-table-column
      type="selection"
      width="55"
      >
    </el-table-column>
      <el-table-column
        prop="name"
        label="用户名">
      </el-table-column>
      <el-table-column
        label="登录手机"
        prop="username"
        >
      </el-table-column>
      <el-table-column
        prop="orgName"
        label="所属组织">
      </el-table-column>
      <el-table-column
        prop=""
        label="组织类型">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="组织角色">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="用户身份">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="状态">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="添加时间">
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
        <template slot-scope="scope">
          <el-button @click="gochosehouse(scope.row)" type="text" size="small">楼盘选择</el-button>
        </template>
      </el-table-column>
    </el-table>
      <el-pagination
        style="text-align:center; margin-top: 18px;"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.current"
        :page-size="page.pageSize"
        layout="total,prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>


    <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" @close='resetForm'>
    <el-form :model="form" label-width="120px" ref="form" :rules="rules" :disabled='editFlag'>
      <el-form-item label="登录手机" prop="username">
        <el-input v-model="form.username" :disabled='phoneFlag' style="width:370px"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="name">
        <el-input v-model="form.name" :disabled='phoneFlag' style="width:370px"></el-input>
      </el-form-item>
        <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="form.sex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
      <el-form-item label="登录密码" prop="password" v-if="!phoneFlag">
        <el-input v-model="form.password" style="width:370px" show-password></el-input>
      </el-form-item>
          <el-form-item label="组织类型:" prop="orgType">
        <el-select v-model="form.orgType" placeholder="请选择组织类型" style="width:370px" @change="typeChange">
          <el-option label="平台" :value="0"></el-option>
          <el-option label="代理商" :value="1"></el-option>
          <el-option label="公司" :value="2"></el-option>
          <el-option label="楼盘" :value="3"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="选择公司:"  v-if="orgFlag" prop="orgCode">
          <el-select v-model="form.orgCode"  filterable  placeholder="请选择公司" style="width:370px" @change="orgCodeChange($event,0)">
          <el-option
                v-for="item in orgList"
                :key="item.orgCode"
                :label="item.name"
                :value="item.orgCode"
                >
          </el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="选择代理商:"  v-if="agentFlag" prop="agentId">
          <el-select v-model="form.agentId"   filterable placeholder="请选择代理商" style="width:370px" @change="orgCodeChange($event,1)">
          <el-option
                v-for="item in agentList"
                :key="item.id"
                :label="item.agentName"
                :value="item.id"
                >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="角色:" v-if="roleFlag" prop="roleId">
        <el-select v-model="form.roleId" filterable  value-key="key" style="width:370px" placeholder="请选择角色">
          <el-option
                v-for="item in userList"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
                >
          </el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="身份" prop="userRoleType"  v-if="identityFlag">
            <el-select v-model="form.userRoleType"  value-key="key" style="width:370px" placeholder="请选择身份" >
                <el-option label="项目总" value="2"></el-option>
                <el-option label="客服" value="3"></el-option>
                <el-option label="策划" value="4"></el-option>
                <el-option label="经理" value="5"></el-option>
                <el-option label="置业顾问" value="6"></el-option>
            </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="add">确 定</el-button>
    </div>
</el-dialog>

    <el-dialog title="手机号验证" :visible.sync="phoneVisible" @close='$refs.phoneForm.resetFields()' width="400px">
    <el-form :model="phoneForm" label-width="100px" ref="phoneForm" :rules="phoneRules">
        <el-form-item label="登陆手机:" prop="phone">
          <el-input  style="width:200px" type="tel" maxlength="11" v-model.number="phoneForm.phone"  onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));" ></el-input>
        </el-form-item>
    </el-form>
    <div style="display:flex; justify-content: space-around;" >
      <el-button @click="phoneVisible = false">取 消</el-button>
      <el-button type="primary" @click="nextshow">确 定</el-button>
    </div>
</el-dialog>

    <el-dialog title="密码重置" :visible.sync="passwordVisible" @close='$refs.passwordForm.resetFields()' width="400px">
    <el-form :model="passwordForm" label-width="100px" ref="passwordForm" :rules="passwordRules">
        <el-form-item label="重置密码:" prop="password">
          <el-input v-model="passwordForm.password" show-password></el-input>
        </el-form-item>
    </el-form>
    <div style="display:flex; justify-content: space-around;" >
      <el-button @click="passwordVisible = false">取 消</el-button>
      <el-button type="primary" @click="editpwd">确 定</el-button>
    </div>
</el-dialog>

    <el-dialog title="绑定楼盘" :visible.sync="houseVisible"  width="800px">

    <div class="bindchoice">
      <div style="line-height: 15px; margin-right:10px">绑定方式</div>
      <el-radio-group v-model="bindFlag" @change="radioChange">
        <el-radio label="0">指定楼盘绑定</el-radio>
        <el-radio label="1">按区域绑定</el-radio>
      </el-radio-group>
    </div>
    <div v-if="bindFlag==0" class="con">
      <!-- 指定楼盘绑定 -->
      <el-form :inline="true" :model="searchhouseMsg" class="demo-form-inline" ref="searchhouseMsg">
        <el-form-item label="楼盘名称" prop="orgName">
          <el-input v-model="searchhouseMsg.orgName" clearable placeholder="请输入楼盘名称"></el-input>
        </el-form-item>
        <el-form-item label="省市" prop="">
          <el-select v-model="searchhouseMsg.queryOrgType" clearable placeholder="请选择">
            <el-option label="省" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="绑定状态" prop="">
          <el-select v-model="searchhouseMsg.queryOrgType" clearable placeholder="请选择">
            <el-option label="未绑定" value="0"></el-option>
            <el-option label="已绑定" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchHouse">查询</el-button>
          <el-button type="primary" @click="resetHouse">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- table -->
      <div>
        <el-table
      :data="housedata"
      @selection-change="handleSelectionChange1"
      border
      style="width: 100%;"
      :header-cell-style="{textAlign: 'center'}"
      :cell-style="{ textAlign: 'center' }"
      >
      <el-table-column
      type="selection"
      width="55"
      >
    </el-table-column>
      <el-table-column
        prop="propertyName"
        label="楼盘">
      </el-table-column>
      <el-table-column
        label="省市"
        >
      <template slot-scope="{row}">
        {{row.provinceName||'--'}}-{{row.cityName||'--'}}
      </template>
      </el-table-column>
      <el-table-column
        label="绑定">
        <template slot-scope="{row}">
        {{row.isSelected==0?'已绑定':'未绑定'}}
      </template>
      </el-table-column>
      <!-- <el-table-column
        prop="address"
        label="操作">
        <template slot-scope="scope">
          <el-button @click="bindhouse(scope.row)" type="text" size="small">{{scope.row.isSelected==0?'解绑':'绑定'}}</el-button>
        </template>
      </el-table-column> -->
    </el-table>
      <el-pagination
        style="text-align:center;"
        background
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"
        :current-page.sync="page.current"
        :page-size="page1.pageSize"
        layout="total,prev, pager, next, jumper"
        :total="page1.total"
      >
      </el-pagination>
      </div>

    </div>
    <div v-else class="cons">
      <!--区域楼盘绑定  -->
      <!-- 2 -->
      <div>
        <div class="area">
          <div style="line-height: 30px;">选择大区：</div>
          <el-select v-model="managerStr" clearable  collapse-tags  multiple placeholder="请选择" @change="managerChange">
            <!-- 选择大区 -->
                         <el-option
                              v-for="item1 in managerList"
                              :key="item1.id"
                              :label="item1.areaName"
                              :value="item1.provinceItem"
                              :disabled="item1.disabled"
                              >
                        </el-option>
          </el-select>
        </div>
        <div class="province" style="margin-top: 10px;">
          <div class="left" style="line-height: 30px;">
            选择城市：
          </div>
          <div class="right" >
            <div v-for="(item,index) in firstList" :key="item.id">
              <div style="display:flex;">
                <div>{{item.name}}</div>
                <el-select v-model="item.cityIds" clearable multiple placeholder="默认为全部" style="width:400px;">
                        <el-option
                              v-for="item1 in item.cityAreaList"
                              :key="item1.id"
                              :label="item1.name"
                              :value="item1.id"
                              >
                        </el-option>
              </el-select>
              <div style="line-height: 30px;margin-left: 10px;" @click="delArea(index,0)">取消</div>
              </div>
            </div>
           <div v-for="(item,index) in thirdList" :key="item.id">
              <div style="display:flex;">
                <div>
                  <el-select v-model="item.areaId" clearable :disabled='item.disabled' @change="areaChange(index,0)" placeholder="请选择" style="width:200px;  margin-right: 20px;">
                          <el-option
                              v-for="item1 in secondList"
                              :key="item1.id"
                              :label="item1.name"
                              :value="item1.id"
                              :disabled="item1.disabled"
                              >
                        </el-option>
              </el-select>
                </div>
                <el-select v-model="item.cityIds" clearable multiple placeholder="默认为全部" style="width:400px;">
                        <el-option
                              v-for="item1 in item.arr"
                              :key="item1.id"
                              :label="item1.name"
                              :value="item1.id"
                              >
                        </el-option>
              </el-select>
              <div style="line-height: 30px;margin-left: 10px;" @click="delArea(index,1)">取消</div>
              </div>
            </div>
            <!-- 当没有选择区域的时候 -->
            <div  v-if="managerStr.length==0">
            <div v-for="(item,index) in fourthList" :key="item.id">
              <div style="display:flex;">
                <div>
                  <el-select v-model="item.areaId" clearable :disabled='item.disabled' @change="areaChange(index,1)" placeholder="请选择" style="width:200px;  margin-right: 20px;">
                          <el-option
                              v-for="item1 in allCityList"
                              :key="item1.id"
                              :label="item1.name"
                              :value="item1.id"
                              :disabled="item1.disabled"
                              >
                        </el-option>
              </el-select>
                </div>
                <el-select v-model="item.cityIds" clearable multiple placeholder="默认为全部" style="width:400px;">
                        <el-option
                              v-for="item1 in item.arr"
                              :key="item1.id"
                              :label="item1.name"
                              :value="item1.id"
                              >
                        </el-option>
              </el-select>
              <div style="line-height: 30px;margin-left: 10px;" @click="delArea(index,1)">取消</div>
              </div>
            </div>
            </div>
          <div style="line-height: 30px;" @click="addArea">添加条件</div>
          </div>
        </div>
      </div>
    </div>
    <div style="display:flex; justify-content: space-around;" >
      <el-button @click="houseVisible = false">取 消</el-button>
      <el-button type="primary" @click="addHouse">确 定</el-button>
    </div>
</el-dialog>
  </div>

</template>

<script>
  import {addObj, delObj, del1Obj,fetchList, putObj} from '@/api/admin/user'
  import { getStore, setStore } from '@/util/store'
  import {deptRoleList} from '@/api/admin/role'
  import {fetchTree} from '@/api/admin/dept'
  import {tableOption} from '@/const/crud/admin/user'
  import {mapGetters} from 'vuex'

  export default {
    name: 'SysUser',
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号'));
        } else {
          if (value) {
          if(!(/^1[3456789]\d{9}$/.test(value))){
            // alert("手机号码不合法，请重新输入");
            callback(new Error('手机号码不合法，请重新输入'));
             }
          }
          callback();
        }
      };
      return {
        managerStr:[],
        choseFlag:true,
        // 获取的区域列表
        arealist:[],
        parentAndKidList:[],
        originalData:[],
        firstList:[],
        secondList:[],
        thirdList:[],
        fourthList:[],
        allCityList:[],
        managerList:[],
        bindFlag:'0',
        treeClick: '',        　//点击样式
        keywork: '',　　　　　　　//搜索关键字
        selectLabel: '',    　　//下拉框显示名称
        selectValue: '',
        orgFlag:false,
        roleFlag:false,
        identityFlag:false,
        agentFlag:false,
        treeProps: {
          　　children: "children",
          　　label: "label"
              },   　　//下拉框显示ID
        searchForm: {},
        housedata:[],
        treeOption: {
          nodeKey: 'id',
          addBtn: false,
          menu: false,
          props: {
            label: 'name',
            value: 'id'
          }
        },
        defaultProps1: {
        label: 'name',
        value: 'aid'
        },
        treeData: [],
        option: tableOption,
        treeDeptData: [],
        checkedKeys: [],
        roleProps: {
          label: 'roleName',
          value: 'roleId'
        },
        defaultProps: {
          label: 'name',
          value: 'id'
        },
        page: {
          total: 0, // 总页数
          current: 1, // 当前页数
          pageSize: 10, // 每页显示多少条,
          isAsc: false// 是否倒序
        },
       page1: {
          total: 0, // 总页数
          current: 1, // 当前页数
          pageSize: 10, // 每页显示多少条,
          isAsc: false// 是否倒序
        },
        list: [],
        listLoading: true,
        role: [],
        houseIdList:[],
        agentList:[],
        codeOrg:'',
        form: {
          name:'',//用户名
          username:'',//手机号
          sex:'0',//性别
          password:'',//密码
          orgType:'',//组织类型
          roleId:'',//角色id
          agentId:'',//代理商id
          orgCode:'',//公司标识
          userRoleType:'',//身份
        },
        phoneFlag:false,
        rolesOptions: [],
        searchMsg:{
          flag:'1',
          name:'', //用户名
          username:'',//登录名
          orgName:'',//所属组织
        },
        searchMsg1:{
          flag:'1',
          name:'', //用户名
          username:'',//登录名
          orgName:'',//所属组织
          userRoleType:'',//用户身份
          lockFlag:'',//状态
          queryOrgType:'',//组织类型

        },
        searchhouseMsg:{
          orgName:'',
          queryOrgType:''
        },
        sign:'', //用户标示，0系统用户，1公司用户 2运营用户
        roleNameList:[],
        editFlag:false,
        addFlag:true,
        userList:[],
        orgNameList:[],
        RoleByOrgCodeList:[],
        tableData:[],
        tableData1:[],
        checkRole:[],
        formTitle:'新增',
        dialogFormVisible:false,
        houseVisible:false,
        deptTreeList:[],//部门树
        roelFlag:false,
        accountId:'',
        passwordForm:{
          password:"",
          userId:null
        },
        phoneForm:{
          phone:''
        },
        phoneVisible:false,//验证手机号
        userRoleFlag:true,
        passwordVisible:false,
        orgList:[],
        phoneRules:{
           phone: [
            { required: true, message: '请填写手机号', trigger: 'blur' },
            { validator: validatePass, trigger: 'blur' }
          ]
          },
        passwordRules:{
           password: [
            { required: true, message: '请填写密码', trigger: 'blur' },
            { min: 6, max: 11, message: '长度在 6 到 11 位', trigger: 'blur' }
          ]
          },
        rules:{
          username: [
            { required: true, message: '请填写登录手机', trigger: 'blur' },
          ],
          name: [
            { required: true, message: '请填写用户名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请填写密码', trigger: 'blur' },
            { min: 6, max: 11, message: '长度在 6 到 11 位', trigger: 'blur' }
          ],
          orgType: [
            { required: true, message: '请选择组织类型', trigger: 'blur' },
          ],
          agentId: [
            { required: true, message: '请选择代理商', trigger: 'blur' },
          ],
          orgCode: [
            { required: true, message: '请选择公司', trigger: 'blur' },
          ],
          roleId:[
            { required: true, message: '请选择角色', trigger: 'blur' },
          ],
          userRoleType:[
            { required: true, message: '请选择角色身份', trigger: 'blur' },
          ],
        }
      }
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    watch: {
      choseFlag(newval,oldval){
        console.log(newval,oldval)
        this.page.current=1
        this.roleList()
        if(newval){
          // 注册用户
        }else{
          //组织用户
        }
      },
      role() {
        this.form.role = this.role
      },
      keywork(val){
      // console.log(val);
      this.$refs.tree.filter(val);
    }
    },
    created() {
      // 权限
      this.sys_user_add = this.permissions['sys_user_add']
      this.sys_user_edit = this.permissions['sys_user_edit']
      this.sys_user_del = this.permissions['sys_user_del']
      // return
      // 获取用户信息
      let info=getStore({name:'userInfo'})
      // this.sign=info.sign
      this.orgCode=info.orgCode
      // console.log(info);
      this.roleList() //table 列表
      // this.userDeptTree()// 获取部门树
      this.deptGetOrgList()//获取公司列表
      this.getAgentList()//获取代理商列表
    },
    methods: {
      // 区域改变
      managerChange(){
        console.log(this.managerStr)
           // 初始化数据
          this.firstList=[]
          this.secondList=[]
          this.thirdList=[]
          this.fourthList=[]
          if(this.managerStr.length==0){
            return
          }
          this.getParentAndKidList()

      },
      // 通过地区串获取省市
      getParentAndKidList(){
        this.$api.api.getParentAndKidList({
          areaIds:this.managerStr.join(',')
        })
        .then(res=>{
          // console.log(res)
          // 获取区域下的省数据，对数据进行处理，首先将数据分为三个数组，一个是用来存储没有多选框的，一个用来存储有多选的，一个原始数据
          // 原始数据，用来比对数据和添加使用
          this.originalData=res.data
          // 渲染第一个是text的数组
          // 这里不考虑禁用
          res.data.map(item=>{
            item.cityIds=''
          })
          this.firstList=res.data
          // 初始化数据
          this.secondList=[]
          this.thirdList=[]
          this.fourthList=[]
        })
      },
      // 删除区域
      delArea(idx,flag){
        // 第一个删除
        if(flag==0){
          // 先获取删除数组的内容，将其内容放到第三个数组里面
          let obj=this.firstList[idx]
          // obj.areaId=''
          // // 这里需要有禁用选项
          // obj.disabled=false
          // // 给定一个空数组，当他的选择时将数组内容改变
          // obj.children=[]
          this.secondList.push(obj)
          console.log(this.secondList)
          // 删除数组的指定项
          this.firstList.splice(idx,1)
        }else{
           let obj=this.thirdList[idx]
           this.secondList.push(obj)
           // 删除数组的指定项
          this.thirdList.splice(idx,1)
        }
      },
      // 点击添加时的操作
      addArea(){
        // 这是第一种情况
        if(this.managerStr.length>0){
                  // 先判断第二个数组里面是否有数据,有的时候就可以添加没的时候提示
        if(this.secondList.length==0){
          this.$message.warning('没有更多啦！')
          return
        }
        let num=0
        this.secondList.map(item=>{
          if(item.disabled){
            num++
          }
        })
        if(num==this.secondList.length){
          this.$message.warning('不能选择更多啦')
          return
        }
        // 在判断最后一项是否选择如果没选择则返回
        if(this.thirdList.length>0&&this.thirdList[this.thirdList.length-1].areaId==''){
          this.$message.warning('请选择最后一项在说')
          return
        }
        // 然后将所有的都变为禁用
        // this.secondList.map(item=>{
        //   item.disabled=true
        // })
        this.thirdList.map(item=>{
          item.disabled=true
        })
        // 在数组里面放入一个对象
        let obj={
          cityIds:'',
          areaId:'',
          arr:[],
          disabled:false
        }
        this.thirdList.push(obj)
        }else{

        if(this.fourthList.length>0&&this.fourthList[this.fourthList.length-1].areaId==''){
          this.$message.warning('请选择最后一项在说')
          return
        }
        this.fourthList.map(item=>{
          item.disabled=true
        })
          // 第二种情况，当没选择的时候
          let obj={
          cityIds:'',
          areaId:'',
          arr:[],
          disabled:false
        }
        this.fourthList.push(obj)
        }

      },
      // 选择的区域地区改变时给数组的arr赋值
      async areaChange(idx,flag){
        console.log(idx)
        // 第一种情况
        if(flag==0){
        // this.thirdList[idx].areaId
        // 循环数组获取到当前区域id下的数据给定第三个数组
        let num= this.secondList.findIndex(item=>item.id==this.thirdList[idx].areaId)
        if(num!=-1){
          this.thirdList[idx].arr=this.secondList[num].cityAreaList
          // this.secondList.splice(num,1)
          this.secondList[num].disabled=true
        }
        }else{
          // 获取选中的id并且赋值
          let num= this.allCityList.findIndex(item=>item.id==this.fourthList[idx].areaId)
          if(num!=-1){
            this.fourthList[idx].arr=await this.getValueByCondition(this.fourthList[idx].areaId)
            // this.secondList.splice(num,1)
            this.allCityList[num].disabled=true
          }

        }
      },
      // 获取所有省
      async getValueByCondition(e){
        let res=await this.$api.api.getValueByCondition(
          {pid:e}
        )
          // console.log(res)
          return res.data
      },
      // 下一步
      nextshow(){
        this.$refs.phoneForm.validate(valid=>{
          if(valid){
            // 验证电话号码
            this.$api.api.verPhone(this.phoneForm.phone)
            .then(res=>{
              console.log(res)
              // 判断数据是否已经有了
              if(res.data){
                // 由用户
                this.phoneFlag=true
                console.log(res.data.sysUser);
                this.form.name=res.data.sysUser.name
                this.form.username=res.data.sysUser.phone
                this.form.sex=res.data.sysUser.sex
              }else{
                // 没有用户
                console.log('没有用户');
                this.form.username=this.phoneForm.phone
                this.phoneFlag=false
              }
               this.phoneVisible=false
            this.dialogFormVisible=true
            })
            // return

          }
        })

      },
      search(){
        console.log(this.searchMsg,'搜索内容');
        return
        this.roleList()
      },
      search1(){
        console.log(this.searchMsg1,'搜索内容');
        return
        this.roleList()
      },
      flagchange(val){
        // if(val==1){

        // }
        this.searchMsg.name=''
        this.searchMsg.username=''
      },
      flagchange1(){
        this.searchMsg1.name=''
        this.searchMsg1.username=''
      },
      reset(){
        this.searchMsg={
          flag:'1',
          name:'', //用户名
          username:'',//登录名
          orgName:'',//所属组织
        }
      },
      reset1(){
        this.searchMsg1={
          flag:'1',
          name:'', //用户名
          username:'',//登录名
          orgName:'',//所属组织
          userRoleType:'',//用户身份
          lockFlag:'',//状态
          queryOrgType:'',//组织类型
        }
      },
      // 绑定方式改变
      radioChange(e){
        console.log(e)
          this.firstList=[]
          this.secondList=[]
          this.thirdList=[]
          this.fourthList=[]
      },
      // 查询楼盘
      searchHouse(){

      },
      // /清空楼盘
      resetHouse(){

      },
      // 绑定楼盘
      addHouse(){
        // 楼盘
        if(this.bindFlag==0){
          this.$api.api.saveHouse({
            accountId:this.accountId,
            houseIds:this.checkHouse.join(',')
          })
         .then(res=>{
           console.log(res)
         })
        }else{
          // 省市json串
          let areaJsonString=[]
          // 地区id拼成串
          let areaIds=this.managerStr.join(',')
          // 区域选择
          // 两种情况
          if(areaIds){
            // 当选择的是区域的时候
            this.firstList.map(item=>{
              let obj={
                // 省
                provinceList:item.id,
                // 市
                cityList:item.cityIds.join(','),
              }
              areaJsonString.push(obj)
            })
          this.thirdList.map(item=>{
              let obj={
                // 省
                provinceList:item.areaId,
                // 市
                cityList:item.cityIds.join(','),
              }
              areaJsonString.push(obj)
            })
          }else{
            this.fourthList.map(item=>{
              let obj={
                // 省
                provinceList:item.areaId,
                // 市
                cityList:item.cityIds.join(','),
              }
              areaJsonString.push(obj)
            })
          }
          // console.log(areaJsonString,areaIds,'数据')
          // return
          this.$api.api.areaAdd({
            accountId:this.accountId,
            areaJsonString:JSON.stringify(areaJsonString),
            areaIds
          })
          .then(res=>{
            console.log(res)
          })
        }
        this.houseVisible=true
        this.roleList()
      },
      // 楼盘绑定解绑
      // bindhouse(e){
      //   // if(e.isSelected)
      //    this.$api.api.saveHouse()
      //    .then(res=>{
      //    })
      // },
      // 获取用户列表
      roleList(){
        if(this.choseFlag){
          // 注册用户列表
          this.$api.api.registerUserList({...this.page,...this.searchMsg,orgType:localStorage.getItem('orgType')})
          .then(res=>{
            // console.log(res);
            if(res.code==0){
              this.tableData=res.data.records
              this.page.total=res.data.total
            }else{
              this.$message.waring(res.msg)
            }
          })
        }else{
          // 组织用户列表
          this.$api.api.orgUserList({...this.page,...this.searchMsg,orgType:localStorage.getItem('orgType')})
          .then(res=>{
            // console.log(res);
            if(res.code==0){
              this.tableData1=res.data.records
              this.page.total=res.data.total
            }else{
              this.$message.waring(res.msg)
            }
          })
        }
      },
      // 获取部门树
      userDeptTree(){
        this.$api.api.userDeptTree()
        .then(res=>{
          // console.log(res);
          if(res.code==0){
            this.deptTreeList=res.data
            this.codeOrg=res.data[0].orgCode
          }
        })
      },
      // 去楼盘管理
      async gochosehouse(row){
        console.log(row)
        this.accountId=row.accountId
        this.houseVisible=true
        this.gethouseList()
        // 获取区域列表
        this.areamanagerList()
        // 获取所有省列表
      // console.log(await this.getValueByCondition(0))
       this.allCityList=await this.getValueByCondition(0)

      },
      // 获取区域
      areamanagerList(){
        this.$api.api.areamanagerList({
          orgCode:this.orgCode,
        })
        .then(res=>{
          // console.log(res)
          this.managerList=res.data.records
        })
      },
      // 获取楼盘列表
      gethouseList(){
        this.$api.api.houseListWhenAddUser({
          orgType:localStorage.getItem('orgType'),
          accountId:this.accountId,
          orgCode:this.orgCode,
          current:this.page1.current,
          pageSize:this.page1.pageSize
        })
        .then(res=>{
          // console.log(res)
          this.page1.total=res.data.total
          this.housedata=res.data.records
        })
      },
      // 获取用户信息
      getUserMsg(userId){
        this.$api.api.getUserMsg({userId})
        .then(res=>{
          console.log(res);
        })
      },
      // 多选
      handleSelectionChange(e){
        this.checkRole=[]
        console.log(e);
        e.map(item=>{
           this.checkRole.push(item.id)
        })
      },
      handleSelectionChange1(e){
        this.checkHouse=[]
        console.log(e);
        e.map(item=>{
           this.checkHouse.push(item.id)
        })
      },
      delIds(){
        console.log(this.checkRole);
      this.$api.api.userDelByIds({ids:this.checkRole.join(',')})
      .then(res=>{
        console.log(res);
        if(res.code==0){
          this.$message.success('批量删除成功')
           this.roleList()
        }
      })
      },
      addRole(){
        this.phoneVisible=true
        // this.dialogFormVisible=true
        this.addFlag=true
        this.editFlag=false
        this.formTitle='添加'
      },
      // 编辑
      editRole(row,flag){
        this.getUserMsg(row.username)
        flag?this.formTitle='查看':this.formTitle='编辑'
        this.addFlag=false
        this.editFlag=flag
        this.dialogFormVisible=true
      },
      // 查询用户信息
      getUserMsg(username){
        this.userRoleFlag=false
        this.$api.api.getUserMsg({username})
        .then(res=>{
          console.log(res);
          this.form=res.data.user
          // 公司id
          this.form.orgId=res.data.role.orgId
          res.data.houseList.map(item=>{
            this.houseIdList.push(item.id)
          })
          // console.log(this.houseIdList);
          // 更改类型
          this.codeOrg=res.data.org.orgCode
          this.form.houseIdList=this.houseIdList.join(',')
          this.form.userRoleId=res.data.role.roleId
          this.form.userRoleType=res.data.user.userRoleType/1
          this.form.deptId=res.data.org.id
          this.form.deptName=res.data.org.name
          // this.roleChange(res.data.org.orgCode)

          console.log(this.form);
          this.roelFlag=true
        })
      },
      // 添加
      add(){
        if(this.editFlag){
          this.dialogFormVisible=false
          return
        }
        //  console.log(this.form);
        if(this.addFlag){
          this.$refs.form.validate((valid) => {
            if (valid) {
              this.$api.api.addUser(this.form)
              .then(res=>{
                console.log(res);
                this.roleList()
                this.dialogFormVisible=false
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        }else{
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$api.api.editUserMsg(this.form)
            .then(res=>{
              // console.log(res);
              this.roleList()
              this.dialogFormVisible=false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        }

      },
    resetForm(){
      this.$refs.form.resetFields()
       this.form.deptName=''
       this.form.deptId=''
       this.form.userRoleId=''
       this.roelFlag=false
       this.houseIdList=[]
    },
    // 重置用户密码
    resetPwd(row){
      // console.log(row);
      this.passwordForm.userId=row.userId
      this.passwordVisible=true
    },
    editpwd(){
      // console.log(this.passwordForm);
      // return
      this.$refs.passwordForm.validate((valid) => {
        if(valid){
          this.$api.api.resetPassword(this.passwordForm)
              .then(res=>{
                // console.log(res);
                if(res.code==0){
                  this.$notify.success('修改成功')
                }
                this.roleList()
                this.passwordVisible=false
              })
        }
      })
    },
    // 删除用户信息
    delRole(row){
      console.log(row);
    },
    // 修改客户信息状态
    editStatus(row){
      console.log(row);
            this.$confirm('确定修改客户信息状态为' + (row.showPhoneStatus==0?'隐藏':'显示') + ', 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          let obj={}
          obj.userId=row.id
          obj.showPhoneStatus=row.showPhoneStatus==0?1:0
          this.$api.api.updateShowPhoneStatus(obj)
          .then(res=>{
            console.log(res);
            if(res.code==0){
              this.$notify.success('修改成功')
              this.roleList();
            }
          })
          // delObj(row.userId)
          //   .then(() => {
          //     this.list.splice(index, 1)
          //     this.$notify.success('删除成功')
          //   }).catch(() => {
          //   this.$notify.error('删除失败')
          // })
        })
    },
    // 获取公司列表
    deptGetOrgList(){
      this.$api.api.findMyOrg({orgType:localStorage.getItem('orgType')})
      .then(res=>{
        console.log(res);
        this.orgList=res.data
      })
    },
    getAgentList(){
      // console.log(localStorage.getItem('orgType'))
      this.$api.api.findMyAgent({orgType:localStorage.getItem('orgType')})
      .then(res=>{
        // console.log(res)
        this.agentList=res.data
      })
    },
    //分页器
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.roleList()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.current = val;
      this.roleList()
    },
        //分页器
    handleSizeChange1(val) {
      this.page1.pageSize = val;
      this.gethouseList()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange1(val) {
      console.log(`当前页: ${val}`);
      this.page1.current = val;
      this.gethouseList()
    },
    roleChange(e=''){
        this.roelFlag=true
        this.$api.api.roleList({
          orgCode:e
        })
        .then(res=>{
          console.log(res);
          if(res.code==0){
            this.RoleByOrgCodeList=res.data
          }
        })


    },
     selectClear(){
      this.treeClick = '';
      this.form.deptName = '';
      this.form.deptId = '';
      this.roelFlag=false
    },
    filterNode(value, data){
      // console.log(value,data);
      if(!value){
        return true;
      }
      return data.name.indexOf(value) !== -1;
    },
    radioBlur(){
      this.roleChange(this.codeOrg)
    },
    nodeClick(e){
      // console.log('e改变');
      if(!e) return
        if(this.userRoleFlag){
          this.form.userRoleId=''
        }
        if(!this.addFlag){
          try{
            this.userRoleFlag=true
            this.roleChange(this.$refs.tree.node[0].orgCode)
          }
          catch{
              this.roleChange(this.codeOrg)
          }
            console.log(this.codeOrg,123);
        }else{
            // console.log('触发');
            console.log(this.$refs.tree.node[0]);
            this.codeOrg=this.$refs.tree.node[0].orgCode
            this.roleChange(this.$refs.tree.node[0].orgCode)
        }
    },
    // nodeClick(e){
    //   if(e) return
    //   console.log(this.$refs.tree.node[0].orgCode);
    //   // return
    //   this.treeClick = obj.aid;
    //   this.form.deptName = obj.name;
    //   this.form.deptId = obj.aid;
    //   this.form.userRoleId=''
    //   this.roleChange(obj.orgCode)
    // },
    checkChange(obj, node){
      console.log(obj, node);
    },
    orgCodeChange(e,idx){
      // console.log(e);
      this.form.roleId=''
      if(idx==0){
        this.$api.api.findRoleByOrgCode({
          orgCode:e
        })
        .then(res=>{
          this.userList=res.data
        })
      }else{
         this.$api.api.findRoleByOrgCode({
          agentId:e
        })
        .then(res=>{
          this.userList=res.data
        })
      }
      this.$forceUpdate()
    },
    typeChange(e){
      console.log(e);
      if(e==0){
        // 平台 只显示角色
        this.orgFlag=false
        this.roleFlag=true
        this.identityFlag=false
        this.agentFlag=false
        this.$api.api.findRoleByOrgCode({
          orgCode:null,
          agentId:null
        })
        .then(res=>{
          this.userList=res.data
        })
      }
      else if(e==1){
        // 代理商 选择代理商和角色
        this.orgFlag=false
        this.roleFlag=true
        this.identityFlag=false
        this.agentFlag=true
      }
      else if(e==2){
        // 公司  选择公司和角色
        this.orgFlag=true
        this.roleFlag=true
        this.identityFlag=false
        this.agentFlag=false
      }else{
        // 楼盘  选择公司 角色 角色身份
        this.orgFlag=true
        this.roleFlag=true
        this.identityFlag=true
        this.agentFlag=false
      }
    },
      getList(page, params) {
        this.listLoading = true
        fetchList(Object.assign({
          current: page.currentPage,
          size: page.pageSize
        }, params, this.searchForm)).then(response => {
          console.log(response);
          this.list = response.data.records
          this.page.total = response.data.total
          this.listLoading = false
        })
      },
      searchChange(param, done) {
        this.searchForm = param
        this.page.currentPage = 1
        this.getList(this.page, param)
        done()
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      currentChange(current) {
        this.page.currentPage = current
      },
      refreshChange() {
        this.getList(this.page)
      },
      handleOpenBefore(show, type) {
        window.boxType = type
        // 查询部门树
        fetchTree().then(response => {
          this.treeDeptData = response.data
        })
        // 查询角色列表
        deptRoleList().then(response => {
          this.rolesOptions = response.data
        })

        if (['edit', 'views'].includes(type)) {
          this.role = []
          for (let i = 0; i < this.form.roleList.length; i++) {
            this.role[i] = this.form.roleList[i].roleId
          }
        } else if (type === 'add') {
          this.role = []
          this.form.username = undefined
          this.form.phone = undefined
          this.form.password = undefined
        }
        show()
      },
      handleUpdate(row, index) {
        this.$refs.crud.rowEdit(row, index)
        this.form.password = undefined
      },
      create(row, done, loading) {
        if (this.form.phone && this.form.phone.indexOf('*') > 0) {
          this.form.phone = undefined
        }
        addObj(this.form).then(() => {
          this.getList(this.page)
          done()
          this.$notify.success('创建成功')
        }).catch(() => {
          loading()
        })
      },
      update(row, index, done, loading) {
        if (this.form.phone && this.form.phone.indexOf('*') > 0) {
          this.form.phone = undefined
        }
        putObj(this.form).then(() => {
          this.getList(this.page)
          done()
          this.$notify.success('修改成功')
        }).catch(() => {
          loading()
        })
      },
      deletes(row) {
        this.$confirm('此操作将永久删除该用户(用户名:' + row.username + '), 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          if(this.choseFlag){
          delObj(row.userId)
            .then(() => {
              this.roleList()
              this.$notify.success('删除成功')
            })
          }else{
          delObj1({id:row.userId,orgType:localStorage.getItem('orgType'),accountId:row.accountId})
            .then(() => {
              this.roleList()
              this.$notify.success('删除成功')
            })
          }

            // .catch(() => {
            // this.$notify.error('删除失败')
          // })
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
.cons{
  margin-top: 10px;
}
  .user {
    height: 100%;
    &__tree {
      padding-top: 3px;
      padding-right: 20px;
    }

    &__main {
      .el-card__body {
        padding-top: 0;
      }
    }
  }
  .tree-click{
  color: #4D74D6;
  font-weight: 600;
}
.tabcenbox{
  display: flex;
  width: 100%;
  height: 38px;
  text-align: center;
  margin: 10px;

  .ch1{
    background: cornflowerblue;
    color:#fff;
  }
  .ch2{
    color:#ccc;
  }

}
 .tabcenbox div{
    width: 120px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 38px;
  }
// .top{
//   /deep/ .el-form-item__content{
//     display: inline-flex ;
//   }
// }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
.bindchoice{
  display: flex;
  margin-top: 20px;
}
  .con{
    margin-top: 20px;
    padding: 20px;
    border-radius:4px;
    background: #ffff;
  }
    .area{
      display: flex;
    }
  .province{
      display: flex;
      .right{
        // display: flex;
      }
  }
</style>

