<template>
  <div class="default_content">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="180px"
      label-position="left"
    >
      <TagCard title="设备基本信息">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="设备sn" prop="sn" required>
              <!-- :disabled="isDis" -->
              <el-input
                v-model="form.sn"
                placeholder="请输入设备sn"
                maxlength="100"
                show-word-limit
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="购买方公司名称" prop="purchaserId" required>
              <el-select
                v-model="form.purchaserId"
                placeholder="请选择购买方公司名称"
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in buyList"
                  :key="index"
                  :label="item.companyName"
                  :value="item.purchaserId"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="应用类型" prop="applicationTypeId" required>
              <el-select
                v-model="form.applicationTypeId"
                placeholder="请选择应用类型"
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="(item, index) in applicationList"
                  :key="index"
                  :label="item.applicationType"
                  :value="item.applicationTypeId"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              label="设备型号（硬件）"
              prop="deviceModelHardwareId"
              required
            >
              <el-select
                v-model="form.deviceModelHardwareId"
                placeholder="请选择设备型号（硬件）"
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="(item, index) in devicelList"
                  :key="index"
                  :label="item.deviceModel"
                  :value="item.deviceModelId"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              label="设备型号（环境）"
              prop="deviceModelEnvironmentId"
              required
            >
              <el-select
                v-model="form.deviceModelEnvironmentId"
                placeholder="请选择设备型号（环境）"
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="(item, index) in devicelList"
                  :key="index"
                  :label="item.deviceModel"
                  :value="item.deviceModelId"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="系统类型" prop="systemTypeCode" required>
              <el-select
                v-model="form.systemTypeCode"
                placeholder="请选择系统类型"
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="(item, index) in systemType"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </div>
        </div>
      </TagCard>
      <TagCard title="使用配置">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="使用时间期限" prop="expirationDate">
              <el-date-picker
                v-model="form.expirationDate"
                value-format="yyyy-MM-dd"
                type="date"
                style="width: 100%"
                placeholder="请选择使用时间期限"
              />
            </el-form-item>
          </div>
        </div>
      </TagCard>
      <TagCard title="采集配置">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="启用支付宝人脸能力" prop="useAlipayFace">
              <el-radio-group v-model="form.useAlipayFace">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="wrap-content__item" />
          <div class="wrap-content__item">
            <el-form-item label="启用刷身份证登记" prop="useIdcard">
              <el-radio-group v-model="form.useIdcard">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div
            v-if="form.useIdcard"
            class="wrap-content__item"
          >
            <el-form-item
              label="刷证是否人证比对"
              prop="usePersonCard"
            >
              <el-radio-group v-model="form.usePersonCard">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-else class="wrap-content__item" />
          <div class="wrap-content__item">
            <el-form-item label="启用无证登记" prop="noIdcardRegister">
              <el-radio-group v-model="form.noIdcardRegister">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div
            v-if="form.noIdcardRegister"
            class="wrap-content__item"
          >
            <el-form-item
              label="无证是否输入手机号"
              prop="noIdcardInputPhone"
            >
              <el-radio-group v-model="form.noIdcardInputPhone">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-else class="wrap-content__item" />
          <div class="wrap-content__item">
            <el-form-item label="启用微信扫码登记" prop="wxScanRegister">
              <el-radio-group v-model="form.wxScanRegister">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div
            v-if="form.wxScanRegister"
            class="wrap-content__item"
          >
            <el-form-item
              label="微信二维码地址"
              prop="wxQrcodeUrl"
            >
              <el-input
                v-model="form.wxQrcodeUrl"
                placeholder="请输入扫码的二维码地址"
                maxlength="300"
              />
            </el-form-item>
          </div>
          <div v-else class="wrap-content__item" />
          <div class="wrap-content__item">
            <el-form-item label="启用支付宝扫码登记" prop="zfbScanRegister">
              <el-radio-group v-model="form.zfbScanRegister">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div
            v-if="form.zfbScanRegister"
            class="wrap-content__item"
          >
            <el-form-item
              label="支付宝二维码地址"
              prop="zfbQrcodeUrl"
            >
              <el-input
                v-model="form.zfbQrcodeUrl"
                placeholder="请输入扫码的二维码地址"
                maxlength="300"
              />
            </el-form-item>
          </div>
        </div>
      </TagCard>
      <TagCard title="查询地址配置">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="获取受访人列表地址" prop="visiteeUrl">
              <el-input
                v-model="form.visiteeUrl"
                placeholder="请输入"
                maxlength="300"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="获取辖区配置地址" prop="areaUrl">
              <el-input
                v-model="form.areaUrl"
                placeholder="请输入"
                maxlength="300"
              />
            </el-form-item>
          </div>
        </div>
      </TagCard>
      <TagCard title="推送地址配置">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="启用进出记录推送" prop="transitPushSwitch">
              <el-radio-group
                v-model="form.transitPushSwitch"
              >
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-if="form.transitPushSwitch" class="wrap-content-detail" style="background: #dcdfe63d;">
            <div class="wrap-content-detail__item">
              <el-form-item label="推送接口地址" prop="transitPushUrl">
                <!--              <el-inputx
                  v-model="form.transitPushUrl"
                  placeholder="请输入"
                  maxlength="300"
                />-->
                <el-autocomplete
                  v-model="form.transitPushUrl"
                  popper-class="my-autocomplete"
                  :fetch-suggestions="(queryString, cb) => querySearch('transitPushUrlList', queryString, cb)"
                  placeholder="请输入内容"
                  style="width: 100%"
                >
                  <template slot-scope="{ item }">
                    <div class="name">{{ item.value }}</div>
                    <span class="addr">{{ item.desc }}</span>
                  </template>
                </el-autocomplete>
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item" />
            <div class="wrap-content-detail__item">
              <el-form-item label="推送接口数据是否加解密" prop="transitPushEncryptSwitch">
                <el-radio-group
                  v-model="form.transitPushEncryptSwitch"
                >
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div v-if="form.transitPushEncryptSwitch" class="wrap-content-detail">
              <div class="wrap-content-detail__item">
                <el-form-item label="appKey" prop="transitPushEncryptAppKey">
                  <el-input
                    v-model="form.transitPushEncryptAppKey"
                    placeholder="请输入appKey"
                  />
                </el-form-item>
              </div>
              <div class="wrap-content-detail__item">
                <el-form-item label="appSecret" prop="transitPushEncryptAppSecret">
                  <el-input
                    v-model="form.transitPushEncryptAppSecret"
                    placeholder="请输入appSecret"
                  />
                </el-form-item>
              </div>
              <div class="wrap-content-detail__item">
                <el-form-item label="privateKey" prop="transitPushEncryptPrivateKey">
                  <el-input
                    v-model="form.transitPushEncryptPrivateKey"
                    placeholder="请输入privateKey"
                  />
                </el-form-item>
              </div>
            </div>
          </div>
          <!--          <div class="wrap-content__item">
            <el-form-item label="访客记录推送地址" prop="transitPushUrl">
              <el-input
                v-model="form.transitPushUrl"
                placeholder="请输入"
                maxlength="300"
              />
            </el-form-item>
          </div>-->
        </div>
      </TagCard>
      <TagCard title="功能配置">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="是否打印访客单" prop="printVisitorList">
              <el-radio-group v-model="form.printVisitorList">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="是否启用签离" prop="signOut">
              <el-radio-group v-model="form.signOut">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="启用风险人员核查" prop="riskCheck">
              <el-radio-group v-model="form.riskCheck">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              label="首页隐藏“设置”、“通讯录”等按钮"
              prop="hiddenButton"
              class="overlength"
            >
              <el-radio-group v-model="form.hiddenButton">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="启用通用二维码" prop="generalQrcode">
              <el-radio-group v-model="form.generalQrcode">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div
            v-if="form.generalQrcode"
            class="wrap-content__item"
          >
            <el-form-item
              label="通用二维码标题"
              prop="generalQrcodeTitle"
            >
              <el-input
                v-model="form.generalQrcodeTitle"
                placeholder="请输入"
                maxlength="200"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="启用梯控二维码" prop="ethQrcode">
              <el-radio-group v-model="form.ethQrcode">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-if="form.ethQrcode" class="wrap-content-detail" style="background: #dcdfe63d;">
            <div class="wrap-content-detail__item">
              <el-form-item
                label="梯控二维码标题"
                prop="ethQrcodeTitle"
              >
                <el-input
                  v-model="form.ethQrcodeTitle"
                  placeholder="请输入"
                  maxlength="200"
                />
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item
                label="梯控二维码接口"
                prop="ethQrcodeUrl"
              >
                <el-input
                  v-model="form.ethQrcodeUrl"
                  placeholder="请输入"
                  maxlength="300"
                />
              </el-form-item>
            </div>
          </div>
          <div v-else class="wrap-content__item" />
          <div class="wrap-content__item">
            <el-form-item label="访客记录不脱敏" prop="notDesensitizedColumn">
              <el-checkbox-group v-model="form.notDesensitizedColumn">
                <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 class="wrap-content__item">
            <el-form-item label="登记页不脱敏" prop="registerNotDesensitizedColumn">
              <el-checkbox-group v-model="form.registerNotDesensitizedColumn">
                <el-checkbox :label="1">姓名</el-checkbox>
                <el-checkbox :label="2">身份证</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="刷脸失败跳转手输" prop="faceFailHandInput">
              <el-radio-group v-model="form.faceFailHandInput">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="拜访事由选项" prop="visitReason">
              <el-input
                v-model="form.visitReason"
                placeholder="请输入拜访事由选项，用“/”隔开"
                type="textarea"
                :rows="2"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="是否启用注意事项提示语" prop="reminderAuth">
              <el-radio-group v-model="form.reminderAuth">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-if="form.reminderAuth" class="wrap-content-detail" style="background: #dcdfe63d;">
            <div class="wrap-content-detail__item">
              <el-form-item label="提示标语图" prop="reminder">
                <el-upload
                  name="file"
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :http-request="
                    (event) => {
                      doUploadAvatar(event, 'reminder');
                    }
                  "
                  :before-upload="beforeAvatarUpload"
                  :auto-upload="true"
                  accept="image/png,image/gif,image/jpg,image/jpeg"
                >
                  <img
                    v-if="!form.reminder"
                    class="upload-img"
                    src="../../../assets/default-img.png"
                    alt=""
                  >
                  <div v-else class="upload-img">
                    <img :src="form.reminder">
                    <span
                      class="del-img"
                      @click.stop="handleRemove('reminder')"
                    >x</span>
                  </div>
                </el-upload>
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item
                label="提示标语播报文本"
                prop="reminderPlayText"
              >
                <el-input
                  v-model="form.reminderPlayText"
                  placeholder="请输入"
                />
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="是否启用确定倒计时" prop="confirmCountdownSwitch">
                <el-radio-group v-model="form.confirmCountdownSwitch">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div v-if="form.confirmCountdownSwitch" class="wrap-content-detail__item">
              <el-form-item label="倒计时时长(s)" prop="confirmCountdownTime">
                <el-input-number
                  v-model="form.confirmCountdownTime"
                  size="mini"
                  :min="1"
                  :max="60"
                />
              </el-form-item>
            </div>
          </div>
          <div v-else class="wrap-content__item" />
          <div class="wrap-content__item">
            <el-form-item label="是否启用副屏轮播图" prop="secondaryPageSwitch">
              <el-radio-group v-model="form.secondaryPageSwitch">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-if="form.secondaryPageSwitch" class="wrap-content__item">
            <el-form-item
              :label="`副屏轮播图${
                '(' + form.secondaryPageImages&&form.secondaryPageImages.length + '/' + 5 + ')'
              }`"
              prop="secondaryPageImages"
            >
              <div class="home-uploader">
                <div v-for="(item, index) in form.secondaryPageImages" class="upload-showImg">
                  <img :src="item">
                  <span
                    class="del-img"
                    @click.stop="handleRemovePic(index)"
                  >x</span>
                </div>
                <el-upload
                  v-if="form.secondaryPageImages&&form.secondaryPageImages.length <5"
                  action="#"
                  accept="image/*"
                  :http-request="
                    (event) => {
                      doUploadAvatarPic(event, 'secondaryPageImages');
                    }
                  "
                  :before-upload="beforeAvatarUpload"
                  :auto-upload="true"
                  list-type="picture-card"
                  :limit="5"
                  :multiple="true"
                  :show-file-list="false"
                >
                  <img
                    class="upload-img"
                    src="../../../assets/upload-bg.png"
                    alt=""
                  >
                </el-upload>
              </div>
            </el-form-item>
          </div>
          <div v-else class="wrap-content__item" />
          <div class="wrap-content__item">
            <el-form-item label="是否启用副屏处理中页面" prop="processingPageSwitch">
              <el-radio-group v-model="form.processingPageSwitch">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-if="form.processingPageSwitch" class="wrap-content__item">
            <el-form-item label="副屏处理中页面图" prop="processingPageImage">
              <el-upload
                name="file"
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :http-request="
                  (event) => {
                    doUploadAvatar(event, 'processingPageImage');
                  }
                "
                :before-upload="beforeAvatarUpload"
                :auto-upload="true"
                accept="image/png,image/gif,image/jpg,image/jpeg"
              >
                <img
                  v-if="!form.processingPageImage"
                  class="upload-img"
                  src="../../../assets/default-img.png"
                  alt=""
                >
                <div v-else class="upload-img">
                  <img :src="form.processingPageImage">
                  <span
                    class="del-img"
                    @click.stop="handleRemove('processingPageImage')"
                  >x</span>
                </div>
              </el-upload>
            </el-form-item>
          </div>
        </div>
      </TagCard>
      <TagCard title="超时时长配置（秒）">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="选择受访人超时时长" prop="chooseVisiteeTimeout">
              <el-input-number
                v-model="form.chooseVisiteeTimeout"
                size="mini"
                :min="1"
                :max="1000"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="刷身份证超时时长" prop="readIdcardTimeout">
              <el-input-number
                v-model="form.readIdcardTimeout"
                size="mini"
                :min="1"
                :max="1000"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="输身份证超时时长" prop="inputIdcardTimeout">
              <el-input-number
                v-model="form.inputIdcardTimeout"
                size="mini"
                :min="1"
                :max="1000"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="输手机号超时时长" prop="inputPhoneTimeout">
              <el-input-number
                v-model="form.inputPhoneTimeout"
                size="mini"
                :min="1"
                :max="1000"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="签离扫码超时时长" prop="singOutTimeout">
              <el-input-number
                v-model="form.singOutTimeout"
                size="mini"
                :min="1"
                :max="1000"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="结果页超时时长" prop="resultPageTimeout">
              <el-input-number
                v-model="form.resultPageTimeout"
                size="mini"
                :min="1"
                :max="1000"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="刷脸超时时间" prop="faceTimeout">
              <el-input-number
                v-model="form.faceTimeout"
                size="mini"
                :min="20"
                :max="1000"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="1v1比对超时时间" prop="oneToOneTimeout">
              <el-input-number
                v-model="form.oneToOneTimeout"
                size="mini"
                :min="20"
                :max="1000"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="联网查询超时时间" prop="connectSearchTimeout">
              <el-input-number
                v-model="form.connectSearchTimeout"
                size="mini"
                :min="1"
                :max="1000"
              />
            </el-form-item>
          </div>
        </div>
      </TagCard>
      <TagCard title="语音配置">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item
              label="支付宝刷脸人脸比对成功提示音"
              prop="successVoice"
              class="overlength"
            >
              <el-input
                v-model="form.successVoice"
                placeholder="请输入"
                maxlength="50"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              label="支付宝刷脸人脸比对失败提示音"
              prop="failVoice"
              class="overlength"
            >
              <el-input
                v-model="form.failVoice"
                placeholder="请输入"
                maxlength="50"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              label="访客信息登记成功提示音"
              prop="registerSuccessVoice"
              class="overlength"
            >
              <el-input
                v-model="form.registerSuccessVoice"
                placeholder="请输入"
                maxlength="50"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="刷身份证提示音" prop="readIdcardVoice">
              <el-input
                v-model="form.readIdcardVoice"
                placeholder="请输入"
                maxlength="50"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="输身份证号提示音" prop="inputIdcardVoice">
              <el-input
                v-model="form.inputIdcardVoice"
                placeholder="请输入"
                maxlength="50"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="输手机号提示音" prop="inputPhoneVoice">
              <el-input
                v-model="form.inputPhoneVoice"
                placeholder="请输入"
                maxlength="50"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="联网信息查询提示音" prop="connectSearchVoice">
              <el-input
                v-model="form.connectSearchVoice"
                placeholder="请输入"
                maxlength="50"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="签离扫码提示音" prop="singOutVoice">
              <el-input
                v-model="form.singOutVoice"
                placeholder="请输入"
                maxlength="50"
              />
            </el-form-item>
          </div>
        </div>
      </TagCard>
      <TagCard title="系统配置">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="设置管理员密码" prop="mpassword">
              <el-input
                v-model="form.mpassword"
                placeholder="请输入"
                maxlength="50"
              />
            </el-form-item>
          </div>
<!--          <div class="wrap-content__item">
            <el-form-item label="语音音量（1~100）" prop="voiceVolume">
              <el-input-number
                v-model="form.voiceVolume"
                size="mini"
                :min="1"
                :max="100"
              />
            </el-form-item>
          </div>-->
        </div>
      </TagCard>
    </el-form>

    <div class="card-footer">
      <el-button style="width: 120px" @click="back"> 取消 </el-button>
      <el-button type="primary" style="width: 120px" :loading="submitLoading" @click="submit">
        确定
      </el-button>
    </div>
  </div>
</template>

<script>
import { add } from '@/api/FKJ'
import { pictureLocal } from '@/api/ordinary_user'
import {
  applicationTypeList,
  deviceModelList,
  purchaserList
} from '@/api/configuration'
import TagCard from '@/components/TagCard'

export default {
  name: 'EditDevice',
  components: { TagCard },
  props: {
    obj: {
      type: Object,
      default: () => {}
    },
    templateData: {
      type: Object,
      default: () => {}
    },
    isDis: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      submitLoading: false,
      transitPushUrlList: [
        {
          value: 'https://tx.hz-hanghui.com:8088/yx-fyzd/visitorReport',
          desc: '塘栖平台'
        }
      ], // 推送接口地址输入建议
      form: {
        id: null,
        mode: null,
        sn: null,
        status: null,
        useAlipayFace: true,
        useIdcard: true,
        usePersonCard: true,
        // voiceVolume: 80,
        mpassword: '117521',
        purchaserId: null,
        applicationTypeId: null,
        deviceModelHardwareId: null,
        deviceModelEnvironmentId: null,
        systemTypeCode: null,
        expirationDate: null, // 使用时间期限 TODO ADD_FIELD

        noIdcardRegister: false,
        noIdcardInputPhone: true,
        wxScanRegister: false,
        zfbScanRegister: false,
        wxQrcodeUrl:
          'https://tx.hz-hanghui.com:8088/yx-fyzd/faceCheckVisitor?type=2',
        zfbQrcodeUrl:
          'https://tx.hz-hanghui.com:8088/yx-fyzd/faceCheckVisitor?type=2',
        visiteeUrl:
          'https://tx.hz-hanghui.com:8088/yx-fyzd/api/v1/fkj/visitee/list',
        areaUrl: 'https://tx.hz-hanghui.com:8088/yx-fyzd/api/v1/fkj/area/info',

        transitPushSwitch: true, // 启用进出记录推送 默认值：true
        transitPushUrl: 'https://tx.hz-hanghui.com:8088/yx-fyzd/visitorReport', // 推送接口地址
        transitPushEncryptSwitch: false, // 推送接口数据是否加解密 默认值：false TODO ADD_FIELD
        transitPushEncryptAppKey: '', // TODO ADD_FIELD
        transitPushEncryptAppSecret: '', // TODO ADD_FIELD
        transitPushEncryptPrivateKey: '', // TODO ADD_FIELD

        printVisitorList: false,
        signOut: true,
        riskCheck: false,
        hiddenButton: false,
        generalQrcode: true,
        generalQrcodeTitle: '通用二维码',
        ethQrcode: true,
        ethQrcodeTitle: '梯控二维码',
        ethQrcodeUrl:
          'https://tx.hz-hanghui.com:8088/yx-fyzd/api/v1/fkj/visitor/eth/qrCode',
        // gateQrcode: true,
        // gateQrcodeTitle: "闸机二维码",
        // gateGrcodeUrl:
        //   "https://tx.hz-hanghui.com:8088/yx-fyzd/api/v1/fkj/visitor/vguang/qrCode",
        visitReason: '', // 拜访事由
        chooseVisiteeTimeout: 90,
        readIdcardTimeout: 15,
        inputIdcardTimeout: 60,
        inputPhoneTimeout: 30,
        singOutTimeout: 15,
        resultPageTimeout: 5,
        successVoice: '比对成功',
        failVoice: '比对失败，请重试，或刷身份证',
        registerSuccessVoice: '正在打印访客单',
        readIdcardVoice: '请刷身份证',
        inputIdcardVoice: '请输入身份证号',
        inputPhoneVoice: '请输入手机号',
        connectSearchVoice: '正在联网查询信息，请耐心等待',
        singOutVoice: '请将二维码对准设备的扫码窗',
        notDesensitizedColumn: [],
        registerNotDesensitizedColumn: [],
        faceTimeout: 40,
        oneToOneTimeout: 40,
        connectSearchTimeout: 40,
        faceFailHandInput: false,
        reminderAuth: false, // 是否启用注意事项提示语
        reminder: '',
        reminderPlayText: '', // 提示标语播报文本
        confirmCountdownSwitch: true, // 是否启用确定倒计时
        confirmCountdownTime: 15,
        secondaryPageSwitch: true, // 是否启用副屏轮播图 默认：true
        secondaryPageImages: [], // 副屏轮播图（0/5）
        processingPageSwitch: true, // 是否启用副屏处理中页面 默认：true
        processingPageImage: ''// 副屏处理中页面图
      },
      rules: {
        purchaserId: [
          {
            required: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        applicationTypeId: [
          {
            required: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        deviceModelHardwareId: [
          {
            required: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        deviceModelEnvironmentId: [
          {
            required: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        systemTypeCode: [
          {
            required: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        sn: [
          {
            required: true,
            whitespace: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        mode: [
          {
            required: true,
            whitespace: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        visitReason: [
          {
            message: '请输入拜访事由选项',
            trigger: ['change', 'blur']
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              const regex = /^[^/]+(\/[^/]+)*$/
              // const regex = /\//
              if (value && value !== '' && !regex.test(value)) {
                return callback('必须"/"隔开')
              }
              return callback()
            },
            trigger: ['change', 'blur']
          }
        ]
      },
      applicationList: [],
      devicelList: [],
      buyList: [],
      systemType: [
        { id: 1, name: '蚂蚁OS' },
        { id: 2, name: '非蚂蚁OS' }
      ]
    }
  },
  watch: {
    templateData() {
      if (this.templateData != {}) {
        this.form = this.templateData
        if (this.obj && this.obj.id) {
          this.form.id = this.obj.id
        } else {
          this.form.id = null
        }
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.applicationTypeList()
      this.deviceModelList()
      this.purchaserList()
      this.$nextTick(() => {
        if (this.obj) {
          this.form = this.obj
        }
      })
    },
    back() {
      this.$emit('back')
    },
    querySearch(field, queryString, cb) {
      const restaurants = this[field]
      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleRemovePic(index) {
      this.form.secondaryPageImages.splice(index, 1)
    },
    doUploadAvatarPic(obj, type) {
      this.listLoading = true
      var avatar = new FormData()
      avatar.append('file', obj.file)
      pictureLocal(avatar).then((res) => {
        this.listLoading = false
        const arr = this.form[type] || []
        arr.push(res.data)
        this.$set(this.form, type, arr)
      })
    },
    handleRemove(type) {
      if (type) {
        this.form[type] = null
      }
    },
    // 图片上传前
    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, 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.form, type, res.data)
      })
    },
    submit(e) {
      e.preventDefault()
      this.$refs.form.validate(async(valid) => {
        if (!valid) {
          return false
        }
        if (this.submitLoading) {
          return
        }
        this.submitLoading = true
        try {
          // 以下字段根据切换条件重置为默认值
          const fieldArr = [
            'useIdcard', 'noIdcardRegister', 'wxScanRegister', 'zfbScanRegister', 'transitPushSwitch', 'transitPushEncryptSwitch',
            'generalQrcode', 'ethQrcode', 'reminderAuth', 'confirmCountdownSwitch', 'secondaryPageSwitch', 'processingPageSwitch'
          ]
          fieldArr.forEach(field => {
            const fieldValue = this.form[field]
            switch (field) {
              // 启用身份证功能
              case 'useIdcard':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    usePersonCard: true // 	刷证是否人证比对 默认值：true
                  }
                }
                break
              // 启用无证登记
              case 'noIdcardRegister':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    noIdcardInputPhone: true // 	无证是否输入手机号 默认值：true
                  }
                }
                break
              // 启用微信扫码登记
              case 'wxScanRegister':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    wxQrcodeUrl: '' // 微信二维码地址
                  }
                }
                break
              // 启用支付宝扫码登记
              case 'zfbScanRegister':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    zfbQrcodeUrl: '' // 支付宝二维码地址
                  }
                }
                break
              //  启用进出记录推送
              case 'transitPushSwitch':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    transitPushUrl: 'https://tx.hz-hanghui.com:8088/yx-fyzd/visitorReport', // 推送接口地址
                    transitPushEncryptSwitch: false, // 推送接口数据是否加解密 默认值：false TODO ADD_FIELD
                    transitPushEncryptAppKey: '', // TODO ADD_FIELD
                    transitPushEncryptAppSecret: '', // TODO ADD_FIELD
                    transitPushEncryptPrivateKey: '' // TODO ADD_FIELD
                  }
                }
                break
              //  推送接口数据是否加解密
              case 'transitPushEncryptSwitch':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    transitPushEncryptAppKey: '', // TODO ADD_FIELD
                    transitPushEncryptAppSecret: '', // TODO ADD_FIELD
                    transitPushEncryptPrivateKey: '' // TODO ADD_FIELD
                  }
                }
                break
              // 启用通用二维码
              case 'generalQrcode':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    generalQrcodeTitle: '' // 通用二维码标题
                  }
                }
                break
              // 启用梯控二维码
              case 'ethQrcode':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    ethQrcodeTitle: '梯控二维码', // 梯控二维码标题
                    ethQrcodeUrl: 'https://tx.hz-hanghui.com:8088/yx-fyzd/api/v1/fkj/visitor/eth/qrCode' // 梯控二维码接口
                  }
                }
                break
              // 是否启用注意事项提示语
              case 'reminderAuth':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    reminder: '', // 提示标语图
                    reminderPlayText: '', // 提示标语播报文本
                    confirmCountdownSwitch: true, // 是否启用确定倒计时
                    confirmCountdownTime: 15
                  }
                }
                break
              // 是否启用确定倒计时
              case 'confirmCountdownSwitch':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    confirmCountdownTime: 15
                  }
                }
                break
              // 是否启用副屏轮播图
              case 'secondaryPageSwitch':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    secondaryPageImages: []// 副屏轮播图（0/5）
                  }
                }
                break
              // 是否启用副屏处理中页面
              case 'processingPageSwitch':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    processingPageImage: ''// 副屏处理中页面图
                  }
                }
                break
            }
          })
          await add(this.form)
          this.$message({
            message: `${this.form.id ? '修改' : '添加'}成功!`,
            type: 'success'
          })
          this.$emit('back')
        } catch (e) {
          console.info('add', e)
        } finally {
          this.submitLoading = false
        }
      })
    },
    // 获取应用类型列表
    applicationTypeList() {
      applicationTypeList().then((res) => {
        this.applicationList = res.data
      })
    },
    // 设备型号列表
    deviceModelList() {
      deviceModelList().then((res) => {
        this.devicelList = res.data
      })
    },
    // 购买方列表
    purchaserList() {
      purchaserList().then((res) => {
        this.buyList = res.data
      })
    }
  }
}
</script>

<style lang="scss">
  .home-uploader{
    display: flex;
    flex-wrap: wrap;
    .upload-showImg {
      width: 90px !important;
      height: 90px !important;
      line-height: 90px !important;
    }
    .el-upload {
      width: 90px !important;
      height: 90px !important;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px;
    }

     .el-upload-list__item , .el-upload--picture-card {
      width: 90px !important;
      height: 90px !important;
      line-height: 90px !important;
    }
    .upload-img {
      width: 53px !important;
      height: 43px !important;
    }

    .upload-showImg {
      position: relative;
      border: 1px solid #c0ccda;
      border-radius: 6px;
      cursor: pointer;
      width: 70px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 10px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 6px;
        overflow: hidden;
        //object-fit: contain;
        // border-radius: 12px;
      }

      .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;
        text-align: center;
      }
    }
  }
</style>
<style lang="scss" scoped>
.card-footer {
  margin-top: 20px;
  display: flex;
  width: 100%;
  justify-content: center;
}
.wrap-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  &__item {
    width: calc(50% - 10px);
    padding: 10px 10px;
    .el-form-item {
      margin-bottom: 0px !important;
    }
  }
}
.wrap-content-detail {
  width: calc(100%);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  border: 1px solid #ebeef5;
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 10px;
  &__title {
    position: absolute;
    background: white;
    height: 40px;
    line-height: 40px;
    top: -20px;
    z-index: 999;
    padding: 0 10px;
  }
  &__item {
    width: calc(50% - 10px);
    .el-form-item {
      padding: 10px 0px;
      margin-bottom: 0px !important;
    }
  }
}

.wrap-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 1120px;
  form {
    width: 100%;
  }

  .item-layout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    width: 100%;
    margin-top: 24px;
    &:before {
      position: absolute;
      top: 1px;
      left: -10px;
      width: 3px;
      height: 16px;
      content: "";
      background-color: #409eff;
      border-radius: 3px;
    }
    .prompt {
      font-size: 16px;
      font-weight: 600;
      color: #333333;
    }
    .display-config-layout {
      display: flex;
      flex-wrap: wrap;
      padding-top: 12px;
      width: 100%;
      & > div {
        width: calc(50% - 60px);
        flex: none;
        margin-left: 0;
        margin-right: 0;
      }
      & > div:nth-child(odd) {
        margin-right: 120px;
      }
      .overlength ::v-deep .el-form-item__label {
        line-height: 1.4;
      }

      ::v-deep .el-radio__input {
        vertical-align: top;
      }
      ::v-deep .el-select {
        width: 100%;
      }
      ::v-deep .el-radio-group {
        & > label.el-radio {
          margin-right: 60px;
        }
      }
    }
  }

  .foot-layout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 34px;
    padding-right: 180px;
    margin-bottom: 20px;
  }
}

.avatar-uploader .upload-default {
  border: 1px dashed #d9d9d9;
  border-radius: 0;
  cursor: pointer;
  width: 70px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.upload-default .avatar-uploader-icon {
  color: #8c939d;
  width: 22px;
  height: 18px;
  font-size: 20px;
  margin-top: 24px;
}
.upload-default .el-upload__text {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #ced3e3;
}
.upload-img {
  width: 150px;
  height: 60px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    // border-radius: 12px;
  }
  .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;
  }
}
</style>
