<template>
  <div class="app-container">
    <!--操作区-->
    <el-button
      type="primary"
      icon="el-icon-plus"
      class="margin-left"
      @click="create"
    >添加账号</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="upload($event)"
    ></a>
    <el-button
      v-if="checkRole([1, 2])"
      type="primary"
      icon="el-icon-download"
      class="margin-left"
      @click="batchDownloadUserList"
    >下载账号列表</el-button>
    <!--搜索区-->
    <el-select
      v-model="page.data.username"
      filterable
      clearable
      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-input
      v-model="page.data.name"
      placeholder="请输入姓名"
      class="margin-left input"
    />
    <el-input
      v-model="page.data.phone"
      placeholder="请输入手机号"
      class="margin-left input"
    />
    <el-select
      v-model="page.data.provinceId"
      filterable
      clearable
      placeholder="请选择省份"
      class="margin-left input"
      :disabled="checkRole([2])"
      @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-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
      filterable
      clearable
      v-model="page.data.areaId"
      placeholder="请选择区域"
      class="margin-left input"
    >
      <el-option
        v-for="item in area_list_search"
        :key="item.areaCodeId"
        :label="item.name"
        :value="item.areaCodeId"
      >
      </el-option>
    </el-select> -->
    <el-select
      v-model="page.data.type"
      filterable
      clearable
      placeholder="请选择权限级别"
      class="margin-left input"
    >
      <el-option
        v-for="item in type_list"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <el-select
      v-show="page.data.provinceId"
      v-model="page.data.tagId"
      filterable
      clearable
      placeholder="请选择账号类别"
      class="margin-left input"
    >
      <el-option
        v-for="item in tag_list"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>

    <el-select
      v-model="page.data.placeType"
      filterable
      clearable
      placeholder="请选择场景值"
      class="margin-left input"
    >
      <el-option
        v-for="item in scene_list"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <el-button
      type="primary"
      icon="el-icon-search"
      class="margin-left"
      @click="fetchData"
    >搜索</el-button>
    <!--主表格-->
    <el-table
      ref="table_form"
      v-loading="listLoading"
      class="table"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" align="center" width="80px">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column label="账号名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.username | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="管理员姓名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name | matchNull }}</span>
        </template>
      </el-table-column>
      <el-table-column label="管理员手机号" align="center">
        <template slot-scope="scope">
          {{ scope.row.phone | matchNull }}
        </template>
      </el-table-column>
      <el-table-column
        label="省-市-区-街道"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.provinceName | matchNull }}-{{
            scope.row.cityName | matchNull
          }}-{{ scope.row.areaName | matchNull }}-{{
            scope.row.streetName | matchNull
          }}
        </template>
      </el-table-column>
      <el-table-column label="详细地址" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.address | matchNull }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="权限级别" align="center">
        <template slot-scope="scope">
          <el-tag
            v-show="scope.row.type === 1"
            effect="dark"
            type="success"
          >超级管理员</el-tag>
          <el-tag
            v-show="scope.row.type === 2"
            effect="dark"
            type=""
          >省级超管员</el-tag>
          <el-tag v-show="scope.row.type === 3" type="">省级管理员</el-tag>
          <el-tag v-show="scope.row.type === 4" type="">市级管理员</el-tag>
          <el-tag v-show="scope.row.type === 5" type="">区级管理员</el-tag>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="账号类别" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.tagName" effect="plain" type="success">
            {{ scope.row.tagName }}
          </el-tag>
          <el-tag v-else effect="dark" type="success">省级超管</el-tag>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="导出权限" align="center">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.isOut == 1"
            effect="plain"
            type="success"
          >开启</el-tag>
          <el-tag
            v-else-if="scope.row.isOut == 2"
            effect="plain"
            type="info"
          >停用</el-tag>
          <el-tag v-else effect="plain" type="info">未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="是否脱敏" align="center">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.isHideImportant == 1"
            effect="plain"
            type="info"
          >脱敏</el-tag>
          <el-tag
            v-else-if="scope.row.isHideImportant == 2"
            effect="plain"
            type="success"
          >不脱敏</el-tag>
          <el-tag v-else effect="plain" type="info">未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="场景值"
        width="130px"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.placeType === 0"
            type="primary"
            effect="plain"
          >通用场景</el-tag>
          <el-tag
            v-else-if="scope.row.placeType === 1"
            type="warning"
            effect="plain"
          >预约场景</el-tag>
          <el-tag
            v-else-if="scope.row.placeType === 2"
            type="success"
            effect="plain"
          >楼宇场景</el-tag>
          <el-tag
            v-else-if="scope.row.placeType === 3"
            type="info"
            effect="plain"
          >学校场景</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column label="微信通用/内宾码" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: auto; height: 70px;line-height: 70px;"
            :src="regularCode(scope.row)"
            :preview-src-list="[regularCode(scope.row)]"
          >
            <div slot="error" class="image-slot">暂无照片</div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="支付宝通用/内宾码" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: auto; height: 70px;line-height: 70px;"
            :src="zfbRegularCode(scope.row)"
            :preview-src-list="[zfbRegularCode(scope.row)]"
          >
            <div slot="error" class="image-slot">暂无照片</div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="微信员工/外宾码" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: auto; height: 70px;line-height: 70px;"
            :src="regular(scope.row)"
            :preview-src-list="[regular(scope.row)]"
          >
            <div slot="error" class="image-slot">暂无照片</div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="支付宝员工/外宾码" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: auto; height: 70px;line-height: 70px;"
            :src="zfbRegular(scope.row)"
            :preview-src-list="[zfbRegular(scope.row)]"
          >
            <div slot="error" class="image-slot">暂无照片</div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" label="操作区" width="200">
        <template slot-scope="scope">
          <el-button
            size="small"
            @click="deleteUser(scope.row.adminId)"
          >删除</el-button>
          <el-button
            type="primary"
            size="small"
            @click="update(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]"
      :visible.sync="dialogVisible"
      width="1100px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="user_form"
        :model="user_form"
        :rules="rules"
        label-width="150px"
        label-position="left"
      >
        <!-- 基本信息配置 -->
        <div>
          <div class="title">
            <div class="line" />
            <span>基本信息配置</span>
          </div>
          <div class="flex">
            <el-form-item
              label="省"
              prop="provinceId"
              class="address-width"
              style="margin-left: 5px"
            >
              <el-select
                v-model="user_form.provinceId"
                style="width: 100%"
                placeholder="请选择省份"
                :disabled="checkRole([2])"
                @change="chooseProvince"
              >
                <el-option
                  v-for="item in province_list"
                  :key="item.areaCodeId"
                  :label="item.name"
                  :value="item.areaCodeId"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="市"
              prop="cityId"
              label-width="130px"
              class="address-width"
              style="margin-left: 20px"
            >
              <el-select
                v-model="user_form.cityId"
                style="width: 100%"
                placeholder="请选择城市"
                @change="chooseCity"
              >
                <el-option
                  v-for="item in city_list"
                  :key="item.areaCodeId"
                  :label="item.name"
                  :value="item.areaCodeId"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="区/县"
              class="address-width"
              prop="areaId"
              label-width="130px"
              style="margin-left: 20px"
            >
              <el-select
                v-model="user_form.areaId"
                style="width: 100%"
                placeholder="请选择区/县"
                @change="chooseArea"
              >
                <el-option
                  v-for="item in area_list"
                  :key="item.areaCodeId"
                  :label="item.name"
                  :value="item.areaCodeId"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="街道" prop="streetId" class="form-item-style">
              <el-select
                v-model="user_form.streetId"
                style="width: 100%"
                placeholder="请选择街道"
              >
                <el-option
                  v-for="item in street_list"
                  :key="item.areaCodeId"
                  :label="item.name"
                  :value="item.areaCodeId"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="详细地址"
              prop="address"
              class="form-item-style"
            >
              <el-input v-model.trim="user_form.address" show-word-limit />
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item
              label="所属组织名称"
              class="form-item-style"
              prop="policeStationName"
            >
              <el-input
                v-model.trim="user_form.policeStationName"
                show-word-limit
              />
            </el-form-item>
            <el-form-item
              label="所属组织代码"
              class="form-item-style special"
              prop="policeStationCode"
            >
              <el-input
                v-model.trim="user_form.policeStationCode"
                show-word-limit
              />
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item
              label="管理员姓名"
              class="form-item-style"
              prop="name"
            >
              <el-input
                v-model.trim="user_form.name"
                maxlength="10"
                show-word-limit
              />
            </el-form-item>
            <el-form-item
              label="管理员手机号"
              class="form-item-style"
              prop="phone"
            >
              <el-input
                v-model.trim="user_form.phone"
                maxlength="11"
                show-word-limit
              />
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item
              label="账号名称"
              class="form-item-style"
              prop="username"
            >
              <el-input
                v-model.trim="user_form.username"
                maxlength="20"
                show-word-limit
              />
            </el-form-item>
            <el-form-item label="密码" class="form-item-style" prop="password">
              <el-input
                v-model.trim="user_form.password"
                type="password"
                show-word-limit
                show-password
              />
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item
              v-if="dialogType === 'add'"
              label="账号级别"
              class="form-item-style"
              prop="type"
            >
              <el-select
                v-model="user_form.type"
                style="width: 100%"
                placeholder="请选择权限级别"
                @change="changeType"
              >
                <el-option
                  v-for="item in type_list"
                  :key="item.id"
                  :disabled="item.disabled"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-show="user_form.type > 2 && user_form.provinceId"
              class="form-item-style"
              label="账号类别"
              prop="tagId"
            >
              <el-select
                v-model="user_form.tagId"
                style="width: 100%"
                placeholder="请选择账号类别"
              >
                <el-option
                  v-for="item in tag_list"
                  :key="item.id"
                  :disabled="item.disabled"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item
              label="场景选择"
              prop="placeType"
              class="form-item-style"
            >
              <el-radio-group v-model="user_form.placeType">
                <el-radio :disabled="dialogType != 'add'" :label="0">通用场景</el-radio>
                <el-radio :disabled="dialogType != 'add'" :label="1">预约场景</el-radio>
                <el-radio :disabled="dialogType != 'add'" :label="2">楼宇场景</el-radio>
                <el-radio :disabled="dialogType != 'add'" :label="3">学校场景</el-radio>
              </el-radio-group>
              <el-input
                v-model="user_form.tenantEnterpriseName"
                class="titName"
              />
              <el-input
                v-model="user_form.enterpriseName"
                class="titName"
              />
            </el-form-item>
          </div>
        </div>
        <!-- 支付宝信息配置 -->
        <div v-if="user_form.placeType==3">
          <div class="title">
            <div class="line" />
            <span>支付宝信息配置</span>
          </div>
          <div class="flex">
            <el-form-item
              label="机构代码"
              class="form-item-style item-margin-bottom special"
              prop="orgOutId"
            >
              <el-input
                v-model.trim="user_form.orgOutId"
              />
            </el-form-item>
          </div>
        </div>
        <!-- 信息安全配置 -->
        <div>
          <div class="title">
            <div class="line" />
            <span>信息安全配置</span>
          </div>
          <div class="flex">
            <el-form-item
              label="是否开启导出"
              class="form-item-style item-margin-bottom"
              prop="isOut"
            >
              <el-radio-group v-model="user_form.isOut">
                <el-radio :label="2">停用</el-radio>
                <el-radio :label="1">开启</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="导出是否脱敏"
              class="form-item-style item-margin-bottom"
              prop="isHideImportant"
            >
              <el-radio-group v-model="user_form.isHideImportant">
                <el-radio :label="1">脱敏</el-radio>
                <el-radio :label="2">不脱敏</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <el-form-item
            label="脱敏字段"
            prop="noHideCloumn"
            class="form-item-style special"
          >
            <el-checkbox-group v-model="user_form.noHideCloumn">
              <el-checkbox label="1">姓名</el-checkbox>
              <el-checkbox label="2">手机</el-checkbox>
              <el-checkbox label="3">身份证</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <!-- 人员权限配置 -->
        <div v-if="user_form.type == 5">
          <div class="title">
            <div class="line" />
            <span>人员权限配置</span>
          </div>
          <div v-if="user_form.placeType != 1" class="flex">
            <el-form-item
              label="员工有效期（天）"
              class="form-item-style item-margin-bottom"
              prop="userWhitelistEffectiveTime"
            >
              <el-tooltip
                class="item"
                effect="dark"
                :manual="false"
                content="单位:天"
                placement="bottom"
              >
                <el-input-number
                  v-model="user_form.userWhitelistEffectiveTime"
                  :precision="1"
                  :min="0"
                  size="mini"
                />
              </el-tooltip>
            </el-form-item>
            <el-form-item
              label="访客有效期（天）"
              class="form-item-style item-margin-bottom"
              prop="userVisiterEffectiveTime"
            >
              <el-tooltip
                class="item"
                effect="dark"
                :manual="false"
                content="单位:天"
                placement="bottom"
              >
                <el-input-number
                  v-model="user_form.userVisiterEffectiveTime"
                  :precision="1"
                  :min="0"
                  size="mini"
                />
              </el-tooltip>
            </el-form-item>
          </div>
          <div
            v-if="user_form.placeType != 2 && user_form.type == 5"
            class="flex"
          >
            <el-form-item
              label="提示信息"
              class="form-item-style item-margin-bottom special"
              prop="notAllowAgeMsg"
            >
              <el-input
                v-model.trim="user_form.notAllowAgeMsg"
                maxlength="20"
                show-word-limit
              />
            </el-form-item>
            <el-form-item
              label="不可进入是否报警"
              prop="isAlarm"
              class="form-item-style item-margin-bottom special"
            >
              <el-radio-group v-model="user_form.isAlarm">
                <el-radio :label="false">否</el-radio>
                <el-radio :label="true">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item
              v-if="user_form.placeType === 0"
              label="实名认证年龄区间"
              class="form-item-style special item-margin-bottom"
            >
              <el-tooltip
                class="item"
                effect="dark"
                :manual="false"
                content="开始区间"
                placement="bottom"
              >
                <el-input-number
                  v-model="user_form.realAuthenticationAgeStart"
                  :min="0"
                  size="mini"
                />
              </el-tooltip>
              至
              <el-tooltip
                class="item"
                effect="dark"
                :manual="false"
                content="结束区间"
                placement="bottom"
              >
                <el-input-number
                  v-model="user_form.realAuthenticationAgeEnd"
                  :min="0"
                  size="mini"
                />
              </el-tooltip>
            </el-form-item>
            <el-form-item
              v-if="user_form.placeType == 1 && user_form.type == 5"
              label="不可进入年龄段"
              class="form-item-style special item-margin-bottom"
            >
              <el-tooltip
                class="item"
                effect="dark"
                :manual="false"
                content="开始区间"
                placement="bottom"
              >
                <el-input-number
                  v-model="user_form.notAllowAgeStart"
                  :min="0"
                  size="mini"
                />
              </el-tooltip>
              至
              <el-tooltip
                class="item"
                effect="dark"
                :manual="false"
                content="结束区间"
                placement="bottom"
              >
                <el-input-number
                  v-model="user_form.notAllowAgeEnd"
                  :min="0"
                  size="mini"
                />
              </el-tooltip>
            </el-form-item>
          </div>
        </div>
        <!-- 功能配置 -->
        <div>
          <div class="title">
            <div class="line" />
            <span>功能配置</span>
          </div>
          <div class="flex">
            <el-form-item
              label="卡号认证"
              prop="cardPhysics"
              class="form-item-style item-margin-bottom"
            >
              <el-radio-group v-model="user_form.cardPhysics">
                <el-radio :label="2">停用</el-radio>
                <el-radio :label="1">启用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="user_form.type === 5"
              label="身份证认证"
              class="form-item-style item-margin-bottom"
              prop="isPush"
            >
              <el-tooltip
                class="item"
                effect="dark"
                :manual="false"
                content="若开启现场刷身份证，人员若在员工白名单中存在，且未认证，则状态改为已认证，并抓拍现场照片补全信息"
                placement="bottom"
              >
                <el-radio-group v-model="user_form.isPush">
                  <el-radio :label="0">停用</el-radio>
                  <el-radio :label="1">开启</el-radio>
                </el-radio-group>
              </el-tooltip>
            </el-form-item>
          </div>
          <div v-if="user_form.placeType != 1" class="flex">
            <el-form-item
              label="常访客配置"
              class="form-item-style item-margin-bottom"
              prop="isHideImportant"
            >
              <el-checkbox-group
                v-model="user_form.whiteVisitorType"
                style="width: 100%"
              >
                <el-tooltip
                  class="item"
                  effect="dark"
                  :manual="false"
                  content="只开启员工功能时,则为白名单场景"
                  placement="bottom"
                >
                  <el-checkbox label="1">启用员工功能</el-checkbox>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :manual="false"
                  content="同时开启员工和访客功能时,则为常访客场景"
                  placement="bottom"
                >
                  <el-checkbox label="2">启用访客功能</el-checkbox>
                </el-tooltip>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item
              label="二维码类型"
              prop="codeType"
              class="form-item-style item-margin-bottom"
            >
              <el-checkbox-group v-model="user_form.codeType" :min="1">
                <el-checkbox label="0">通用码</el-checkbox>
                <el-checkbox label="1">员工码</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
          <div v-if="user_form.type === 5">
            <div v-if="user_form.placeType === 0" class="flex">
              <el-form-item
                label="是否开启问题上报"
                class="form-item-style item-margin-bottom"
                prop="problemReportFlag"
              >
                <el-radio-group v-model="user_form.problemReportFlag">
                  <el-radio :label="0">停用</el-radio>
                  <el-radio :label="1">开启</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="是否开启区域巡查"
                class="form-item-style item-margin-bottom"
                prop="disinfectFlag"
              >
                <el-radio-group v-model="user_form.disinfectFlag">
                  <el-radio :label="0">停用</el-radio>
                  <el-radio :label="1">开启</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item
                label="是否开启考试"
                class="form-item-style item-margin-bottom"
                prop="isOpenExam"
              >
                <el-radio-group v-model="user_form.isOpenExam">
                  <el-radio :label="false">否</el-radio>
                  <el-radio :label="true">是</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                v-if="user_form.placeType != 1"
                label="是否开启布控"
                prop="isControlEarlyWarning"
                class="form-item-style item-margin-bottom"
              >
                <el-radio-group v-model="user_form.isControlEarlyWarning">
                  <el-radio :label="2">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item
                label="是否零点清除"
                class="form-item-style item-margin-bottom"
                prop="isOpenVisitorClear"
              >
                <el-radio-group v-model="user_form.isOpenVisitorClear">
                  <el-radio :label="false">否</el-radio>
                  <el-radio :label="true">是</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="人员进出统计数据"
                prop="openInOutStatistics"
                class="form-item-style item-margin-bottom"
              >
                <el-radio-group v-model="user_form.openInOutStatistics">
                  <el-radio :label="false">停用</el-radio>
                  <el-radio :label="true">启用</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item
                label="是否开启进出预警"
                prop="isOpenInoutWarning"
                class="form-item-style item-margin-bottom"
              >
                <el-radio-group v-model="user_form.isOpenInoutWarning">
                  <el-radio :label="false">否</el-radio>
                  <el-radio :label="true">是</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="是否开启梯控功能"
                prop="isOpenLadder"
                class="form-item-style item-margin-bottom"
              >
                <el-radio-group v-model="user_form.isOpenLadder">
                  <el-radio :label="false">否</el-radio>
                  <el-radio :label="true">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>

            <div v-if="user_form.placeType==2" class="flex">
              <el-form-item
                label="审核配置"
                prop="buildingCheckType"
                class="form-item-style item-margin-bottom"
              >
                <el-radio-group v-model="user_form.buildingCheckType">
                  <el-radio :label="1">受访人审核</el-radio>
                  <el-radio :label="2">指定人员审核</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>
        </div>
        <!-- 登录配置 -->
        <div v-if="user_form.type === 5">
          <div class="title">
            <div class="line" />
            <span>登录配置</span>
          </div>
          <template>
            <div v-if="user_form.placeType == 2" class="login-disposition">
              常客
            </div>
            <div class="flex">
              <el-form-item
                label="小程序是否实名"
                prop="whitelistAppRealname"
                class="form-item-style item-margin-bottom"
              >
                <el-radio-group
                  v-model="user_form.whitelistAppRealname"
                  @change="handleCheckChange($event, 1)"
                >
                  <el-radio :label="false">否</el-radio>
                  <el-radio :label="true">是</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="是否保留照片"
                prop="whitelistAppPhoto"
                class="form-item-style item-margin-bottom"
              >
                <el-radio-group v-model="user_form.whitelistAppPhoto">
                  <el-radio
                    :disabled="user_form.whitelistAppRealname"
                    :label="false"
                  >否</el-radio>
                  <el-radio
                    :disabled="user_form.whitelistAppRealname"
                    :label="true"
                  >是</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item
                label="登录所需参数"
                :prop="
                  user_form.whitelistAppRealname ? 'whitelistAppLoginList' : ''
                "
                class="form-item-style item-margin-bottom"
              >
                <el-tooltip
                  class="item"
                  effect="dark"
                  :manual="false"
                  content="身份证/手机号/卡号必须选择一项"
                  placement="bottom"
                >
                  <el-checkbox-group v-model="user_form.whitelistAppLoginList">
                    <el-checkbox
                      :label="1"
                      :disabled="user_form.whitelistAppRealname"
                    >姓名</el-checkbox>
                    <el-checkbox
                      :label="2"
                      :disabled="user_form.whitelistAppRealname"
                    >身份证</el-checkbox>
                    <el-checkbox :label="3">手机号</el-checkbox>
                    <el-checkbox :label="4">卡号</el-checkbox>
                  </el-checkbox-group>
                </el-tooltip>
              </el-form-item>
              <el-form-item
                label="是否输入手机号"
                prop="whitelistAppPhone"
                class="form-item-style item-margin-bottom"
              >
                <el-radio-group v-model="user_form.whitelistAppPhone">
                  <el-radio :label="false">否</el-radio>
                  <el-radio :label="true">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </template>
          <template v-if="user_form.placeType == 2">
            <div class="login-disposition">访客</div>
            <div class="flex">
              <el-form-item
                label="小程序是否实名"
                prop="visitorAppRealname"
                class="form-item-style item-margin-bottom"
              >
                <el-radio-group
                  v-model="user_form.visitorAppRealname"
                  @change="handleCheckChange($event, 2)"
                >
                  <el-radio :label="false">否</el-radio>
                  <el-radio :label="true">是</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="是否保留照片"
                prop="visitorAppPhoto"
                class="form-item-style item-margin-bottom"
              >
                <el-radio-group v-model="user_form.visitorAppPhoto">
                  <el-radio
                    :disabled="user_form.visitorAppRealname"
                    :label="false"
                  >否</el-radio>
                  <el-radio
                    :disabled="user_form.visitorAppRealname"
                    :label="true"
                  >是</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item
                label="登录所需参数"
                class="form-item-style special"
              >
                <el-checkbox-group v-model="user_form.visitorAppLoginList">
                  <el-checkbox
                    :label="1"
                    :disabled="user_form.visitorAppRealname"
                  >姓名</el-checkbox>
                  <el-checkbox
                    :label="2"
                    :disabled="user_form.visitorAppRealname"
                  >身份证</el-checkbox>
                  <el-checkbox :label="3">手机号</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item
                label="是否输入手机号"
                prop="visitorAppPhone"
                class="form-item-style item-margin-bottom"
              >
                <el-radio-group v-model="user_form.visitorAppPhone">
                  <el-radio :label="false">否</el-radio>
                  <el-radio :label="true">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </template>

          <div class="custom-css">
            <el-form-item
              v-if="user_form.whiteVisitorType.length > 0"
              label="自定义字段"
              prop="isShowCustomWord"
              class="form-item-style margin0"
            >
              <el-radio-group
                v-model="user_form.isShowCustomWord"
                @change="changeCustomWord"
              >
                <el-radio :label="false">否</el-radio>
                <el-radio :label="true">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <div
              v-for="(item, index) in user_form.addCustomList"
              :key="index"
              class="custom-css-item"
            >
              <div class="flex">
                <el-form-item
                  label="名称"
                  label-width="120px"
                  style="margin-right: 10px; flex: 0.4"
                  :prop="`addCustomList.${index}.customName`"
                  :rules="rules.customName"
                >
                  <el-input
                    v-model.trim="item.customName"
                    :disabled="isdisabled(item.isEditable)"
                    placeholder="请输入名称"
                  />
                </el-form-item>
                <el-form-item
                  label="提示"
                  label-width="50px"
                  style="margin-right: 10px; flex: 0.4"
                  prop="prompt"
                >
                  <el-input
                    v-model.trim="item.prompt"
                    placeholder="请输入提示"
                    :disabled="isdisabled(item.isEditable)"
                  />
                </el-form-item>
                <el-form-item
                  label="字段类型"
                  label-width="80px"
                  style="flex: 0.3"
                  :prop="`addCustomList.${index}.customType`"
                  :rules="rules.customType"
                >
                  <el-select
                    v-model="item.customType"
                    :disabled="isdisabled(item.isEditable) || item.id != null"
                    style="width: 100%"
                    placeholder="请选择类型"
                  >
                    <el-option
                      v-for="l in customType_list"
                      :key="l.name"
                      :label="l.name"
                      :value="l.name"
                    />
                  </el-select>
                </el-form-item>
              </div>
              <el-form-item
                v-if="item.customType === '下拉选择'"
                label="选项配置"
                :prop="`addCustomList.${index}.configurationOptions`"
                :rules="rules.configurationOptions"
              >
                <el-input
                  v-model.trim="item.configurationOptions"
                  :disabled="isdisabled(item.isEditable)"
                  placeholder="多个选项以英文/分隔"
                />
              </el-form-item>
              <div class="flex">
                <el-form-item
                  label="是否在小程序端显示"
                  label-width="150px"
                  style="margin-left: 10px; flex: 0.4"
                  prop="isShow"
                >
                  <el-radio-group v-model="item.isShow">
                    <el-radio
                      :label="0"
                      :disabled="isdisabled(item.isEditable)"
                    >否</el-radio>
                    <el-radio
                      :label="1"
                      :disabled="isdisabled(item.isEditable)"
                    >是</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="是否可编辑"
                  style="flex: 0.4"
                  prop="isEditable"
                >
                  <el-radio-group v-model="item.isEditable">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="" label-width="0px" style="flex: 0.3">
                  <div>
                    <el-button
                      type="primary"
                      style="display: inline-block"
                      icon="el-icon-plus"
                      size="small"
                      @click="addCustom(index)"
                    >添加</el-button>
                    <el-button
                      v-if="user_form.addCustomList.length > 1"
                      type="danger"
                      style="display: inline-block"
                      icon="el-icon-delete-solid"
                      size="small"
                      @click="delCustom(index)"
                    >删除</el-button>
                  </div>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
        <!-- 支付宝小程序显示配置 -->
        <div class="title">
          <div class="line" />
          <span>支付宝小程序显示配置</span>
        </div>
        <div class="display-config-layout">
          <el-form-item
            label=" 二维码1标题文字"
            prop="zfbMiniEthTitle"
            class="form-item-style"
            label-width="134px"
          >
            <el-input
              v-model="user_form.zfbMiniEthTitle"
              placeholder="请输入支付宝小程序单机二维码标题"
              maxlength="20"
              show-word-limit
            />
          </el-form-item>
          <el-form-item
            label-width="134px"
            label="二维码2标题文字"
            class="form-item-style"
            prop="zfbMiniVguangTitle"
          >
            <el-input
              v-model="user_form.zfbMiniVguangTitle"
              placeholder="请输入支付宝小程序联机二维码标题"
              maxlength="20"
              show-word-limit
            />
          </el-form-item>
        </div>
        <!-- 进出记录配置 -->
        <div class="title">
          <div class="line" />
          <span>进出记录配置</span>
        </div>
        <div class="flex">
          <el-form-item
            label="进出记录保留时间"
            prop="faceLogHoldDays"
            class="form-item-style item-margin-bottom"
          >
            <el-tooltip
              class="item"
              effect="dark"
              :manual="false"
              content="单位:天"
              placement="bottom"
            >
              <el-input-number
                v-model="user_form.faceLogHoldDays"
                size="mini"
                :min="0"
              />
            </el-tooltip>
          </el-form-item>
        </div>
        <div v-if="user_form.placeType != 1" class="custom-css">
          <el-form-item
            label="打卡方式"
            class="form-item-style item-margin-bottom"
            prop="clockWayType"
          >
            <el-radio-group v-model="user_form.clockWayType">
              <el-radio label="0">关闭</el-radio>
              <el-radio label="1" :style="{marginRight: (user_form.clockWayType === '1' && !!user_form.clockWayAdminAuthVO) ? '10px' : '30px'}">通用</el-radio>
              <span v-if="user_form.clockWayType === '1' && !!user_form.clockWayAdminAuthVO" style="margin-right: 30px;">
                <el-button
                  class="el-icon-download form-item-style"
                  type="text"
                  @click="getAppKeyAndAppSecret2(true)"
                >
                  密钥
                </el-button>
                <el-button
                  class="el-icon-download form-item-style"
                  type="text"
                  @click="getAppKeyAndAppSecret2(false)"
                >
                  文档
                </el-button>
              </span>
              <el-radio label="2">钉钉</el-radio>
            </el-radio-group>
          </el-form-item>

          <div v-if="user_form.clockWayType == 1">
            <div v-for="(clockWayItem, index) in user_form.clockWayPushInterfaceAddresses" :key="index" style="width:100%;display: flex;align-items: center;">
              <el-form-item
                label-width="78px"
                :label="`推送地址${index+1}`"
                class="form-item-style"
                style="width: 400px;flex:none;"
                :prop="`clockWayPushInterfaceAddresses.${index}.interfAddr`"
              >
                <el-input
                  v-model="clockWayItem.interfAddr"
                  placeholder="请选择推送地址"
                />
              </el-form-item>
              <el-form-item
                label-width="78px"
                label-position="right"
                label="推送字段"
                class="form-item-style"
                :prop="`clockWayPushInterfaceAddresses.${index}.punchReportFields`"
                :rules="{ required: true, type: 'array', message: '推送字段不能为空', trigger: ['change', 'blur'], validator: clockWayRule }"
                style="margin-left:13px;width: 309px;flex:none;"
              >
                <el-select
                  v-model="clockWayItem.punchReportFields"
                  filterable
                  clearable
                  multiple
                  collapse-tags
                  placeholder="请选择推送字段"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in pushField"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label-width="78px"
                class="form-item-style"
                style="margin-left:10px;width:309px;flex:none;"
                :prop="`clockWayPushInterfaceAddresses.${index}.zoneId`"
              >
                <div slot="label" style="text-align: right;">绑定区域</div>
                <el-select
                  v-model="clockWayItem.zoneId"
                  filterable
                  clearable
                  style="width:100%;"
                  placeholder="请绑定区域"
                  @change="e => checkWayOfAreaSelectChange(e, index)"
                >
                  <el-option
                    v-for="item in platformAreaList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="checkWayOfSelectedPlatformAreaList && checkWayOfSelectedPlatformAreaList.length > 0 && checkWayOfSelectedPlatformAreaList.includes(item.id)"
                  />
                </el-select>
              </el-form-item>
              <el-button v-if="user_form.clockWayPushInterfaceAddresses && user_form.clockWayPushInterfaceAddresses.length > 1" icon="el-icon-close" size="small" circle style="align-self: flex-start;margin:4px 0 0 6px;border:none;" @click.prevent="removeCheckWayInterfaceAddress(index, clockWayItem.zoneId)" />
              <el-button type="info" icon="el-icon-plus" size="small" circle style="align-self: flex-start;margin:4px 0 0 6px;" @click.prevent="addCheckWayInterfaceAddress" />
            </div>
          </div>
          <div v-if="user_form.clockWayType == 2" class="flex">
            <el-form-item
              label="AppKey"
              class="form-item-style special"
              prop="dingtalkAppKey"
            >
              <el-input v-model.trim="user_form.dingtalkAppKey" />
            </el-form-item>
            <el-form-item
              label="AppSecret"
              class="special form-item-style"
              prop="dingtalkAppSecret"
            >
              <el-input v-model.trim="user_form.dingtalkAppSecret" />
            </el-form-item>
          </div>
        </div>
        <!-- 三方接入配置 -->
        <div v-if="user_form.type === 5">
          <div class="title">
            <div class="line" />
            <span>三方接入配置
              <el-button
                class="el-icon-download form-item-style"
                type="text"
                @click="getAppKeyAndAppSecret3(1)"
              >
                密钥
              </el-button>
            </span>
          </div>
          <div class="display-config-layout">
            <el-form-item
              label="员工管理接口"
              prop="userManageSwitch"
              class="form-item-style special"
              label-width="120px"
            >
              <el-radio-group v-model="user_form.userManageSwitch">
                <el-radio :label="false">停用</el-radio>
                <el-radio :label="true">开启</el-radio>
              </el-radio-group>
              <span>
                <el-button
                  class="el-icon-download form-item-style"
                  type="text"
                  @click="getAppKeyAndAppSecret3(2)"
                >
                  文档
                </el-button>
              </span>
            </el-form-item>
            <el-form-item
              label="区域管理接口"
              prop="zoneManageSwitch"
              class="form-item-style special"
              label-width="120px"
            >
              <el-radio-group v-model="user_form.zoneManageSwitch">
                <el-radio :label="false">停用</el-radio>
                <el-radio :label="true">开启</el-radio>
              </el-radio-group>
              <span>
                <el-button
                  class="el-icon-download form-item-style"
                  type="text"
                  @click="getAppKeyAndAppSecret3(3)"
                >
                  文档
                </el-button>
              </span>
            </el-form-item>
          </div>
        </div>
        <!-- 设备显示配置 -->
        <div v-if="user_form.type === 5">
          <div class="title">
            <div class="line" />
            <span>设备显示配置</span>
          </div>
          <div class="display-config-layout">
            <el-form-item
              label="接入三方api"
              prop="openThirdLinkPlatform"
              class="form-item-style special"
              label-width="120px"
            >
              <el-radio-group v-model="user_form.openThirdLinkPlatform">
                <el-radio :label="false">停用</el-radio>
                <el-radio :label="true">开启</el-radio>
              </el-radio-group>
              <span v-if="row.openThirdLinkPlatform">
                <el-button
                  class="el-icon-download form-item-style"
                  type="text"
                  @click="getAppKeyAndAppSecret(true)"
                >
                  密钥
                </el-button>
                <el-button
                  class="el-icon-download form-item-style"
                  type="text"
                  @click="getAppKeyAndAppSecret(false)"
                >
                  文档
                </el-button>
              </span>
            </el-form-item>
          </div>
          <div v-if="user_form.openThirdLinkPlatform" class="interfaceAddress-layout">
            <div v-for="(interfaceAddressItem, index) in user_form.interfaceAddresses" :key="index" style="width:100%;display: flex;align-items: center;">
              <el-form-item
                label-width="110px"
                :label="`联动地址${index + 1}`"
                class="form-item-style"
                style="width: 533px; flex: none"
                :prop="`interfaceAddresses.${index}.interfAddr`"
              >
                <el-input
                  v-model="interfaceAddressItem.interfAddr"
                  placeholder="请输入联动地址"
                />
              </el-form-item>
              <el-form-item
                label-width="120px"
                label="绑定区域"
                class="form-item-style"
                style="margin-left: 60px; width: 455px; flex: none"
                :prop="`interfaceAddresses.${index}.zoneId`"
              >
                <el-select
                  v-model="interfaceAddressItem.zoneId"
                  filterable
                  style="width: 100%"
                  placeholder="请绑定区域"
                  @change="(e) => areaSelectChange(e, index)"
                >
                  <el-option
                    v-for="item in platformAreaList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="
                      selectedPlatformAreaList &&
                        selectedPlatformAreaList.length > 0 &&
                        selectedPlatformAreaList.includes(item.id)
                    "
                  />
                </el-select>
              </el-form-item>
              <el-button
                v-if="
                  user_form.interfaceAddresses &&
                    user_form.interfaceAddresses.length > 1
                "
                icon="el-icon-close"
                size="small"
                circle
                style="
                  align-self: flex-start;
                  margin: 4px 0 0 6px;
                  border: none;
                "
                @click.prevent="
                  removeInterfaceAddress(index, interfaceAddressItem.zoneId)
                "
              />
              <el-button
                type="info"
                icon="el-icon-plus"
                size="small"
                circle
                style="align-self: flex-start; margin: 4px 0 0 6px"
                @click.prevent="addInterfaceAddress"
              />
            </div>
          </div>
          <div class="display-config-layout">
            <el-form-item
              label="UI使用版本"
              prop="latestResultPage"
              class="form-item-style"
              label-width="120px"
            >
              <el-radio-group v-model="user_form.latestResultPage">
                <el-radio :label="false">
                  <img src="../../assets/ui-theme1.jpg" width="60px" height="96px" alt="旧版">
                </el-radio>
                <el-radio :label="true">
                  <img src="../../assets/ui-theme2.jpg" width="60px" height="96px" alt="新版">
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label-width="120px"
              label="顶部标题"
              class="form-item-style"
              prop="topTitle"
            >
              <el-input
                v-model="user_form.topTitle"
                placeholder="请输入顶部标题"
                maxlength="8"
                show-word-limit
              />
            </el-form-item>
            <el-form-item
              v-if="false && !user_form.latestResultPage"
              label-width="120px"
              label="地址"
              class="form-item-style special"
              :prop="user_form.openThirdLinkPlatform?'interfaceAddress':''"
            >
              <el-input
                v-model="user_form.interfaceAddress"
                placeholder="请输入地址"
              />
            </el-form-item>
            <el-form-item
              label-width="120px"
              label="成功通行结果"
              class="form-item-style special"
              prop="subLineSuccess"
            >
              <el-input
                v-model="user_form.subLineSuccess"
                placeholder="请输入成功通行结果"
              />
            </el-form-item>
            <el-form-item
              label-width="120px"
              label="失败通行结果"
              class="form-item-style special"
              prop="subLineFail"
            >
              <el-input
                v-model="user_form.subLineFail"
                placeholder="请输入失败通行结果"
              />
            </el-form-item>
            <el-form-item
              label-width="120px"
              label="成功语音播报"
              class="form-item-style special"
              prop="openVoiceMsgSuccess"
            >
              <el-input
                v-model="user_form.openVoiceMsgSuccess"
                placeholder="请输入成功语音播报"
              />
            </el-form-item>
            <el-form-item
              label-width="120px"
              label="失败语音播报"
              class="form-item-style special"
              prop="openVoiceMsgFail"
            >
              <el-input
                v-model="user_form.openVoiceMsgFail"
                placeholder="请输入失败语音播报"
              />
            </el-form-item>
            <el-form-item
              v-if="!user_form.latestResultPage"
              label-width="120px"
              label="左副框上层"
              class="form-item-style special"
              prop="mainLineLeft"
            >
              <el-input
                v-model="user_form.mainLineLeft"
                placeholder="请输入左副框上层"
              />
            </el-form-item>
            <el-form-item
              v-if="!user_form.latestResultPage"
              label-width="120px"
              label="左副框下层"
              class="form-item-style special"
              prop="subLineLeft"
            >
              <el-input
                v-model="user_form.subLineLeft"
                placeholder="请输入左副框下层"
              />
            </el-form-item>
            <el-form-item
              v-if="!user_form.latestResultPage"
              label-width="120px"
              label="右副框上层"
              class="form-item-style special"
              prop="mainLineRight"
            >
              <el-input
                v-model="user_form.mainLineRight"
                placeholder="请输入右副框上层"
              />
            </el-form-item>
            <el-form-item
              v-if="!user_form.latestResultPage"
              label-width="120px"
              label="右副框下层"
              class="form-item-style special"
              prop="subLineRight"
            >
              <el-input
                v-model="user_form.subLineRight"
                placeholder="请输入右副框下层"
              />
            </el-form-item>
            <el-form-item
              v-if="!user_form.latestResultPage"
              label-width="120px"
              label="二维码是否显示"
              class="el-form-item form-item-style special"
              prop="showQrcode"
            >
              <el-radio-group
                v-model="user_form.showQrcode"
                style="width: 100%"
              >
                <el-radio :label="false">否</el-radio>
                <el-radio :label="true">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="!user_form.latestResultPage"
              label-width="120px"
              label="二维码码值"
              class="form-item-style special"
              prop="qrcodeText"
            >
              <el-input
                v-model="user_form.qrcodeText"
                placeholder="二维码码值"
              />
            </el-form-item>
            <el-form-item
              v-if="!user_form.latestResultPage"
              label-width="120px"
              :label="
                user_form.showQrcode
                  ? '广告图片（506*182）'
                  : '广告图片（712*182）'
              "
              class="el-form-item form-item-style special"
              prop="advertise"
            >
              <el-upload
                ref="upload"
                name="file"
                class="avatar-uploader"
                :action="doUpload"
                :show-file-list="false"
                :http-request="
                  (event) => {
                    doUploadAvatar1(event, 'advertise');
                  }
                "
                :before-upload="beforeAvatarUpload"
                :auto-upload="true"
                accept="image/png,image/gif,image/jpg,image/jpeg"
              >
                <div
                  v-if="!user_form.advertise"
                  :class="[
                    'upload-img',
                    'advertising-img',
                    user_form.showQrcode ? 'upload-img1' : 'upload-img2',
                  ]"
                >
                  <i class="el-icon-picture-outline" />上传图片
                </div>
                <div
                  v-else
                  :class="[
                    'upload-img',
                    user_form.showQrcode ? 'upload-img1' : 'upload-img2',
                  ]"
                >
                  <img :src="user_form.advertise">
                  <span class="del-img" @click.stop="handleRemove('advertise')">x</span>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item
              label="首页图片配置"
              class="form-item-style item-margin-bottom special"
              prop="homeImgUrl"
              label-width="120px"
            >
              <el-upload
                ref="upload"
                name="file"
                class="avatar-uploader"
                :action="doUpload"
                :show-file-list="false"
                :http-request="
                  (event) => {
                    doUploadAvatar1(event, 'homeImgUrl');
                  }
                "
                :before-upload="beforeAvatarUpload"
                :auto-upload="true"
                accept="image/png,image/gif,image/jpg,image/jpeg"
              >
                <img
                  v-if="!user_form.homeImgUrl"
                  class="upload-img3"
                  src="../../assets/default-img-home.jpg"
                  alt=""
                >
                <div v-else class="upload-img3">
                  <img :src="user_form.homeImgUrl">
                  <span class="del-img" @click.stop="handleRemove('homeImgUrl')">x</span>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item
              v-if="dialogType != 'add'"
              label="屏保图片配置"
              label-width="120px"
              prop="screenShowPhotos"
              class="item-margin-bottom special form-item-style"
            >
              <el-upload
                class="upload-demo"
                :multiple="false"
                :action="doUpload"
                :file-list="user_form.screenShowPhotos"
                list-type="picture"
                :http-request="doUploadAvatar"
                :before-upload="beforeAvatarUpload"
                accept="image/png,image/gif,image/jpg,image/jpeg"
              >
                <img
                  v-if="user_form.screenShowPhotos.length < 1"
                  class="upload-img"
                  src="../../assets/default-img.png"
                  alt=""
                >
                <div v-else class="upload-img">
                  <img :src="user_form.screenShowPhotos[0].url" alt="">
                  <span class="del-img" @click.stop="handleRemove('')">x</span>
                </div>
              </el-upload>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button
          type="primary"
          :loading="submitLoading"
          @click="dialogType === 'add' ? add() : doUpdate()"
        >
          确定
        </el-button>
      </div>
    </el-dialog>
    <!--错误返回-->
    <el-dialog
      title="提示"
      center
      :visible.sync="resultVisible"
      destroy-on-close
    >
      <el-table
        ref="table_form_result"
        v-loading="false"
        :data="result_list"
        class="table"
        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 | matchNull }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="resultVisible = false">
          我已知晓
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserList,
  getUserListSearch,
  getProvince,
  getCity,
  getArea,
  getStreet,
  doEditAdmin,
  doDeleteAdmin,
  getTagList,
  getContextById,
  fieldOptions,
  getPlaceAreas
} from '@/api/user_manage'
import { getAreaList } from '@/api/area'
import Pagination from '@/components/Pagination'
import { checkRole } from '@/utils/checkRole'
import { uploadAdminInfoExcel, pictureLocal } from '@/api/ordinary_user'
import { batchDownload } from '@/utils/batchDownload'
import { saveAs } from 'file-saver' // 字符串保存成 TXT 文件保存到电脑

// secondary package based on el-pagination

export default {
  components: { Pagination },
  filters: {
    matchNull(str) {
      if (!str) {
        return '-'
      } else {
        return str
      }
    }
  },
  data() {
    return {
      // 主表格&主表格加载状态
      list: null,
      listLoading: true,
      // 分页参数
      page: {
        data: {
          username: null,
          name: null,
          phone: null,
          provinceId: null,
          cityId: null,
          areaId: null,
          type: null,
          tagId: null,
          placeType: null
        },
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      // 账号列表_搜索
      user_list: [],
      // 省市县列表_搜索
      province_list_search: [],
      city_list_search: [],
      area_list_search: [],
      // 是否显示对话框
      dialogVisible: false,
      // 提交状态
      submitLoading: false,
      // 对话框标题
      dialogTitle: {
        add: '添加账号',
        update: '编辑账号'
      },
      dialogType: 'add',
      // 省市县列表
      province_list: [],
      city_list: [],
      area_list: [],
      street_list: [],

      // 添加账号参数
      user_form: {
        username: null,
        type: null,
        tagId: null,
        isOut: 2,
        isHideImportant: 1,
        name: null,
        phone: null,
        provinceId: null,
        cityId: null,
        areaId: null,
        streetId: null,
        address: null,
        policeStationName: null,
        policeStationCode: null,
        password: null,
        whiteVisitorType: ['1', '2'],
        isControlEarlyWarning: 2,
        openInOutStatistics: false,
        noHideCloumn: ['1', '2', '3'],
        isPush: 0,
        addCustomList: [], // 自定义字段
        clockWayType: '0', // 打卡方式
        // clockWayPushUrl: null, //推送地址
        // punchReportFieldsConfig: [], //推送字段
        // 打卡方式-通用 [{"interfAddr":"三方接口地址","punchReportFields":"打卡上报字段, 多个逗号分割","zoneId":"所在区域ID"}]
        clockWayPushInterfaceAddresses: [
          {
            interfAddr: null,
            punchReportFields: null,
            zoneId: null
          }
        ],
        dingtalkAppKey: null,
        dingtalkAppSecret: null,
        placeType: 0, // 场所类型
        codeType: ['0'],
        addressCode: '',
        unitName: '',
        unitAddress: '',
        placeAreaCode: null,
        isOpenPrivateArea: 2, // 是否开启私有区域
        isShowCustomWord: false, // 是否显示自定义字段
        userWhitelistEffectiveTime: 3650, // 员工有效期
        userVisiterEffectiveTime: 0.3, // 访客有效期
        cardPhysics: 2, // 卡号
        faceLogHoldDays: 60, // 进出记录保留时间
        realAuthenticationAgeEnd: 200, // 实名认证年龄段-结束年龄
        realAuthenticationAgeStart: 0, // 实名认证年龄段-开始年龄
        notAllowAgeEnd: 0, // 不可预约年龄段-结束年龄
        notAllowAgeStart: 0, // 不可预约年龄段-开始年龄
        screenShowPhotos: [],
        disinfectFlag: 0, // 是否开启区域巡查
        problemReportFlag: 0, // 是否开启问题上报
        isNeedRealAuthentication: true, // 是否需要实名认证
        wxLoginType: 1, // 微信小程序登录方式
        isOpenVisitorClear: false, // 是否0.清除
        mobileAutoInputFlag: 2, // 获取手机号方式
        isOpenHealthCode: 0,
        latestResultPage: false, // 设备结果页类型 false:老版 true:新版
        topTitle: '',
        notAllowAgeMsg: '', // 提示信息
        isAlarm: false, // 不允许是否报警
        isOpenExam: false, // 是否开启考试
        qrcodeText: null, // 二维码码值
        showQrcode: false, // 二维码是否显示
        advertise: null, // 广告图片
        homeImgUrl: null, // 首页图片配置
        openThirdLinkPlatform: false,
        interfaceAddress: null,
        interfaceAddresses: [
          {
            interfAddr: null,
            zoneId: null
          }
        ],
        subLineSuccess: null,
        subLineFail: null,
        mainLineLeft: null,
        subLineLeft: null,
        mainLineRight: null,
        subLineRight: null,
        openVoiceMsgSuccess: null,
        openVoiceMsgFail: null,
        whitelistAppRealname: true,
        whitelistAppPhoto: true,
        whitelistAppPhone: true,
        whitelistAppLoginList: [1, 2],
        visitorAppRealname: true,
        visitorAppPhoto: true,
        visitorAppPhone: true,
        visitorAppLoginList: [1, 2],
        buildingCheckType: 1,
        // 支付宝小程序单机二维码标题
        zfbMiniEthTitle: null,
        // 支付宝小程序联机二维码标题
        zfbMiniVguangTitle: null,
        orgOutId: null,
        tenantEnterpriseName: '楼宇', // 上级名称-显示使用
        enterpriseName: '企业', // 下级名称-显示使用
        isOpenInoutWarning: false,
        userManageSwitch: false,
        zoneManageSwitch: false,
        isOpenLadder: false
      },
      user_form_copy: {},
      scene_list: [
        {
          name: '通用场景',
          id: 0
        },
        {
          name: '楼宇场景',
          id: 2
        },
        {
          name: '预约场景',
          id: 1
        },
        {
          name: '学校场景',
          id: 3
        }
      ],
      // 账号级别
      type_list: [
        { id: 2, name: '省级超管员', disabled: false },
        { id: 3, name: '省级管理员', disabled: false },
        { id: 4, name: '市级管理员' },
        { id: 5, name: '区级管理员' }
      ],
      // 账号类别
      tag_list: [],
      // 验证规则
      rules: {
        username: [
          { required: true, message: '请输入账号名称', trigger: 'blur' },
          {
            min: 2,
            max: 20,
            message: '长度在 2 到 20 个字符',
            trigger: 'blur'
          }
        ],
        type: [
          { required: true, message: '请选择账号级别', trigger: 'change' }
        ],
        isOut: [
          {
            required: true,
            message: '请选择是否导出记录功能',
            trigger: 'change'
          }
        ],
        isHideImportant: [
          { required: true, message: '请选择是否脱敏', trigger: 'change' }
        ],
        isControlEarlyWarning: [
          {
            required: true,
            message: '请选择是否为布控账号',
            trigger: 'change'
          }
        ],
        openInOutStatistics: [
          {
            required: true,
            message: '请选择是否开启进出记录统计',
            trigger: 'change'
          }
        ],
        tagId: [
          { required: false, message: '请选择账号类别', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入管理员姓名', trigger: 'blur' },
          {
            min: 2,
            max: 20,
            message: '长度在 2 到 20 个字符',
            trigger: 'blur'
          }
        ],
        phone: [
          { required: true, message: '请输入管理员手机号', trigger: 'change' }
        ],
        provinceId: [{ required: true, message: '请选择省', trigger: 'blur' }],
        cityId: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        areaId: [{ required: true, message: '请选择地区', trigger: 'blur' }],
        streetId: [{ required: true, message: '请选择街道', trigger: 'blur' }],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        policeStationName: [
          { required: true, message: '请输入所属组织名称', trigger: 'blur' }
        ],
        policeStationCode: [
          { required: false, message: '请输入所属组织代码', trigger: 'blur' }
        ],
        isPush: [
          {
            required: true,
            message: '请选择是否开启员工身份证认证',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern:
              /^(((?=.*\d)(?=.*[a-z])(?=.*[A-Z]))|((?=.*\d)(?=.*[a-z])(?=.*[~!@#$%^&*]))|((?=.*\d)(?=.*[A-Z])(?=.*[~!@#$%^&*]))|((?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*]))|((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*]))).{10,32}$/,
            message:
              '必须大小写字母、数字、特殊字符,4种组合中至少满足3种，且密码长度在10-32位之间'
          }
        ],
        customName: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }
        ],
        customType: [
          {
            required: true,
            message: '请选择字段类型',
            trigger: 'blur'
          }
        ],
        configurationOptions: [
          {
            required: true,
            message: '请输入选项配置',
            trigger: 'blur'
          }
        ],
        addressCode: [
          {
            required: true,
            message: '请输入场所码Code',
            trigger: 'blur'
          }
        ],
        unitName: [
          {
            required: true,
            message: '请输入单位名称',
            trigger: 'blur'
          }
        ],
        unitAddress: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }
        ],
        placeAreaCode: [
          {
            required: true,
            message: '请选择',
            trigger: 'blur'
          }
        ],
        isShowCustomWord: [
          {
            required: true,
            message: '请选择',
            trigger: 'blur'
          }
        ],
        codeType: [
          {
            required: true,
            message: '请选择',
            trigger: 'blur'
          }
        ],
        placeType: [
          {
            required: true,
            message: '请选择',
            trigger: 'blur'
          }
        ],
        userWhitelistEffectiveTime: [
          {
            required: true,
            message: '请填写',
            trigger: 'blur'
          }
        ],
        userVisiterEffectiveTime: [
          {
            required: true,
            message: '请填写',
            trigger: 'blur'
          }
        ],
        cardPhysics: [
          {
            required: true,
            message: '请填写',
            trigger: 'blur'
          }
        ],
        faceLogHoldDays: [
          {
            required: true,
            message: '请填写',
            trigger: 'blur'
          }
        ],
        clockWayType: [{ required: true, message: '请选择', trigger: 'blur' }],
        dingtalkAppKey: [
          { required: true, message: '请输入钉钉唯一标识key', trigger: 'blur' }
        ],
        dingtalkAppSecret: [
          { required: true, message: '请输入钉钉密钥', trigger: 'blur' }
        ],
        disinfectFlag: [{ required: true, message: '请选择', trigger: 'blur' }],
        problemReportFlag: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        wxLoginType: [{ required: true, message: '请选择', trigger: 'blur' }],
        isNeedRealAuthentication: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        mobileAutoInputFlag: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        isOpenExam: [{ required: true, message: '请选择', trigger: 'blur' }],
        isOpenVisitorClear: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        topTitle: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ],
        latestResultPage: [
          {
            required: true,
            type: 'boolean',
            message: '请选择UI使用版本',
            trigger: 'blur'
          }
        ],
        interfaceAddress: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ],
        whitelistAppRealname: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        whitelistAppPhoto: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        whitelistAppPhone: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        whitelistAppLoginList: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        visitorAppRealname: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        visitorAppPhoto: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        visitorAppPhone: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        visitorAppLoginList: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        buildingCheckType: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        // zfbMiniEthTitle: [
        //   { required: true, message: "请选择", trigger: "blur" },
        // ],
        // zfbMiniVguangTitle: [
        //   { required: true, message: "请选择", trigger: "blur" },
        // ],
        orgOutId: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        isOpenInoutWarning: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        isOpenLadder: [
          { required: true, message: '请选择', trigger: 'blur' }
        ]
      },
      // 批量导入结果返回
      resultVisible: false,
      result_list: [],
      // 弹框区域列表
      platformAreaList: [],
      // 选中的区域列表
      selectedPlatformAreaList: [],
      // 打卡方式-通用 的区域选中列表
      checkWayOfSelectedPlatformAreaList: [],
      // 字段类型
      customType_list: [
        { id: 1, name: '文本' },
        { id: 2, name: '下拉选择' },
        { id: 3, name: '省市区' },
        { id: 4, name: '省市区街道' },
        { id: 5, name: '日期' },
        { id: 6, name: '时间' },
        { id: 7, name: '图片' }
      ],
      // 推送字段
      pushField: [],
      doUpload: '',
      placeAreaCode_list: [], // 场所码所属区域
      row: {}
    }
  },
  computed: {
    regularCode() {
      return function(row) {
        if (row.codeType.indexOf('0') > -1) {
          let qrcode = ''
          // placeType 0表示普通场景，1表示预约场景，2表示楼宇场景
          switch (row.placeType) {
            case 0:
              qrcode = row.email
              break
            case 1:
              qrcode = row.adminDetail ? row.adminDetail.reservationCode : ''
              break
            case 2:
              qrcode = row.adminDetail ? row.adminDetail.buildingCode : ''
              break
            default:
              break
          }
          return qrcode
        }
      }
    },
    zfbRegularCode() {
      return function(row) {
        if (row.codeType.indexOf('0') > -1) {
          let qrcode = ''
          switch (row.placeType) {
            case 0:
              qrcode = row.adminDetail ? row.adminDetail.zfbRegularCode : ''
              break
            case 2:
              qrcode = row.adminDetail ? row.adminDetail.zfbBuildingRegularCode : ''
              break
            default:
              break
          }
          return qrcode
        }
      }
    },
    regular() {
      return function(row) {
        if (row.codeType.indexOf('1') > -1) {
          let qrcode = ''
          if (row.adminDetail) {
            switch (row.placeType) {
              case 0:
                qrcode = row.adminDetail.regularCode
                  ? row.adminDetail.regularCode
                  : ''
                break
              case 1:
                qrcode = row.adminDetail.reservationEnCode
                  ? row.adminDetail.reservationEnCode
                  : ''
                break
              case 2:
                qrcode = row.adminDetail.buildingRegularCode
                  ? row.adminDetail.buildingRegularCode
                  : ''
                break
              default:
                break
            }
          }
          console.log(qrcode)
          return qrcode
        }
      }
    },
    zfbRegular() {
      return function(row) {
        if (row.codeType.indexOf('1') > -1) {
          let qrcode = ''
          if (row.adminDetail) {
            switch (row.placeType) {
              case 0:
                qrcode = row.adminDetail.zfbRegularCode
                  ? row.adminDetail.zfbRegularCode
                  : ''
                break
              case 2:
                qrcode = row.adminDetail.zfbBuildingRegularCode
                  ? row.adminDetail.zfbBuildingRegularCode
                  : ''
                break
              default:
                break
            }
          }
          return qrcode
        }
      }
    }
  },
  watch: {
    'user_form.type': {
      handler(n, o) {
        if (this.dialogType === 'add') {
          this.user_form.placeType = 0
          this.user_form.codeType = ['0']
        }
        if (n !== 5) {
          this.user_form.addCustomList = []
        }
      }
    },
    'user_form.whiteVisitorType': {
      handler(n, o) {
        if (this.user_form.whiteVisitorType.length === 0) {
          this.user_form.addCustomList = []
        }
      }
    },
    'user_form.placeType'(n, o) {
      if (n === 1) {
        this.user_form.isShowCustomWord = false
      }
    },
    'user_form.clockWayType'(n) {
      // 选择钉钉或通用清除另一个
      if (n !== '2') {
        this.user_form.dingtalkAppKey = ''
        this.user_form.dingtalkAppSecret = ''
      }
      if (n !== '1') {
        // this.user_form.clockWayPushUrl = null
        // this.user_form.punchReportFieldsConfig = []
        this.user_form.clockWayPushInterfaceAddresses = [
          {
            interfAddr: null,
            punchReportFields: null,
            zoneId: null
          }
        ]
      }
    }
  },
  created() {
    this.fetchData()
    this.getUserListSearch()
    this.getAddressList(1)
    this.getAddressListSearch(1)
    this.fieldOptions()
    // 如果为省级账号则锁定省份的选择
    if (checkRole([2])) {
      this.getAddressList(2, this.$store.getters.provinceId)
      this.getAddressListSearch(2, this.$store.getters.provinceId)
      this.getTagList(this.$store.getters.provinceId)
      this.user_form.provinceId = this.$store.getters.provinceId
      this.page.data.provinceId = this.$store.getters.provinceId
      this.type_list[0].disabled = true
    }
    this.user_form_copy = JSON.parse(JSON.stringify(this.user_form))
  },
  methods: {
    // 查询权限
    checkRole,
    // 获取列表数据
    fetchData() {
      this.listLoading = true
      getUserList(this.page).then((res) => {
        this.list = res.data.list
        this.list.forEach((item) => {
          if (item.whitelistAppLoginList == null) {
            item.whitelistAppLoginList = []
          }
          if (item.visitorAppLoginList == null) {
            item.visitorAppLoginList = []
          }
        })
        this.total = res.data.total
        this.listLoading = false
      })
    },
    isdisabled(e) {
      return e === 0
    },
    clockWayRule(rule, value, callback) {
      if (value && value.length > 0) {
        return callback()
      }
      return callback('推送字段不能为空!')
    },
    // 获取区域列表
    getPlatformList(adminId) {
      getAreaList({ adminId }).then((res) => {
        this.platformAreaList = res.data
        this.platformAreaList.unshift({
          id: 0,
          name: '全部'
        })
        if (
          this.user_form.clockWayPushInterfaceAddresses &&
          this.user_form.clockWayPushInterfaceAddresses.length > 0
        ) {
          for (
            let i = 0;
            i < this.user_form.clockWayPushInterfaceAddresses.length;
            i++
          ) {
            if (
              this.user_form.clockWayPushInterfaceAddresses[i].zoneId !== null
            ) {
              this.checkWayOfSelectedPlatformAreaList.push(
                this.user_form.clockWayPushInterfaceAddresses[i].zoneId
              )
            }
          }
        }
        if (
          this.user_form.interfaceAddresses &&
          this.user_form.interfaceAddresses.length > 0
        ) {
          for (let i = 0; i < this.user_form.interfaceAddresses.length; i++) {
            if (this.user_form.interfaceAddresses[i].zoneId !== null) {
              this.selectedPlatformAreaList.push(
                this.user_form.interfaceAddresses[i].zoneId
              )
            }
          }
        }
      })
    },
    areaSelectChange(value, index) {
      if (this.selectedPlatformAreaList[index] !== null) {
        this.selectedPlatformAreaList[index] = value
      } else {
        this.selectedPlatformAreaList.push(value)
      }
    },
    checkWayOfAreaSelectChange(value, index) {
      if (this.checkWayOfSelectedPlatformAreaList[index] !== null) {
        this.checkWayOfSelectedPlatformAreaList[index] = value
      } else {
        this.checkWayOfSelectedPlatformAreaList.push(value)
      }
    },
    removeInterfaceAddress(index, value) {
      this.user_form.interfaceAddresses.splice(index, 1)
      this.selectedPlatformAreaList = this.selectedPlatformAreaList.filter(
        function(item) {
          return item !== value
        }
      )
    },
    removeCheckWayInterfaceAddress(index, value) {
      this.user_form.clockWayPushInterfaceAddresses.splice(index, 1)
      this.checkWayOfSelectedPlatformAreaList =
        this.checkWayOfSelectedPlatformAreaList.filter(function(item) {
          return item !== value
        })
    },
    addInterfaceAddress() {
      this.user_form.interfaceAddresses.push({
        interfAddr: null,
        zoneId: null
      })
    },
    addCheckWayInterfaceAddress() {
      this.user_form.clockWayPushInterfaceAddresses.push({
        interfAddr: null,
        punchReportFields: null,
        zoneId: null
      })
    },
    // 添加自定义
    addCustom(index) {
      this.user_form.addCustomList.splice(index + 1, 0, {
        customName: '',
        prompt: '',
        isEditable: 1,
        isShow: 1,
        configurationOptions: null,
        customType: null,
        customNameVal: null
      })
    },
    // 删除自定义
    delCustom(index) {
      this.user_form.addCustomList.splice(index, 1)
    },

    // 打开添加账号对话框
    create() {
      this.user_form = JSON.parse(JSON.stringify(this.user_form_copy))
      this.dialogType = 'add'
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['user_form'].clearValidate()
      })
      this.platformAreaList = []
      this.selectedPlatformAreaList = []
      // this.getPlatformList()
      this.platformAreaList.push({
        id: 0,
        name: '全部'
      })
    },
    // 选择账号权限
    changeType(e) {
      if (e > 2) {
        this.rules.tagId[0].required = true
      } else {
        this.rules.tagId[0].required = false
      }
      this.user_form.tagId = null
    },
    // 获得标签列表
    getTagList(provinceId) {
      getTagList(provinceId).then((res) => {
        this.tag_list = res.data
      })
    },
    // 获取账号列表数据_搜索
    getUserListSearch() {
      getUserListSearch().then((res) => {
        this.user_list = res.data
      })
    },
    // 获取推送字段
    fieldOptions() {
      fieldOptions().then((res) => {
        this.pushField = 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.page.data.cityName = ''
      this.area_list_search = []
      this.page.data.areaId = ''
      this.page.data.areaName = ''
      this.getAddressListSearch(2, e)
      this.getTagList(e)
    },
    // 选择市_搜索
    chooseCitySearch(e) {
      this.area_list = []
      this.page.data.areaId = ''
      this.page.data.areaName = ''
      this.getAddressListSearch(3, e)
    },
    // 获得省市县列表
    getAddressList(type, code) {
      switch (type) {
        case 1:
          getProvince().then((res) => {
            this.province_list = res.data
          })
          break
        case 2:
          getCity(code).then((res) => {
            this.city_list = res.data
          })
          break
        case 3:
          getArea(code).then((res) => {
            this.area_list = res.data
          })
          break
        case 4:
          getStreet(code).then((res) => {
            this.street_list = res.data
          })
          break
        default:
          break
      }
    },
    // 选择省份
    chooseProvince(e) {
      this.city_list = []
      this.user_form.cityId = ''
      this.user_form.cityName = ''
      this.area_list = []
      this.user_form.areaId = ''
      this.user_form.areaName = ''
      this.street_list = []
      this.user_form.streetId = ''
      this.user_form.streetName = ''
      this.getAddressList(2, e)
      this.getTagList(e)
    },
    // 选择市
    chooseCity(e) {
      this.area_list = []
      this.user_form.areaId = ''
      this.user_form.areaName = ''
      this.street_list = []
      this.user_form.streetId = ''
      this.user_form.streetName = ''
      this.getAddressList(3, e)
    },
    // 选择区/县
    chooseArea(e) {
      this.street_list = []
      this.user_form.streetId = ''
      this.user_form.streetName = ''
      this.getAddressList(4, e)
    },
    // 确定添加
    add() {
      if (this.submitLoading) {
        return
      }
      this.$refs['user_form'].validate((valid) => {
        if (valid) {
          this.submitLoading = true
          if (!this.user_form.openThirdLinkPlatform) {
            this.user_form.interfaceAddresses = null
          }
          if (
            this.user_form.interfaceAddresses &&
            this.user_form.interfaceAddresses.length > 0
          ) {
            this.user_form.interfaceAddresses =
              this.user_form.interfaceAddresses.filter((item) => {
                return item.interfAddr !== null && item.zoneId !== null
              })
            if (this.user_form.interfaceAddresses.length <= 0) {
              this.user_form.interfaceAddresses = null
            }
          }
          if (
            this.user_form.clockWayPushInterfaceAddresses &&
            this.user_form.clockWayPushInterfaceAddresses.length > 0
          ) {
            // this.user_form.clockWayPushInterfaceAddresses =
            //   this.user_form.clockWayPushInterfaceAddresses.filter((item) => {
            //     return (
            //       item.interfAddr !== null &&
            //       item.punchReportFields !== null &&
            //       item.punchReportFields.length > 0 &&
            //       item.zoneId !== null
            //     );
            //   });
            if (this.user_form.clockWayPushInterfaceAddresses.length <= 0) {
              this.user_form.clockWayPushInterfaceAddresses = null
            } else {
              this.user_form.clockWayPushInterfaceAddresses =
                this.user_form.clockWayPushInterfaceAddresses.map((item) => {
                  return {
                    interfAddr: item.interfAddr,
                    zoneId: item.zoneId,
                    punchReportFields:
                      item.punchReportFields && item.punchReportFields > 0
                        ? item.punchReportFields.join(',')
                        : null
                  }
                })
            }
          }
          if (this.user_form.latestResultPage) {
            this.user_form.mainLineLeft = null
            this.user_form.subLineLeft = null
            this.user_form.mainLineRight = null
            this.user_form.subLineRight = null
            this.user_form.showQrcode = false
            this.user_form.qrcodeText = null
            this.user_form.advertise = null
          }
          doEditAdmin(this.user_form).then((res) => {
            this.dialogVisible = false
            this.fetchData()
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
          }).finally(() => {
            this.submitLoading = false
          })
        }
      })
    },
    // 删除账号
    deleteUser(id) {
      this.$confirm('确定要删除此账号吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        doDeleteAdmin(id).then((res) => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      })
    },
    // 打开编辑
    update(row) {
      this.checkWayOfSelectedPlatformAreaList = []
      this.selectedPlatformAreaList = []
      this.user_form = Object.assign(this.user_form, row)
      this.row = row
      if (this.user_form.realAuthenticationAgeStart == null) {
        this.user_form.realAuthenticationAgeStart = 0
      }
      if (this.user_form.realAuthenticationAgeEnd == null) {
        this.user_form.realAuthenticationAgeEnd = 200
      }
      this.user_form.password = ''
      this.getAddressList(2, this.user_form.provinceId)
      this.getTagList(this.user_form.provinceId)
      this.getAddressList(3, this.user_form.cityId)
      this.getAddressList(4, this.user_form.areaId)
      this.dialogType = 'update'
      this.dialogVisible = true

      this.$nextTick(() => {
        this.$refs['user_form'].clearValidate()
      })
      getContextById(row.adminId).then((res) => {
        this.user_form.addCustomList = res.data
        // 初始化是否显示自定义字段
        this.user_form.isShowCustomWord =
          this.user_form.addCustomList.length > 0
      })
      if (
        this.user_form.clockWayPushInterfaceAddresses &&
        this.user_form.clockWayPushInterfaceAddresses.length > 0
      ) {
        this.user_form.clockWayPushInterfaceAddresses =
          this.user_form.clockWayPushInterfaceAddresses.map((item) => {
            let punchReportFields = null
            if (typeof item.punchReportFields === 'string') {
              punchReportFields = item.punchReportFields
                ? item.punchReportFields.split(',')
                : null
            } else {
              punchReportFields = item.punchReportFields
            }
            return {
              interfAddr: item.interfAddr,
              zoneId: item.zoneId,
              punchReportFields
            }
          })
      } else {
        this.user_form.clockWayPushInterfaceAddresses = []
        this.user_form.clockWayPushInterfaceAddresses.push({
          interfAddr: null,
          zoneId: null,
          punchReportFields: null
        })
      }

      if (
        !this.user_form.interfaceAddresses ||
        this.user_form.interfaceAddresses.length <= 0
      ) {
        this.user_form.interfaceAddresses = []
        this.user_form.interfaceAddresses.push({
          interfAddr: null,
          zoneId: null
        })
      }
      this.getPlatformList(this.user_form.adminId)
    },
    // 选择是否显示自定义字段
    changeCustomWord(e) {
      switch (e) {
        case true:
          this.addCustom(0)
          break
        case false:
          this.user_form.addCustomList = []
          break
        default:
          break
      }
    },
    // 确定编辑
    doUpdate() {
      if (this.submitLoading) {
        return
      }
      this.$refs['user_form'].validate((valid) => {
        if (valid) {
          this.submitLoading = true
          if (!this.user_form.homeImgUrl) {
            this.user_form.homeImgUrl =
              'https://tx.hz-hanghui.com:8088/yx-fyzd/file/icon/face.jpg'
          }
          if (!this.user_form.openThirdLinkPlatform) {
            this.user_form.interfaceAddresses = null
          }
          if (
            this.user_form.interfaceAddresses &&
            this.user_form.interfaceAddresses.length > 0
          ) {
            this.user_form.interfaceAddresses =
              this.user_form.interfaceAddresses.filter((item) => {
                return item.interfAddr !== null && item.zoneId !== null
              })
            if (this.user_form.interfaceAddresses.length <= 0) {
              this.user_form.interfaceAddresses = null
            }
          }
          if (
            this.user_form.clockWayPushInterfaceAddresses &&
            this.user_form.clockWayPushInterfaceAddresses.length > 0
          ) {
            // this.user_form.clockWayPushInterfaceAddresses =
            //   this.user_form.clockWayPushInterfaceAddresses.filter((item) => {
            //     return (
            //       item.interfAddr !== null &&
            //       item.punchReportFields !== null &&
            //       item.punchReportFields.length > 0 &&
            //       item.zoneId !== null
            //     );
            //   });
            if (this.user_form.clockWayPushInterfaceAddresses.length <= 0) {
              this.user_form.clockWayPushInterfaceAddresses = null
            } else {
              this.user_form.clockWayPushInterfaceAddresses =
                this.user_form.clockWayPushInterfaceAddresses.map((item) => {
                  return {
                    interfAddr: item.interfAddr,
                    zoneId: item.zoneId,
                    punchReportFields:
                      item.punchReportFields &&
                      item.punchReportFields.length > 0
                        ? item.punchReportFields.join(',')
                        : null
                  }
                })
            }
          }
          if (this.user_form.latestResultPage) {
            this.user_form.mainLineLeft = null
            this.user_form.subLineLeft = null
            this.user_form.mainLineRight = null
            this.user_form.subLineRight = null
            this.user_form.showQrcode = false
            this.user_form.qrcodeText = null
            this.user_form.advertise = null
          }
          doEditAdmin(this.user_form).then((res) => {
            this.dialogVisible = false
            this.fetchData()
            this.$message({
              type: 'success',
              message: '编辑成功!'
            })
          }).finally(() => {
            this.submitLoading = false
          })
        }
      })
    },
    // 下载模板
    download() {
      window.location.href =
        process.env.VUE_APP_BASE_API + '/excel/adminInfoExcel.xlsx'
    },
    // 批量导入
    upload(e) {
      var files = e.currentTarget.files
      if (!files.length) {
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '拼命导入中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      var formData = new FormData() // 必需声明一个FormData对象
      formData.append('file', files[0])
      uploadAdminInfoExcel(formData)
        .then((res) => {
          loading.close()
          this.fetchData()
          if (res.data.length > 0) {
            this.resultVisible = true
            this.result_list = res.data
          } else {
            this.$message({
              type: 'success',
              message: '导入成功!'
            })
          }
        })
        .catch((err) => {
          loading.close()
          this.fetchData()
        })
    },
    // 批量下载账号列表
    batchDownloadUserList() {
      const pageData = JSON.parse(JSON.stringify(this.page))
      pageData.pageNum = 1
      pageData.pageSize = 99999
      getUserList(pageData).then((res) => {
        const json = res.data.list
        const arr = [
          { name: '账号名称', value: 'username' },
          { name: '管理员姓名', value: 'name' },
          { name: '管理员手机号', value: 'phone' },
          { name: '省', value: 'provinceName' },
          { name: '市', value: 'cityName' },
          { name: '区', value: 'areaName' },
          { name: '街道', value: 'streetName' },
          { name: '详细地址', value: 'address' },
          { name: '所属组织', value: 'policeStationName' },
          { name: '所属组织代码', value: 'policeStationCode' },
          {
            name: '账号级别（ 1管理员 2省级总账号 3省级 4市级 5区级）',
            value: 'type'
          },
          { name: '卡号认证（1开启 2不开启）', value: 'cardPhysics' },
          { name: '进出记录保留时间（单位/天）', value: 'faceLogHoldDays' },
          { name: '脱敏字段（1姓名 2手机号 3身份证）', value: 'noHideCloumn' },
          { name: '是否开启导出（ 1开启 2不开启）', value: 'isOut' },
          { name: '导出是否脱敏（1脱敏 2不脱敏）', value: 'isHideImportant' },
          { name: '身份证认证（ 0不开启 1开启）', value: 'isPush' },
          { name: '功能配置（1员工2访客）', value: 'whiteVisitorType' },
          {
            name: '是否开启布控（1开启 2不开启）',
            value: 'isControlEarlyWarning'
          },
          {
            name: '是否开启进出记录统计（true开启 false不开启）',
            value: 'openInOutStatistics'
          },
          { name: '二维码类型（0通用码 1员工码）', value: 'codeType' },
          {
            name: '员工有效期（单位/天）',
            value: 'userWhitelistEffectiveTime'
          },
          { name: '访客有效期（单位/天）', value: 'userVisiterEffectiveTime' },
          { name: '打卡方式（0不启用 1通用 2钉钉）', value: 'clockWayType' },
          { name: '推送地址', value: 'clockWayPushUrl' },
          { name: '推送字段', value: 'punchReportFieldsConfig' },
          { name: '实名认证年龄开始区间', value: 'realAuthenticationAgeStart' },
          { name: '实名认证年龄结束区间', value: 'realAuthenticationAgeEnd' },
          { name: '不可预约开始年龄段', value: 'notAllowAgeStart' },
          { name: '不可预约结束年龄段', value: 'notAllowAgeEnd' },
          { name: '风险区列表', value: 'riskAreaList' },
          { name: '实际控制人姓名', value: 'adminDetail.actualName' },
          { name: '实际控制人电话', value: 'adminDetail.actualPhone' },
          { name: '企业全称', value: 'adminDetail.enterpriseFullName' },
          { name: '企业简称', value: 'adminDetail.enterpriseSimpleName' },
          { name: '通用码地址', value: 'adminDetail.genericCode' },
          { name: '员工码地址', value: 'adminDetail.regularCode' },
          { name: '楼宇码地址', value: 'adminDetail.buildingCode' },
          { name: '楼宇员工码地址', value: 'adminDetail.buildingRegularCode' },
          { name: '预约码内宾地址', value: 'adminDetail.reservationCode' },
          { name: '预约码外宾地址', value: 'adminDetail.reservationEnCode' }
        ]
        batchDownload(json, arr, '账号列表名单')
      })
    },
    handleRemove(type) {
      if (type) {
        this.user_form[type] = null
      } else {
        this.user_form.screenShowPhotos = []
      }
    },
    // 图片上传前
    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
      }
    },
    doUploadAvatar(obj) {
      this.user_form.screenShowPhotos = []
      var avatar = new FormData()
      avatar.append('file', obj.file)
      pictureLocal(avatar).then((res) => {
        const data = {
          name: obj.file.name,
          url: res.data
        }
        this.user_form.screenShowPhotos.push(data)
      })
    },
    doUploadAvatar1(obj, type) {
      this.listLoading = true
      var avatar = new FormData()
      avatar.append('file', obj.file)
      pictureLocal(avatar).then((res) => {
        this.value = res.data
        this.listLoading = false
        this.$set(this.user_form, type, res.data)
      })
    },
    // 场所码所属区域
    getPlaceAreas() {
      getPlaceAreas().then((res) => {
        this.placeAreaCode_list = res.data
      })
    },
    // 账号-获取appKey和appSecret
    getAppKeyAndAppSecret(boole) {
      if (boole) {
        const str = `appKey: ${this.row.appKey}\r\nappSecret: ${this.row.appSecret}\r\nprivateKey: ${this.row.privateKey}`
        const strData = new Blob([str], { type: 'text/plain;charset=utf-8' })
        saveAs(strData, boole ? '密钥.txt' : '文档.txt')
      } else {
        window.location.href =
          'https://tx.hz-hanghui.com:8088/yx-fyzd/static/联动平台三方接入协议文档.zip'
      }
    },
    getAppKeyAndAppSecret2(boole) {
      if (boole) {
        const str = `privateKey: ${this.row.clockWayAdminAuthVO.privateKey}`
        const strData = new Blob([str], { type: 'text/plain;charset=utf-8' })
        saveAs(strData, boole ? '密钥.txt' : '文档.txt')
      } else {
        window.location.href =
          'https://tx.hz-hanghui.com:8088/yx-fyzd/static/浙江通用打卡进出记录推送文档国密SM4ECB模式加密.zip'
      }
    },

    getAppKeyAndAppSecret3(type) {
      console.log(type)
      switch (type) {
        case 1:
          const str = `appId: ${this.row.userDistrictAdminAuthVO.appId}\r\nappKey: ${this.row.userDistrictAdminAuthVO.appKey}\r\nappSecret: ${this.row.userDistrictAdminAuthVO.appSecret}\r\nprivateKey: ${this.row.userDistrictAdminAuthVO.privateKey}`
          const strData = new Blob([str], { type: 'text/plain;charset=utf-8' })
          saveAs(strData, '密钥.txt')
          break
        case 2:
          window.location.href =
            'https://tx.hz-hanghui.com:8088/yx-fyzd/file/upload/pdf/人员管理接口文档.pdf'
          break
        case 3:
          window.location.href =
            'https://tx.hz-hanghui.com:8088/yx-fyzd/file/upload/pdf/区域管理接口文档.pdf'
          break
        default:
          break
      }
    },

    handleCheckChange(val, type) {
      if (type == 1) {
        if (val) {
          this.user_form.whitelistAppLoginList = [1, 2]
          this.user_form.whitelistAppPhoto = true
        } else {
          this.user_form.whitelistAppLoginList = []
        }
      } else {
        if (val) {
          this.user_form.visitorAppLoginList = [1, 2]
          this.user_form.visitorAppPhoto = true
        } else {
          this.user_form.visitorAppLoginList = []
        }
      }
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1
    }
  }
}
</script>
<style scoped lang="scss">
.table {
  margin-top: 15px;
}
.display-config-layout {
  display: flex;
  flex-wrap: wrap;
  padding: 0 5px;
  & > div {
    width: calc(50% - 30px);
    flex: none;
    margin-left: 0;
    margin-right: 0;
  }
  & > div:nth-child(odd) {
    margin-right: 60px;
  }
  ::v-deep .el-radio__input {
    vertical-align: top;
  }
}
.flex {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  & > div:nth-child(1) {
    margin-right: 60px;
  }
  // align-items: center;
}
.interfaceAddress-layout {
  width: 100%;
  padding: 0 10px;
  border: 1px solid #d6eaff;
  border-radius: 6px;
  padding-top: 18px;
  margin-bottom: 17px;
}
.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 150px;
}
/*批量导入按钮*/
.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;
}
.custom-css {
  border: 1px solid #d6eaff;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  margin-top: 25px;
}
.custom-css-item {
  border-bottom: 2px dashed #e7ebf4;
  padding: 20px 5px 45px 20px;
}
.custom-css-item:last-child {
  border-bottom: none;
}
.height {
  height: 190px;
}
.float {
  float: right;
}
.margin-right {
  margin-right: 8px !important;
}
.margin-left-hs {
  margin-left: 30px;
}
.title {
  margin-top: 25px;
  margin-bottom: 5px;
  .line {
    width: 4px;
    height: 14px;
    background: #409eff;
    border-radius: 13px;
    display: inline-block;
    margin-right: 8px;
  }
  span {
    font-weight: 700;
    font-size: 17px;
    color: #000;
  }
}

.item-margin-bottom {
  margin-bottom: 0px !important;
}
::v-deep.el-form-item {
  margin-bottom: 15px;
}
::v-deep.el-dialog__body {
  padding: 0 20px;
}
.margin0 {
  margin-bottom: 0px;
}

.address-width {
  width: 33.3%;
}
.avatar {
  /* width: 100px; */
  height: 100px;
}
::v-deep.upload-demo {
  display: flex;
  .el-upload-list {
    display: none !important;
  }
}
.upload-img {
  width: 100px;
  height: 100px;
  position: relative;
  margin-bottom: 20px;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    // border-radius: 12px;
  }
}
.upload-img1 {
  width: 253px;
  height: 91px;
  border: 1px solid #d6eaff;
  box-sizing: border-box;
}
.upload-img2 {
  width: 356px;
  height: 91px;
  border: 1px solid #99d3f5;
  box-sizing: border-box;
}
.upload-img3 {
  width: 63px;
  height: 91px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    // border-radius: 12px;
  }
}

.advertising-img {
  background-color: #f7f8fc;
  text-align: center;
  line-height: 91px;
  color: #ced3e3;
  font-size: 19px;
  i {
    margin-right: 5px;
  }
}
.del-img {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #83878f;
  color: #fff;
  position: absolute;
  top: -12px;
  right: -10px;
  border-radius: 48%;
  line-height: 18px;
}
.login-disposition {
  display: inline-block;
  color: #278af0;
  font-weight: 550;
  border-radius: 4px;
  padding: 6px 32px;
  background: #e5f2ff;
  margin-top: 16px;
  margin-bottom: 10px;
}
.titName{
  border:1px solid #fff;
  width: 80px;
  margin-left: 15px;
}
</style>
<style lang="scss">
//修改element原生样式
.special {
  .el-form-item__label {
    padding-left: 10px;
  }
}
.el-dialog__body {
  padding: 0 20px 10px;
}
</style>
