<template>
  <div>
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-position="left"
      label-width="200px"
      style="margin-top: 10px"
    >
      <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">
              <el-select
                v-model="form.purchaserId"
                placeholder="请选择购买方公司名称"
                style="width: 100%"
                filterable
              >
                <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">
              <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"
            >
              <el-select
                v-model="form.deviceModelHardwareId"
                placeholder="请选择设备型号（硬件）"
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="(item, index) in deviceList"
                  :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"
            >
              <el-select
                v-model="form.deviceModelEnvironmentId"
                placeholder="请选择设备型号（环境）"
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="(item, index) in deviceList"
                  :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">
              <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="tenantId">
              <el-select
                v-model="form.tenantId"
                placeholder="请选择商户平台"
                style="width: 100%"
                filterable
                clearable
                @change="onSelectChange('tenantId', $event)"
              >
                <el-option
                  v-for="(item, index) in merchantLists"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </div>
          <div
            v-if="form.tenantId"
            class="wrap-content-detail"
            style="background: #dcdfe63d;"
          >
            <!--            <div class="wrap-content-detail__title">商户详情</div>-->
            <div class="wrap-content__item">
              <el-form-item label="设备appid" prop="deviceAppID">
                <el-input
                  v-model="form.tenantObj.deviceAppID"
                  :disabled="true"
                />
              </el-form-item>
            </div>
            <div class="wrap-content__item">
              <el-form-item label="商户appid" prop="merchantAppID">
                <el-input
                  v-model="form.tenantObj.merchantAppID"
                  :disabled="true"
                />
              </el-form-item>
            </div>
          </div>
          <div v-else class="wrap-content__item" />
          <div class="wrap-content__item">
            <el-form-item label="ISVPID" prop="isvPid">
              <!-- :disabled="isDis" -->
              <el-input
                v-model="form.isvPid"
                placeholder="请输入ISVPID"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              label="用户库"
              prop="userLibId"
            >
              <el-select
                v-model="form.userLibId"
                placeholder="请选择用户库"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="(item, index) in userLibList"
                  :key="index"
                  :label="item.userLibName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="摄像头类型" prop="cameraType">
              <el-radio-group v-model="form.cameraType">
                <el-radio label="IR">双目</el-radio>
                <el-radio label="3D">3d结构光</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="品牌" prop="cameraBrand">
              <el-radio-group v-model="form.cameraBrand">
                <el-radio label="Normal">通用</el-radio>
                <el-radio label="Mario">马里奥</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="预览角度(0~360)" prop="displayAngle">
              <el-input-number
                v-model="form.zoloConfig.displayAngle"
                size="mini"
                :min="0"
                :max="360"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="送算法的图像角度(0~360)" prop="algorithmAngle">
              <el-input-number
                v-model="form.zoloConfig.algorithmAngle"
                size="mini"
                :min="0"
                :max="360"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="用于ir摄像头算法角度(0~360)" prop="supAlgorithmAngle">
              <el-input-number
                v-model="form.zoloConfig.supAlgorithmAngle"
                size="mini"
                :min="0"
                :max="360"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="预览图像是否需要镜像" prop="isDisplayMirror">
              <el-radio-group v-model="form.zoloConfig.isDisplayMirror">
                <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="isMirror">
              <el-radio-group v-model="form.zoloConfig.isMirror">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </TagCard>
      <TagCard title="采集配置">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="是否开启进场识别" prop="entryIdentifySwitch">
              <el-radio-group
                v-model="form.entryIdentifySwitch"
                @input="onSelectChange('entryIdentifySwitch', $event)"
              >
                <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="clickScanFaceButtonSwitch">
              <el-radio-group
                v-model="form.clickScanFaceButtonSwitch"
                @input="onSelectChange('clickScanFaceButtonSwitch', $event)"
              >
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-if="form.clickScanFaceButtonSwitch" class="wrap-content-detail__item">
            <el-form-item
              label="点击刷脸按钮文本"
              prop="clickScanFaceButtonText"
            >
              <el-input
                v-model="form.clickScanFaceButtonText"
                placeholder="请输入点击刷脸按钮文本"
              />
            </el-form-item>
          </div>
          <div v-else class="wrap-content__item" />
          <div class="wrap-content__item">
            <el-form-item label="启用身份证功能" prop="useIdcard">
              <el-radio-group
                v-model="form.useIdcard"
                @input="onSelectChange('useIdcard', $event)"
              >
                <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-detail" style="background: #dcdfe63d;">
            <div class="wrap-content-detail__item">
              <el-form-item
                label="身份证阅读器品牌"
                prop="idCardReaderBrand"
              >
                <el-select
                  v-model="form.idCardReaderBrand"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in brandList"
                    :key="index.code"
                    :label="item.desc"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="是否解析身份证照片" prop="analysisPhoto">
                <el-radio-group v-model="form.analysisPhoto">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="是否解析身份证指纹" prop="analysisFingerprint">
                <el-radio-group v-model="form.analysisFingerprint">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="wrap-content-detail__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 class="wrap-content-detail__item">
              <el-form-item label="同证间隔时间(s)" prop="idCardInterval">
                <el-input-number
                  v-model="form.idCardInterval"
                  size="mini"
                  :max="20"
                  :min="0"
                />
              </el-form-item>
            </div>
          </div>
          <div v-else class="wrap-content__item" />

          <div class="wrap-content__item">
            <el-form-item label="启用二维码功能" prop="useQrcode">
              <el-radio-group
                v-model="form.useQrcode"
                @input="onSelectChange('useQrcode', $event)"
              >
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-if="form.useQrcode" class="wrap-content-detail" style="background: #dcdfe63d;">
            <div class="wrap-content-detail__item">
              <el-form-item
                label="二维码读头品牌"
                prop="qrCodeReaderBrand"
              >
                <el-select
                  v-model="form.qrCodeReaderBrand"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in qrBrandList"
                    :key="index.code"
                    :label="item.desc"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item" />
            <div class="wrap-content-detail__item">
              <el-form-item label="二维码读头通信方式" prop="qrCodeReaderCommunicationMode">
                <el-radio-group
                  v-model="form.qrCodeReaderCommunicationMode"
                  @input="onSelectChange('qrCodeReaderCommunicationMode', $event)"
                >
                  <el-radio :label="1">虚拟串口</el-radio>
                  <el-radio :label="2">串口</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div v-if="form.qrCodeReaderCommunicationMode == '2'" class="wrap-content-detail__item">
              <el-form-item label="二维码读头串口地址" prop="qrCodeReaderSerialPort">
                <el-input
                  v-model="form.qrCodeReaderSerialPort"
                  placeholder="请输入二维码读头串口地址"
                  maxlength="300"
                  show-word-limit
                />
              </el-form-item>
            </div>
            <div v-else class="wrap-content-detail__item" />
            <div class="wrap-content-detail__item">
              <el-form-item label="同码间隔时间(s)" prop="qrCodeInterval">
                <el-input-number
                  v-model="form.qrCodeInterval"
                  size="mini"
                  :max="20"
                  :min="0"
                />
              </el-form-item>
            </div>
          </div>
          <div v-else class="wrap-content__item" />

          <div class="wrap-content__item">
            <el-form-item label="启用IC卡ISO14443A功能" prop="ic14443IcCardFunction">
              <el-radio-group
                v-model="form.ic14443IcCardFunction"
                @input="onSelectChange('ic14443IcCardFunction', $event)"
              >
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-if="form.ic14443IcCardFunction" class="wrap-content-detail" style="background: #dcdfe63d;">
            <div class="wrap-content-detail__item">
              <el-form-item
                label="阅读器品牌"
                prop="ic14443ReaderBrand"
              >
                <el-select
                  v-model="form.ic14443ReaderBrand"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in readerBrandList"
                    :key="index.code"
                    :label="item.desc"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="读取扇区(0-99)" prop="ic14443ReaderSectorNumbers">
                <el-input-number
                  v-model="form.ic14443ReaderSectorNumbers"
                  size="mini"
                  :max="99"
                  :min="0"
                />
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="读取块" prop="ic14443ReaderBlock">
                <template #label>
                  读取块
                  <el-tooltip class="item" effect="dark" content="数字用英文逗号隔开，如： 0,1,2,3" placement="top">
                    <svg-icon icon-class="question" />
                  </el-tooltip>
                </template>
                <el-input
                  v-model="form.ic14443ReaderBlock"
                  placeholder="请输入读取块"
                  maxlength="100"
                  show-word-limit
                />
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="读取密钥" prop="ic14443ReaderKey">
                <el-input
                  v-model="form.ic14443ReaderKey"
                  placeholder="请输入读取密钥"
                  maxlength="100"
                  show-word-limit
                />
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="起始偏移量(0-100)" prop="ic14443StartOffset">
                <el-input-number
                  v-model="form.ic14443StartOffset"
                  size="mini"
                  :max="100"
                  :min="0"
                />
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="末尾偏移量(0-100)" prop="ic14443EndOffset">
                <el-input-number
                  v-model="form.ic14443EndOffset"
                  size="mini"
                  :max="100"
                  :min="0"
                />
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="是否人证比对" prop="ic14443PersonCardComparison">
                <el-radio-group v-model="form.ic14443PersonCardComparison">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="同卡间隔时间(s)" prop="ic14443SameCardIntervalTime">
                <el-input-number
                  v-model="form.ic14443SameCardIntervalTime"
                  size="mini"
                  :max="20"
                  :min="0"
                />
              </el-form-item>
            </div>
          </div>
          <div v-else class="wrap-content__item" />

          <div class="wrap-content__item">
            <el-form-item label="启用IC卡ISO15693功能" prop="ic15693IcCardFunction">
              <el-radio-group
                v-model="form.ic15693IcCardFunction"
                @input="onSelectChange('ic15693IcCardFunction', $event)"
              >
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-if="form.ic15693IcCardFunction" class="wrap-content-detail" style="background: #dcdfe63d;">
            <div class="wrap-content-detail__item">
              <el-form-item
                label="阅读器品牌"
                prop="ic15693ReaderBrand"
              >
                <el-select
                  v-model="form.ic15693ReaderBrand"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in readerBrandList"
                    :key="index.code"
                    :label="item.desc"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="读取块" prop="ic15693ReaderBlock">
                <template #label>
                  读取块
                  <el-tooltip class="item" effect="dark" content="数字用英文逗号隔开，如： 0,1,2,3" placement="top">
                    <svg-icon icon-class="question" />
                  </el-tooltip>
                </template>
                <el-input
                  v-model="form.ic15693ReaderBlock"
                  placeholder="请输入读取块"
                  maxlength="100"
                  show-word-limit
                />
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="起始偏移量(0-100)" prop="ic15693StartOffset">
                <el-input-number
                  v-model="form.ic15693StartOffset"
                  size="mini"
                  :max="100"
                  :min="0"
                />
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="末尾偏移量(0-100)" prop="ic15693EndOffset">
                <el-input-number
                  v-model="form.ic15693EndOffset"
                  size="mini"
                  :max="100"
                  :min="0"
                />
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="是否人证比对" prop="ic15693PersonCardComparison">
                <el-radio-group v-model="form.ic15693PersonCardComparison">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="同卡间隔时间(s)" prop="ic15693SameCardIntervalTime">
                <el-input-number
                  v-model="form.ic15693SameCardIntervalTime"
                  size="mini"
                  :max="20"
                  :min="0"
                />
              </el-form-item>
            </div>
          </div>
          <div v-else class="wrap-content__item" />

          <div class="wrap-content__item">
            <el-form-item label="是否启用手动输入" prop="manualIn">
              <el-radio-group v-model="form.manualIn">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-if="form.manualIn" class="wrap-content__item">
            <el-form-item label="填写内容" prop="manualInParams">
              <el-checkbox-group v-model="form.manualInParams">
                <el-checkbox v-for="item in manualInParamsList" :key="item.code" :label="item.code" :disabled="['username', 'idcard'].includes(item.code)">{{ item.desc }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
        </div>
      </TagCard>
      <TagCard title="三方接口接入配置">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="启用核验接口" prop="useLinkage">
              <el-radio-group
                v-model="form.useLinkage"
                @input="onSelectChange('useLinkage', $event)"
              >
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-if="form.useLinkage" class="wrap-content-detail" style="background: #dcdfe63d;">
            <div class="wrap-content-detail__item">
              <el-form-item label="核验接口地址" prop="linkageAds">
                <el-input
                  v-model="form.linkageAds"
                  placeholder="请输入核验接口地址"
                  maxlength="300"
                />
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item" />
            <div class="wrap-content-detail__item">
              <el-form-item label="核验接口数据是否加解密" prop="checkVerifyEncryptSwitch">
                <el-radio-group
                  v-model="form.checkVerifyEncryptSwitch"
                  @input="onSelectChange('checkVerifyEncryptSwitch', $event)"
                >
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div v-if="form.checkVerifyEncryptSwitch" class="wrap-content-detail">
              <div class="wrap-content-detail__item">
                <el-form-item label="appKey" prop="checkVerifyEncryptAppKey">
                  <el-input
                    v-model="form.checkVerifyEncryptAppKey"
                    placeholder="请输入appKey"
                  />
                </el-form-item>
              </div>
              <div class="wrap-content-detail__item">
                <el-form-item label="appSecret" prop="checkVerifyEncryptAppSecret">
                  <el-input
                    v-model="form.checkVerifyEncryptAppSecret"
                    placeholder="请输入appSecret"
                  />
                </el-form-item>
              </div>
              <div class="wrap-content-detail__item">
                <el-form-item label="privateKey" prop="checkVerifyEncryptPrivateKey">
                  <el-input
                    v-model="form.checkVerifyEncryptPrivateKey"
                    placeholder="请输入privateKey"
                  />
                </el-form-item>
              </div>
            </div>
            <div v-else class="wrap-content-detail__item" />
            <div class="wrap-content-detail__item">
              <el-form-item label="核验接口失败重试次数" prop="checkVerifyRetryTimes">
                <el-input-number
                  v-model="form.checkVerifyRetryTimes"
                  size="mini"
                  :min="0"
                />
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="核验接口超时时间(s)" prop="linkTimeout">
                <el-input-number
                  v-model="form.linkTimeout"
                  size="mini"
                  :min="2"
                  :max="10"
                />
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="核验接口超时提示语" prop="checkVerifyTimeoutTips">
                <el-input
                  v-model="form.checkVerifyTimeoutTips"
                  placeholder="请输入核验接口超时提示语"
                  maxlength="100"
                />
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="核验接口失败提示语" prop="checkVerifyFailedTips">
                <el-input
                  v-model="form.checkVerifyFailedTips"
                  placeholder="请输入核验接口失败提示语"
                  maxlength="100"
                />
              </el-form-item>
            </div>
          </div>
        </div>
      </TagCard>
      <TagCard title="结果页配置">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="模板类型" prop="resultPageTemplate">
              <el-radio-group v-model="form.resultPageTemplate">
                <el-radio :label="1">通用</el-radio>
                <el-radio :label="2">悬浮</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              class="overlength"
              label="默认成功结果页时长(s)"
              prop="successPageTime"
            >
              <el-input-number
                v-model="form.successPageTime"
                size="mini"
                :min="1"
                :max="100"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="成功默认标题" prop="sucText">
              <el-input
                v-model="form.sucText"
                placeholder="请输入成功默认标题"
                maxlength="50"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="成功默认语音" prop="sucVoice">
              <el-input
                v-model="form.sucVoice"
                placeholder="请输入成功默认语音"
                maxlength="50"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              class="overlength"
              label="默认失败结果页时长(s)"
              prop="failPageTime"
            >
              <el-input-number
                v-model="form.failPageTime"
                size="mini"
                :min="1"
                :max="100"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="刷脸失败默认标题" prop="failText">
              <el-input
                v-model="form.failText"
                placeholder="请输入刷脸失败默认标题"
                maxlength="50"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="刷脸失败默认语音" prop="failVoice">
              <el-input
                v-model="form.failVoice"
                placeholder="请输入刷脸失败默认语音"
                maxlength="50"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              class="overlength"
              label="默认单选页时长(s)"
              prop="singlePageTime"
            >
              <el-input-number
                v-model="form.singlePageTime"
                size="mini"
                :min="1"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              class="overlength"
              label="默认多选页时长(s)"
              prop="multiPageTime"
            >
              <el-input-number
                v-model="form.multiPageTime"
                size="mini"
                :min="1"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              class="overlength"
              label="默认等待页时长(s)"
              prop="waitPageTime"
            >
              <el-input-number
                v-model="form.waitPageTime"
                size="mini"
                :min="1"
              />
            </el-form-item>
          </div>
        </div>
      </TagCard>
      <TagCard title="硬件模组配置">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="开门信号" prop="useSerialPort">
              <el-radio-group
                v-model="form.useSerialPort"
                @input="onSelectChange('useSerialPort', $event)"
              >
                <el-radio
                  label="default"
                  style="margin-right: 40px"
                >继电器</el-radio>
                <el-radio label="RS232">RS232</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div
            v-if="form.useSerialPort === 'RS232'"
            class="wrap-content__item"
          >
            <el-form-item label="RS232开门串口地址" prop="doorSerialPort">
              <el-input
                v-model="form.doorSerialPort"
                placeholder="请输入RS232开门信号串口地址"
                maxlength="300"
                show-word-limit
              />
            </el-form-item>
          </div>
          <div v-else class="wrap-content__item" />
          <div class="wrap-content__item">
            <el-form-item label="继电器开门模式" prop="relayOpenModel">
              <el-radio-group
                v-model="form.relayOpenModel"
                @input="onSelectChange('relayOpenModel', $event)"
              >
                <el-radio
                  :label="1"
                  style="margin-right: 40px"
                >开-闭信号</el-radio>
                <el-radio :label="2">开-门磁-闭信号</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-if="form.relayOpenModel == 1||form.relayOpenModel == 2" class="wrap-content-detail" style="background: #dcdfe63d;">
            <template v-if="form.relayOpenModel == 1">
              <div class="wrap-content-detail__item">
                <el-form-item
                  label="开闭时间间隔（ms）"
                  prop="openCloseInterval"
                >
                  <el-input-number v-model="form.openCloseInterval" size="mini" />
                </el-form-item>
              </div>
              <div class="wrap-content-detail__item">
                <el-form-item
                  label="信号间间隔（ms）"
                  prop="signalInterval"
                >
                  <el-input-number v-model="form.signalInterval" size="mini" />
                </el-form-item>
              </div>
            </template>
            <template v-if="form.relayOpenModel == 2">
              <div class="wrap-content-detail__item">
                <el-form-item label="门磁串口地址" prop="doorSerialPortAddress">
                  <el-input
                    v-model="form.doorSerialPortAddress"
                    placeholder="请输入门磁串口地址"
                    maxlength="300"
                    show-word-limit
                  />
                </el-form-item>
              </div>
              <div class="wrap-content-detail__item">
                <el-form-item
                  label="门磁超时时间（s）"
                  prop="gateTimeOut"
                >
                  <el-input-number v-model="form.gateTimeOut" size="mini" />
                </el-form-item>
              </div>
            </template>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="补光灯" prop="lightMode">
              <el-select v-model="form.lightMode" style="width: 100%" placeholder="请选择补光灯模式">
                <el-option
                  v-for="(item, index) in lightModeLists"
                  :key="index"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </div>
        </div>
      </TagCard>
      <TagCard title="推送配置">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="设备状态推送地址" prop="heartTrackingUrl">
              <!--              <el-input
                v-model="form.heartTrackingUrl"
                placeholder="请输入"
                maxlength="300"
              />-->
              <el-autocomplete
                v-model="form.heartTrackingUrl"
                popper-class="my-autocomplete"
                :fetch-suggestions="(queryString, cb) => querySearch('heartTrackingUrlList', 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__item">
            <el-form-item label="在线日志推送地址" prop="logPushUrl">
              <!--              <el-input
                v-model="form.logPushUrl"
                placeholder="请输入"
                maxlength="300"
              />-->
              <el-autocomplete
                v-model="form.logPushUrl"
                popper-class="my-autocomplete"
                :fetch-suggestions="(queryString, cb) => querySearch('logPushUrlList', 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__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>
      </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="volume">
              <el-input-number
                v-model="form.volume"
                size="mini"
                :min="1"
                :max="100"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="隐藏底部导航栏" prop="hideNavigationBar">
              <el-radio-group v-model="form.hideNavigationBar">
                <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="forbidPullDown">
              <el-radio-group v-model="form.forbidPullDown">
                <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="autoLaunch">
              <el-radio-group v-model="form.autoLaunch">
                <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="homePageUrl">
              <el-upload
                name="file"
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :http-request="
                  (event) => {
                    doUploadAvatar(event, 'homePageUrl');
                  }
                "
                :before-upload="beforeAvatarUpload"
                :auto-upload="true"
                accept="image/png,image/gif,image/jpg,image/jpeg"
              >
                <img
                  v-if="!form.homePageUrl"
                  class="upload-img"
                  src="../../../assets/default-img-home.jpg"
                  alt=""
                >
                <div v-else class="upload-img">
                  <img :src="form.homePageUrl">
                  <span
                    class="del-img"
                    @click.stop="handleRemove('homePageUrl')"
                  >x</span>
                </div>
              </el-upload>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="过渡图片配置" prop="transitionPageUrl">
              <el-upload
                name="file"
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :http-request="
                  (event) => {
                    doUploadAvatar(event, 'transitionPageUrl');
                  }
                "
                :before-upload="beforeAvatarUpload"
                :auto-upload="true"
                accept="image/png,image/gif,image/jpg,image/jpeg"
              >
                <!-- <div v-if="!form.transitionPageUrl" class="upload-default">
                <i class="avatar-uploader-icon el-icon-picture-outline" />
                <div class="el-upload__text">上传图片</div>
              </div> -->
                <img
                  v-if="!form.transitionPageUrl"
                  class="upload-img"
                  src="../../../assets/default-img-home1.png"
                  alt=""
                >
                <!-- <i v-if="!form.transitionPageUrl" class="el-icon-plus avatar-uploader-icon" /> -->
                <div v-else class="upload-img">
                  <img :src="form.transitionPageUrl">
                  <span
                    class="del-img"
                    @click.stop="handleRemove('transitionPageUrl')"
                  >x</span>
                </div>
              </el-upload>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="刷脸失败提示页配置" prop="scanFaceFailedTipUrl">
              <el-upload
                name="file"
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :http-request="
                  (event) => {
                    doUploadAvatar(event, 'scanFaceFailedTipUrl');
                  }
                "
                :before-upload="beforeAvatarUpload"
                :auto-upload="true"
                accept="image/png,image/gif,image/jpg,image/jpeg"
              >
                <img
                  v-if="!form.scanFaceFailedTipUrl"
                  class="upload-img"
                  src="../../../assets/scanFaceFailedTipUrl.png"
                  alt=""
                >
                <div v-else class="upload-img">
                  <img :src="form.scanFaceFailedTipUrl">
                  <span
                    class="del-img"
                    @click.stop="handleRemove('scanFaceFailedTipUrl')"
                  >x</span>
                </div>
              </el-upload>
            </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 TagCard from '@/components/TagCard'
import { add, getIdCardReaderBrand, getManualInParamsEnum, getQrCodeReaderBrandEnum } from '@/api/HHCultureDevice.js'
import { getAllList } from '@/api/merchant'
import { getUserLibList } from '@/api/userlib'
import { applicationTypeList, deviceModelList, purchaserList } from '@/api/configuration'
import { pictureLocal } from '@/api/ordinary_user'
import { getReaderBrand } from '@/api/device'

export default {
  components: { TagCard },
  props: {
    obj: {
      type: Object,
      default: () => {}
    },
    templateData: {
      type: Object,
      default: () => {}
    },
    isDis: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        sn: null, // 设备sn
        purchaserId: null, // 购买方公司名称
        applicationTypeId: null, // 应用类型
        deviceModelHardwareId: null, // 设备型号（硬件）
        deviceModelEnvironmentId: null, // 设备型号（环境）
        systemTypeCode: null, // 系统类型
        expirationDate: null, // 使用时间期限 TODO ADD_FIELD
        tenantId: null, // 商户id
        tenantObj: { // TODO ADD_FIELD
          deviceAppID: null, // 设备appId
          merchantAppID: null // 商户appid
        },
        isvPid: '', // isvPid
        userLibId: null, // 用户库id
        cameraType: 'IR', // 摄像头类型
        cameraBrand: 'Normal', // 品牌
        // zoloConfig摄像头配置
        zoloConfig: {
          // 预览角度 0-360 默认值：90
          displayAngle: 90,
          // 送算法的图像角度(0~360) 默认值：270
          algorithmAngle: 270,
          // 用于ir摄像头算法角度 0-360 默认值：270
          supAlgorithmAngle: 270,
          // 预览图像是否需要镜像 默认值：true
          isDisplayMirror: true,
          // 送算法图像是否镜像 默认值：true
          isMirror: true
        },
        entryIdentifySwitch: false, // 是否开启进场识别 默认值：false
        clickScanFaceButtonSwitch: true, // 显示点击刷脸按钮 默认值：true
        clickScanFaceButtonText: '点击开始刷脸核验', // 点击刷脸按钮文本 默认值：点击开始刷脸核验
        useIdcard: true, // 是否启用身份证功能 默认值：true
        idCardReaderBrand: 4, // 身份证阅读器品牌 默认值：新中新阅读器
        analysisPhoto: 1, // 是否解析身份证照片 默认值：1
        analysisFingerprint: 0, // 是否解析身份证指纹 默认值：0
        usePersonCard: false, // 	是否人证比对 默认值：false
        idCardInterval: 7, // 	同证间隔时间(s) 0-20 默认值：7
        useQrcode: true, // 是否启用二维码功能 默认值：true
        qrCodeReaderBrand: 5, // 二维码读头品牌 默认值：东信新款二维码读头 TODO ADD_FIELD
        qrCodeReaderCommunicationMode: 1, // 二维码读头通信方式 默认值：虚拟串口 TODO ADD_FIELD
        qrCodeReaderSerialPort: '', // 二维码读头串口地址 TODO ADD_FIELD
        qrCodeInterval: 7, // 	同码间隔时间(s) 0-20 默认值：7 TODO ADD_FIELD

        ic14443IcCardFunction: false, // 启用IC卡ISO14443A功能 默认值：false TODO ADD_FIELD
        ic14443ReaderBrand: 1, // 阅读器品牌 默认值：东信多合一内置 TODO ADD_FIELD
        ic14443ReaderSectorNumbers: 15, // 读取扇区(0-99) 默认值：15 TODO ADD_FIELD
        ic14443ReaderBlock: '0', // 读取块 长度100 默认值：0 TODO ADD_FIELD
        ic14443ReaderKey: 'FFFFFFFFFFFF', // 读取密钥 默认值：FFFFFFFFFFFF TODO ADD_FIELD
        ic14443StartOffset: 0, // 起始偏移量(0-100) 默认值：0 TODO ADD_FIELD
        ic14443EndOffset: 0, // 末尾偏移量(0-100) 默认值：0 TODO ADD_FIELD
        ic14443PersonCardComparison: false, // 	是否人证比对 默认值：false TODO ADD_FIELD
        ic14443SameCardIntervalTime: 7, // 	同卡间隔时间(s) 0-20 默认值：7 TODO ADD_FIELD

        ic15693IcCardFunction: false, // 启用IC卡ISO15693功能 默认值：false TODO ADD_FIELD
        ic15693ReaderBrand: 1, // 阅读器品牌 默认值：东信多合一内置 TODO ADD_FIELD
        ic15693ReaderBlock: '0', // 读取块 长度100 默认值：0 TODO ADD_FIELD
        ic15693StartOffset: 0, // 起始偏移量(0-100) 默认值：0 TODO ADD_FIELD
        ic15693EndOffset: 0, // 末尾偏移量(0-100) 默认值：0 TODO ADD_FIELD
        ic15693PersonCardComparison: false, // 	是否人证比对 默认值：false TODO ADD_FIELD
        ic15693SameCardIntervalTime: 7, // 	同卡间隔时间(s) 0-20 默认值：7 TODO ADD_FIELD

        manualIn: true, // 是否启用手动输入 TODO ADD_FIELD
        manualInParams: ['username', 'idcard'], // 填写内容 新增，“姓名”和“身份证号” 默认勾选 且不能取消。 TODO ADD_FIELD

        useLinkage: false, // 	启用核验接口 默认值：false
        linkageAds: '115.227.34.58:1832', // 	核验接口地址

        checkVerifyEncryptSwitch: true, // 核验接口数据是否加解密 默认值：true TODO ADD_FIELD
        checkVerifyEncryptAppKey: '', // TODO ADD_FIELD
        checkVerifyEncryptAppSecret: '', // TODO ADD_FIELD
        checkVerifyEncryptPrivateKey: '', // TODO ADD_FIELD
        checkVerifyRetryTimes: 1, // 核验接口失败重试次数 TODO ADD_FIELD
        linkTimeout: 5, // 核验接口超时时间(s)
        checkVerifyTimeoutTips: '核验接口超时', // 核验接口超时提示语 TODO ADD_FIELD
        checkVerifyFailedTips: '核验接口失败', // 核验接口失败提示语 TODO ADD_FIELD

        resultPageTemplate: 1, // 模板类型 默认值：通用
        successPageTime: 2, // 默认成功结果页时长(s) 1-100 默认值：2
        sucText: '请通行', // 成功默认标题 默认: 请通行
        sucVoice: '请通行', // 成功默认语音 默认: 请通行
        failPageTime: 5, // 默认失败结果页时长 1-100 默认值：5
        failText: '开通失败', // 刷脸失败默认标题 默认值：开通失败
        failVoice: '开通失败', // 刷脸失败默认语音 默认值：开通失败
        singlePageTime: 120, // 默认单选页时长(s) 默认值：120 TODO ADD_FIELD
        multiPageTime: 120, // 默认多选页时长(s) 默认值：120 TODO ADD_FIELD
        waitPageTime: 120, // 默认等待页时长(s) 默认值：120 TODO ADD_FIELD

        useSerialPort: 'default', // 	开门信号: 继电器/RS232 default/RS232 默认值：default
        doorSerialPort: '', // RS232开门串口地址
        relayOpenModel: 1, // 继电器开门模式 1-开-闭信号 2-开-门磁-闭信息
        openCloseInterval: 1000, // 开闭时间间隔（ms）
        signalInterval: 1000, // 信号间间隔（ms）
        doorSerialPortAddress: '', // 门磁串口地址 TODO ADD_FIELD
        gateTimeOut: 60, // 门磁超时时间（s）
        lightMode: 'auto', // 补光灯: 自动 auto 默认:auto
        heartTrackingUrl:
          'https://hhomc.hz-hanghui.com:8096/middle-management/api/v1/device/heart/tracking', // 设备状态推送地址
        logPushUrl:
          'https://hhomc.hz-hanghui.com:8096/middle-management/api/v1/app/log/push', // 在线日志推送地址
        transitPushUrl: 'https://tx.hz-hanghui.com:8088/yx-fyzd/EventRecords', // 进出记录推送地址
        mpassword: '142536', // 管理员密码 默认值：142536
        volume: 100, // 语音音量 0-100 默认值：100
        hideNavigationBar: false, // 隐藏底部导航栏 默认值: false
        forbidPullDown: false, // 	禁止下拉通知栏 默认值: false
        autoLaunch: false, // 应用是否自启动 默认值: false
        homePageUrl: null, // 首页图片配置
        transitionPageUrl: null, // 过渡图片配置
        scanFaceFailedTipUrl: null // 刷脸失败提示页配置
      },
      rules: {
        sn: [
          {
            required: true,
            whitespace: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        ic14443ReaderBlock: [
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              const regex = /^\d+(?:,\d+)*$/
              if (value && value !== '' && !regex.test(value)) {
                return callback('必须数字用英文逗号隔开')
              }
              return callback()
            },
            trigger: ['change', 'blur']
          }
        ],
        ic15693ReaderBlock: [
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              const regex = /^\d+(?:,\d+)*$/
              if (value && value !== '' && !regex.test(value)) {
                return callback('必须数字用英文逗号隔开')
              }
              return callback()
            },
            trigger: ['change', 'blur']
          }
        ]
      },
      submitLoading: false,

      transitPushUrlList: [
        {
          value: 'https://tx.hz-hanghui.com:8088/yx-fyzd/EventRecords',
          desc: '塘栖平台'
        },
        {
          value: 'https://face.ldxk.edu.cn:8901/ywjl-fyzd/EventRecords',
          desc: '计量大学'
        },
        {
          value: 'http://172.19.21.131:9100/ywjl-fyzd/EventRecords',
          desc: '计量大学'
        },
        {
          value: 'https://ldb-airport.hz-hanghui.com:9100/ldb-airport/EventRecords',
          desc: '龙洞堡机场'
        },
        {
          value: 'http://192.168.99.11:9200/ldb-airport/EventRecords',
          desc: '龙洞堡机场'
        }
      ], // 进出记录推送地址输入建议
      heartTrackingUrlList: [
        {
          value: 'https://hhomc.hz-hanghui.com:8096/middle-management/api/v1/device/heart/tracking',
          desc: 'OTA中台'
        }
      ], // 设备状态推送地址输入建议
      logPushUrlList: [
        {
          value: 'https://hhomc.hz-hanghui.com:8096/middle-management/api/v1/app/log/push',
          desc: 'OTA中台'
        }
      ], // 在线日志推送地址输入建议
      // 通行方式下拉
      trafficMode: [
        { name: '通用', code: 'normal' },
        { name: '进站刷脸全量通行', code: 'inStation' },
        { name: '出站刷脸全量通行', code: 'outStation' }
      ],
      applicationList: [], // 应用类型下拉
      deviceList: [], // 设备型号下拉
      buyList: [], // 购买方公司名称下拉
      // 系统类型下拉
      systemType: [
        { id: 1, name: '蚂蚁OS' },
        { id: 2, name: '非蚂蚁OS' }
      ],
      // 进场刷脸模式下拉
      recognizeList: [
        { name: '通用', code: 'normal' },
        { name: '有进场识别&连续刷脸', code: 'zero' },
        { name: '无进场识别&单次刷脸 ', code: 'three' }
      ],
      manualInParamsList: [], // 获取手动输入内容项
      brandList: [], // 身份证阅读器品牌下拉
      readerBrandList: [], // 阅读器品牌下拉
      qrBrandList: [], // 二维码读头品牌下拉
      merchantLists: [], // 商户下拉
      userLibList: [], // 用户库下拉
      // 应用通信模式下拉
      communicationList: [
        { id: 1, name: 'HTTP' },
        { id: 2, name: 'WEBSOCKET' },
        { id: 3, name: 'SERIALPORT' }
      ],
      // 补光灯下拉
      lightModeLists: [
        {
          key: 'auto',
          value: '自动'
        },
        {
          key: 'close',
          value: '常关'
        },
        {
          key: 'open',
          value: '常开'
        }
      ]
    }
  },
  watch: {
    templateData() {
      console.log(this.templateData)
      if (this.templateData != {}) {
        if (!this.templateData.zoloConfig) {
          this.templateData.zoloConfig = this.form.zoloConfig
        }
        this.form = {
          ...this.templateData,
          tenantObj: this.form.tenantObj,
          sn: this.form.sn,
          purchaserId: this.form.purchaserId,
          id: this.form.id
        }
        /* if (this.obj && this.obj.id) {
          this.form.id = this.obj.id
        } */
        if (this.form.tenantId) {
          this.onSelectChange('tenantId', this.form.tenantId)
        }
        // this.form.sn = this.obj.sn;
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.getManualInParamsList()
      this.getQrCodeReaderBrandList()
      this.getIdCardReaderBrandList()
      this.getUserlibList()
      this.getApplicationTypeList()
      this.getDeviceModelList()
      this.getPurchaserList()
      this.$nextTick(() => {
        this.getMerchantList().then(() => {
          if (this.obj) {
            console.log(this.obj)
            if (!this.obj.zoloConfig) {
              this.obj.zoloConfig = this.form.zoloConfig
            }
            this.form = {
              ...this.obj,
              tenantObj: this.form.tenantObj
            }
            if (this.form.tenantId) {
              this.onSelectChange('tenantId', this.form.tenantId)
            }
          }
        })
      })
    },
    // 获取手动输入内容项
    getManualInParamsList() {
      getManualInParamsEnum().then((res) => {
        this.manualInParamsList = res.data
      })
    },
    // 获取二维码读头品牌
    getQrCodeReaderBrandList() {
      getQrCodeReaderBrandEnum().then((res) => {
        this.qrBrandList = res.data
      })
    },
    // 身份证阅读器品牌下拉
    getIdCardReaderBrandList() {
      getIdCardReaderBrand().then((res) => {
        this.brandList = res.data
      })
      getReaderBrand().then((res) => {
        this.readerBrandList = res.data
      })
    },
    // 商户下拉
    getMerchantList() {
      return new Promise((resolve) => {
        getAllList().then((res) => {
          this.merchantLists = res.data
        }).finally(() => {
          resolve()
        })
      })
    },
    // 用户库下拉
    getUserlibList() {
      getUserLibList().then((res) => {
        this.userLibList = res.data
      })
    },
    // 获取应用类型列表
    getApplicationTypeList() {
      applicationTypeList().then((res) => {
        this.applicationList = res.data
      })
    },
    // 设备型号列表
    getDeviceModelList() {
      deviceModelList().then((res) => {
        this.deviceList = res.data
      })
    },
    // 购买方列表
    getPurchaserList() {
      purchaserList().then((res) => {
        this.buyList = res.data
      })
    },
    // 状态切换 数据重置（改成提交时候重置）
    onSelectChange(field, value) {
      console.log('onSelectChange', field, value)
      switch (field) {
        // 商户平台
        case 'tenantId':
          if (value) {
            const item = (this.merchantLists || []).filter(v => v.id == value)[0] || {}
            console.log('onTenantIdChange', value, item)
            this.form.tenantObj = {
              deviceAppID: item.machineAppId || '', // 设备appId
              merchantAppID: item.serviceAppId || '' // 商户appid
            }
          } else {
            console.log('onTenantIdChange', value)
            this.form.tenantObj = {
              deviceAppID: null, // 设备appId
              merchantAppID: null // 商户appid
            }
          }
          break
      }
    },
    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)
      }
    },
    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)
      })
    },
    back() {
      this.$emit('back')
    },
    submit(e) {
      e.preventDefault()
      this.$refs.form.validate(async(valid) => {
        if (!valid) {
          return false
        }
        if (this.submitLoading) {
          return
        }
        this.submitLoading = true
        try {
          // 以下字段根据切换条件重置为默认值
          const fieldArr = [
            'clickScanFaceButtonSwitch', 'useIdcard', 'useQrcode', 'ic14443IcCardFunction', 'ic15693IcCardFunction', 'manualIn',
            'qrCodeReaderCommunicationMode', 'useLinkage',
            'checkVerifyEncryptSwitch', 'useSerialPort', 'relayOpenModel',
            'isOpenAgeLimit', 'homePageUrl', 'transitionPageUrl', 'scanFaceFailedTipUrl'
          ]
          fieldArr.forEach(field => {
            const fieldValue = this.form[field]
            switch (field) {
              // 显示点击刷脸按钮
              case 'clickScanFaceButtonSwitch':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    clickScanFaceButtonText: '点击开始刷脸核验' // 点击刷脸按钮文本 默认值：点击开始刷脸核验
                  }
                }
                break
              // 启用身份证功能
              case 'useIdcard':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    idCardReaderBrand: 4, // 身份证阅读器品牌 默认值：新中新阅读器
                    analysisPhoto: 1, // 是否解析身份证照片
                    analysisFingerprint: 0, // 是否解析身份证指纹
                    usePersonCard: false, // 	是否人证比对 默认值：false
                    idCardInterval: 7 // 	同证间隔时间(s) 默认值：7
                  }
                }
                break
              // 启用二维码功能
              case 'useQrcode':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    qrCodeReaderBrand: 5, // 二维码读头品牌 默认值：东信新款二维码读头
                    qrCodeReaderCommunicationMode: 1, // 二维码读头通信方式 默认值：虚拟串口
                    qrCodeReaderSerialPort: '', // 二维码读头串口地址
                    qrCodeInterval: 7 // 	同码间隔时间(s) 默认值：7
                  }
                }
                break
              // 启用IC卡ISO14443A功能
              case 'ic14443IcCardFunction':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    ic14443ReaderBrand: 1, // 阅读器品牌 默认值：东信多合一内置 TODO ADD_FIELD
                    ic14443ReaderSectorNumbers: 15, // 读取扇区(0-99) 默认值：15 TODO ADD_FIELD
                    ic14443ReaderBlock: '0', // 读取块 长度100 默认值：0 TODO ADD_FIELD
                    ic14443ReaderKey: 'FFFFFFFFFFFF', // 读取密钥 默认值：FFFFFFFFFFFF TODO ADD_FIELD
                    ic14443StartOffset: 0, // 起始偏移量(0-100) 默认值：0 TODO ADD_FIELD
                    ic14443EndOffset: 0, // 末尾偏移量(0-100) 默认值：0 TODO ADD_FIELD
                    ic14443PersonCardComparison: false, // 	是否人证比对 默认值：false TODO ADD_FIELD
                    ic14443SameCardIntervalTime: 7 // 	同卡间隔时间(s) 0-20 默认值：7 TODO ADD_FIELD
                  }
                }
                break
              // 启用IC卡ISO15693功能
              case 'ic15693IcCardFunction':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    ic15693ReaderBrand: 1, // 阅读器品牌 默认值：东信多合一内置 TODO ADD_FIELD
                    ic15693ReaderBlock: '0', // 读取块 长度100 默认值：0 TODO ADD_FIELD
                    ic15693StartOffset: 0, // 起始偏移量(0-100) 默认值：0 TODO ADD_FIELD
                    ic15693EndOffset: 0, // 末尾偏移量(0-100) 默认值：0 TODO ADD_FIELD
                    ic15693PersonCardComparison: false, // 	是否人证比对 默认值：false TODO ADD_FIELD
                    ic15693SameCardIntervalTime: 7 // 	同卡间隔时间(s) 0-20 默认值：7 TODO ADD_FIELD
                  }
                }
                break
              // 二维码读头通信方式
              case 'qrCodeReaderCommunicationMode':
                if (fieldValue != '2') {
                  this.form.qrCodeReaderSerialPort = '' // 二维码读头串口地址
                }
                break
              // 是否启用手动输入
              case 'manualIn':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    manualInParams: ['username', 'idcard'] // 填写内容 新增，“姓名”和“身份证号” 默认勾选 且不能取消。
                  }
                }
                break
              // 启用核验接口
              case 'useLinkage':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    linkageAds: '115.227.34.58:1832', // 	核验接口地址
                    checkVerifyEncryptSwitch: true, // 核验接口数据是否加解密 默认值：true
                    checkVerifyEncryptAppKey: '',
                    checkVerifyEncryptAppSecret: '',
                    checkVerifyEncryptPrivateKey: '',
                    checkVerifyRetryTimes: 1, // 	核验接口失败重试次数
                    linkTimeout: 5, // 	核验接口超时时间(s)
                    checkVerifyTimeoutTips: '核验接口超时', // 核验接口超时提示语
                    checkVerifyFailedTips: '核验接口失败' // 核验接口失败提示语
                  }
                }
                break
              // 核验接口数据是否加解密
              case 'checkVerifyEncryptSwitch':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    checkVerifyEncryptAppKey: '',
                    checkVerifyEncryptAppSecret: '',
                    checkVerifyEncryptPrivateKey: ''
                  }
                }
                break
              // 开门信号
              case 'useSerialPort':
                if (fieldValue !== 'RS232') {
                  this.form.doorSerialPort = '' // RS232开门串口地址
                }
                break
              // 继电器开门模式
              case 'relayOpenModel':
                if (fieldValue == 2) {
                  this.form = {
                    ...this.form,
                    openCloseInterval: 1000, // 开闭时间间隔（ms）
                    signalInterval: 1 // 信号间间隔（ms）
                  }
                } else if (fieldValue == 1) {
                  this.form = {
                    ...this.form,
                    doorSerialPortAddress: '', // 门磁串口地址
                    gateTimeOut: 60 // 门磁超时时间（s）
                  }
                }
                break
              // 是否开启年龄限制
              case 'isOpenAgeLimit':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    limitSectionStart: 0, // 限制年龄区间 开始
                    limitSectionEnd: 18, // 限制年龄区间 结束
                    ageForbidText: '未满18岁禁止进入' // 限制进入结果页标题
                  }
                }
                break
              // 首页图片配置
              case 'homePageUrl':
                if (!fieldValue) {
                  this.form.homePageUrl =
                    'https://tx.hz-hanghui.com:8088/yx-fyzd/file/img/homePageUrl.jpg'
                }
                break
              // 过渡图片配置
              case 'transitionPageUrl':
                if (!fieldValue) {
                  this.form.transitionPageUrl =
                    'https://tx.hz-hanghui.com:8088/yx-fyzd/file/img/transitionPageUrl.jpg'
                }
                break
              // 刷脸失败提示页配置
              case 'scanFaceFailedTipUrl':
                if (!fieldValue) {
                  this.form.scanFaceFailedTipUrl =
                    'https://tx.hz-hanghui.com:8088/yx-fyzd/file/icon/scanFaceFailedTipUrl.png'
                }
                break
            }
          })
          console.log(this.form)
          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
        }
      })
    }
  }
}
</script>

<style lang="scss" >
.my-autocomplete {
  li {
    padding: 5px 20px !important;

    .name {
      line-height: 20px !important;
      white-space: pre-wrap; /* 保留空白符，如果内容超过容器宽度则换行 */
      overflow-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</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;
    }
  }
}

.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: 50px;
  height: 91px;
  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>
