<template>
  <div class="users-wrapper">
    <div class="uesrs-type-wrapper">
      <el-dropdown class="my-users" @command="userTypeSelect">
        <el-button class="el-dropdown-link" style="border:none;">
          {{ curUser }}<i class="el-icon-arrow-down el-icon--right" />
        </el-button>
        <!--  -->
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="政府用户">政府用户</el-dropdown-item>
          <el-dropdown-item command="运营商用户">运营商用户</el-dropdown-item>
          <el-dropdown-item command="企业管理用户">企业管理用户</el-dropdown-item>
          <el-dropdown-item divided command="企业员工用户">企业员工用户</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div v-show="curUser === '政府用户'" class="users-gov-wrapper">
      <div class="gov-tools-wrapper">
        <el-button type="primary" @click="clickToAddGovUserDialogShow">新增政府用户</el-button>
        <el-button type="warning" style="margin-left: 20px;" :disabled="disableGovEdit" @click="clickToEditGovUserDialogShow">编辑政府用户</el-button>
        <el-button type="danger" style="margin-left: 20px;" :disabled="disableGovDelete" @click="clickToDeleteGovUserDialogShow">删除政府用户</el-button>
      </div>
      <el-table
        v-loading=""
        :data="govUsers"
        border
        @selection-change="handleGovSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="username"
          label="用户名"
          width="180"
        />
        <el-table-column
          prop="nickName"
          label="姓名"
          width="180"
        />
        <el-table-column
          prop="thIndustryChargeDept.icdName"
          label="所属局"
          width="160"
        />
        <el-table-column
          label="角色"
          width="160"
        >
          <template slot-scope="scope">
            {{ (scope.row.roles && scope.row.roles.length && scope.row.roles.length > 0)?scope.row.roles.map(item => item.name).join(' ') : '' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="wechat"
          label="微信号"
          width="180"
        />
        <el-table-column
          prop="phone"
          label="手机号"
          width="240"
        />
      </el-table>
      <el-pagination
        :current-page="currentGovPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="currentGovPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalGovPageSize"
        @size-change="handleGovSizeChange"
        @current-change="handleGovCurrentChange"
      />
      <el-dialog
        title="新增政府用户"
        :visible.sync="govUserDialogShow"
        :close-on-click-modal="false"
      >
        <el-form
          v-if="govUserDialogShow"
          ref="addGovUserForm"
          :model="govFormInfo"
          :rules="govRules"
        >
          <el-form-item
            prop="username"
            label="用户名"
            label-width="120px"
          >
            <el-input v-model="govFormInfo.username" />
          </el-form-item>
          <el-form-item
            prop="password"
            label="密码"
            label-width="120px"
          >
            <el-input v-model="govFormInfo.password" type="password" />
          </el-form-item>
          <el-form-item
            prop="nickName"
            label="姓名"
            label-width="120px"
          >
            <el-input v-model="govFormInfo.nickName" />
          </el-form-item>
          <el-form-item
            prop="thIndustryChargeDept.icdId"
            label="所属局"
            label-width="120px"
          >
            <el-select v-model="govFormInfo.thIndustryChargeDept.icdId" placeholder="请选择所属局">
              <el-option v-for="item in chargeDepts" :key="item.icdId" :label="item.icdName" :value="item.icdId" />
            </el-select>
          </el-form-item>
          <el-form-item
            label="角色"
            label-width="120px"
          >
            <el-select
              v-model="govFormInfo.roles"
              multiple
            >
              <el-option
                v-for="(item, index) in curRoles"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="微信号"
            label-width="120px"
          >
            <el-input v-model="govFormInfo.wechat" />
          </el-form-item>
          <el-form-item
            label="电话"
            label-width="120px"
          >
            <el-input v-model="govFormInfo.phone" />
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button type="info" @click="cancelAddGovUser">取消</el-button>
          <el-button type="primary" :loading="isAddGovUserBtnLoading" @click="submitGovUser">提交</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="编辑政府用户"
        :visible.sync="editGovUserDialogShow"
        :close-on-click-modal="false"
      >
        <el-form
          v-if="editGovUserDialogShow"
          ref="editGovUserForm"
          :model="editGovFormInfo"
          :rules="editGovRules"
        >
          <el-form-item
            prop="username"
            label="用户名"
            label-width="120px"
          >
            <el-input v-model="editGovFormInfo.username" />
          </el-form-item>
          <el-form-item
            prop="password"
            label="密码"
            label-width="120px"
          >
            <el-input v-model="editGovFormInfo.password" type="password" />
          </el-form-item>
          <el-form-item
            prop="nickName"
            label="姓名"
            label-width="120px"
          >
            <el-input v-model="editGovFormInfo.nickName" />
          </el-form-item>
          <el-form-item
            prop="thIndustryChargeDept.icdName"
            label="所属局"
            label-width="120px"
          >
            <el-select v-model="editGovFormInfo.thIndustryChargeDept.icdId" placeholder="请选择所属局">
              <el-option v-for="item in chargeDepts" :key="item.icdId" :label="item.icdName" :value="item.icdId" />
            </el-select>
          </el-form-item>
          <el-form-item
            label="角色"
            label-width="120px"
          >
            <el-select
              v-model="editGovFormInfo.roles"
              multiple
            >
              <el-option
                v-for="(item, index) in curRoles"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="微信号"
            label-width="120px"
          >
            <el-input v-model="editGovFormInfo.wechat" />
          </el-form-item>
          <el-form-item
            label="电话"
            label-width="120px"
          >
            <el-input v-model="editGovFormInfo.phone" />
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="cancelEditGovUser">取消</el-button>
          <el-button type="primary" :loading="isEditGovUserBtnLoading" @click="submitEditGovUser">提交</el-button>
        </div>
      </el-dialog>
    </div>
    <div v-show="curUser === '运营商用户'" class="users-operator-wrapper">
      <div class="operators-tools-wrapper">
        <el-button type="primary" @click="addOperatorShow">新增运营商用户</el-button>
        <el-button type="warning" style="margin-left: 20px;" :disabled="disableOperatorEdit" @click="editOperatorShow">编辑运营商用户</el-button>
        <el-button type="danger" style="margin-left: 20px;" :disabled="disableOperatorDelete" @click="deleteOperator">删除运营商用户</el-button>
      </div>
      <el-table
        :data="OperatorUsers"
        border
        @selection-change="multipleOperatorSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="username"
          label="用户名"
          width="180"
        />
        <!-- <el-table-column
          prop="password"
          label="密码"
          width="180"
        /> -->
        <el-table-column
          prop="nickName"
          label="姓名"
        />
        <el-table-column
          label="所属角色"
        >
          <template slot-scope="scope">
            {{ (scope.row.roles && scope.row.roles.length && scope.row.roles.length > 0)?scope.row.roles.map(item => item.name).join(' ') : '' }}
          </template>
        </el-table-column>
        <el-table-column
          label="所属部门"
          prop="dept.name"
        />
        <el-table-column
          label="所属分组"
        >
          <template slot-scope="scope">
            {{ scope.row.groupId ? curGroups.filter(item => item.groupId === scope.row.groupId)[0].groupName: '' }}
          </template>
        </el-table-column>
        <el-table-column
          label="v网号"
          prop="vNetNum"
        />
        <el-table-column
          label="手机号"
          prop="phone"
        />
        <el-table-column
          label="备注"
          prop="remarks"
        />
        <el-table-column
          label="微信号"
          prop="wechat"
        />
      </el-table>
      <el-pagination
        :current-page="currentOperatorPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="currentOperatorPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalOperatorPageSize"
        @size-change="handleOperatorSizeChange"
        @current-change="handleCurrentOperatorChange"
      />
      <el-dialog
        title="新增运营商用户"
        :visible.sync="operatorUserDialogShow"
        :close-on-click-modal="false"
      >
        <el-form
          v-if="operatorUserDialogShow"
          ref="operatorForm"
          :model="operatorFormInfo"
          label-width="120px"
          :rules="operatorRules"
        >
          <el-form-item
            label="用户名"
            prop="username"
          >
            <el-input
              v-model="operatorFormInfo.username"
            />
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
          >
            <el-input
              v-model="operatorFormInfo.password"
              type="password"
            />
          </el-form-item>
          <el-form-item
            label="姓名"
            prop="nickName"
          >
            <el-input
              v-model="operatorFormInfo.nickName"
            />
          </el-form-item>
          <el-form-item
            label="所属部门"
            prop="dept"
          >
            <treeselect
              v-model="operatorFormInfo.dept"
              :options="curDepts"
              :normalizer="normalizer"
              placeholder="请选择部门"
            />
          </el-form-item>
          <el-form-item
            label="角色"
            label-width="120px"
          >
            <el-select
              v-model="operatorFormInfo.roles"
              multiple
            >
              <el-option
                v-for="(item, index) in curRoles"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="分组名"
            prop="groupId"
          >
            <el-select v-model="operatorFormInfo.groupId">
              <el-option
                v-for="item in curGroups"
                :key="item.groupName"
                :label="item.groupName"
                :value="item.groupId"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="v网号"
            prop="vNetNum"
          >
            <el-input v-model="operatorFormInfo.vNetNum" />
          </el-form-item>
          <el-form-item
            label="电话"
            prop="phone"
          >
            <el-input
              v-model="operatorFormInfo.phone"
            />
          </el-form-item>
          <el-form-item
            label="备注"
            prop="remarks"
          >
            <el-input
              v-model="operatorFormInfo.remarks"
            />
          </el-form-item>
          <el-form-item
            label="微信号"
            prop="wechat"
          >
            <el-input
              v-model="operatorFormInfo.wechat"
            />
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button type="info" @click="clicktoCancelAddOperator">取消</el-button>
          <el-button type="primary" :loading="isAddOperatorBtnLoading" @click="clicktoSubmitAddOperator">提交</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="编辑运营商用户"
        :visible.sync="editOperatorUserDialogShow"
        :close-on-click-modal="false"
      >
        <el-form
          v-if="editOperatorUserDialogShow"
          ref="editOperatorForm"
          :model="editOperatorFormInfo"
          label-width="120px"
          :rules="operatorRules"
        >
          <el-form-item
            prop="username"
            label="用户名"
          >
            <el-input
              v-model="editOperatorFormInfo.username"
            />
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
          >
            <el-input
              v-model="editOperatorFormInfo.password"
              type="password"
            />
          </el-form-item>
          <el-form-item
            label="姓名"
            prop="nickName"
          >
            <el-input
              v-model="editOperatorFormInfo.nickName"
            />
          </el-form-item>
          <el-form-item
            label="所属部门"
            prop="dept"
          >
            <treeselect
              v-model="editOperatorFormInfo.dept"
              :options="curDepts"
              :normalizer="normalizer"
              placeholder="请选择部门"
            />
          </el-form-item>
          <el-form-item
            label="角色"
            label-width="120px"
          >
            <el-select
              v-model="editOperatorFormInfo.roles"
              multiple
            >
              <el-option
                v-for="(item, index) in curRoles"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="分组名"
            prop="groupId"
          >
            <el-select v-model="editOperatorFormInfo.groupId">
              <el-option
                v-for="item in curGroups"
                :key="item.groupName"
                :label="item.groupName"
                :value="item.groupId"
              />
            </el-select>
          </el-form-item>

          <el-form-item
            label="v网号"
            prop="vNetNum"
          >
            <el-input v-model="editOperatorFormInfo.vNetNum" />
          </el-form-item>
          <el-form-item
            label="电话"
            prop="phone"
          >
            <el-input
              v-model="editOperatorFormInfo.phone"
            />
          </el-form-item>
          <el-form-item
            label="备注"
            prop="remarks"
          >
            <el-input
              v-model="editOperatorFormInfo.remarks"
            />
          </el-form-item>
          <el-form-item
            label="微信号"
            prop="wechat"
          >
            <el-input
              v-model="editOperatorFormInfo.wechat"
            />
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button type="info" @click="cancalEditOperator">取消</el-button>
          <el-button type="primary" :loading="isEditOperatorBtnLoading" @click="submitEditOperator">提交</el-button>
        </div>
      </el-dialog>
    </div>
    <div v-show="curUser === '企业管理用户'" class="users-enterprise-manager-wrapper">
      <div class="enterprise-Manager-tools-wrapper">
        <el-button type="primary" @click="clicktoAddEnterpriseUser">新增企业管理用户</el-button>
        <el-button type="warning" style="margin-left: 20px;" :disabled="disableEnterpriseManagerEdit" @click="clicktoEditEnterpriseManager">编辑企业管理用户</el-button>
        <el-button type="danger" style="margin-left: 20px;" :disabled="disableEnterpriseManagerDelete" @click="clicktoDeleteEnterpriseManager">删除企业管理用户</el-button>
      </div>
      <el-table
        :data="enterpriseManagerUsers"
        border
        @selection-change="handleEnterpriseManagerChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="username"
          label="用户名"
          width="180"
        />
        <el-table-column
          prop="nickName"
          label="姓名"
          width="140"
        />
        <el-table-column
          prop="companyName"
          label="所属企业"
          width="240"
        />
        <el-table-column
          label="角色"
          width="130"
        >
          <template slot-scope="scope">
            {{ (scope.row.roles && scope.row.roles.length && scope.row.roles.length > 0)?scope.row.roles.map(item => item.name).join(' ') : '' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="wechat"
          label="微信号"
          width="280"
        />
        <el-table-column
          prop="phone"
          label="手机号"
          width="140"
        />
        <el-table-column
          label="审核"
          fixed="right"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.verifyStatus" style="text-align: center;color: #bbb;">已审核</div>
            <div v-else style="display: flex;justify-content: center;"><el-button type="primary" @click="verifyUser(scope.row.id)">审核</el-button></div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentEnterpriseManagerPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="currentEnterpriseManagerPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalEnterpriseManagerSize"
        @size-change="handleEnterpriseManagerSizeChange"
        @current-change="handleCurrentEnterpriseMangerChange"
      />
      <el-dialog
        title="新增企业管理用户"
        :visible.sync="addEnterpriseManagerDialogShow"
        :close-on-click-modal="false"
      >
        <el-form
          v-if="addEnterpriseManagerDialogShow"
          ref="addEnterpriseManagerForm"
          :model="enterpriseManagerFormInfo"
          label-width="120px"
          :rules="enterpriseManagerRules"
        >
          <el-form-item
            prop="username"
            label="用户名"
          >
            <el-input v-model="enterpriseManagerFormInfo.username" />
          </el-form-item>
          <el-form-item
            prop="password"
            label="密码"
          >
            <el-input v-model="enterpriseManagerFormInfo.password" type="password" />
          </el-form-item>
          <el-form-item
            prop="nickName"
            label="姓名"
          >
            <el-input v-model="enterpriseManagerFormInfo.nickName" />
          </el-form-item>
          <el-form-item
            prop="companyId"
            label="所属企业"
          >
            <el-select
              v-model="enterpriseManagerFormInfo.companyId"
              filterable
              remote
              :remote-method="remoteMethod"
            >
              <el-option
                v-for="item in curEnterprises"
                :key="item.companyId"
                :label="item.companyName"
                :value="item.companyId"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item
            prop="roles"
            label="角色"
          >
            <el-select v-model="enterpriseManagerFormInfo.roles">
              <el-option
                v-for="(item, index) in curRoles"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item
            prop="wechat"
            label="微信号"
          >
            <el-input v-model="enterpriseManagerFormInfo.wechat" />
          </el-form-item>
          <el-form-item
            prop="phone"
            label="手机号"
          >
            <el-input v-model="enterpriseManagerFormInfo.phone" />
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button type="info" @click="cancelAddEnterpriseManager">取消</el-button>
          <el-button type="primary" :loading="isAddEnterpriseManagerLoading" @click="submitEnterpriseManager">提交</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="编辑企业管理用户"
        :visible.sync="editEnterpriseManagerDialogShow"
        :close-on-click-modal="false"
      >
        <el-form
          v-if="editEnterpriseManagerDialogShow"
          ref="editEnterpriseManagerForm"
          :model="editEnterpriseManagerFormInfo"
          label-width="120px"
          :rules="enterpriseManagerRules"
        >
          <el-form-item
            prop="username"
            label="用户名"
          >
            <el-input v-model="editEnterpriseManagerFormInfo.username" />
          </el-form-item>
          <el-form-item
            prop="password"
            label="密码"
          >
            <el-input v-model="editEnterpriseManagerFormInfo.password" type="password" />
          </el-form-item>
          <el-form-item
            prop="nickName"
            label="姓名"
          >
            <el-input v-model="editEnterpriseManagerFormInfo.nickName" />
          </el-form-item>
          <el-form-item
            prop="enterpriseName"
            label="所属企业"
          >
            <el-select
              v-model="editEnterpriseManagerFormInfo.companyId"
              filterable
              remote
              :remote-method="remoteMethod"
            >
              <el-option
                v-for="item in curEnterprises"
                :key="item.companyId"
                :label="item.companyName"
                :value="item.companyId"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item
            prop="roles"
            label="角色"
          >
            <el-select v-model="editEnterpriseManagerFormInfo.roles">
              <el-option
                v-for="(item, index) in curRoles"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item
            prop="wechat"
            label="微信号"
          >
            <el-input v-model="editEnterpriseManagerFormInfo.wechat" />
          </el-form-item>
          <el-form-item
            prop="phone"
            label="手机号"
          >
            <el-input v-model="editEnterpriseManagerFormInfo.phone" />
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button type="info" @click="cancelEditEnterpriseManager">取消</el-button>
          <el-button type="primary" :loading="isEditEnterpriseManagerLoading" @click="submitEditEnterpriseManager">提交</el-button>
        </div>
      </el-dialog>
    </div>
    <div v-show="curUser === '企业员工用户'" class="users-enterprise-staff-wrapper">
      <div class="enterprise-staff-tools-wrapper">
        <!-- <el-button type="primary" @click="addEnterpriseStaffDialog">新增企业员工用户</el-button>
        <el-button type="warning" style="margin-left: 20px;" :disabled="disableEnterpriseStaffEdit" @click="editEnterpriseStaffDialog">编辑企业员工用户</el-button>
        <el-button type="danger" style="margin-left: 20px;" :disabled="disableEnterpriseStaffDelete" @click="deleteEnterpriseStaff">删除企业员工用户</el-button> -->
      </div>
      <el-table
        :data="enterpriseStaffUsers"
        border
        @selection-change="handleEnterpriseStaffChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="username"
          label="用户名"
          width="180"
        />
        <el-table-column
          prop="nickName"
          label="姓名"
          width="140"
        />
        <el-table-column
          prop="companyName"
          label="所属企业"
          width="240"
        />
        <el-table-column
          prop="wechat"
          label="微信号"
          width="280"
        />
        <el-table-column
          prop="phone"
          label="手机号"
          width="140"
        />
        <el-table-column
          label="审核状态"
          width="140"
        >
          <template slot-scope="scope">
            <!-- <div style="display:flex;justify-content: center;align-items: center;">
              {{ scope.row.verifyStatus? '已审核' : '未审核' }}
            </div> -->
            <div>
              {{ scope.row.verifyStatus? '已审核' : '未审核' }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentEnterStaffPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="currentEnterStaffPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalEnterStaffPageSize"
        @size-change="handleEnterpriseStaffSizeChange"
        @current-change="handleCurrentEnterpriseStaffChange"
      />
      <el-dialog
        title="新增企业员工用户"
        :visible.sync="addEnterpriseStaffDialogShow"
        :close-on-click-modal="false"
      >
        <el-form
          v-if="addEnterpriseStaffDialogShow"
          ref="addEnterpriseStaffForm"
          :model="enterpriseStaffFormInfo"
          label-width="120px"
          :rules="enterpriseManagerRules"
        >
          <el-form-item
            prop="username"
            label="用户名"
          >
            <el-input v-model="enterpriseStaffFormInfo.username" />
          </el-form-item>
          <el-form-item
            prop="password"
            label="密码"
          >
            <el-input v-model="enterpriseStaffFormInfo.password" type="password" />
          </el-form-item>
          <el-form-item
            prop="nickName"
            label="姓名"
          >
            <el-input v-model="enterpriseStaffFormInfo.nickName" />
          </el-form-item>
          <el-form-item
            prop="companyId"
            label="所属企业"
          >
            <el-select
              v-model="enterpriseStaffFormInfo.companyId"
              filterable
              remote
              :remote-method="remoteMethod"
            >
              <el-option
                v-for="item in curEnterprises"
                :key="item.companyId"
                :label="item.companyName"
                :value="item.companyId"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item
            prop="roles"
            label="角色"
          >
            <el-select v-model="enterpriseStaffFormInfo.roles">
              <el-option
                v-for="(item, index) in curRoles"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item
            prop="wechat"
            label="微信号"
          >
            <el-input v-model="enterpriseStaffFormInfo.wechat" />
          </el-form-item>
          <el-form-item
            prop="phone"
            label="手机号"
          >
            <el-input v-model="enterpriseStaffFormInfo.phone" />
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button type="info" @click="cancelAddEnterpriseStaff">取消</el-button>
          <el-button type="primary" :loading="isAddEnterpriseStaffLoading" @click="submitAddEnterpriseStaff">提交</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="编辑企业员工用户"
        :visible.sync="editEnterpriseStaffDialogShow"
        :close-on-click-modal="false"
      >
        <el-form
          v-if="editEnterpriseStaffDialogShow"
          ref="editEnterpriseStaffForm"
          :model="editEnterpriseStaffFormInfo"
          label-width="120px"
          :rules="enterpriseManagerRules"
        >
          <el-form-item
            prop="username"
            label="用户名"
          >
            <el-input v-model="editEnterpriseStaffFormInfo.userName" />
          </el-form-item>
          <el-form-item
            prop="password"
            label="密码"
          >
            <el-input v-model="editEnterpriseStaffFormInfo.passWord" type="password" />
          </el-form-item>
          <el-form-item
            prop="nickName"
            label="姓名"
          >
            <el-input v-model="editEnterpriseStaffFormInfo.nickName" />
          </el-form-item>
          <el-form-item
            prop="enterpriseName"
            label="所属企业"
          >
            <el-select
              v-model="editEnterpriseStaffFormInfo.enterpriseName"
              filterable
              remote
              :remote-method="remoteMethod"
            >
              <el-option
                v-for="item in curEnterprises"
                :key="item.companyId"
                :label="item.companyName"
                :value="item.companyId"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            prop="roles"
            label="角色"
          >
            <el-select v-model="editEnterpriseStaffFormInfo.roles">
              <el-option
                v-for="(item, index) in curRoles"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            prop="wechat"
            label="微信号"
          >
            <el-input v-model="editEnterpriseStaffFormInfo.wechat" />
          </el-form-item>
          <el-form-item
            prop="phone"
            label="手机号"
          >
            <el-input v-model="editEnterpriseStaffFormInfo.phone" />
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button type="info" @click="cancelEditEnterpriseStaff">取消</el-button>
          <el-button type="primary" :loading="isEditEnterpriseStaffLoading" @click="submitEditEnterpriseStaff">提交</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getAll } from '@/api/system/role'
import { getDepts } from '@/api/system/dept'
import { getAllCompanyInfo, getAllGroup, addUserInfo, editUserInfo, getUserByRole, getIndustryChargeDept, deleteUsersInfo, verifyEnterpriseManager } from '../../../api/industry'
// 导入vue-treeselect
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: { Treeselect },
  data() {
    return {
      // 当前选中的是政府用户、运营商用户、企业管理用户、企业员工用户
      curUser: '政府用户',
      // 当前所有的角色
      curRoles: [],
      govUsers: [
      ],
      currentGovPage: 1,
      currentGovPageSize: 10,
      totalGovPageSize: 40,
      multipleGovSelection: [],
      disableGovEdit: true,
      disableGovDelete: true,
      govUserDialogShow: false,
      govFormInfo: {
        username: '',
        password: '',
        nickName: '',
        thIndustryChargeDept: {
          icdId: ''
        },
        roles: '',
        wechat: '',
        phone: ''
      },
      govRules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
        nickName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ],
        'thIndustryChargeDept.icdId': [
          {
            required: true,
            message: '请输入所属局',
            trigger: 'change'
          }
        ]
      },
      editGovUserDialogShow: false,
      editGovFormInfo: {
        username: '',
        password: '',
        nickName: '',
        thIndustryChargeDept: {
          icdId: ''
        },
        roles: '',
        wechat: '',
        phone: ''
      },
      editGovRules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
        nickName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ],
        'thIndustryChargeDept.icdId': [
          {
            required: true,
            message: '请输入所属局',
            trigger: 'change'
          }
        ]
      },
      enterpriseManagerUsers: [
      ],
      currentEnterpriseManagerPage: 1,
      currentEnterpriseManagerPageSize: 10,
      totalEnterpriseManagerSize: 40,
      enterpriseStaffUsers: [
      ],
      currentEnterStaffPage: 1,
      currentEnterStaffPageSize: 10,
      totalEnterStaffPageSize: 40,
      multipleEnterpriseStaffSelection: [],
      disableEnterpriseStaffEdit: true,
      disableEnterpriseStaffDelete: true,
      addEnterpriseStaffDialogShow: false,
      editEnterpriseStaffDialogShow: false,
      multipleEnterpriseManagerSelection: [],
      disableEnterpriseManagerEdit: true,
      disableEnterpriseManagerDelete: true,
      addEnterpriseManagerDialogShow: false,
      enterpriseManagerFormInfo: {
        username: '',
        password: '',
        nickName: '',
        companyId: '',
        roles: '',
        wechat: '',
        phone: ''
      },
      enterpriseManagerRules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
        nickName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ],
        companyId: [
          {
            required: true,
            message: '请输入企业名',
            trigger: 'blur'
          }
        ],
        roles: [
          {
            required: true,
            message: '请输入角色',
            trigger: 'change'
          }
        ],
        wechat: [
          {
            required: true,
            message: '请输入微信号',
            trigger: 'blur'
          }
        ]
      },
      curEnterprises: [
      ],
      editEnterpriseManagerDialogShow: false,
      editEnterpriseManagerFormInfo: {
        username: '',
        password: '',
        nickName: '',
        companyId: '',
        roles: '',
        wechat: '',
        phone: ''
      },
      enterpriseStaffFormInfo: {
        userName: '',
        passWord: '',
        nickName: '',
        enterpriseName: '',
        roles: '',
        wechat: '',
        phone: ''
      },
      editEnterpriseStaffFormInfo: {
        userName: '',
        passWord: '',
        nickName: '',
        enterpriseName: '',
        roles: '',
        wechat: '',
        phone: ''
      },
      OperatorUsers: [
      ],
      currentOperatorPage: 1,
      currentOperatorPageSize: 10,
      totalOperatorPageSize: 40,
      multipleOperatorSelection: [],
      curGroups: [],
      curDepts: [],
      operatorFormInfo: {
        // 用户名
        username: '',
        // 密码
        password: '',
        // 人员姓名
        nickName: '',
        // 所属角色
        roles: '',
        // 部门
        dept: null,
        // 所属分组
        groupId: null,
        // v网号
        vNetNum: '',
        // 手机号
        phone: '',
        // 备注
        remarks: '',
        // 微信号
        wechat: ''
      },
      operatorUserDialogShow: false,
      operatorRules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
        nickName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ],
        roles: [
          {
            required: true,
            message: '请选择角色',
            trigger: 'change'
          }
        ],
        dept: [
          {
            required: true,
            message: '请选择部门',
            trigger: 'change'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号码',
            trigger: 'blur'
          }
        ],
        wechat: [
          {
            required: true,
            message: '请输入微信号',
            trigger: 'blur'
          }
        ]
      },
      editOperatorUserDialogShow: false,
      editOperatorFormInfo: {
        // 用户名
        username: '',
        // 密码
        password: '',
        // 人员姓名
        nickName: '',
        // 所属角色
        roles: '',
        // 部门
        dept: null,
        // 所属分组
        groupId: null,
        // v网号
        vNetNum: '',
        // 手机号
        phone: '',
        // 备注
        remarks: '',
        // 微信号
        wechat: ''
      },
      isAddGovUserBtnLoading: false,
      isEditGovUserBtnLoading: false,
      isAddOperatorBtnLoading: false,
      isEditOperatorBtnLoading: false,
      isAddEnterpriseManagerLoading: false,
      isEditEnterpriseManagerLoading: false,
      isAddEnterpriseStaffLoading: false,
      isEditEnterpriseStaffLoading: false,
      disableOperatorEdit: true,
      disableOperatorDelete: true,
      govRoleId: -1,
      operatorRoleId: -1,
      enterpriseManagerRoleId: -1,
      enterpriseStaffRoleId: -1,
      govUsersLoading: false,
      OperatorLoading: false,
      enterpriseManagerLoading: false,
      enterpriseStaffLoading: false,
      chargeDepts: []
    }
  },
  mounted() {
    // 在这里面获取所有的角色
    this.initAllUsers()
    // 获取当前所有分组
    getAllGroup().then(res => {
      this.curGroups = [...res.content]
      console.log(this.curGroups, 'this.curGroups')
    })
    // 在这里面获取所有的部门
    getDepts().then(res => {
      this.curDepts = [...res.content]
      console.log('当前所有部门', this.curDepts)
      for (let i = 0; i < this.curDepts.length; i++) {
        this.curDepts[i].label = this.curDepts[i].name
        this.recursiveAllDept(this.curDepts[i])
      }
    })
  },
  methods: {
    userTypeSelect(item) {
      this.curUser = item
    },
    recursiveAllDept(item) {
      if (item.hasChildren === true) {
        getDepts({ pid: item.id }).then(res => {
          item.children = [...res.content]
          for (let i = 0; i < item.children.length; i++) {
            item.children[i].label = item.children[i].name
            this.recursiveAllDept(item.children[i])
            console.log(this.curDepts, '1232133213123123122222_________')
          }
        })
      }
    },
    handleGovSizeChange(val) {
      this.currentGovPageSize = val
      this.initGovUserList()
    },
    handleGovCurrentChange(val) {
      this.currentGovPage = val
      this.initGovUserList()
    },
    handleGovSelectionChange(val) {
      this.multipleGovSelection = val
      this.disableGovEdit = true
      this.disableGovDelete = true
      if (this.multipleGovSelection.length === 1) {
        this.disableGovEdit = false
      }
      if (this.multipleGovSelection.length > 0) {
        this.disableGovDelete = false
      }
    },
    clickToAddGovUserDialogShow() {
      // this.$refs['addGovUserForm'].resetFields()
      this.govFormInfo = {
        username: '',
        password: '',
        nickName: '',
        thIndustryChargeDept: {
          icdId: ''
        },
        roles: '',
        wechat: '',
        phone: ''
      }
      this.govUserDialogShow = true
    },
    cancelAddGovUser() {
      // 取消添加政府用户
      this.govUserDialogShow = false
    },
    submitGovUser() {
      // 确认提交
      this.$refs.addGovUserForm.validate((valid) => {
        if (valid) {
          this.isAddGovUserBtnLoading = true
          console.log(this.govFormInfo.roles, 'this.govFormInfo this.govFormInfo this.govFormInfo this.govFormInfo')
          // valid
          const replaceUser = {}
          replaceUser.username = this.govFormInfo.username
          replaceUser.password = this.govFormInfo.password
          replaceUser.nickName = this.govFormInfo.nickName
          replaceUser.thIndustryChargeDept = {
            icdId: this.govFormInfo.thIndustryChargeDept.icdId
          }
          if (this.govFormInfo.roles && this.govFormInfo.roles && this.govFormInfo.roles.length > 0) {
            replaceUser.roles = [...this.originRoles.filter(item => item.name === '政府'), ...this.curRoles.filter(item => this.govFormInfo.roles.includes(item.id))]
          } else {
            replaceUser.roles = [...this.originRoles.filter(item => item.name === '政府')]
          }
          replaceUser.wechat = this.govFormInfo.wechat
          replaceUser.phone = this.govFormInfo.phone
          replaceUser.enabled = 1
          addUserInfo(replaceUser).then(res => {
            console.log(res, 'addGovUser')
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.initGovUserList()
            this.govUserDialogShow = false
            this.isAddGovUserBtnLoading = false
          }).catch(res => {
            this.$message.error('添加失败')
            this.govUserDialogShow = false
            this.isAddGovUserBtnLoading = false
          })
        }
      })
    },
    clickToDeleteGovUserDialogShow() {
      this.$confirm('此操作将要删除所选用户', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUsersInfo(this.multipleGovSelection.map(item => item.id)).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.initGovUserList()
        }).catch(() => {
          this.$message.error('删除失败')
        })
      }).catch((err) => {
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    clickToEditGovUserDialogShow() {
      // 编辑
      this.editGovFormInfo = { ...this.multipleGovSelection[0] }
      this.editGovFormInfo.roles = this.multipleGovSelection[0].roles.filter(item => !(item.name === '政府' || item.name === '运营商' || item.name === '企业管理' || item.name === '企业员工')).map(item => item.id)
      this.editGovUserDialogShow = true
    },
    cancelEditGovUser() {
      this.editGovUserDialogShow = false
    },
    submitEditGovUser() {
      // 提交
      this.$refs.editGovUserForm.validate((valid) => {
        if (valid) {
          // axios
          this.isEditGovUserBtnLoading = true
          if (this.editGovFormInfo.roles && this.editGovFormInfo.roles.length && this.editGovFormInfo.roles.length > 0) {
            this.editGovFormInfo.roles = [...this.originRoles.filter(item => item.name === '政府'), ...this.curRoles.filter(item => this.editGovFormInfo.roles.includes(item.id))]
          } else {
            this.editGovFormInfo.roles = this.originRoles.filter(item => item.name === '政府')
          }
          for (const key in this.editGovFormInfo) {
            if (!this.editGovFormInfo[key]) {
              delete this.editGovFormInfo[key]
            }
          }
          editUserInfo(this.editGovFormInfo).then(res => {
            console.log(res, 'editGovUser')
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.editGovUserDialogShow = false
            this.isEditGovUserBtnLoading = false
            this.initGovUserList()
          }).catch(() => {
            this.editGovUserDialogShow = false
            this.isEditGovUserBtnLoading = false
          })
        }
      }).catch(res => {
        this.$message.error('修改失败')
        this.editGovUserDialogShow = false
        this.isEditGovUserBtnLoading = false
      })
    },
    handleEnterpriseManagerChange(val) {
      this.multipleEnterpriseManagerSelection = val
      this.disableEnterpriseManagerEdit = true
      this.disableEnterpriseManagerDelete = true
      if (this.multipleEnterpriseManagerSelection.length === 1) {
        this.disableEnterpriseManagerEdit = false
      }
      if (this.multipleEnterpriseManagerSelection.length > 0) {
        this.disableEnterpriseManagerDelete = false
      }
    },
    handleEnterpriseManagerSizeChange(val) {
      this.currentEnterpriseManagerPageSize = val
      this.initEnterpriseManagerList()
    },
    handleCurrentEnterpriseMangerChange(val) {
      this.currentEnterManagerPage = val
      this.initEnterpriseManagerList()
    },
    // 根据用户输入的 item 进行搜索
    remoteMethod(item) {
      getAllCompanyInfo({
        page: 0,
        size: this.curPageSum,
        companyName: item
      }).then(res => {
        console.log(res, 'isres', item)
        this.curEnterprises = [...res.content]
      })
    },
    // 添加企业用户
    clicktoAddEnterpriseUser() {
      this.enterpriseManagerFormInfo.username = ''
      this.enterpriseManagerFormInfo.password = ''
      this.enterpriseManagerFormInfo.nickName = ''
      this.enterpriseManagerFormInfo.companyId = ''
      this.enterpriseManagerFormInfo.wechat = ''
      this.enterpriseManagerFormInfo.phone = ''
      this.addEnterpriseManagerDialogShow = true
    },
    cancelAddEnterpriseManager() {
      this.addEnterpriseManagerDialogShow = false
    },
    // 提交企业管理用户
    submitEnterpriseManager() {
      this.$refs.addEnterpriseManagerForm.validate((valid) => {
        if (valid) {
          // axios
          // this.enterpriseManagerFormInfo
          this.isAddEnterpriseManagerLoading = true
          this.enterpriseManagerFormInfo.enabled = 1
          this.enterpriseManagerFormInfo.roles = this.originRoles.filter(item => item.name === '企业管理')
          this.enterpriseManagerFormInfo.verifyStatus = 1
          addUserInfo({ ...this.enterpriseManagerFormInfo, tag: '企业管理' }).then(res => {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.isAddEnterpriseManagerLoading = false
            this.addEnterpriseManagerDialogShow = false
            this.initEnterpriseManagerList()
          }).catch(() => {
            this.$message.error('添加失败')
            this.isAddEnterpriseManagerLoading = false
            this.addEnterpriseManagerDialogShow = false
          })
        }
      })
    },
    cancelEditEnterpriseManager() {
      this.editEnterpriseManagerDialogShow = false
    },
    submitEditEnterpriseManager() {
      // this.editEnterpriseManagerDialogShow = true
      this.$refs.editEnterpriseManagerForm.validate((valid) => {
        // 验证
        this.isEditEnterpriseManagerLoading = true
        editUserInfo(this.editEnterpriseManagerFormInfo).then(res => {
          this.isEditEnterpriseManagerLoading = false
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.editEnterpriseManagerDialogShow = false
          this.initEnterpriseManagerList()
        }).catch(() => {
          this.$message.error('修改失败')
          this.isEditEnterpriseManagerLoading = false
          this.editEnterpriseManagerDialogShow = false
        })
      })
    },
    clicktoEditEnterpriseManager() {
      this.editEnterpriseManagerFormInfo = { ...this.multipleEnterpriseManagerSelection[0] }
      this.editEnterpriseManagerDialogShow = true
    },
    clicktoDeleteEnterpriseManager() {
      //
      this.$confirm('此操作将要删除所选用户', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUsersInfo(this.multipleEnterpriseManagerSelection.map(item => item.id)).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.initEnterpriseManagerList()
        }, () => {
          this.$message.error('删除失败')
        })
      }).catch((err) => {
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    handleEnterpriseStaffChange(val) {
      this.multipleEnterpriseStaffSelection = val
      this.disableEnterpriseStaffEdit = true
      this.disableEnterpriseStaffDelete = true
      if (this.multipleEnterpriseStaffSelection.length === 1) {
        this.disableEnterpriseStaffEdit = false
      }
      if (this.multipleEnterpriseStaffSelection.length > 0) {
        this.disableEnterpriseStaffDelete = false
      }
    },
    handleEnterpriseStaffSizeChange(val) {
      this.currentEnterStaffPageSize = val
      this.initEnterpriseStaffList()
    },
    handleCurrentEnterpriseStaffChange(val) {
      this.currentEnterStaffPage = val
      this.initEnterpriseStaffList()
    },
    cancelAddEnterpriseStaff() {
      this.addEnterpriseStaffDialogShow = false
    },
    submitAddEnterpriseStaff() {
      this.$refs.addEnterpriseStaffForm.validate((valid) => {
        if (valid) {
          // ...
        } else {
          // ...
        }
      })
    },
    addEnterpriseStaffDialog() {
      // ...
      this.enterpriseStaffFormInfo.userName = ''
      this.enterpriseStaffFormInfo.passWord = ''
      this.enterpriseStaffFormInfo.nickName = ''
      this.enterpriseStaffFormInfo.enterpriseName = ''
      this.enterpriseStaffFormInfo.roles = ''
      this.enterpriseStaffFormInfo.wechat = ''
      this.enterpriseStaffFormInfo.phone = ''
      this.addEnterpriseStaffDialogShow = true
    },
    cancelEditEnterpriseStaff() {
      this.editEnterpriseStaffDialogShow = false
    },
    submitEditEnterpriseStaff() {
      this.$refs.editEnterpriseStaffForm.validate((valid) => {
        if (valid) {
          // valid
        } else {
          // invalid
        }
      })
    },
    editEnterpriseStaffDialog() {
      this.enterpriseStaffFormInfo = { ...this.multipleEnterpriseStaffSelection[0] }
      this.editEnterpriseStaffDialogShow = true
    },
    deleteEnterpriseStaff() {
      // 删除企业用户
      this.$confirm('此操作将要删除所选用户', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {}).catch((err) => {
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    multipleOperatorSelectionChange(val) {
      this.multipleOperatorSelection = val
      this.disableOperatorEdit = true
      this.disableOperatorDelete = true
      if (this.multipleOperatorSelection.length === 1) {
        this.disableOperatorEdit = false
      }
      if (this.multipleOperatorSelection.length > 0) {
        this.disableOperatorDelete = false
      }
    },
    handleOperatorSizeChange(val) {
      this.currentOperatorPageSize = val
      this.initOperatorUserList()
    },
    handleCurrentOperatorChange(val) {
      this.currentOperatorPage = val
      this.initOperatorUserList()
    },
    normalizer(node) {
      if (node.children == null || node.children === 'null') {
        delete node.children
      }
    },
    // 根据部门id获取部门
    getDeptInfoById(deptId) {
      let dept = {}
      // 遍历
      function traverse(item) {
        if (item.id === deptId) {
          dept = item
        }
        // 遍历
        if (item.children) {
          for (let i = 0; i < item.children.length; i++) {
            traverse(item.children[i])
          }
        }
      }
      for (let i = 0; i < this.curDepts.length; i++) {
        traverse(this.curDepts[i])
      }
      return dept
    },
    clicktoCancelAddOperator() {
      this.operatorUserDialogShow = false
    },
    clicktoSubmitAddOperator() {
      //
      this.$refs.operatorForm.validate((valid) => {
        if (valid) {
          //
          this.isAddOperatorBtnLoading = true
          // const replaceUser = {}
          // replaceUser.username = this.operatorFormInfo.username
          // replaceUser.password = this.operatorFormInfo.password
          // replaceUser.nickName = this.operatorFormInfo.nickName
          // replaceUser.roles = this.curRoles.filter(item => item.name === '运营商')
          // replaceUser.dept = this.getDeptInfoById(this.operatorFormInfo.dept)
          // replaceUser.groupId = this.operatorFormInfo.groupId
          // replaceUser.vNetNum = this.operatorFormInfo.vNetNum
          // replaceUser.phone = this.operatorFormInfo.phone
          // replaceUser.remarks = this.operatorFormInfo.remarks
          // replaceUser.wechat = this.operatorFormInfo.wechat
          if (this.operatorFormInfo.roles && this.operatorFormInfo.roles.length && this.operatorFormInfo.roles.length > 0) {
            this.operatorFormInfo.roles = [...this.originRoles.filter(item => item.name === '运营商'), ...this.curRoles.filter(item => this.operatorFormInfo.roles.includes(item.id))]
          } else {
            this.operatorFormInfo.roles = this.originRoles.filter(item => item.name === '运营商')
          }
          if (this.operatorFormInfo.dept) {
            this.operatorFormInfo.dept = this.getDeptInfoById(this.operatorFormInfo.dept)
          }
          this.operatorFormInfo.enabled = 1
          addUserInfo(this.operatorFormInfo).then(res => {
            console.log(res, 'addUserInfo by operator')
            this.$message({
              type: 'success',
              message: '添加运营商成功'
            })
            this.initOperatorUserList()
            this.isAddOperatorBtnLoading = false
            this.operatorUserDialogShow = false
          }).catch(() => {
            this.$message.error('添加运营商失败')
            this.isAddOperatorBtnLoading = false
            this.operatorUserDialogShow = false
          })
        }
      })
    },
    cancalEditOperator() {
      this.editOperatorUserDialogShow = false
    },
    submitEditOperator() {
      //
      this.$refs.editOperatorForm.validate((valid) => {
        //
        if (valid) {
          //
          if (this.editOperatorFormInfo.roles && this.editOperatorFormInfo.roles.length && this.editOperatorFormInfo.roles.length > 0) {
            this.editOperatorFormInfo.roles = [...this.originRoles.filter(item => item.name === '运营商'), ...this.curRoles.filter(item => this.editOperatorFormInfo.roles.includes(item.id))]
          } else {
            this.editOperatorFormInfo.roles = this.originRoles.filter(item => item.name === '运营商')
          }
          if (this.editOperatorFormInfo.dept) {
            this.editOperatorFormInfo.dept = this.getDeptInfoById(this.editOperatorFormInfo.dept)
          }
          editUserInfo(this.editOperatorFormInfo).then(res => {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.isEditOperatorBtnLoading = false
            this.editOperatorUserDialogShow = false
            this.initOperatorUserList()
          }).catch(() => {
            this.$message.error('添加失败')
            this.isEditOperatorBtnLoading = false
          })
        }
      })
    },
    addOperatorShow() {
      this.operatorFormInfo = {
        // 用户名
        username: '',
        // 密码
        password: '',
        // 人员姓名
        nickName: '',
        // 所属角色
        roles: '',
        // 部门
        dept: null,
        // 所属分组
        groupId: null,
        // v网号
        vNetNum: '',
        // 手机号
        phone: '',
        // 备注
        remarks: '',
        // 微信号
        wechat: ''
      }
      this.operatorUserDialogShow = true
    },
    editOperatorShow() {
      this.editOperatorFormInfo = { ...this.multipleOperatorSelection[0] }
      this.editOperatorFormInfo.roles = this.editOperatorFormInfo.roles.filter(item => !(item.name === '政府' || item.name === '运营商' || item.name === '企业管理' || item.name === '企业员工')).map(item => item.id)
      if (this.editOperatorFormInfo.dept) {
        this.editOperatorFormInfo.dept = this.editOperatorFormInfo.dept.id
      }
      this.editOperatorUserDialogShow = true
    },
    deleteOperator() {
      this.$confirm('此操作将要删除所选用户', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUsersInfo(this.multipleOperatorSelection.map(item => item.id)).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.initOperatorUserList()
        }).catch(() => {
          this.$message.error('删除失败')
        })
      }).catch((err) => {
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    async initAllUsers() {
      // getUserByRole(0, 10)
      await getAll().then(res => {
        this.curRoles = [...res]
        this.originRoles = [...res]
        this.curRoles = this.curRoles.filter(item => !(item.name === '政府' || item.name === '企业管理' || item.name === '企业员工' || item.name === '运营商'))
        console.log(this.curRoles, 'this.curRoles this.curRoles this.curRoles')
        for (let i = 0; i < this.originRoles.length; i++) {
          if (this.originRoles[i].name === '政府') {
            this.govRoleId = this.originRoles[i].id
          }
          if (this.originRoles[i].name === '运营商') {
            this.operatorRoleId = this.originRoles[i].id
          }
          if (this.originRoles[i].name === '企业管理') {
            this.enterpriseManagerRoleId = this.originRoles[i].id
          }
          if (this.originRoles[i].name === '企业员工') {
            this.enterpriseStaffRoleId = this.originRoles[i].id
          }
        }
      })
      await getIndustryChargeDept().then(res => {
        this.chargeDepts = []
        res.content.forEach(item => {
          const tempObj = {
            icdId: item.icdId,
            icdName: item.icdName
          }
          this.chargeDepts.push(tempObj)
        })
      })
      // getUserByRole(this.currentGovPage - 1, this.currentGovPageSize, this.govRoleId).then(res => {
      //   this.govUsers = res.content
      // })
      this.initGovUserList()
      this.initOperatorUserList()
      this.initEnterpriseManagerList()
      this.initEnterpriseStaffList()
    },
    initGovUserList() {
      this.govUsersLoading = true
      getUserByRole(this.currentGovPage - 1, this.currentGovPageSize, this.govRoleId).then(res => {
        this.govUsers = res.content
        this.govUsersLoading = false
        this.totalGovPageSize = res.totalElements
      }).catch(() => {
        this.govUsersLoading = false
      })
    },
    initOperatorUserList() {
      this.OperatorLoading = true
      getUserByRole(this.currentOperatorPage - 1, this.currentOperatorPageSize, this.operatorRoleId).then(res => {
        this.OperatorUsers = res.content
        this.OperatorLoading = false
        this.totalOperatorPageSize = res.totalElements
      }).catch(() => {
        this.OperatorLoading = false
      })
    },
    initEnterpriseManagerList() {
      this.enterpriseManagerLoading = true
      getUserByRole(this.currentEnterpriseManagerPage - 1, this.currentEnterpriseManagerPageSize, this.enterpriseManagerRoleId, 'verifyStatus,asc').then(res => {
        this.enterpriseManagerUsers = res.content
        this.enterpriseManagerLoading = false
        // res.totalElements
        //
        this.totalEnterpriseManagerSize = res.totalElements
      }).catch(() => {
        this.enterpriseManagerLoading = false
      })
    },
    initEnterpriseStaffList() {
      this.enterpriseStaffLoading = true
      getUserByRole(this.currentEnterStaffPage - 1, this.currentEnterStaffPageSize, this.enterpriseStaffRoleId).then(res => {
        this.enterpriseStaffUsers = res.content
        this.enterpriseStaffLoading = false
        this.totalEnterStaffPageSize = res.totalElements
      }).catch(() => {
        this.enterpriseStaffLoading = false
      })
    },
    verifyUser(id) {
      verifyEnterpriseManager(id).then(res => {
        this.$message({
          type: 'success',
          message: '审核成功'
        })
        this.initEnterpriseManagerList()
      }).catch(() => {
        this.$message.error('审核失败')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .users-wrapper {
    padding: 18px;
  }
  .uesrs-type-wrapper {
    width: 100%;
    box-shadow: 2px 2px 2px 3px #eee;
    border-radius: 12px;
    padding: 18px;
    .my-users {
      background: #eee;
      padding: 10px;
      border-radius: 8px;
      cursor: pointer;
    }
  }
  .users-gov-wrapper {
    margin-top: 20px;
    box-shadow: 2px 2px 2px 3px #eee;
    border-radius: 12px;
    padding: 8px;
    .gov-tools-wrapper {
      margin-bottom: 20px;
    }
  }
  .users-enterprise-manager-wrapper {
    margin-top: 20px;
    box-shadow: 2px 2px 2px 3px #eee;
    border-radius: 12px;
    padding: 8px;
    .enterprise-Manager-tools-wrapper {
      margin-bottom: 20px;
    }
  }
  .users-enterprise-staff-wrapper {
    margin-top: 20px;
    box-shadow: 2px 2px 2px 3px #eee;
    border-radius: 12px;
    padding: 8px;
    .enterprise-staff-tools-wrapper {
      margin-bottom: 20px;
    }
  }
  .users-operator-wrapper {
    margin-top: 20px;
    box-shadow: 2px 2px 2px 3px #eee;
    border-radius: 12px;
    padding: 8px;
    .operators-tools-wrapper {
      margin-bottom: 20px;
    }
  }
</style>
