<template>
  <div v-loading="downloadLoading" class="app-container">
    <!--操作区-->
    <div v-if="checkRole([5, 99])">
      <el-button
        type="primary"
        icon="el-icon-plus"
        class="margin-left"
        @click="create(1)"
      >添加员工</el-button>
      <el-button
        type="primary"
        icon="el-icon-s-order"
        class="margin-left button-last"
        @click="create(2)"
      >人工录入</el-button>
      <el-button
        type="primary"
        icon="el-icon-download"
        class="margin-left"
        @click="download"
      >下载模板</el-button>
      <a
        href="javascript:;"
        class="file"
      >批量导入白名单<input
        ref="file"
        type="file"
        name="file"
        @change="uploadFun($event)"
      ></a>
      <el-button
        type="primary"
        plain
        class="margin-left"
        @click="clickBulkRegistration"
      >批量注册人员</el-button>
      <el-button
        v-if="checkRole([5])"
        plain
        type="primary"
        class="margin-left"
        @click="batchEditVisible = true"
      >批量编辑</el-button>
      <el-button
        v-if="checkRole([5]) && placeType != 2"
        type="danger"
        plain
        icon="el-icon-delete"
        class="margin-left"
        @click="deleteAll"
      >删除所有人员</el-button>
      <el-tooltip
        class="item"
        effect="dark"
        content="最大支持导出五万条数据！"
        placement="top-start"
      >
        <el-button
          v-if="isOut === 1"
          plain
          type="success"
          icon="el-icon-dEditownload"
          class="margin-left"
          @click="exportRecord"
        >导出记录</el-button>
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        content="单次最大支持导出500条数据！"
        placement="top-start"
      >
        <el-button
          v-if="isOut === 1"
          type="success"
          icon="el-icon-s-order"
          class="margin-left button-last"
          plain
          @click="steakPhoto(500)"
        >批量导出图片</el-button>
      </el-tooltip>
    </div>
    <el-input
      v-model="page.data.name"
      placeholder="请输入姓名"
      class="margin-left input"
    />
    <el-input
      v-model="page.data.phone"
      placeholder="请输入手机号"
      class="margin-left input"
    />
    <el-input
      v-model="page.data.idNumber"
      placeholder="请输入身份证号"
      class="margin-left input"
    />
    <el-input
      v-model="page.data.cardIdEx"
      placeholder="请输入卡号"
      class="margin-left input"
    />
    <el-select
      v-if="checkRole([1, 2, 3, 4])"
      v-model="page.data.username"
      clearable
      filterable
      placeholder="请选择所属账号"
      class="margin-left input"
    >
      <el-option
        v-for="item in user_list"
        :key="item.id"
        :label="item.username"
        :value="item.username"
      />
    </el-select>
    <el-select
      v-if="checkRole([2, 3, 4])"
      v-model="page.data.provinceId"
      filterable
      clearable
      placeholder="请选择省份"
      class="margin-left input"
      @change="chooseProvinceSearch"
    >
      <el-option
        v-for="item in province_list_search"
        :key="item.areaCodeId"
        :label="item.name"
        :value="item.areaCodeId"
      />
    </el-select>
    <el-select
      v-if="checkRole([2, 3, 4])"
      v-model="page.data.cityId"
      filterable
      clearable
      placeholder="请选择城市"
      class="margin-left input"
      @change="chooseCitySearch"
    >
      <el-option
        v-for="item in city_list_search"
        :key="item.areaCodeId"
        :label="item.name"
        :value="item.areaCodeId"
      />
    </el-select>
    <el-select
      v-if="checkRole([2, 3, 4])"
      v-model="page.data.areaId"
      filterable
      clearable
      placeholder="请选择区域"
      class="margin-left input"
    >
      <el-option
        v-for="item in area_list_search"
        :key="item.areaCodeId"
        :label="item.name"
        :value="item.areaCodeId"
      />
    </el-select>
    <el-select
      v-model="page.data.status"
      filterable
      clearable
      placeholder="请选择是否认证"
      class="margin-left input"
    >
      <el-option
        v-for="item in status_list"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <el-select
      v-model="page.data.pushType"
      filterable
      clearable
      placeholder="请选择认证类型"
      class="margin-left input"
    >
      <el-option
        v-for="item in certification_type"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <el-select
      v-if="!(checkRole([5])&&placeType == 2)&&!checkRole([99])"
      v-model="page.data.zoneDevicePassIdList"
      filterable
      clearable
      collapse-tags
      multiple
      placeholder="请选择所属区域"
      class="margin-left input"
    >
      <el-option
        v-for="item in regionList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <el-select
      v-model="page.data.validPeriodStatus"
      filterable
      clearable
      placeholder="请选择有效期状态"
      class="margin-left input"
    >
      <el-option
        v-for="item in validityList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <el-select
      v-model="page.data.criticalTime"
      filterable
      clearable
      placeholder="请选择临期时间"
      class="margin-left input"
    >
      <el-option
        v-for="item in criticalTimeList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <template v-if="placeType == 3">
      <el-select
        v-model="page.data.warehousingStatus"
        filterable
        clearable
        placeholder="请选择入库状态"
        class="margin-left input"
      >
        <el-option
          v-for="item in putStorage"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model="page.data.personnelType"
        filterable
        clearable
        placeholder="请选择人员类型"
        class="margin-left input"
      >
        <el-option
          v-for="item in userTypeList"
          :key="item.code"
          :label="item.desc"
          :value="item.code"
        />
      </el-select>
    </template>

    <!-- <el-date-picker
      v-model="page.data.startTime"
      type="datetime"
      placeholder="有效期开始时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left"
    >
    </el-date-picker>
    <el-date-picker
      v-model="page.data.endTime"
      type="datetime"
      placeholder="有效期结束时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left"
    >
    </el-date-picker> -->

    <span v-for="(item, index) in page.data.contents" :key="index">
      <el-date-picker
        v-if="item.customType === '日期'"
        v-model="item.customNameVal"
        type="datetime"
        class="margin-left input"
        :placeholder="item.prompt"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
      />
      <el-time-picker
        v-if="item.customType === '时间'"
        v-model="item.customNameVal"
        class="margin-left input"
        :picker-options="{
          selectableRange: '00:00:00 - 23:59:59',
        }"
        :placeholder="item.prompt"
        value-format="HH:mm"
        format="HH:mm"
      />
      <el-select
        v-if="item.customType === '下拉选择'"
        v-model="item.customNameVal"
        class="margin-left input"
        filterable
        clearable
        :placeholder="item.prompt"
      >
        <el-option
          v-for="item in item.configurationOption"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
      <el-input
        v-if="item.customType === '文本'"
        v-model="item.customNameVal"
        class="margin-left input"
        :placeholder="item.prompt"
      />
    </span>
    <el-button
      type="primary"
      icon="el-icon-search"
      class="margin-left"
      @click="fetchData"
    >搜索</el-button>
    <el-button
      type="primary"
      class="margin-left"
      @click="multipleChoice = !multipleChoice"
    >多选编辑</el-button>
    <div v-if="multipleChoice" class="choose-btn-box">
      <el-button
        type="primary"
        class="margin-left"
        plain
        @click="multipleFun(1)"
      >编辑用户信息</el-button>
      <el-button
        type="primary"
        plain
        class="margin-left"
        @click="multipleFun(2)"
      >下发选中员工</el-button>
      <el-button
        type="danger"
        plain
        class="margin-left"
        @click="multipleFun(3)"
      >删除选中员工</el-button>
      <div class="choose-span margin-left">
        【已选中：{{(multipleCheckedList||[]).length || 0}}&nbsp;人】
      </div>
    </div>
    <!--主表格-->
    <el-table
      ref="table_form"
      v-loading="listLoading"
      class="table"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :row-key="getRowKeys"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="multipleChoice"
        key="qqq"
        type="selection"
        :reserve-selection="true"
        width="55"
      />
      <el-table-column key="www" label="序号" align="center" width="80px">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column key="rrr" label="实名照片" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 70px; height: 70px"
            fit="cover"
            :src="scope.row.avatar"
            :preview-src-list="[scope.row.avatar]"
          >
            <div slot="error" style="width: 70px;height: 70px;display: flex;justify-content: center;align-items: center;color:#C0C4CC;background-color: #F5F7FA;">
              {{ scope.row.avatar ? "加载失败" : "暂无照片" }}
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column key="ttt" label="姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.name | matchNull }}
        </template>
      </el-table-column>
      <el-table-column key="yyy" label="手机号" align="center">
        <template slot-scope="scope">
          {{ scope.row.phone | matchNull }}
        </template>
      </el-table-column>
      <el-table-column key="ooo" label="身份证号" align="center">
        <template slot-scope="scope">
          {{ scope.row.idNumber | matchNull }}
        </template>
      </el-table-column>
      <el-table-column key="uuu" label="卡号" align="center">
        <template slot-scope="scope">
          {{ scope.row.cardIdEx | matchNull }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="showUserName"
        key="iii"
        label="所属账号"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.username | matchNull }}
        </template>
      </el-table-column>

      <el-table-column key="nnn" label="认证状态" align="center">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.status === 1"
            effect="plain"
            type="success"
          >已认证</el-tag>
          <el-tag
            v-else-if="scope.row.status === 2"
            effect="plain"
            type="info"
          >未认证</el-tag>
          <el-tag v-else effect="plain" type="info">未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column key="ppp" label="认证类型" align="center">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.pushType === 0"
            effect="plain"
            type="success"
          >小程序</el-tag>
          <el-tag
            v-else-if="scope.row.pushType === 1"
            effect="plain"
          >初次添加</el-tag>
          <el-tag
            v-else-if="scope.row.pushType === 2"
            effect="plain"
            type="primary"
          >人工录入</el-tag>
          <el-tag
            v-else-if="scope.row.pushType === 3"
            effect="plain"
            type="warning"
          >访客机</el-tag>
          <el-tag
            v-else-if="scope.row.pushType === 4"
            effect="plain"
            type="danger"
          >身份证认证</el-tag>
          <el-tag
            v-else-if="scope.row.pushType === 5"
            effect="plain"
            type="info"
          >卡号认证</el-tag>
          <el-tag v-else effect="plain" type="info">其他</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="placeType == 3" key="aaa" label="人员类型" align="center">
        <template slot-scope="scope">
          <span>{{
            scope.row.personnelType | getPersonnelTypeName(that)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="isOpenPrivateArea === 1"
        key="sss"
        label="通行区域权限"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.adminAreaType === 1"
            type="success"
          >{{ tenantEnterpriseName }}公有</el-tag>
          <el-tag
            v-if="scope.row.adminAreaType === 2"
            type="primary"
          >{{ enterpriseName }}公有</el-tag>
          <el-tag
            v-if="scope.row.adminAreaType === 3"
            type="warning"
          >{{ enterpriseName }}私有</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        v-if="!(checkRole([5])&&placeType == 2)&&!checkRole([99])&&isOpenPrivateArea === 1"
        key="ddd"
        label="通行区域"
        align="center"
      >
        <template slot-scope="scope">
          {{ (scope.row.privateAreaNameList||[]).join('，') || '全部' }}
        </template>
      </el-table-column>
      <el-table-column v-if="placeType == 3" key="fff" label="入库状态" align="center">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.warehousingStatus == 1"
            type="success"
          >开通</el-tag>
          <el-tag
            v-if="scope.row.warehousingStatus == 0"
            type="info"
          >关闭</el-tag>
        </template>
      </el-table-column>
      <el-table-column key="ggg" label="有效期开始时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.startTime | matchNull }}
        </template>
      </el-table-column>
      <el-table-column key="hhh" label="有效期结束时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.endTime | matchNull }}
        </template>
      </el-table-column>
      <el-table-column v-if="!(checkRole([5])&&placeType == 2)&&!checkRole([99])" key="jjj" label="所属区域" align="center">
        <template slot-scope="scope">
          {{ (scope.row.zoneDeviceRLessVOList||[]).map(item=>item.name).join('，') || '全部' }}
        </template>
      </el-table-column>
      <template v-if="checkRole([5]) || checkRole([99])">
        <el-table-column
          v-for="(item, index) in user_form.contents"
          :key="index"
          align="center"
          :label="item.customName"
        >
          <template slot-scope="scope">
            <el-image
              v-if="item.customType === '图片'"
              style="width: 70px; height: 70px"
              :src="scope.row.contents[index].customNameVal"
              :preview-src-list="[scope.row.contents[index].customNameVal]"
            >
              <div slot="error" class="image-slot">暂无照片</div>
            </el-image>
            <p v-else>{{ scope.row.contents[index].customNameVal }}</p>
          </template>
        </el-table-column>
      </template>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime | matchNull }}
        </template>
      </el-table-column>
      <el-table-column v-if="!multipleChoice" key="bbb" align="center" prop="" label="操作区" width="380">
        <template slot-scope="scope">
          <el-button
            v-if="checkRole([1, 2, 5, 99])"
            type="danger"
            size="small"
            @click="deleteUser(scope.row.id)"
          >删除</el-button>
          <el-button
            type="primary"
            size="small"
            :disabled="scope.row.status === 2"
            @click="update(scope.row)"
          >编辑</el-button>
          <el-button
            v-if="checkRole([1, 2, 5, 99])"
            type="primary"
            plain
            size="small"
            @click="reIssue(scope.row.id)"
          >重新下发</el-button>
          <el-button
            type="primary"
            size="small"
            @click="searchContent(scope.row)"
          >详情</el-button>
          <el-button
            v-if="placeType == 3"
            type="primary"
            size="small"
            @click="detailFun(scope.row)"
          >操作人</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
    <!--对话框-->
    <el-dialog
      :title="dialogTitle[dialogType]"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="800px"
    >
      <el-form
        ref="user_form"
        :model="user_form"
        :rules="rules"
        label-width="120px"
        label-position="left"
      >
        <div v-if="dialogType != 'multipleUpdate'">
          <el-form-item
            v-if="isOpenPrivateArea === 1"
            label="通行区域权限"
            prop="adminAreaType"
          >
            <el-radio-group v-model="user_form.adminAreaType">
              <el-radio
                v-if="!checkRole([99])"
                :label="1"
              >{{ tenantEnterpriseName }}公有</el-radio>
              <el-radio :label="2">{{ enterpriseName }}公有</el-radio>
              <el-radio :label="3">{{ enterpriseName }}私有</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="flex">
            <el-form-item
              v-if="(placeType == 2 || placeType == 3) && !checkRole([99])"
              style="flex: 0.5"
              label="选择账号"
              prop="adminId"
            >
              <el-select
                v-model="user_form.adminId"
                style="width: 100%"
                filterable
                clearable
                placeholder="请选择账号名称"
                @change="changeAdminId"
              >
                <el-option
                  v-for="item in enterprise_list"
                  :key="item.adminId"
                  :label="item.username"
                  :value="item.adminId"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="user_form.adminAreaType === 3"
              style="flex: 0.5"
              label="选择私有区域"
              prop="privateAreaIdList"
            >
              <el-select
                v-model="user_form.privateAreaIdList"
                style="width: 100%"
                multiple
                filterable
                clearable
                placeholder="请选择私有区域"
              >
                <el-option
                  v-for="item in private_list"
                  :key="item.privateAreaId"
                  :label="item.privateAreaName"
                  :value="item.privateAreaId"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="用户姓名" prop="name" style="flex: 0.5">
              <el-input
                v-model="user_form.name"
                placeholder="请输入用户姓名"
                :disabled="dialogType === 'update'"
              />
            </el-form-item>
            <el-tooltip
              class="item"
              effect="dark"
              :manual="false"
              :value="showTooltip"
              content="填写微信绑定手机号,用户可通过小程序实名认证(手机号/身份证号/卡号必须选填一项)"
              placement="right"
            >
              <el-form-item
                style="flex: 0.5; margin-left: 10px"
                label="微信绑定手机号"
                prop="phone"
              >
                <el-input
                  v-model="user_form.phone"
                  maxlength="11"
                  show-word-limit
                  placeholder="请输入手机号"
                  :disabled="dialogType === 'update' && user_form.pushType != 2"
                />
              </el-form-item>
            </el-tooltip>
          </div>
          <div class="flex">
            <el-tooltip
              class="item"
              effect="dark"
              :manual="false"
              :value="showTooltip"
              content="填写身份证号,用户可通过在人脸终端刷身份证号或小程序实名认证(手机号/身份证号/卡号必须选填一项)"
              placement="right"
            >
              <el-form-item label="证件号" prop="idNumber" style="flex: 0.5">
                <el-input
                  v-model="user_form.idNumber"
                  placeholder="请输入正确的证件号"
                  :disabled="dialogType === 'update'"
                />
              </el-form-item>
            </el-tooltip>
            <!-- <el-form-item
            v-if="user_form.inputType === 2"
            label="证件号"
            prop="idNumber"
            style="flex: 0.5"
          >
            <el-input
              v-model="user_form.idNumber"
              :disabled="dialogType === 'update'"
              placeholder="请输入正确的身份证号"
            ></el-input>
          </el-form-item> -->
            <el-form-item
              label="卡号"
              prop="cardIdEx"
              style="flex: 0.5; margin-left: 10px"
            >
              <el-tooltip
                class="item"
                effect="dark"
                :manual="false"
                :value="showTooltip"
                content="填写卡号,用户可通过在人脸终端刷卡号(手机号/身份证号/卡号必须选填一项)"
                placement="right"
              >
                <el-input
                  v-model="user_form.cardIdEx"
                  placeholder="请输入卡号"
                />
              </el-tooltip>
            </el-form-item>
          </div>
          <div v-if="placeType == 3">
            <el-form-item
              style="flex: 0.5"
              label="人员类型"
              prop="personnelType"
            >
              <el-select
                v-model="user_form.personnelType"
                style="width: 100%"
                filterable
                clearable
                placeholder="请选择人员类型"
              >
                <el-option
                  v-for="item in userTypeList"
                  :key="item.code"
                  :label="item.desc"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
          <el-form-item v-if="showImg" label="上传照片" prop="avatar">
            <el-upload
              ref="upload"
              name="file"
              class="avatar-uploader"
              :action="doUpload"
              :show-file-list="false"
              :http-request="doUploadAvatar"
              :before-upload="beforeAvatarUpload"
              :auto-upload="true"
              accept="image/png,image/gif,image/jpg,image/jpeg"
            >
              <img
                v-if="user_form.avatar"
                :src="user_form.avatar"
                class="avatar"
              >
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item
            label="有效期开始时间"
            :prop="dialogType == 'multipleUpdate' ? '' : 'startTime'"
            style="flex: 0.5"
          >
            <el-date-picker
              v-model="user_form.startTime"
              style="width: 100%"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
          <el-form-item
            style="flex: 0.5"
            label="有效期结束时间"
            :prop="dialogType == 'multipleUpdate' ? '' : 'endTime'"
          >
            <el-date-picker
              v-model="user_form.endTime"
              style="width: 100%"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </div>
        <div v-if="!(checkRole([5])&&placeType == 2)&&!checkRole([99])" class="flex">
          <el-form-item
            label="所属区域"
            :prop="dialogType == 'multipleUpdate' ? '' : 'owningRegion'"
            style="flex: 0.5"
          >
            <el-radio-group
              v-model="user_form.owningRegion"
              @change="$forceUpdate()"
            >
              <el-radio :label="1">全部</el-radio>
              <el-radio :label="2">自定义</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div v-if="!(checkRole([5])&&placeType == 2)&&!checkRole([99])&&user_form.owningRegion == 2" class="flex">
          <el-form-item
            label="区域选择"
            :prop="dialogType == 'multipleUpdate' ? '' : 'zoneDevicePassIdList'"
            style="flex: 1"
          >
            <el-select
              v-model="user_form.zoneDevicePassIdList"
              filterable
              clearable
              multiple
              placeholder="请选择需要绑定的区域"
              style="width: 100%"
            >
              <el-option
                v-for="item in regionList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>
        <div v-for="(item, index) in user_form.contents" :key="index">
          <el-form-item
            v-if="item.customType === '日期'"
            :label="item.customName"
            :prop="`contents.${index}.customNameVal`"
            :rules="rules.customNameVal"
          >
            <el-date-picker
              v-model="item.customNameVal"
              style="width: 200px"
              type="datetime"
              :placeholder="item.prompt"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item
            v-if="item.customType === '时间'"
            :label="item.customName"
            :prop="`contents.${index}.customNameVal`"
            :rules="rules.customNameVal"
          >
            <el-time-picker
              v-model="item.customNameVal"
              style="width: 200px"
              :picker-options="{
                selectableRange: '00:00:00 - 23:59:59',
              }"
              value-format="HH:mm"
              format="HH:mm"
            />
          </el-form-item>
          <el-form-item
            v-if="item.customType === '下拉选择'"
            :rules="rules.customNameVal"
            :label="item.customName"
            :prop="`contents.${index}.customNameVal`"
          >
            <el-select
              v-model="item.customNameVal"
              style="width: 200px"
              clearable
              filterable
              :placeholder="item.prompt"
            >
              <el-option
                v-for="item in item.configurationOption"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="item.customType === '文本'"
            :label="item.customName"
            :prop="`contents.${index}.customNameVal`"
            :rules="rules.customNameVal"
          >
            <el-input
              v-model="item.customNameVal"
              :placeholder="item.prompt"
            />
          </el-form-item>
          <template v-if="item.customType === '图片'">
            <el-form-item
              :label="item.customName"
              :prop="`contents.${index}.customNameVal`"
              :rules="rules.customNameVal"
            >
              <el-upload
                ref="upload"
                name="file"
                class="avatar-uploader"
                :action="doUpload"
                :show-file-list="false"
                :http-request="(file) => doUploadAvatar2(file, item)"
                :before-upload="beforeAvatarUpload"
                :auto-upload="true"
                accept="image/png,image/gif,image/jpg,image/jpeg"
              >
                <img
                  v-if="item.customNameVal"
                  :src="item.customNameVal"
                  class="avatar"
                >
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </template>

          <template v-if="item.customType.indexOf('省市区') > -1">
            <el-form-item
              :rules="rules.customNameVal"
              :label="item.customName"
              :prop="`contents.${index}.customNameVal`"
            >
              <div class="flex">
                <el-select
                  v-model="matchContentId(item.id).provinceName"
                  placeholder="请选择省份"
                  @change="
                    (value) => {
                      chooseProvince(value, matchContentId(item.id));
                    }
                  "
                >
                  <el-option
                    v-for="item in matchContentId(item.id).province_list"
                    :key="item.areaCodeId"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
                <el-select
                  v-model="matchContentId(item.id).cityName"
                  class="margin-left-s"
                  placeholder="请选择城市"
                  @change="
                    (value) => {
                      chooseCity(value, matchContentId(item.id));
                    }
                  "
                >
                  <el-option
                    v-for="item in matchContentId(item.id).city_list"
                    :key="item.areaCodeId"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
                <el-select
                  v-model="matchContentId(item.id).areaName"
                  class="margin-left-s"
                  placeholder="请选择区/县"
                  @change="
                    (value) => {
                      chooseArea(value, matchContentId(item.id));
                    }
                  "
                >
                  <el-option
                    v-for="item in matchContentId(item.id).area_list"
                    :key="item.areaCodeId"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
                <el-select
                  v-if="item.customType == '省市区街道'"
                  v-model="matchContentId(item.id).streetName"
                  class="margin-left-s"
                  placeholder="请选择街道"
                >
                  <el-option
                    v-for="item in matchContentId(item.id).street_list"
                    :key="item.streetCodeId"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </div>
            </el-form-item>
          </template>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button
          v-loading="updataLoading"
          type="primary"
          @click="
            dialogType === 'add' || dialogType === 'artificial'
              ? add()
              : doUpdate()
          "
        >
          确定
        </el-button>
      </div>
    </el-dialog>
    <!-- 详情对话框 -->
    <detailsDialog
      :details-list="detailsList"
      :dialog-table-visible="dialogTableVisible"
      :visit-to-jet-list="visitToJetList"
      :row="row"
      type="white_list"
      @dialog="dialogTableVisible = false"
    />
    <!-- 批量注册人员-抽屉 -->
    <el-drawer
      :title="hasCompleted ? '已完成' : '正在处理中..'"
      :visible.sync="drawerVisible"
      :wrapper-closable="false"
      size="50%"
      direction="rtl"
    >
      <div style="padding: 50px">
        <div>
          已处理条数；{{ hasDealNumber }}; 待处理条数：{{ waitDealNumber }};
          总共文件数：{{ allNumber }}
        </div>
        <el-progress
          style="margin-top: 10px"
          :percentage="makePercent"
          :format="formatProgress"
        />
        <el-table
          ref="batch_upload_result"
          v-loading="false"
          class="table"
          :data="batchUploadResultList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          height="500"
        >
          <el-table-column label="错误序号" align="center" width="100px">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="文件名" align="center">
            <template slot-scope="scope">
              {{ scope.row.name | matchNull }}
            </template>
          </el-table-column>
          <el-table-column label="错误描述" align="center">
            <template slot-scope="scope">
              {{ scope.row.err | matchNull }}
            </template>
          </el-table-column>
        </el-table>
        <div v-show="hasCompleted" style="text-align: center; margin: 20px 0">
          <el-button type="primary" @click="drawerVisible = false">
            我已知晓
          </el-button>
          <el-button
            v-show="batchUploadResultList.length > 0"
            type="warning"
            @click="downloadBatchUploadErrorList"
          >
            下载错误列表文件
          </el-button>
        </div>
      </div>
    </el-drawer>
    <!-- 批量注册人员-弹框 -->
    <el-dialog
      class="batchVisible"
      title="批量注册人员"
      :visible.sync="batchVisible"
      destroy-on-close
    >
      <p class="text-color">
        上传的文件夹可由任意Jpg，jpeg，png三种格式的人员头像照片组成。命名规则参数里，姓名必填，手机号、身份证、卡号任选其一必选；任意选择参数排列形成照片命名参数顺序，并按照此顺序命名照片，最后上传包含照片的文件夹。
      </p>
      <el-form
        ref="batch_form"
        :model="batch_form"
        :rules="batch_rules"
        label-width="160px"
        label-position="left"
      >
        <el-form-item label="照片命名参数顺序：" prop="pictreName">
          <div v-if="batch_form.pictreName.length > 0">
            <span
              v-for="(item, index) in batch_form.pictreName"
              :key="index"
              style="
                display: inline-block;
                padding-left: 5px;
                padding-right: 5px;
              "
              :class="{ 'color-red el-icon-delete': bgcolor === index }"
              @mouseover="pictreAfter(index)"
              @mouseout="pictreOut(index)"
              @click="delPictreRules(index)"
            >
              {{ item }}
            </span>
          </div>
          <span v-else class="color-gray">任意选择参数进行样式排列</span>
        </el-form-item>
        <el-form-item label="照片命名规则参数：" prop="pictre_rules">
          <span
            v-for="(item, index) in batch_form.pictre_rules"
            :key="index"
            class="pictre-rules"
            @click="clickPictreRules(index, item.name)"
          >{{ item.name }} +</span>
        </el-form-item>
        <el-form-item label="上传照片的文件夹：" prop="file">
          <a href="javascript:;" class="file file1">
            上传文件夹
            <input
              ref="file"
              type="file"
              name="file"
              webkitdirectory
              @change="chooseFile($event)"
            >
          </a>
          <span style="margin-left: 8px">
            {{ batch_form.file ? uploadFileName : "" }}</span>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="batchVisible = false"> 取消 </el-button>
        <BatchUpload
          :format-styles="['png', 'jpg', 'jpeg']"
          :need-file-name-list="batch_form.pictreName | pictreNameEn"
          :file="batch_form.file"
          @getFileList="getFileList"
        />
      </div>
    </el-dialog>
    <!-- 批量编辑-弹框 -->
    <el-dialog
      class="batchVisible"
      title="批量编辑"
      :visible.sync="batchEditVisible"
      :close-on-click-modal="false"
      @close="closeBatch"
    >
      <p class="text-color">
        在“比对唯一参数”里选择一项作为更新文件里的数据和后台数据进行寻找匹配的标准参数值。上传excel更新文件后，根据选择的比对唯一参数寻找匹配对应的后台数据，更新文件里填写的内容在匹配上对应的后台数据后将覆盖更新，没填写的内容将不进行覆盖更新。
      </p>
      <el-form
        ref="batch_edit_form"
        :model="batch_edit_form"
        :rules="batch_edit_rules"
        label-width="120px"
        label-position="left"
      >
        <el-form-item
          label="对比唯一参数"
          prop="uniqueCode"
          class="form-item-style"
        >
          <el-radio-group v-model="batch_edit_form.uniqueCode">
            <el-radio :label="1">身份证号</el-radio>
            <el-radio :label="2">手机号</el-radio>
            <el-radio :label="3">卡号</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传Excel文件" prop="file">
          <a href="javascript:;" class="file file1">
            上传文件
            <input
              ref="file"
              type="file"
              name="file"
              @change="batchEditUpload($event)"
            >
          </a>
          <span style="margin-left: 8px">
            {{ batch_edit_form.file ? batch_edit_form.fileName : "" }}</span>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeBatch"> 取消 </el-button>
        <el-button type="primary" @click="batchEditFun"> 确定 </el-button>
      </div>
    </el-dialog>
    <!--操作人-->
    <el-dialog
      title="操作人"
      width="400px"
      :visible.sync="operatorVisible"
      destroy-on-close
    >
      <div v-if="operatorData" class="content-operator">
        <div>UID：{{ operatorData.zfbUserId }}</div>
        <div>姓名：{{ operatorData.username }}</div>
        <div>手机号：{{ operatorData.phone | desensitization(3, 7) }}</div>
        <div>证件号：{{ operatorData.idNumber | desensitization(6, 14) }}</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="operatorVisible = false">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import detailsDialog from '@/components/DialogDetails/index.vue'
import {
  getPageList,
  insert,
  delete_user,
  deleteAll,
  update,
  uploadUserWhitelistExcel,
  pictureLocal,
  getUserWhitelistEffectiveTime,
  editUserWhitelistExcel
} from '@/api/ordinary_user'
import { checkRole, checkVisitorType } from '@/utils/checkRole'
import { defaultTime, checkTime, calculateTime } from '@/utils/defaultTime'
import Pagination from '@/components/Pagination'
import BatchUpload from '@/components/BatchUpload'
import {
  getArea,
  getCity,
  getProvince,
  getStreet,
  getPolice,
  getUserListSearch,
  getWhiteListFrom,
  userWhitelistExcelOut,
  getPrivateAreaList,
  getContextById,
  getContextByWhiteId,
  doGetWhiteExcel,
  queryEnterpriseAccount,
  getUserWhitePersonnelTypeEnum,
  getParentInfo,
  batchEditUserWhitelist,
  batchUpdate,
  batchDelete,
  batchDistribution
} from '@/api/user_manage'
import { getAreaList } from '@/api/area'
import { reIssue } from '@/api/old_api_pengwenbing'
import { downloadPhotosWhiteList } from '@/utils/steakPhoto'
import { readExcel } from '@/utils/getExcelList'
export default {
  components: { Pagination, detailsDialog, BatchUpload },
  filters: {
    matchNull(str) {
      if (!str) {
        return '-'
      } else {
        return str
      }
    },
    pictreNameEn(str) {
      const str2 = JSON.parse(JSON.stringify(str))
      for (let i = 0; i < str2.length; i++) {
        if (str2[i].indexOf('姓名') > -1) {
          str2[i] = 'name'
        } else if (str2[i].indexOf('手机号') > -1) {
          str2[i] = 'phone'
        } else if (str2[i].indexOf('身份证') > -1) {
          str2[i] = 'idNumber'
        } else if (str2[i].indexOf('卡号') > -1) {
          str2[i] = 'cardIdEx'
        }
        // else if (str2[i].indexOf("有效期开始时间") > -1) {
        //   str2[i] = "startTime";
        // } else if (str2[i].indexOf("有效期结束时间") > -1) {
        //   str2[i] = "endTime";
        // }
      }
      return str2
    },
    getPersonnelTypeName(id, that) {
      if (id) {
        const index = that.userTypeList.findIndex((item) => {
          return item.code == id
        })
        if (index > -1) {
          return that.userTypeList[index].desc
        } else {
          return id
        }
      }
    },
    // 脱敏
    desensitization(string = '', start, end) {
      if (string) {
        var star = ''
        function makeStar(number) {
          if (number > 0) {
            star += '*'
            return makeStar(--number)
          } else {
            return star
          }
        }
        return (
          string.substring(0, start) +
          makeStar(end - start) +
          string.substring(end)
        )
      }
    }
  },
  data() {
    return {
      that: this,
      // 主表格&主表格加载状态
      list: [],
      listLoading: true,
      downloadLoading: false, // 导出加载
      isOut: this.$store.getters.isOut, // 是否可以导出
      placeType: this.$store.getters.placeType, // 是否是楼宇场景
      isOpenPrivateArea: this.$store.getters.isOpenPrivateArea, // 是否开启私有区域
      enterpriseName: this.$store.getters.enterpriseName,
      tenantEnterpriseName: this.$store.getters.tenantEnterpriseName,
      // 分页参数
      page: {
        data: {
          username: null,
          name: '',
          phone: '',
          idNumber: '',
          provinceId: null,
          cityId: null,
          areaId: null,
          status: null,
          contents: null, // 自定义字段
          cardIdEx: null, // 卡号
          pushType: null, // 推送类型
          endTime: null,
          startTime: null,
          warehousingStatus: null,
          zoneDevicePassIdList: [],
          validPeriodStatus: null,
          criticalTime: null
        },
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      private_list: [], // 私有区域列表
      user_list: [], // 账号列表_搜索
      enterprise_list: [], // 企业账号列表
      // 省市县列表_搜索
      province_list_search: [],
      city_list_search: [],
      area_list_search: [],
      // 是否认证_搜索
      status_list: [
        { id: 1, name: '已认证' },
        { id: 2, name: '未认证' }
      ],
      certification_type: [
        { id: 0, name: '小程序' },
        { id: 1, name: '初次添加' },
        { id: 2, name: '人工录入' },
        { id: 3, name: '访客机' },
        { id: 4, name: '身份证认证' },
        { id: 5, name: '卡号认证' }
      ],
      regionList: [], // 所属区域
      validityList: [
        { id: 0, name: '待生效' },
        { id: 1, name: '有效' },
        { id: 2, name: '已到期' }
      ], // 有效期状态
      criticalTimeList: [
        { id: 30, name: '30天内到期' },
        { id: 15, name: '15天内到期' },
        { id: 7, name: '7天内到期' }
      ], // 临期时间

      // 是否显示对话框
      dialogVisible: false,
      operatorVisible: false,
      // 对话框标题
      dialogTitle: {
        add: '添加白名单',
        update: '编辑白名单',
        artificial: '人工录入',
        multipleUpdate: '编辑用户信息'
      },
      dialogType: 'add',
      // 添加账号参数
      user_form: {
        name: '',
        phone: '',
        idNumber: '',
        extend1: '',
        avatar: '',
        inputType: 1, // 1.录入 2.人工录入
        // 自定义字段
        contents: [],
        adminId: null, // 企业id
        adminAreaType: 1, // 通行区域权限
        privateAreaIdList: [], // 选择私有区域
        startTime: null,
        endTime: null,
        cardIdEx: '', // 卡号
        personnelType: null, // 人员类型
        owningRegion: 1,
        zoneDevicePassIdList: []
      },
      user_form_copy: {},
      // 初始化的省市区(街道)参数
      addressList: [],
      // 验证规则
      rules: {
        name: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }],
        // phone: [
        //   { required: true, message: '请输入微信绑定的手机号', trigger: 'blur' },
        // ],
        privateAreaIdList: [
          { required: true, message: '请选择私有区域', trigger: 'blur' }
        ],
        avatar: [{ required: true, message: '请上传照片', trigger: 'blur' }],
        adminId: [{ required: true, message: '请选择账号', trigger: 'blur' }],
        adminAreaType: [
          { required: true, message: '请选择通行区域权限', trigger: 'blur' }
        ],
        startTime: [{ required: true, message: '请选择', trigger: 'blur' }],
        endTime: [{ required: true, message: '请选择', trigger: 'blur' }],
        personnelType: [{ required: true, message: '请选择', trigger: 'blur' }],
        owningRegion: [{ required: true, message: '请选择', trigger: 'blur' }],
        zoneDevicePassIdList: [
          { required: true, message: '请选择', trigger: 'blur' }
        ]
      },
      userTypeList: [],
      // 是否显示提示
      showTooltip: false,
      doUpload: '',
      // 详情
      dialogTableVisible: false,
      detailsList: [],
      visitToJetList: {},
      row: null,
      // 省市县列表
      province_list: [],
      city_list: [],
      area_list: [],
      street_list: [],
      // 批量人员注册-处理提示值
      hasDealNumber: 0,
      waitDealNumber: 0,
      allNumber: 0,
      hasCompleted: false,
      // 批量注册人员-抽屉控制值
      drawerVisible: false,
      batchUploadResultList: [],
      batchVisible: false, // 批量注册人员-弹框
      batch_form: {
        pictreName: [],
        file: null,
        pictre_rules: [
          {
            name: '姓名'
          },
          {
            name: '手机号'
          },
          {
            name: '身份证'
          },
          {
            name: '卡号'
          }
          // {
          //   name: "有效期开始时间",
          // },
          // {
          //   name: "有效期结束时间",
          // },
        ]
      },
      batch_rules: {
        pictreName: [{ required: true, message: '请选择', trigger: 'blur' }],
        file: [{ required: true, message: '请上传文件', trigger: 'blur' }],
        pictre_rules: [
          { required: true, message: '请上传文件', trigger: 'blur' }
        ]
      },
      bgcolor: '-1', // 鼠标移入命名参数
      uploadFileName: '', // 文件夹名称
      temporaryAreaList: [], // 私有区域临时数据
      operatorData: null, // 操作人
      putStorage: [
        { id: 0, name: '关闭' },
        { id: 1, name: '开通' }
      ],
      // 批量编辑
      batchEditVisible: false,
      batch_edit_form: {
        uniqueCode: null,
        fileName: null,
        file: null
      },
      batch_edit_rules: {
        uniqueCode: [{ required: true, message: '请选择', trigger: 'blur' }],
        file: [{ required: true, message: '请选择', trigger: 'blur' }]
      },
      // 多选编辑
      multipleChoice: false,
      multipleCheckedList: [],
      ids: [],
      updataLoading: false
    }
  },
  computed: {
    showImg() {
      return (
        this.dialogType === 'artificial' ||
        (this.dialogType === 'update' &&
          (this.user_form.pushType == 2 ||
            this.user_form.pushType == 4 ||
            this.user_form.pushType == 5))
      )
    },
    // 批量注册人员-返回向下取整，减少渲染次数
    makePercent() {
      return Math.floor((this.hasDealNumber / this.allNumber) * 100)
    },
    showUserName() {
      if (this.checkRole([5]) && this.placeType === 0) {
        return false
      } else if (this.checkRole([99])) {
        return false
      } else {
        return true
      }
    }
  },
  watch: {
    'user_form.adminAreaType'(n, o) {
      if (n == 1) {
        // 清除绑定账号和私有区域数据
        this.user_form.adminId = null
        this.user_form.privateAreaIdList = []
      } else if (n == 2) {
        // 清除私有区域数据
        this.user_form.privateAreaIdList = []
      } else if (n == 3 && this.user_form.adminId) {
        this.getPrivateAreaList(this.user_form.adminId)
      }
    },
    drawerVisible(n) {
      if (n) {
        this.batchVisible = false
      }
    }
  },
  created() {
    this.fetchData()
    this.getUserListSearch()
    this.getAddressListSearch(1)
    this.getAreaList()
    this.getUserWhitelistEffectiveTime(this.$store.getters.adminId)
    this.batch_form_copy = JSON.parse(JSON.stringify(this.batch_form))
    if (checkRole([2, 3])) {
      this.getAddressListSearch(2, this.$store.getters.provinceId)
      this.page.data.provinceId = this.$store.getters.provinceId
    } else if (checkRole([4])) {
      this.getAddressListSearch(2, this.$store.getters.provinceId)
      this.page.data.provinceId = this.$store.getters.provinceId
      this.getAddressListSearch(3, this.$store.getters.cityId)
      this.page.data.cityId = this.$store.getters.cityId
    } else if (checkRole([5])) {
      this.getAddressListSearch(2, this.$store.getters.provinceId)
      this.page.data.provinceId = this.$store.getters.provinceId
      this.getAddressListSearch(3, this.$store.getters.cityId)
      this.page.data.cityId = this.$store.getters.cityId
      this.page.data.areaId = this.$store.getters.areaId
    } else if (checkRole([99])) {
      this.getPrivateAreaList(this.$store.getters.adminId)
    }
    if (this.placeType != 2 || !checkRole([99])) {
      this.queryEnterpriseAccount()
    }
    this.getContextById(this.$store.getters.adminId)
    this.getUserWhitePersonnelTypeEnum()
  },
  methods: {
    // 查询权限
    checkRole,
    // 查询功能权限
    checkVisitorType,
    // 获取默认时间
    defaultTime,
    // 校验时间格式
    checkTime,
    // 判断开始时间与结束时间
    calculateTime,
    // 获取列表数据
    fetchData() {
      this.listLoading = true
      this.findComingAge()
      getPageList(this.page).then((res) => {
        this.list = res.data.list
        this.total = res.data.total
        this.listLoading = false
      })
    },
    // 筛选临期
    findComingAge() {
      if (this.page.data.criticalTime) {
        this.page.data.startTime = this.defaultTime(0, 0)
        this.page.data.endTime = this.defaultTime(
          0,
          this.page.data.criticalTime
        )
      } else {
        this.page.data.endTime = ''
      }
    },
    // 多选编辑
    multipleFun(type) {
      if (this.multipleCheckedList && this.multipleCheckedList.length > 0) {
      } else {
        this.$message({
          type: 'error',
          message: '请选择用户'
        })
        return
      }
      this.ids = []
      this.multipleCheckedList.forEach((item) => {
        this.ids.push(item.id)
      })
      const data = {
        adminId: this.$store.getters.adminId,
        ids: this.ids
      }
      switch (type) {
        case 1:
          this.initAddress(this.user_form.contents, 1)
          this.user_form = JSON.parse(JSON.stringify(this.user_form_copy))
          this.dialogType = 'multipleUpdate'
          this.user_form.startTime = ''
          this.user_form.endTime = ''
          this.user_form.owningRegion = null
          this.dialogVisible = true
          break
        case 2:
          this.$confirm(
            '确定将选中的员工重新下发至其所属区域的设备吗?',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }
          ).then(() => {
            batchDistribution(data).then((res) => {
              this.fetchData()
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.multipleChoice = false
              this.$refs.table_form.clearSelection()
            })
          })
          break
        case 3:
          this.$confirm('确定将选中的员工从员工列表里删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            batchDelete(data).then((res) => {
              this.fetchData()
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.multipleChoice = false
              this.$refs.table_form.clearSelection()
            })
          })
          break
        default:
          break
      }
    },
    handleSelectionChange(list) {
      this.multipleCheckedList = list
    },
    getRowKeys(row) {
      return row.id
    },
    // 返回所有的区域列表概览
    async getAreaList() {
      try {
        const result = await getAreaList({
          adminId: this.$store.state.user.adminId
        })
        this.regionList = result.data
      } catch (e) {
        console.log(e)
        this.regionList = []
      }
    },
    // 获取私有区域列表
    async getPrivateAreaList(adminId, type) {
      await getPrivateAreaList(adminId).then((res) => {
        this.private_list = res.data
        // 批量导入
        if (type) {
          const data = {
            adminId: adminId,
            areaList: res.data
          }
          this.temporaryAreaList.push(data)
        }
      })
    },
    // 获取人员类型列表
    async getUserWhitePersonnelTypeEnum() {
      await getUserWhitePersonnelTypeEnum().then((res) => {
        this.userTypeList = res.data
      })
    },
    // 操作人
    detailFun(row) {
      getParentInfo(row.userWhitelistId).then((res) => {
        this.operatorData = res.data
        this.operatorVisible = true
      })
    },
    // 打开添加对话框
    create(type) {
      this.initAddress(this.user_form.contents)
      this.user_form = JSON.parse(JSON.stringify(this.user_form_copy))
      this.user_form.inputType = type
      this.user_form.startTime = this.defaultTime(0)
      if (type === 1) {
        this.dialogType = 'add'
        this.user_form.endTime = this.defaultTime(10)
      } else {
        this.dialogType = 'artificial'
      }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['user_form'].clearValidate()
      })
    },
    // 确定添加
    add() {
      this.$refs['user_form'].validate((valid) => {
        if (
          valid &&
          this.matchIdNumberOrPhone(this.user_form) &&
          this.combineValue()
        ) {
          if (this.user_form.inputType == 1) {
            this.user_form.idNumberType = 1
          }
          if (this.user_form.owningRegion == 1) {
            this.user_form.zoneDevicePassIdList = []
          }
          this.user_form.addCustomList = this.user_form.contents
          insert(this.user_form).then((res) => {
            this.dialogVisible = false
            this.fetchData()
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
          })
        }
      })
    },
    // 打开编辑
    update(row) {
      getContextByWhiteId(row.id).then((res) => {
        this.user_form.avatar = row.avatar
        this.user_form = JSON.parse(JSON.stringify(row))
        this.dialogType = 'update'
        this.user_form.contents = res.data
        if (
          this.user_form.zoneDevicePassIdList &&
          this.user_form.zoneDevicePassIdList.length > 0
        ) {
          this.user_form.owningRegion = 2
        } else {
          this.user_form.owningRegion = 1
        }
        this.dialogVisible = true
        this.initAddress(this.user_form.contents)
        this.$nextTick(() => {
          this.$refs['user_form'].clearValidate()
        })
      })
    },
    // 确定编辑
    doUpdate() {
      // 批量编辑
      if (this.dialogType == 'multipleUpdate') {
        this.updataLoading = true
        try {
          if (this.combineValue()) {
            this.user_form.adminId = this.$store.getters.adminId
            this.user_form.ids = this.ids
            this.user_form.addCustomList = this.user_form.contents

            batchUpdate(this.user_form).then((res) => {
              this.dialogVisible = false
              this.fetchData()
              this.$message({
                type: 'success',
                message: '编辑成功!'
              })
              this.multipleChoice = false
              this.updataLoading = false
              this.$refs.table_form.clearSelection()
            })
          }
        } catch (error) {
          this.updataLoading = false
        }
      } else {
        this.$refs['user_form'].validate((valid) => {
          if (valid && this.combineValue()) {
            this.user_form.addCustomList = this.user_form.contents
            if (this.user_form.owningRegion == 1) {
              this.user_form.zoneDevicePassIdList = []
            }
            update(this.user_form).then((res) => {
              this.dialogVisible = false
              this.fetchData()
              this.$message({
                type: 'success',
                message: '编辑成功!'
              })
            })
          }
        })
      }
    },

    // 详情
    searchContent(row) {
      this.row = row
      getWhiteListFrom(row.id).then((res) => {
        this.visitToJetList = res.data
        this.dialogTableVisible = true
      })
    },
    // 获取自定义字段模板
    getContextById(adminId) {
      getContextById(adminId).then((res) => {
        this.user_form.contents = res.data
        this.user_form_copy = JSON.parse(JSON.stringify(this.user_form))
        this.page.data.contents = res.data
        this.initAddress(this.user_form.contents)
      })
    },
    // 初始化自定义字段为省市区(街道)类型的初始数据
    initAddress(contents, type) {
      const addressList = []
      contents.forEach(async(item) => {
        if (item.customType.indexOf('省市区') > -1) {
          let obj = {
            id: item.id,
            province_list: [],
            provinceId: null,
            provinceName: null,
            city_list: [],
            cityId: null,
            cityName: null,
            area_list: [],
            areaId: null,
            areaName: null
          }
          if (item.customType === '省市区街道') {
            obj = { ...obj, street_list: [], streetId: null, streetName: null }
          }
          await this.getAddressList(1, null, obj)
          // 编辑的时候赋值操作
          if (item.customNameVal && !type) {
            const arr = item.customNameVal.split('-')
            await this.completeList(obj, arr)
          }
          addressList.push(obj)
        }
      })
      this.addressList = addressList
    },
    // 补全回显省市区列表
    async completeList(obj, arr) {
      if (arr[0]) {
        await this.chooseProvince(arr[0], obj)
        obj.provinceName = arr[0]
      }
      if (arr[1]) {
        await this.chooseCity(arr[1], obj)
        obj.cityName = arr[1]
      }
      if (arr[2]) {
        await this.chooseArea(arr[2], obj)
        obj.areaName = arr[2]
      }
      if (arr[3]) {
        obj.streetName = arr[3]
      }
    },
    // 匹配模板id对应的临时地址对象
    matchContentId(id) {
      return (
        this.addressList.find((item) => {
          return item.id === id
        }) || {}
      )
    },
    // 添加和编辑写入地址的值&用于模板校验
    combineValue() {
      let canSubmit = true
      if (this.user_form.contents) {
        this.user_form.contents.forEach((item) => {
          const ads = this.addressList.find((obj) => {
            return item.id === obj.id
          })
          if (ads && ads.provinceName) {
            if (ads.cityName && ads.areaName) {
              item.customNameVal =
                ads.provinceName + '-' + ads.cityName + '-' + ads.areaName
              if (item.customType === '省市区街道' && ads.streetName) {
                item.customNameVal += '-' + ads.streetName
              } else if (item.customType === '省市区街道' && !ads.streetName) {
                canSubmit = false
              }
            } else {
              canSubmit = false
            }
          }
        })
      }

      return canSubmit
    },
    // 图片上传前
    beforeAvatarUpload(file) {
      if (
        !(
          file.type === 'image/png' ||
          file.type === 'image/gif' ||
          file.type === 'image/jpg' ||
          file.type === 'image/jpeg'
        )
      ) {
        this.$notify.warning({
          title: '警告',
          message:
            '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
        })
        return
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$notify.warning({
          title: '警告',
          message: '图片大小必须小于2M'
        })
        return
      }
    },
    doUploadAvatar2(obj, item) {
      var avatar = new FormData()
      avatar.append('file', obj.file)
      pictureLocal(avatar).then((res) => {
        item.customNameVal = res.data
      })
    },
    // 身份证号和手机号二选一
    matchIdNumberOrPhone(user_form) {
      if (user_form.idNumber || user_form.phone || user_form.cardIdEx) {
        this.showTooltip = false
        return true
      } else {
        this.showTooltip = true
        return false
      }
    },
    // 删除账号
    deleteUser(id) {
      this.$confirm('确定要删除此人员吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        delete_user(id).then((res) => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      })
    },
    // 多选删除
    deleteAll() {
      this.$prompt('请输入删除密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(({ value }) => {
          if (value == 'Nqj##361') {
            this.$message({
              type: 'success',
              message: '密码正确,正在删除全部人员...'
            })
            this.downloadLoading = true
            deleteAll().then((res) => {
              this.fetchData()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.downloadLoading = false
            })
          } else {
            this.$message({
              type: 'error',
              message: '您输入的密码不正确'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    // 下载模板
    download() {
      doGetWhiteExcel().then((res) => {
        var eleLink = document.createElement('a')
        eleLink.style.display = 'none'
        // 字符内容转变成blob地址
        var blob = new Blob([res])
        eleLink.href = URL.createObjectURL(blob)
        eleLink.setAttribute('download', '模板.xlsx')
        // 自动触发点击
        document.body.appendChild(eleLink)
        eleLink.click()
        // 然后移除
        document.body.removeChild(eleLink)
      })
    },
    closeBatch() {
      (this.batch_edit_form = {
        uniqueCode: null,
        fileName: null,
        file: null
      }),
      (this.batchEditVisible = false)
    },
    batchEditUpload(e) {
      this.batch_edit_form.fileName = e.target.files[0].name
      this.batch_edit_form.file = e.currentTarget.files
    },
    // 批量编辑
    batchEditFun(e) {
      this.$refs['batch_edit_form'].validate((valid) => {
        if (valid) {
          this.batchEditVisible = false
          this.uploadFun(
            this.batch_edit_form.file,
            'batchEdit',
            this.batch_edit_form.uniqueCode
          )
        }
      })
    },
    // 批量导入
    async uploadFun(e, type, uniqueCode) {
      this.loading = true
      let files
      if (type) {
        files = e
      } else {
        files = e.currentTarget.files
      }
      if (!files.length) {
        return
      }
      let data = await readExcel(files[0]) // file指的是获取的excel文件对象，如e.file
      const newData = []
      data.forEach((i) => {
        for (const key in i) {
          if (i[key]) {
            newData.push(i)
            return
          }
        }
      })
      data = newData
      this.loading = false
      this.allNumber = data.length
      this.drawerVisible = true
      this.doUploadAddUserInfo(0, data, type, uniqueCode)
      e.target.value = ''
    },
    // 递归调用校验数据并请求
    async doUploadAddUserInfo(i, data, type, uniqueCode) {
      if (i > data.length - 1) {
        this.hasCompleted = true
        this.fetchData()
        this.$message.success('操作已完成！')
        return
      }

      const form = {}
      if (this.page.data.contents && this.page.data.contents.length > 0) {
        form.addCustomList = JSON.parse(
          JSON.stringify(this.page.data.contents)
        )
        for (var k in form.addCustomList) {
          form.addCustomList[k].customNameVal =
            data[i][form.addCustomList[k].customName]
        }
      }
      form.name = data[i]['姓名']
      form.phone = data[i]['手机号']
      form.idNumber = data[i]['身份证号']
      form.startTime = data[i]['开始有效期']
      form.personnelType1 = data[i]['人员类型']
      if (form.personnelType1) {
        switch (form.personnelType1) {
          case '学生':
            form.personnelType = 1
            break
          case '教职工':
            form.personnelType = 2
            break
          default:
            break
        }
      }
      if (form.startTime) {
        form.startTime.toString().trim()
      }
      form.endTime = data[i]['结束有效期']
      if (form.endTime) {
        form.endTime.toString().trim()
      }
      form.cardIdEx = data[i]['物理卡号']
      form.adminName = data[i]['账号名称']
      form.adminAreaTypeName = data[i]['通行区域权限']
      if (data[i]['私有区域']) {
        form.privateAreaName = data[i]['私有区域'].toString().split('，')
      }
      form.inputType = 1
      form.pushType = 1
      if (type) {
        await this.isPassBatchEditFun(form, i, uniqueCode).then(async(res) => {
          let timeout = 0
          if (res.isOk) {
            await this.batchEditUserWhitelist(data, form, i, uniqueCode)
          } else {
            this.getFileList1(data, i, res, form)
            timeout = 0
          }
          this.hasDealNumber = i + 1
          this.waitDealNumber = data.length - (i + 1)
          setTimeout(() => {
            this.doUploadAddUserInfo(++i, data, type, uniqueCode)
          }, timeout)
        })
      } else {
        await this.isPassFun(form, i).then(async(res) => {
          let timeout = 0
          if (res.isOk) {
            await this.addUserInfo(data, form, i)
          } else {
            this.getFileList1(data, i, res, form)
            timeout = 0
          }
          this.hasDealNumber = i + 1
          this.waitDealNumber = data.length - (i + 1)
          setTimeout(() => {
            this.doUploadAddUserInfo(++i, data, type, uniqueCode)
          }, timeout)
        })
      }
    },
    // 校验模板数据内容
    async isPassFun(form, i) {
      const isPass = {
        isOk: true,
        incorrect: {
          name: `第${i + 1}行`,
          err: ''
        }
      }
      if (!form.personnelType && this.placeType == 3) {
        isPass.incorrect.err = '人员类型为必填项'
        isPass.isOk = false
        return isPass
      }
      if (!form.name) {
        isPass.incorrect.err = '姓名为必填项'
        isPass.isOk = false
        return isPass
      }
      if (!(form.idNumber || form.phone || form.cardIdEx)) {
        isPass.incorrect.err = '手机号、身份证、卡号任选其一必选'
        isPass.isOk = false
        return isPass
      }
      // if (
      //   form.idNumber &&
      //   !/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(form.idNumber)
      // ) {
      //   isPass.isOk = false;
      //   isPass.incorrect.err = "身份证长度或格式有误";
      //   return isPass;
      // }
      if (form.phone && !/^[0-9]*$/.test(form.phone)) {
        isPass.isOk = false
        isPass.incorrect.err = '手机号只能由数字组成'
        return isPass
      }
      if (form.startTime) {
        if (!this.checkTime(form.startTime)) {
          isPass.isOk = false
          isPass.incorrect.err = '开始时间格式有误'
          return isPass
        }
      }
      if (form.endTime) {
        if (!this.checkTime(form.endTime)) {
          isPass.isOk = false
          isPass.incorrect.err = '结束时间格式有误'
          return isPass
        }
      }
      if (form.startTime && form.endTime) {
        const msg = this.calculateTime(form.startTime, form.endTime)
        if (!msg.isOk) {
          isPass.incorrect.err = msg.incorrect.err
          isPass.isOk = msg.isOk
          return isPass
        }
      } else if (form.startTime && !form.endTime) {
        form.endTime = this.user_form.endTime
      } else if (!form.startTime && form.endTime) {
        form.startTime = this.defaultTime(0)
      } else if (!form.startTime && !form.endTime) {
        form.startTime = this.defaultTime(0)
        form.endTime = this.user_form.endTime
      }
      if (this.placeType == 2) {
        if (!form.adminAreaTypeName) {
          isPass.isOk = false
          isPass.incorrect.err = '通行区域权限为必填项'
          return isPass
        }
        if (checkRole([99]) && form.adminAreaTypeName === '楼宇公有') {
          isPass.isOk = false
          isPass.incorrect.err = '通行区域权限有误'
          return isPass
        }
        if (form.adminAreaTypeName === '企业私有' && !form.privateAreaName) {
          isPass.isOk = false
          isPass.incorrect.err = '通行区域权限为企业私有时，私有区域必填'
          return isPass
        }
        switch (form.adminAreaTypeName) {
          case '楼宇公有':
            form.adminAreaType = 1
            break
          case '企业公有':
            form.adminAreaType = 2
            break
          case '企业私有':
            form.adminAreaType = 3
            break
          default:
            isPass.isOk = false
            isPass.incorrect.err = '通行区域权限有误'
            return isPass
        }
      }
      if (form.adminName) {
        const index = this.enterprise_list.findIndex((item) => {
          return item.username === form.adminName
        })
        if (index > -1) {
          form.adminId = this.enterprise_list[index].adminId
        } else {
          isPass.isOk = false
          isPass.incorrect.err = '账号名称有误'
          return isPass
        }
      }

      if (form.privateAreaName) {
        if (this.isOpenPrivateArea != 1) {
          isPass.isOk = false
          isPass.incorrect.err = '该账号未开启私有区域'
          return isPass
        }
        if (checkRole([99])) {
          form.adminId = this.$store.getters.adminId
        }
        if (!form.adminId && checkRole([5])) {
          isPass.isOk = false
          isPass.incorrect.err = '账号名称有误'
          return isPass
        }
        form.privateAreaIdList = []
        if (this.temporaryAreaList.length === 0) {
          await this.getPrivateAreaList(form.adminId, true)
        } else {
          const index = this.temporaryAreaList.findIndex((i) => {
            return i.adminId === form.adminId
          })
          if (index === -1) {
            await this.getPrivateAreaList(form.adminId, true)
          }
        }
        const index = this.temporaryAreaList.findIndex((value) => {
          return value.adminId === form.adminId
        })
        if (index > -1) {
          this.temporaryAreaList[index].areaList.forEach((j) => {
            if (form.privateAreaName.indexOf(j.privateAreaName) > -1) {
              form.privateAreaIdList.push(j.privateAreaId)
            }
          })
          if (form.privateAreaIdList.length != form.privateAreaName.length) {
            isPass.isOk = false
            isPass.incorrect.err = '私有区域有误'
            return isPass
          }
        }
      }
      return new Promise((resolve) => {
        resolve(isPass)
      })
    },
    // 校验批量编辑模板数据内容
    async isPassBatchEditFun(form, i) {
      const isPass = {
        isOk: true,
        incorrect: {
          name: `第${i + 1}行`,
          err: ''
        }
      }
      switch (this.batch_edit_form.uniqueCode) {
        case 1:
          if (!form.idNumber) {
            isPass.isOk = false
            isPass.incorrect.err = '身份证号为必填'
            return isPass
          }
          // if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(form.idNumber)) {
          //   isPass.isOk = false;
          //   isPass.incorrect.err = "身份证长度或格式有误";
          //   return isPass;
          // }
          break
        case 2:
          if (!form.phone) {
            isPass.isOk = false
            isPass.incorrect.err = '手机号为必填'
            return isPass
          }
          if (form.phone && !/^[0-9]*$/.test(form.phone)) {
            isPass.isOk = false
            isPass.incorrect.err = '手机号只能由数字组成'
            return isPass
          }
          break
        case 3:
          if (!form.cardIdEx) {
            isPass.isOk = false
            isPass.incorrect.err = '卡号为必填'
            return isPass
          }
          break
        default:
          break
      }
      if (form.adminName) {
        const index = this.enterprise_list.findIndex((item) => {
          return item.username === form.adminName
        })
        if (index > -1) {
          form.adminId = this.enterprise_list[index].adminId
        } else {
          isPass.isOk = false
          isPass.incorrect.err = '账号名称有误'
          return isPass
        }
      }
      return new Promise((resolve) => {
        resolve(isPass)
      })
    },
    // 批量导入-调用添加员工接口
    async addUserInfo(data, form, i) {
      await insert(form)
        .then((res) => {})
        .catch((err) => {
          this.batchUploadResultList.push({ name: `第${i + 1}行`, err: err })
          this.makeScrollDown()
        })
    },
    // 常客的批量编辑
    async batchEditUserWhitelist(data, form, i, uniqueCode) {
      form.uniqueCode = uniqueCode
      await batchEditUserWhitelist(form)
        .then((res) => {})
        .catch((err) => {
          this.batchUploadResultList.push({ name: `第${i + 1}行`, err: err })
          this.makeScrollDown()
        })
    },
    // 批量导入-推入错误信息
    getFileList1(data, i, isPass) {
      // this.initAddress(this.user_form.contents);
      this.batchUploadResultList.push(isPass.incorrect)
      this.makeScrollDown()
    },

    // 点击批量注册人员
    clickBulkRegistration() {
      this.batchVisible = true
      this.batch_form = JSON.parse(JSON.stringify(this.batch_form_copy))
      this.$nextTick(() => {
        this.$refs['batch_form'].clearValidate()
      })
    },
    // 鼠标经过参数
    pictreAfter(index) {
      this.bgcolor = index
    },
    // 鼠标离开参数
    pictreOut(index) {
      this.bgcolor = -1
    },
    // 点击照片命名规则
    clickPictreRules(index, name) {
      this.bgcolor = -1
      if (this.batch_form.pictreName.length > 0) {
        this.batch_form.pictreName.push('-' + name)
      } else {
        this.batch_form.pictreName.push(name)
      }
      this.batch_form.pictre_rules.splice(index, 1)
    },
    // 删除照片命名规则
    delPictreRules(index) {
      const name = this.batch_form.pictreName[index].replace('-', '')
      this.batch_form.pictre_rules.push({ name })
      this.batch_form.pictreName.splice(index, 1)
      this.batch_form.pictreName[0] = this.batch_form.pictreName[0].replace(
        '-',
        ''
      )
    },
    // 选择文件
    chooseFile(e) {
      const files = e.target.files
      if (!files || files.length < 1) {
        return
      }
      this.batch_form.file = files
      this.uploadFileName =
        this.batch_form.file[0].webkitRelativePath.split('/')[0]
    },
    // 批量注册人员-操作
    getFileList(correctList) {
      this.initAddress(this.user_form.contents)
      this.hasCompleted = false
      this.drawerVisible = true
      this.hasDealNumber = correctList.incorrect.length
      this.waitDealNumber = correctList.correct.length
      this.allNumber =
        correctList.incorrect.length + correctList.correct.length
      this.batchUploadResultList = correctList.incorrect.map((item) => {
        return { name: item.file.name, err: item.reason }
      })
      this.makeScrollDown()
      this.doSubmitUrl(correctList, 0)
    },
    // 批量注册人员-上传图片并提交至人工录入接口
    async doSubmitUrl(correctList, index) {
      if (index <= correctList.correct.length - 1) {
        // 换url
        const item = correctList.correct[index]
        const photo = new FormData()
        const fileName = item.avatar.name
        photo.append('file', item.avatar)
        await pictureLocal(photo).then((res) => {
          item.avatar = res.data
        })
        // 组装数据上传至人工录入接口
        const data = JSON.parse(JSON.stringify(this.user_form_copy))
        if (!item.idNumber) {
          this.batchUploadResultList.push({
            name: fileName,
            err: '请输入身份证'
          })
          this.makeScrollDown()
          // 继续调用
          this.doSubmitUrl(correctList, ++index)
          return
        }
        data.startTime = item.startTime || this.defaultTime(0)
        data.endTime = item.endTime || this.defaultTime(10)
        data.avatar = item.avatar
        data.name = item.name
        data.phone = item.phone
        data.idNumber = item.idNumber
        data.cardIdEx = item.cardIdEx
        data.inputType = 2
        data.adminAreaType = 2
        await insert(data)
          .then((res) => {})
          .catch((err) => {
            this.batchUploadResultList.push({ name: fileName, err: err })
          })
        this.hasDealNumber += 1
        this.waitDealNumber -= 1
        this.makeScrollDown()
        // 继续调用
        this.doSubmitUrl(correctList, ++index)
      } else {
        this.hasCompleted = true
        this.fetchData()
      }
    },
    // 批量注册人员-保持滚动条在最底部
    makeScrollDown() {
      this.$nextTick(() => {
        this.$refs.batch_upload_result.$refs.bodyWrapper.scrollTop =
          this.$refs.batch_upload_result.$refs.bodyWrapper.scrollHeight
      })
    },
    // 批量注册人员-返回进度条尾部显示值
    formatProgress(percent) {
      return percent == 100 ? '已完成' : ''
    },
    // 批量注册人员-导出错误名单
    downloadBatchUploadErrorList() {
      const list = this.batchUploadResultList
      let string = '序号\t文件名\t错误原因\n'
      for (let i = 0; i < this.batchUploadResultList.length; i++) {
        string +=
          (i + 1).toString() +
          '\t' +
          list[i].name +
          '\t' +
          list[i].err +
          '\t' +
          '\n'
      }
      const blob = new Blob([string], { type: 'text/plain;charset=utf-8' })
      const excel_url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = excel_url
      link.download = '错误名单列表.xls'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    verifyIdNumber(idNumber) {
      return /(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(idNumber)
    },
    // 导出记录
    exportRecord() {
      this.$prompt('请输入导出密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false
      })
        .then(({ value }) => {
          if (value == 'Nqj##361') {
            this.$message({
              type: 'success',
              message: '密码正确,正在下载...'
            })
            this.downloadLoading = true
            userWhitelistExcelOut(this.page.data).then((res) => {
              window.location.href = res.data
              this.downloadLoading = false
            })
          } else {
            this.$message({
              type: 'error',
              message: '您输入的密码不正确'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消导出'
          })
        })
    },
    doUploadAvatar(obj) {
      var avatar = new FormData()
      avatar.append('file', obj.file)
      pictureLocal(avatar).then((res) => {
        this.user_form.avatar = res.data
      })
    },
    changeAdminId(n) {
      if (n) {
        this.user_form.privateAreaIdList = []
        if (this.user_form.adminAreaType === 3) {
          this.getPrivateAreaList(n)
        }
      }
    },
    // 获取企业id
    queryEnterpriseAccount() {
      queryEnterpriseAccount().then((res) => {
        this.enterprise_list = res.data
      })
    },
    // 获取账号列表数据_搜索
    getUserListSearch() {
      getUserListSearch().then((res) => {
        this.user_list = res.data
      })
    },
    // 获取员工有效期
    getUserWhitelistEffectiveTime(id) {
      getUserWhitelistEffectiveTime(id).then((res) => {
        this.user_form.endTime = res.data
      })
    },
    // 获得省市县列表_搜索
    getAddressListSearch(type, code) {
      switch (type) {
        case 1:
          getProvince().then((res) => {
            this.province_list_search = res.data
          })
          break
        case 2:
          getCity(code).then((res) => {
            this.city_list_search = res.data
          })
          break
        case 3:
          getArea(code).then((res) => {
            this.area_list_search = res.data
          })
          break
        default:
          break
      }
    },
    // 选择省份_搜索
    chooseProvinceSearch(e) {
      this.city_list_search = []
      this.page.data.cityId = ''
      this.area_list_search = []
      this.page.data.areaId = ''
      this.page.data.areaName = ''
      this.getAddressListSearch(2, e)
    },
    // 选择市_搜索
    chooseCitySearch(e) {
      this.area_list = []
      this.page.data.areaId = ''
      this.page.data.areaName = ''
      this.getAddressListSearch(3, e)
    },
    // 获得省市县列表
    async getAddressList(type, code, obj) {
      switch (type) {
        case 1:
          await getProvince(code).then((res) => {
            obj.province_list = res.data
          })
          break
        case 2:
          await getCity(code).then((res) => {
            obj.city_list = res.data
          })
          break
        case 3:
          await getArea(code).then((res) => {
            obj.area_list = res.data
          })
          break
        case 4:
          await getStreet(code).then((res) => {
            obj.street_list = res.data
          })
          break
        default:
          break
      }
    },
    // 选择省份
    async chooseProvince(val, obj) {
      const provinceObj = obj.province_list.find((item) => {
        return item.name === val
      })
      obj.cityId = ''
      obj.cityName = ''
      obj.areaId = ''
      obj.areaName = ''
      obj.streetId = ''
      obj.streetName = ''
      await this.getAddressList(2, provinceObj.areaCodeId, obj)
    },
    // 选择市
    async chooseCity(val, obj) {
      const cityObj = obj.city_list.find((item) => {
        return item.name === val
      })
      obj.areaId = ''
      obj.areaName = ''
      obj.streetId = ''
      obj.streetName = ''
      await this.getAddressList(3, cityObj.areaCodeId, obj)
    },
    // 选择区/县
    async chooseArea(val, obj) {
      const areaObj = obj.area_list.find((item) => {
        return item.name === val
      })
      obj.streetId = ''
      obj.streetName = ''
      await this.getAddressList(4, areaObj.areaCodeId, obj)
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1
    },
    // 重新下发
    reIssue(id) {
      this.$confirm('确定要重新下发此工作人员吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        reIssue(id).then((res) => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '下发成功!'
          })
        })
      })
    },
    // 批量导出图片-带参数导出入口-BETA $1 查询参数  $2多少条
    steakPhoto(number) {
      downloadPhotosWhiteList(this.page, number)
    }
  }
}
</script>

<style scoped lang="scss">
.choose-btn-box {
  display: flex;
  align-items: center;
  .choose-span {
    color: #2F394E;
    font-size: 15px;
  }
}
.table {
  margin-top: 15px;
}
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.margin-left {
  margin: 10px 0 0 10px;
}
.margin-left-s {
  margin-left: 15px;
}
.input {
  width: 200px;
}
/*批量导入按钮*/
.file {
  margin: 10px 0 0 10px;
  position: relative;
  background: #d0eeff;
  border: 1px solid #99d3f5;
  border-radius: 4px;
  padding: 10px 20px;
  box-sizing: border-box;
  overflow: hidden;
  color: #1e88c7;
  text-decoration: none;
  text-indent: 0;
}
.file input {
  position: absolute;
  font-size: 14px;
  width: 106px;
  height: 40px;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
.file:hover {
  background: #aadffd;
  border-color: #78c3f3;
  color: #004974;
  text-decoration: none;
}
.avatar {
  /* width: 100px; */
  height: 100px;
}
.button-last {
  z-index: 9999;
}
.text-color {
  color: #000;
}
.batchVisible {
  ::v-deep .el-dialog__body {
    padding-top: 0;
  }
}
.text-color {
  color: #b9becb;
  font-size: 13px;
  line-height: 20px;
}
.pictre-rules {
  cursor: pointer;
  display: inline-block;
  padding: 0px 12px;
  background: #edf3ff;
  border-radius: 3px;
  margin: 0 4.5px 22px;
}
.color-gray {
  color: #b9becb;
}
.color-red {
  color: #ff7b7b;
  display: inline-block;
  background: rgba(237, 243, 255, 0.92);
  border-radius: 3px;
  padding: 5px 15px;
  line-height: 33px;
  text-align: center;
  cursor: pointer;
}
// 批量注册人员按钮
.file1 {
  margin: 0 0 0 5px;
}
.content-operator {
  line-height: 40px;
}
.m-t {
  margin-top: 20px;
}
</style>

