<template>
  <div class="app-container">
    <div class="title">
      <div class="line" />
      <span>基本信息</span>
    </div>
    <div class="user_msg">
      <div v-for="(item, index) in user_basic" :key="index" class="line_msg">
        <span class="basic_msg">{{ item.name }}</span>
        <span v-if="item.value" class="value">{{
          user_form[item.value] || "暂无"
        }}</span>
        <span v-else-if="item.type === 'type'" class="value">{{
          user_form.type == 5 ? "区级管理员" : "企业级管理员"
        }}</span>
        <span v-else-if="item.type === 'scenario'" class="value">{{
          user_form.placeType == 0
            ? "通用场景"
            : user_form.placeType == 1
              ? "预约场景"
              : "楼宇场景"
        }}</span>
      </div>
    </div>
    <el-form
      ref="user_form"
      :model="user_form"
      :rules="rules"
      label-width="200px"
      label-position="left"
    >
      <div class="title">
        <div class="line" />
        <span>场景功能配置</span>
      </div>
      <div v-if="user_form.placeType != 1 && user_form.type === 5" class="flex">
        <el-form-item
          label="身份证认证"
          prop="isPush"
          class="item-margin-bottom"
        >
          <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>
        <el-form-item
          label="卡号认证"
          prop="cardPhysics"
          class="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>
      </div>

      <div v-if="user_form.placeType != 1" class="flex">
        <el-form-item
          label="员工有效期（天）"
          prop="userWhitelistEffectiveTime"
          class="item-margin-bottom"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :manual="false"
            content="单位:天"
            placement="bottom"
          >
            <el-input-number
              v-model="user_form.userWhitelistEffectiveTime"
              size="mini"
              :precision="1"
              :min="0"
            />
          </el-tooltip>
        </el-form-item>
        <el-form-item
          label="访客有效期（天）"
          prop="userVisiterEffectiveTime"
          class="item-margin-bottom"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :manual="false"
            content="单位:天"
            placement="bottom"
          >
            <el-input-number
              v-model="user_form.userVisiterEffectiveTime"
              size="mini"
              :precision="1"
              :min="0"
            />
          </el-tooltip>
        </el-form-item>
      </div>
      <div v-if="user_form.type === 5" class="flex">
        <el-form-item
          v-if="user_form.placeType != 1"
          label="常访客配置"
          prop="isHideImportant"
          class="item-margin-bottom"
        >
          <el-checkbox-group v-model="user_form.whiteVisitorType">
            <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="nucleicExpirationTime"
          class="item-margin-bottom"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :manual="false"
            content="单位:时,0默认不开启"
            placement="bottom"
          >
            <el-input-number
              size="mini"
              v-model="user_form.nucleicExpirationTime"
              :min="0"
            ></el-input-number>
          </el-tooltip>
        </el-form-item> -->
        <el-form-item
          v-if="user_form.placeType === 1 && user_form.type == 5"
          label="不可预约年龄段"
          class="item-margin-bottom"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :manual="false"
            content="开始区间"
            placement="bottom"
          >
            <el-input-number
              v-model="user_form.notAllowAgeStart"
              size="mini"
              :min="0"
            />
          </el-tooltip>
          至
          <el-tooltip
            class="item"
            effect="dark"
            :manual="false"
            content="结束区间"
            placement="bottom"
          >
            <el-input-number
              v-model="user_form.notAllowAgeEnd"
              size="mini"
              :min="0"
            />
          </el-tooltip>
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item
          v-if="user_form.placeType === 0 && user_form.type === 5"
          label="实名认证年龄区间"
          class="item-margin-bottom"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :manual="false"
            content="开始区间"
            placement="bottom"
          >
            <el-input-number
              v-model="user_form.realAuthenticationAgeStart"
              size="mini"
              :min="0"
            />
          </el-tooltip>
          至
          <el-tooltip
            class="item"
            effect="dark"
            :manual="false"
            content="结束区间"
            placement="bottom"
          >
            <el-input-number
              v-model="user_form.realAuthenticationAgeEnd"
              size="mini"
              :min="0"
            />
          </el-tooltip>
        </el-form-item>
        <el-form-item
          v-if="isOpenExam"
          label="考试设备列表"
          class="form-item-style"
          prop="examDeviceList"
        >
          <el-select
            v-model="user_form.examDeviceList"
            style="width: 100%"
            collapse-tags
            multiple
            placeholder="请选择考试设备列表"
          >
            <el-option
              v-for="item in machine_list"
              :key="item.sn"
              :label="item.sn"
              :value="item.sn"
            />
          </el-select>
        </el-form-item>
      </div>
      <div v-if="user_form.clockWayType === '1'" class="interfaceAddress-layout" style="margin-top: 6px;">
        <div v-for="(clockWayItem, index) in user_form.clockWayPushInterfaceAddresses" :key="index" style="width:100%;display: flex;align-items: center;">
          <el-form-item
            label-width="140px"
            :label="`打卡-通用推送地址${index+1}`"
            class="form-item-style"
            style="width: 540px;flex:none;"
            :prop="`clockWayPushInterfaceAddresses.${index}.interfAddr`"
          >
            <el-input
              v-model="clockWayItem.interfAddr"
              placeholder="请输入推送地址"
            />
          </el-form-item>
          <el-form-item
            label-width="120px"
            :label="`地址${index+1}-绑定区域`"
            class="form-item-style"
            style="margin-left:60px;width:450px;flex:none;"
            :prop="`clockWayPushInterfaceAddresses.${index}.zoneId`"
            :rules="{ required: true, type: 'number', message: '绑定区域不能为空', trigger: ['change', 'blur'], validator: zoneRule }"
          >
            <el-select
              v-model="clockWayItem.zoneId"
              filterable
              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;margin:4px 0 0 6px;border:none;" @click.prevent="removeCheckWayInterfaceAddress(index, clockWayItem.zoneId)" />
          <el-button icon="el-icon-plus" size="small" circle style="align-self: flex-start;margin:4px 0 0 6px;" @click.prevent="addCheckWayInterfaceAddress" />
        </div>
      </div>
      <!-- 支付宝小程序显示配置 -->
      <div class="title">
        <div class="line" />
        <span>支付宝小程序显示配置</span>
        <el-button v-if="isOpenLadder" type="primary" style="margin-left:12px" @click="handleEdit">编辑梯控楼层关系表</el-button>
      </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 v-if="user_form.type === 5 && isOpenInoutWarning">
        <div class="title">
          <div class="line" />
          <span>进出异常预警配置</span>
        </div>
        <div style="font-size: 14px">
          在
          <el-input-number
            v-model="user_form.adminInoutWarnConfigDTO.hour"
            size="mini"
            :min="1"
          />
          小时内，某人员
          <el-select v-model="user_form.adminInoutWarnConfigDTO.pass" placeholder="请选择通道">
            <el-option
              v-for="item in passage_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          通道大于等于 <el-input-number
            v-model="user_form.adminInoutWarnConfigDTO.num"
            size="mini"
            :min="1"
          /> 次，则预警
        </div>
      </div>
      <!-- 设备显示配置 -->
      <div v-if="user_form.type === 5">
        <div class="title">
          <div class="line" />
          <span>设备显示配置</span>
        </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;margin:4px 0 0 6px;border:none;" @click.prevent="removeInterfaceAddress(index, interfaceAddressItem.zoneId)" />
            <el-button 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>
        </div>
        <!--
        <div v-if="false" class="flex">
          <el-form-item
            label-width="120px"
            label="屏保图片配置"
            prop="screenShowPhotos"
            class="form-item-style item-margin-bottom"
          >
            <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"
                src="../../assets/default-img.png"
                alt=""
                class="upload-img"
              >

              <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 class="sure">
      <el-button class="reset" type="primary" plain @click="getInfo(1)">重置</el-button>
      <el-button type="primary" :loading="submitLoading" @click="updateAdmin">更改配置</el-button>
    </div>
  </div>
</template>

<script>
import { checkRole } from '@/utils/checkRole'
import { getInfo } from '@/api/user'
import { getAreaList } from '@/api/area'
import { doEditSelf, pictureLocal } from '@/api/ordinary_user'
import { getFaceDeviceList } from '@/api/old_api_pengwenbing'

export default {
  name: '',
  components: {},
  data() {
    return {
      isOpenExam: this.$store.getters.isOpenExam,
      isOpenInoutWarning: this.$store.getters.isOpenInoutWarning,
      isOpenLadder: this.$store.getters.isOpenLadder,
      // 对话框参数
      user_form: {
        placeType: null, // 场所类型  0通用1预约2楼宇
        userWhitelistEffectiveTime: 3650, // 员工有效期
        userVisiterEffectiveTime: 0.3, // 访客有效期
        isPush: 0,
        cardPhysics: 2,
        clockWayPushUrl: null,
        clockWayType: '0',
        // 打卡方式-通用 [{"interfAddr":"三方接口地址","punchReportFields":"打卡上报字段, 多个逗号分割","zoneId":"所在区域ID"}]
        clockWayPushInterfaceAddresses: [{
          interfAddr: null,
          punchReportFields: null,
          zoneId: null
        }],
        openThirdLinkPlatform: false,
        whiteVisitorType: ['1', '2'],
        nucleicExpirationTime: null,
        realAuthenticationAgeStart: null,
        realAuthenticationAgeEnd: null,
        notAllowAgeEnd: 0,
        notAllowAgeStart: 0,
        screenShowPhotos: [],
        topTitle: null,
        latestResultPage: false, // 设备结果页类型 false:老版 true:新版
        interfaceAddresses: [{
          interfAddr: null,
          zoneId: null
        }],
        subLineSuccess: null,
        subLineFail: null,
        mainLineLeft: null,
        subLineLeft: null,
        mainLineRight: null,
        subLineRight: null,
        examDeviceList: [], // 考试设备列表
        qrcodeText: null, // 二维码码值
        showQrcode: false, // 二维码是否显示
        advertise: null, // 广告图片
        homeImgUrl: null, // 首页图片配置
        // 支付宝小程序单机二维码标题
        zfbMiniEthTitle: null,
        // 支付宝小程序联机二维码标题
        zfbMiniVguangTitle: null,
        adminInoutWarnConfigDTO: {
          hour: 1,
          pass: null,
          num: 1
        }
      },

      // 验证规则
      rules: {
        unitName: [
          {
            required: true,
            message: '请输入单位名称',
            trigger: 'blur'
          }
        ],
        unitAddress: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }
        ],
        topTitle: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ],
        latestResultPage: [
          {
            required: true,
            type: 'boolean',
            message: '请选择UI使用版本',
            trigger: 'blur'
          }
        ]
        // zfbMiniEthTitle: [
        //   {
        //     required: true,
        //     message: '请输入',
        //     trigger: 'blur'
        //   }
        // ],
        // zfbMiniVguangTitle: [
        //   {
        //     required: true,
        //     message: '请输入',
        //     trigger: 'blur'
        //   }
        // ]
      },
      user_basic: [
        {
          name: '平台账号名',
          value: 'username'
        },
        {
          name: '账号级别',
          value: null,
          type: 'type'
        },
        {
          name: '省',
          value: 'provinceName'
        },
        {
          name: '管理员姓名',
          value: 'name'
        },
        {
          name: '管理员手机号',
          value: 'phone'
        },
        {
          name: '市',
          value: 'cityName'
        },
        {
          name: '使用场景',
          value: null,
          type: 'scenario'
        },

        {
          name: '区',
          value: 'areaName'
        },
        {
          name: '街道',
          value: 'streetName'
        },
        {
          name: '详细地址',
          value: 'address'
        }
      ],
      doUpload: '',
      // 设备列表_搜索
      machine_list: [],
      // 弹框区域列表
      platformAreaList: [],
      // 选中的区域列表
      selectedPlatformAreaList: [],
      // 打卡方式-通用 的区域选中列表
      checkWayOfSelectedPlatformAreaList: [],
      // 提交状态
      submitLoading: false,
      // 通道
      passage_list: [
        { id: 1, name: '进' },
        { id: 2, name: '出' },
        { id: 0, name: '进出' }
      ]
    }
  },
  mounted() {
    this.getInfo()
  },
  created() {
    this.getFaceDeviceList()
  },
  methods: {
    // 查询权限
    checkRole,
    getInfo(type) {
      getInfo().then((res) => {
        delete res.data.password
        this.user_form = JSON.parse(JSON.stringify(res.data))
        if (type) {
          this.$message.success('重置成功！')
        } else {
          this.selectedPlatformAreaList = []
          this.getPlatformList(this.$store.getters.adminId)
          if (this.user_form.clockWayPushInterfaceAddresses && this.user_form.clockWayPushInterfaceAddresses.length > 0) {
            this.user_form.clockWayPushInterfaceAddresses = this.user_form.clockWayPushInterfaceAddresses.map(item => {
              return {
                interfAddr: item.interfAddr,
                punchReportFields: item.punchReportFields,
                zoneId: item.zoneId
              }
            })
          } else {
            this.user_form.clockWayPushInterfaceAddresses = []
            this.user_form.clockWayPushInterfaceAddresses.push({
              interfAddr: null,
              punchReportFields: null,
              zoneId: 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
            })
          }
        }
      })
    },
    // 编辑梯控楼层关系表
    handleEdit() {
      this.$router.push({ path: '/basic_setup/edit' })
    },
    // 获取区域列表
    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
      })
    },
    zoneRule(rule, value, callback) {
      if (value != null && value != undefined) {
        return callback()
      }
      return callback('绑定区域不能为空!')
    },
    // 修改
    updateAdmin() {
      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.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,
                  punchReportFields: item.punchReportFields,
                  zoneId: item.zoneId
                }
              })
            }
          }
          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
          }
          doEditSelf(this.user_form).then((res) => {
            this.submitLoading = false
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
            this.getInfo()
          }).catch(() => {
            this.submitLoading = false
          })
        }
      })
    },
    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)
      })
    },
    // 获取设备列表-搜索
    getFaceDeviceList() {
      getFaceDeviceList().then((res) => {
        this.machine_list = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: start;
  width: 1150px;
  & > div:nth-child(1) {
    margin-right: 60px;
  }
}
.display-config-layout {
  display: flex;
  flex-wrap: wrap;
  padding: 0 5px;
  width: 1150px;
  & > 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;
  }
}
.sure {
  margin-left: 520px;
  margin-top: 37px;
}
.title {
  margin-top: 30px;
  margin-bottom: 20px;
  .line {
    width: 3px;
    height: 13px;
    background: #409eff;
    border-radius: 13px;
    display: inline-block;
    margin-right: 8px;
  }
  span {
    font-weight: 500;
    font-size: 17px;
    color: #333333;
  }
}
.user_msg {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
  .line_msg {
    width: 33.33%;
    margin-bottom: 15px;
    .basic_msg {
      color: #b0b6c5;
      margin-right: 32px;
    }
    .value {
      color: #606266;
    }
  }
}
.reset {
  margin-right: 80px;
}
::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;
}
.item-margin-bottom {
  flex: 0.5;
  margin-bottom: 0px !important;
}
.custom-css {
  border: 1px solid #d6eaff;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.custom-css-item {
  border-bottom: 2px dashed #e7ebf4;
  padding: 20px 5px 45px 20px;
}
.custom-css-item:last-child {
  border-bottom: none;
}
.interfaceAddress-layout {
  width: 1160px;
  padding: 0 10px;
  border: 1px solid #D6EAFF;
  border-radius: 6px;
  padding-top: 18px;
  margin-bottom: 17px;
}
</style>
<style lang="scss">
//修改element原生样式
::v-deep.el-upload-list {
  max-width: 390px;
}
</style>
