<template>
  <div>
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-position="left"
      label-width="170px"
      style="margin-top: 10px"
    >
      <TagCard title="设备基本信息">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="模板名称" prop="templateName" required>
              <el-input
                v-model="form.templateName"
                placeholder="请输入模板名称"
              />
            </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 class="wrap-content__item">
            <el-form-item
              label="小程序授权配置名称"
              prop="provisionalProofNoticeId"
            >
              <el-select
                v-model="form.provisionalProofNoticeId"
                placeholder="配置名称"
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="(item, index) in dispositionName"
                  :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="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>
      </TagCard>
      <TagCard title="三方接口接入配置">
        <div class="wrap-content__item">
          <el-form-item label="启用三要素换特殊码接口" prop="specialCodeSwitch">
            <el-radio-group
              v-model="form.specialCodeSwitch"
            >
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div v-if="form.specialCodeSwitch" class="wrap-content-detail" style="background: #dcdfe63d;">
          <div class="wrap-content-detail__item">
            <el-form-item label="三要素换特殊码接口地址" prop="specialCodeUrl">
              <!--              <el-input
                v-model="form.specialCodeUrl"
                placeholder="请输入三要素换特殊码接口地址"
                maxlength="300"
              />-->
              <el-autocomplete
                v-model="form.specialCodeUrl"
                popper-class="my-autocomplete"
                :fetch-suggestions="(queryString, cb) => querySearch('specialCodeUrlList', 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="specialCodeEncryptSwitch">
              <el-radio-group
                v-model="form.specialCodeEncryptSwitch"
              >
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-if="form.specialCodeEncryptSwitch" class="wrap-content-detail">
            <div class="wrap-content-detail__item">
              <el-form-item label="appKey" prop="specialCodeEncryptAppKey">
                <el-input
                  v-model="form.specialCodeEncryptAppKey"
                  placeholder="请输入appKey"
                />
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="appSecret" prop="specialCodeEncryptAppSecret">
                <el-input
                  v-model="form.specialCodeEncryptAppSecret"
                  placeholder="请输入appSecret"
                />
              </el-form-item>
            </div>
            <div class="wrap-content-detail__item">
              <el-form-item label="privateKey" prop="specialCodeEncryptPrivateKey">
                <el-input
                  v-model="form.specialCodeEncryptPrivateKey"
                  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="三要素换特殊码接口超时时间(s)" prop="specialCodeTimeout">
              <el-input-number
                v-model="form.specialCodeTimeout"
                size="mini"
                :min="2"
                :max="10"
              />
            </el-form-item>
          </div>
          <div class="wrap-content-detail__item">
            <el-form-item label="三要素换特殊码接口超时提示语" prop="specialCodeTimeoutTips">
              <el-input
                v-model="form.specialCodeTimeoutTips"
                placeholder="请输入三要素换特殊码接口超时提示语"
                maxlength="100"
              />
            </el-form-item>
          </div>
          <div class="wrap-content-detail__item">
            <el-form-item label="三要素换特殊码接口失败提示语" prop="specialCodeFailedTips">
              <el-input
                v-model="form.specialCodeFailedTips"
                placeholder="请输入三要素换特殊码接口失败提示语"
                maxlength="100"
              />
            </el-form-item>
          </div>
        </div>
      </TagCard>
      <TagCard title="推送地址配置">
        <div class="wrap-content">
          <!-- <div class="item-layout">
            <span class="prompt">查询地址配置</span>
            <div class="display-config-layout">
              <el-form-item label="获取办证记录地址" prop="identityProofRecordUrl">
                <el-input
                  v-model="form.identityProofRecordUrl"
                  placeholder="请输入"
                  maxlength="300"
                />
              </el-form-item>
            </div>
          </div> -->
          <div class="wrap-content__item">
            <el-form-item
              label="办证记录推送地址"
              prop="identityProofRecordPushUrl"
            >
              <el-input
                v-model="form.identityProofRecordPushUrl"
                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="printIdentityProof">
              <el-radio-group v-model="form.printIdentityProof">
                <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="validTime">
              <el-input-number
                v-model="form.validTime"
                size="mini"
                :min="1"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="是否加盖公章" prop="officialSealSwitch">
              <el-radio-group v-model="form.officialSealSwitch">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div v-if="form.officialSealSwitch" class="wrap-content__item">
            <el-form-item label="临时证明公章" prop="officialSealUrl">
              <el-upload
                name="file"
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :http-request="
                  (event) => {
                    doUploadAvatar(event, 'officialSealUrl');
                  }
                "
                :before-upload="beforeAvatarUpload"
                :auto-upload="true"
                accept="image/png,image/gif,image/jpg,image/jpeg"
              >
                <div
                  v-if="!form.officialSealUrl"
                  class="upload-img"
                >
                  <img
                    src="../../../assets/officialSealUrl-icon.png"
                    alt=""
                    style="width: 56px;height: 51px"
                  >
                </div>
                <div v-else class="upload-img">
                  <img :src="form.officialSealUrl" style="width: 100%;height: 100%;">
                  <span
                    class="del-img"
                    @click.stop="handleRemove('officialSealUrl')"
                  >x</span>
                </div>
              </el-upload>
            </el-form-item>
          </div>
          <div v-else class="wrap-content__item" />
          <div class="wrap-content__item">
            <el-form-item label="签发单位" prop="issuingAuthority">
              <el-input v-model="form.issuingAuthority" placeholder="请输入" />
            </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="miniAuth">
              <el-radio-group v-model="form.miniAuth">
                <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="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>
      </TagCard>
      <TagCard title="超时时长配置（秒）">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="二维码授权超时时长" prop="authQrcodeTimeout">
              <el-input-number
                v-model="form.authQrcodeTimeout"
                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="commonSuccessResultPageTimeout"
              class="overlength"
            >
              <el-input-number
                v-model="form.commonSuccessResultPageTimeout"
                size="mini"
                :min="1"
                :max="1000"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              label="成功结果页超时时长（打印版）"
              prop="printSuccessResultPageTimeout"
              class="overlength"
            >
              <el-input-number
                v-model="form.printSuccessResultPageTimeout"
                size="mini"
                :min="1"
                :max="1000"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              label="失败结果页超时时长（获取三要素失败）"
              prop="userinfoFailedResultPageTimeout"
              class="overlength"
            >
              <el-input-number
                v-model="form.userinfoFailedResultPageTimeout"
                size="mini"
                :min="1"
                :max="1000"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              label="失败结果页超时时长（命中风险人员）"
              prop="riskFailedResultPageTimeout"
              class="overlength"
            >
              <el-input-number
                v-model="form.riskFailedResultPageTimeout"
                size="mini"
                :min="1"
                :max="1000"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              label="失败结果页超时时长（其他）"
              prop="commonFailedResultPageTimeout"
              class="overlength"
            >
              <el-input-number
                v-model="form.commonFailedResultPageTimeout"
                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="faceSuccessVoice"
              class="overlength"
            >
              <el-input
                v-model="form.faceSuccessVoice"
                placeholder="请输入"
                maxlength="50"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              label="支付宝刷脸人脸比对失败提示音"
              prop="faceFailVoice"
              class="overlength"
            >
              <el-input
                v-model="form.faceFailVoice"
                placeholder="请输入"
                maxlength="50"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="办证成功提示音" prop="identityProofSuccessVoice">
              <el-input
                v-model="form.identityProofSuccessVoice"
                placeholder="请输入"
                maxlength="50"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="打印证明提示音" prop="printIdentityProofVoice">
              <el-input
                v-model="form.printIdentityProofVoice"
                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>
      </TagCard>
      <TagCard title="辖区配置">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="单位标识" prop="useCompanyCode">
              <el-input v-model="form.useCompanyCode" placeholder="请输入" />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="地区(省市区)" prop="address">
              <el-input v-model="form.address" placeholder="请输入" />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="派出所" prop="pcsName">
              <el-input v-model="form.pcsName" placeholder="请输入" />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="派出所代码" prop="pcsCode">
              <el-input v-model="form.pcsCode" placeholder="请输入" />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="使用单位" prop="useCompanyName">
              <el-input v-model="form.useCompanyName" placeholder="请输入" />
            </el-form-item>
          </div>
        </div>
      </TagCard>
      <TagCard title="页面文本配置">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="首页标题" prop="homePageTitle">
              <el-input v-model="form.homePageTitle" placeholder="请输入" />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="刷脸按钮文本" prop="faceButtonText">
              <el-input v-model="form.faceButtonText" placeholder="请输入" />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="手输按钮文本" prop="inputButtonText">
              <el-input v-model="form.inputButtonText" placeholder="请输入" />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="结果页-打印文本" prop="resultPagePrintText">
              <el-input v-model="form.resultPagePrintText" placeholder="请输入" />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="结果页-非打印文本" prop="resultPageNoPrintText">
              <el-input v-model="form.resultPageNoPrintText" placeholder="请输入" />
            </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 TagCard from '@/components/TagCard'
import { applicationTypeList, deviceModelList, purchaserList } from '@/api/configuration'
import { noticeList, templateAdd } from '@/api/titlelib'
import { pictureLocal } from '@/api/ordinary_user'

export default {
  components: { TagCard },
  props: {
    obj: {
      type: Object,
      default: () => {}
    },
    isDis: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      specialCodeUrlList: [
        {
          value: 'https://tx.hz-hanghui.com:8088/hanghui-openapi/v1/proof/special/code/apply/encrypt',
          desc: '航汇三要素换特殊码（加密）'
        },
        {
          value: 'https://tx.hz-hanghui.com:8088/hanghui-openapi/v1/proof/special/code/apply',
          desc: '航汇三要素换特殊码（非加密）'
        }
      ], // 三要素换特殊码接口地址输入建议
      form: {
        templateName: null, // 模板名称
        applicationTypeId: null, // 应用类型
        deviceModelHardwareId: null, // 设备型号（硬件）
        deviceModelEnvironmentId: null, // 设备型号（环境）
        systemTypeCode: null, // 系统类型
        expirationDate: null, // 使用时间期限 TODO ADD_FIELD
        provisionalProofNoticeId: null, // 小程序授权配置名称

        useAlipayFace: true, // 启用支付宝刷脸功能
        noIdcardRegister: false, // 启用无证登记
        noIdcardInputPhone: true, // 无证是否输入手机号

        specialCodeSwitch: false, // 启用三要素换特殊码接口 默认值：false
        specialCodeUrl: '', // 三要素换特殊码接口地址
        specialCodeEncryptSwitch: true, // 三要素换特殊码接口数据是否加解密 默认值：true TODO ADD_FIELD
        specialCodeEncryptAppKey: '', // TODO ADD_FIELD
        specialCodeEncryptAppSecret: '', // TODO ADD_FIELD
        specialCodeEncryptPrivateKey: '', // TODO ADD_FIELD
        specialCodeTimeout: 5, // 三要素换特殊码接口超时时间(s) TODO ADD_FIELD
        specialCodeTimeoutTips: '三要素换特殊接口请求超时', // 三要素换特殊码接口超时提示语 TODO ADD_FIELD
        specialCodeFailedTips: '三要素换特殊码接口接请求失败', // 三要素换特殊码接口失败提示语 TODO ADD_FIELD

        identityProofRecordUrl: '', // 获取办证记录地址

        identityProofRecordPushUrl:
          'https://common.hz-hanghui.com:8087/ti-prove/handleProveRecord/push', // 办证记录推送地址

        printIdentityProof: true, // 是否打印临时证明
        officialSealSwitch: false, // 是否加盖公章
        officialSealUrl: '', // 公章图片地址
        validTime: 2, // 临证有效期 默认为 2 最小为 1
        issuingAuthority: '', // 签发单位
        riskCheck: true, // 启用风险人员核查
        miniAuth: true, // 是否小程序授权
        faceFailHandInput: true, // 刷脸失败跳转手输

        authQrcodeTimeout: 20, // 二维码授权超时时长
        inputIdcardTimeout: 60, // 输身份证超时时长
        inputPhoneTimeout: 30, // 输手机号超时时长
        commonSuccessResultPageTimeout: 10, // 成功结果页超时时长（普通版）
        printSuccessResultPageTimeout: 5, // 成功结果页超时时长（打印版）
        userinfoFailedResultPageTimeout: 5, // 失败结果页超时时长（获取三要素失败）
        riskFailedResultPageTimeout: 10, // 失败结果页超时时长（命中风险人员）
        commonFailedResultPageTimeout: 5, // 失败结果页超时时长（其他）
        faceTimeout: 40, // 刷脸超时时间
        oneToOneTimeout: 40, // 1v1比对超时时间
        connectSearchTimeout: 40, // 联网查询超时时间

        faceSuccessVoice: '比对成功', // 支付宝刷脸人脸比对成功提示音
        faceFailVoice: '比对失败，请再试一次或尝试其他方式办理', // 支付宝刷脸人脸比对失败提示音
        identityProofSuccessVoice: '办理成功', // 办证成功提示音
        printIdentityProofVoice: '正在打印临时身份证明', // 打印证明提示音
        inputIdcardVoice: '请输入身份证号', // 输身份证号提示音
        inputPhoneVoice: '请输入手机号', // 输手机号提示音
        connectSearchVoice: '正在联网查询信息，请耐心等待', // 联网信息查询提示音

        useCompanyCode: '', // 单位标识
        useCompanyName: '', // 使用单位
        address: '', // 地区(省市区)
        pcsName: '', // 派出所
        pcsCode: '', // 派出所代码

        homePageTitle: '临时身份证明自助服务系统', // 首页标题
        faceButtonText: '支付宝用户刷脸快捷办理', // 刷脸按钮文本
        inputButtonText: '无支付宝旅客/老年人入口', // 手输按钮文本
        resultPagePrintText: '查看电子版临时身份证明', // 结果页-打印文本
        resultPageNoPrintText: '电子版临时身份证明', // 结果页-非打印文本
        mpassword: '117521', // 设置管理员密码
        voiceVolume: 80// 语音音量（1~100）
      },
      rules: {
        templateName: [
          {
            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']
          }
        ],
        provisionalProofNoticeId: [
          {
            required: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        mode: [
          {
            required: true,
            whitespace: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ]
      },
      submitLoading: false,
      dispositionName: [], // 小程序授权配置名称下拉
      applicationList: [], // 应用类型下拉
      deviceList: [], // 设备型号下拉
      buyList: [], // 购买方公司名称下拉
      // 系统类型下拉
      systemType: [
        { id: 1, name: '蚂蚁OS' },
        { id: 2, name: '非蚂蚁OS' }
      ]
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.noticeList()
      this.getApplicationTypeList()
      this.getDeviceModelList()
      this.getPurchaserList()
      this.$nextTick(() => {
        if (this.obj) {
          this.form = this.obj
        }
      })
    },
    // 获取小程序授权配置名称
    noticeList() {
      noticeList().then((res) => {
        this.dispositionName = 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
      })
    },
    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 false
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$notify.warning({
          title: '警告',
          message: '图片大小必须小于2M'
        })
        return false
      }
    },
    doUploadAvatar(obj, type) {
      var avatar = new FormData()
      avatar.append('file', obj.file)
      pictureLocal(avatar).then((res) => {
        this.value = res.data
        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 = [
            'specialCodeSwitch', 'specialCodeEncryptSwitch', 'officialSealSwitch'
          ]
          fieldArr.forEach(field => {
            const fieldValue = this.form[field]
            switch (field) {
              // 启用三要素换特殊码接口
              case 'specialCodeSwitch':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    specialCodeUrl: '', // 三要素换特殊码接口地址
                    specialCodeEncryptSwitch: true, // 三要素换特殊码接口数据是否加解密 默认值：true TODO ADD_FIELD
                    specialCodeEncryptAppKey: '', // TODO ADD_FIELD
                    specialCodeEncryptAppSecret: '', // TODO ADD_FIELD
                    specialCodeEncryptPrivateKey: '', // TODO ADD_FIELD
                    specialCodeTimeout: 5, // 三要素换特殊码接口超时时间(s) TODO ADD_FIELD
                    specialCodeTimeoutTips: '三要素换特殊接口请求超时', // 三要素换特殊码接口超时提示语 TODO ADD_FIELD
                    specialCodeFailedTips: '三要素换特殊码接口接请求失败' // 三要素换特殊码接口失败提示语 TODO ADD_FIELD
                  }
                }
                break
              // 三要素换特殊码接口数据是否加解密
              case 'specialCodeEncryptSwitch':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    specialCodeEncryptAppKey: '', // TODO ADD_FIELD
                    specialCodeEncryptAppSecret: '', // TODO ADD_FIELD
                    specialCodeEncryptPrivateKey: '' // TODO ADD_FIELD
                  }
                }
                break
              // 是否加盖公章
              case 'officialSealSwitch':
                if (!fieldValue) {
                  this.form = {
                    ...this.form,
                    officialSealUrl: '' // 公章图片地址
                  }
                }
                break
            }
          })
          await templateAdd(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" 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: 100px;
  height: 100px;
  position: relative;
  background: #F7F8FC;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #C4CAD7;
  border-radius: 8px;
  img {
    object-fit: contain;
    // border-radius: 12px;
    overflow: hidden;
    border-radius: 8px;
  }
  .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>
