<template>
  <div class="wrap-layout">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      style="margin-top: 10px"
      label-width="160px"
      label-position="left"
    >
      <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" required>
              <el-select
                v-model="form.applicationTypeId"
                placeholder="请选择应用类型"
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in applicationList"
                  :key="index"
                  :label="item.applicationType"
                  :value="item.applicationTypeId"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              label="设备型号（硬件）"
              prop="deviceModelHardwareId"
              required
            >
              <el-select
                v-model="form.deviceModelHardwareId"
                placeholder="请选择设备型号（硬件）"
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in devicelList"
                  :key="index"
                  :label="item.deviceModel"
                  :value="item.deviceModelId"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item
              label="设备型号（环境）"
              prop="deviceModelEnvironmentId"
              required
            >
              <el-select
                v-model="form.deviceModelEnvironmentId"
                placeholder="请选择设备型号（环境）"
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in devicelList"
                  :key="index"
                  :label="item.deviceModel"
                  :value="item.deviceModelId"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="系统类型" prop="systemTypeCode" required>
              <el-select
                v-model="form.systemTypeCode"
                placeholder="请选择系统类型"
                filterable
                style="width: 100%"
              >
                <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" />
          <div class="wrap-content__item">
            <el-form-item label="Ampe平台名称" prop="ampeId" required>
              <el-select
                v-model="form.ampeId"
                placeholder="请选择Ampe平台名称"
                filterable
                style="width: 100%"
                clearable
                @change="onSelectChange('ampeId', $event)"
              >
                <el-option
                  v-for="(item, index) in ampeDataList"
                  :key="index"
                  :label="item.ampeName"
                  :value="item.ampeId"
                />
              </el-select>
            </el-form-item>
          </div>
          <div
            v-if="form.ampeId"
            class="wrap-content-detail"
            style="background: #dcdfe63d;"
          >
            <!--            <div class="wrap-content-detail__title">商户详情</div>-->
            <div class="wrap-content__item">
              <el-form-item label="产品ID" prop="productId">
                <el-input
                  v-model="form.apmeObj.productId"
                  :disabled="true"
                />
              </el-form-item>
            </div>
            <div class="wrap-content__item">
              <el-form-item label="调用应用" prop="hostAppId">
                <el-input
                  v-model="form.apmeObj.hostAppId"
                  :disabled="true"
                />
              </el-form-item>
            </div>
            <div class="wrap-content__item">
              <el-form-item label="小程序" prop="appId">
                <el-input
                  v-model="form.apmeObj.appId"
                  :disabled="true"
                />
              </el-form-item>
            </div>
            <div class="wrap-content__item">
              <el-form-item label="小程序名称" prop="appName">
                <el-input
                  v-model="form.apmeObj.appName"
                  :disabled="true"
                />
              </el-form-item>
            </div>
          </div>
          <div v-else class="wrap-content__item" />
          <div class="wrap-content__item">
            <el-form-item label="服务商平台名称" prop="tenantId">
              <el-select
                v-model="form.tenantId"
                placeholder="服务商平台名称"
                filterable
                style="width: 100%"
                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 class="wrap-content__item">
              <el-form-item label="商户平台地址" prop="merchantPlatformAddress">
                <el-input
                  v-model="form.tenantObj.merchantPlatformAddress"
                  :disabled="true"
                />
              </el-form-item>
            </div>
            <div class="wrap-content__item">
              <el-form-item label="入库接口地址" prop="inboundInterfaceAddress">
                <el-input
                  v-model="form.tenantObj.inboundInterfaceAddress"
                  :disabled="true"
                />
              </el-form-item>
            </div>
          </div>
          <div v-else class="wrap-content__item" />
          <div class="wrap-content__item">
            <el-form-item label="场景" prop="sceneId">
              <el-select
                v-model="form.sceneId"
                placeholder="请选择场景"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in sceneList"
                  :key="index"
                  :label="item.sceneName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="模式" prop="mode">
              <el-select
                v-model="form.mode"
                placeholder="请选择模式"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in modeLists"
                  :key="index"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </div>
          <div
            v-if="!(!form.mode || form.mode === 'public')"
            class="wrap-content__item"
          >
            <el-form-item
              label="用户库"
              prop="userLibId"
            >
              <el-select
                v-model="form.userLibId"
                placeholder="请选择用户库"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in userLibList"
                  :key="index"
                  :label="item.userLibName"
                  :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="appletEnterPageUrl">
              <el-input
                v-model="form.appletEnterPageUrl"
                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">
            <el-form-item label="启用身份证功能" prop="useIdcard">
              <el-radio-group v-model="form.useIdcard">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div
            v-if="form.useIdcard"
            class="wrap-content__item"
          >
            <el-form-item
              label="身份证阅读器品牌"
              prop="idCardReaderBrand"
            >
              <el-select
                v-model="form.idCardReaderBrand"
                placeholder="请选择"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in brandList"
                  :key="index.code"
                  :label="item.desc"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </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">
                <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="isAppGetUserInfo">
              <el-radio-group v-model="form.isAppGetUserInfo">
                <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="manualInIdCard">
              <el-radio
                v-model="form.manualInIdCard"
                :class="form.manualInIdCard ? 'm-r-0' : ''"
                :label="true"
                @change="clickManualIn"
              >是</el-radio>
              <el-button
                v-if="form.manualInIdCard"
                :class="form.manualInIdCard ? 'm-r-10' : ''"
                plain
                size="mini"
                type="primary"
                @click="dialogVisible = true"
              >密钥信息</el-button>
              <el-radio v-model="form.manualInIdCard" :label="false">否</el-radio>
            </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>
      </TagCard>
      <TagCard title="功能配置">
        <div class="wrap-content">
          <div class="wrap-content__item">
            <el-form-item label="是否开启打印机" prop="isOpenPrinter">
              <el-radio-group v-model="form.isOpenPrinter">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div
            v-if="form.isOpenPrinter"
            class="wrap-content__item"
          >
            <el-form-item
              label="打印机型号"
              prop="printerConfig"
            >
              <el-select
                v-model="form.printerConfig"
                placeholder="请选择"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in printerList"
                  :key="index.code"
                  :label="item.desc"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
          <div
            v-else
            class="wrap-content__item"
          />
          <div class="wrap-content__item">
            <el-form-item label="是否开启麦克风" prop="isOpenMicrophone">
              <el-radio-group v-model="form.isOpenMicrophone">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div
            v-if="form.isOpenMicrophone"
            class="wrap-content__item"
          >
            <el-form-item
              label="麦克风类型"
              prop="microphoneType"
            >
              <el-select
                v-model="form.microphoneType"
                placeholder="请选择"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in microphoneTypeList"
                  :key="index.code"
                  :label="item.desc"
                  :value="item.code"
                />
              </el-select>
            </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="automaticEnterApplet">
              <el-radio-group v-model="form.automaticEnterApplet">
                <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="startPageUrl">
              <el-upload
                name="file"
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :http-request="
                  (event) => {
                    doUploadAvatar(event, 'startPageUrl');
                  }
                "
                :before-upload="beforeAvatarUpload"
                :auto-upload="true"
                accept="image/png,image/gif,image/jpg,image/jpeg"
              >
                <img
                  v-if="!form.startPageUrl"
                  class="upload-img"
                  src="../../../assets/K8-img.png"
                  alt=""
                >
                <div v-else class="upload-img">
                  <img :src="form.startPageUrl">
                  <span
                    class="del-img"
                    @click.stop="handleRemove('startPageUrl')"
                  >x</span>
                </div>
              </el-upload>
            </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"
              >
                <!-- <div v-if="!form.homePageUrl" class="upload-default">
                  <i class="avatar-uploader-icon el-icon-picture-outline" />
                  <div class="el-upload__text">上传图片</div>
                </div> -->
                <img
                  v-if="!form.homePageUrl"
                  class="upload-img"
                  src="../../../assets/WelcomeToUse.png"
                  alt=""
                >
                <!-- <i v-if="!form.homePageUrl" class="el-icon-plus avatar-uploader-icon" /> -->
                <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>
      </TagCard>
      <TagCard title="zoloConfig摄像头配置">
        <div class="wrap-content">
          <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-270）" prop="displayAngle">
              <el-input-number
                v-model="form.displayAngle"
                size="mini"
                :min="0"
                :max="270"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="送算法的图像角度" prop="algorithmAngle">
              <el-input-number
                v-model="form.algorithmAngle"
                size="mini"
                :min="0"
                :max="270"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="用于ir摄像头算法角度" prop="supAlgorithmAngle">
              <el-input-number
                v-model="form.supAlgorithmAngle"
                size="mini"
                :min="0"
                :max="270"
              />
            </el-form-item>
          </div>
          <div class="wrap-content__item">
            <el-form-item label="预览图像是否需要镜像" prop="isDisplayMirror">
              <el-radio-group v-model="form.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.isMirror">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </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>
    <el-dialog
      title="开启手动输入证件号 - 密钥信息"
      :visible.sync="dialogVisible"
      :destroy-on-close="false"
      :close-on-click-modal="false"
      :center="true"
      width="400"
    >
      <el-form
        ref="manualInIdCardAuthForm"
        :rules="manualInIdCardAuthRules"
        :model="manualInIdCardAuth"
        label-position="left"
        label-width="110px"
      >
        <el-form-item label="appId" prop="appId" required>
          <el-input v-model="manualInIdCardAuth.appId" />
        </el-form-item>
        <el-form-item label="appKey" prop="appKey" required>
          <el-input v-model="manualInIdCardAuth.appKey" />
        </el-form-item>

        <el-form-item label="appSecret" prop="appSecret" required>
          <el-input v-model="manualInIdCardAuth.appSecret" />
        </el-form-item>
        <el-form-item label="privateKey" prop="privateKey" required>
          <el-input v-model="manualInIdCardAuth.privateKey" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { pictureLocal } from '@/api/ordinary_user'
import { getAllList } from '@/api/merchant'
import { getList as getSceneList } from '@/api/scene'
import { getUserLibList } from '@/api/userlib'
import {
  applicationTypeList,
  deviceModelList,
  ampeList,
  templateEdit
} from '@/api/configuration'
import { getIdCardReaderBrand, printerConfigList, microphoneTypeList } from '@/api/device'
import TagCard from '@/components/TagCard'

export default {
  name: 'EditDevice',
  components: { TagCard },
  props: {
    obj: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      submitLoading: false,
      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中台'
        }
      ], // 在线日志推送地址输入建议
      merchantLists: [],
      sceneList: [],
      userLibList: [],
      modeLists: [
        {
          key: 'public',
          value: '开放'
        },
        {
          key: 'close',
          value: '封闭'
        },
        {
          key: 'elasticity',
          value: '弹性'
        }
      ],
      form: {
        templateName: null,
        // 公司名称
        company: null,
        expirationDate: null, // 使用时间期限 TODO ADD_FIELD
        appletEnterPageUrl: null, // 入口页面地址
        // 	禁止下拉通知栏 默认: false
        forbidPullDown: false,
        // 隐藏底部导航栏 默认: false
        hideNavigationBar: false,
        // 首页图片配置
        startPageUrl: null,
        id: null,
        // 	联动平台地址
        linkageAds: '115.227.34.58:1832',
        // 模式 mode: public/close/elasticity 三个参数分别代表 开放/封闭/弹性
        mode: null,
        // 场景id
        sceneId: null,
        // 授权状态 false：未授权 true：已授权
        status: null,
        // 商户id tenantId
        tenantId: null,
        tenantObj: { // TODO ADD_FIELD
          deviceAppID: null, // 设备appId
          merchantAppID: null, // 商户appid
          merchantPlatformAddress: null, // 商户平台地址
          inboundInterfaceAddress: null// 入库接口地址
        },
        // 过渡图片
        homePageUrl: null,
        // 是否启用支付宝人脸能力 默认：true
        useAlipayFace: true,
        // 是否启用身份证功能 默认：true
        useIdcard: true,
        // 是否启用二维码功能 默认：true
        useQrcode: true,
        // 用户库id
        userLibId: null,
        // zoloConfig摄像头配置
        // RGB摄像头旋转角度 0-270 默认值270
        algorithmAngle: 90,
        // IR摄像头旋转角度 0-270 默认值270
        displayAngle: 0,
        // IR摄像头镜像 默认值false
        isDisplayMirror: false,
        // RGB摄像头镜像 默认值true
        isMirror: false,
        // 摄像头显示角度 0-270 默认值90
        supAlgorithmAngle: 90,
        // 设备状态推送地址
        heartTrackingUrl:
          'https://hhomc.hz-hanghui.com:8096/middle-management/api/v1/device/heart/tracking',

        // 是否开启打印机 默认：false
        isOpenPrinter: false,
        printerConfig: null, // 打印机型号

        // 是否开启麦克风 默认：false
        isOpenMicrophone: false,
        microphoneType: 1, // 麦克风类型

        mpassword: '142536',
        volume: 100, // 语音音量 0-100 默认值：100
        autoLaunch: false,
        applicationTypeId: null,
        deviceModelHardwareId: null,
        deviceModelEnvironmentId: null,
        systemTypeCode: null,
        ampeId: null,
        apmeObj: { // TODO ADD_FIELD
          productId: null, // 产品ID
          hostAppId: null, // 调用应用
          appId: null, // 小程序
          appName: null// 小程序名称
        },
        idCardReaderBrand: 4,
        automaticEnterApplet: false,
        logPushUrl:
          'https://hhomc.hz-hanghui.com:8096/middle-management/api/v1/app/log/push',
        cameraType: 'IR',
        cameraBrand: 'Normal',
        isAppGetUserInfo: false,
        manualInIdCard: false,
        manualInIdCardAuth: {}
      },
      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']
          }
        ],
        ampeId: [
          {
            required: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        // tenantId: [
        //   {
        //     required: true,
        //     message: "不能为空!",
        //     trigger: ["change", "blur"],
        //   },
        // ],
        company: [
          {
            required: true,
            message: '不能为空!',
            trigger: ['change', 'blur']
          }
        ], // mode: [
        //   {
        //     required: true,
        //     message: "不能为空!",
        //     trigger: ["change", "blur"],
        //   },
        // ],

        // isOpenPrinter: [
        //   {
        //     required: true,
        //     message: '不能为空!',
        //     trigger: 'blur'
        //   }
        // ],
        printerConfig: [
          {
            required: true,
            message: '不能为空!',
            trigger: 'blur'
          }
        ],
        microphoneType: [
          {
            required: true,
            message: '不能为空!',
            trigger: 'blur'
          }
        ]
      },
      manualInIdCardAuth: {
        appId: '',
        appKey: '',
        appSecret: '',
        privateKey: ''
      },
      manualInIdCardAuthRules: {
        appId: [
          {
            required: true,
            whitespace: true,
            message: '不能为空!',
            trigger: 'blur'
          }
        ],
        appKey: [
          {
            required: true,
            whitespace: true,
            message: '不能为空!',
            trigger: 'blur'
          }
        ],
        appSecret: [
          {
            required: true,
            whitespace: true,
            message: '不能为空!',
            trigger: 'blur'
          }
        ],
        privateKey: [
          {
            required: true,
            whitespace: true,
            message: '不能为空!',
            trigger: 'blur'
          }
        ]
      },
      applicationList: [],
      devicelList: [],
      systemType: [
        { id: 1, name: '蚂蚁OS' },
        { id: 2, name: '非蚂蚁OS' }
      ],
      ampeDataList: [],
      printerList: [],
      brandList: [
        // { id: 1, name: 'NFC在线阅读器' },
        // { id: 2, name: '天波阅读器' },
        // { id: 3, name: '东信阅读器' },
        // { id: 4, name: '新中新阅读器' },
        // { id: 5, name: '德卡阅读器' },
        // { id: 6, name: '精伦阅读器' },
        // { id: 7, name: '华视阅读器' },
        // { id: 8, name: '中安未来离线护照机阅读器模块' },
        // { id: 9, name: '东信多合一' },
        // { id: 10, name: '在线身份证 NFC（ER301）' }
      ],
      microphoneTypeList: []// 麦克风类型
    }
  },
  watch: {
    'form.mode': {
      handler(value) {
        if (!value || value === 'public') {
          this.form.userLibId = null
        }
      },
      immediate: true
    }
    // "form.manualInIdCard"(n) {
    //   if (n && !this.form.manualInIdCardAuth.appId) {
    //     this.$nextTick(() => {
    //       this.$refs["manualInIdCardAuthForm"].clearValidate();
    //     });
    //     this.dialogVisible = true;
    //   }
    // },
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.getIdCardReaderBrandList()
      this.getMicrophoneTypeList()
      this.getPrinterList()
      this.getSceneList()
      this.getUserlibList()
      this.applicationTypeList()
      this.deviceModelList()
      this.ampeList()
      this.$nextTick(() => {
        this.getMerchantList().then(() => {
          if (this.obj) {
            if (this.obj.manualInIdCardAuth) {
              this.manualInIdCardAuth = this.obj.manualInIdCardAuth
            } else {
              this.obj.manualInIdCardAuth = {}
            }
            this.form = {
              ...this.obj,
              tenantObj: this.form.tenantObj,
              apmeObj: this.form.apmeObj
            }
            if (this.form.ampeId) {
              this.onSelectChange('ampeId', this.form.ampeId)
            }
            if (this.form.tenantId) {
              this.onSelectChange('tenantId', this.form.tenantId)
            }
          }
        })
      })
    },
    // 状态切换
    onSelectChange(field, value) {
      console.log('onSelectChange', field, value)
      switch (field) {
        // Ampe平台名称
        case 'ampeId':
          if (value) {
            const item = (this.ampeDataList || []).filter(v => v.ampeId == value)[0] || {}
            console.log('ampeId', value, item)
            this.form.apmeObj = {
              productId: item.productId || '', // 产品ID
              hostAppId: item.hostAppId || '', // 调用应用
              appId: item.appId || '', // 小程序
              appName: item.appName || ''// 小程序名称
            }
          } else {
            console.log('ampeId', value)
            this.form.apmeObj = {
              productId: null, // 产品ID
              hostAppId: null, // 调用应用
              appId: null, // 小程序
              appName: null// 小程序名称
            }
          }
          break
        // 服务商平台名称
        case 'tenantId':
          if (value) {
            const item = (this.merchantLists || []).filter(v => v.id == value)[0] || {}
            console.log('tenantId', value, item)
            this.form.tenantObj = {
              deviceAppID: item.machineAppId || '', // 设备appId
              merchantAppID: item.serviceAppId || '', // 商户appid
              merchantPlatformAddress: item.serviceAddress || '', // 商户平台地址
              inboundInterfaceAddress: item.faceinAddress || ''// 入库接口地址
            }
          } else {
            console.log('tenantId', value)
            this.form.tenantObj = {
              deviceAppID: null, // 设备appId
              merchantAppID: null, // 商户appid
              merchantPlatformAddress: null, // 商户平台地址
              inboundInterfaceAddress: null// 入库接口地址
            }
          }
          break
      }
    },
    clickManualIn(n) {
      if (n) {
        this.dialogVisible = true
      }
    },
    back() {
      this.$emit('back')
    },
    getMicrophoneTypeList() {
      microphoneTypeList().then((res) => {
        this.microphoneTypeList = res.data
      })
    },
    getPrinterList() {
      printerConfigList().then((res) => {
        this.printerList = res.data
      })
    },
    getIdCardReaderBrandList() {
      getIdCardReaderBrand().then((res) => {
        this.brandList = res.data
      })
    },
    getMerchantList() {
      return new Promise((resolve) => {
        getAllList().then((res) => {
          this.merchantLists = res.data
        }).finally(() => {
          resolve()
        })
      })
    },
    getSceneList() {
      getSceneList({ pageNumber: 1, pageSize: 1000 }).then((res) => {
        this.sceneList = res.data.records
      })
    },
    getUserlibList() {
      getUserLibList().then((res) => {
        this.userLibList = 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
      }
      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)
      })
    },
    closeDialog() {
      console.log(this.manualInIdCardAuth)
      this.$refs.manualInIdCardAuthForm.validate(async(valid) => {
        if (!valid) {
          return false
        } else {
          this.dialogVisible = false
          this.form.manualInIdCardAuth = this.manualInIdCardAuth
        }
      })
    },
    submit(e) {
      console.log(this.form)
      e.preventDefault()
      this.$refs.form.validate(async(valid) => {
        if (!valid) {
          return false
        }
        if (this.submitLoading) {
          return
        }
        this.submitLoading = true
        try {
          if (!this.form.startPageUrl) {
            this.form.startPageUrl =
              'https://tx.hz-hanghui.com:8088/yx-fyzd/file/upload/imagesnew/20231229/456937883614314496.png'
          }
          if (!this.form.homePageUrl) {
            this.form.homePageUrl =
              'https://tx.hz-hanghui.com:8088/yx-fyzd/file/upload/imagesnew/20240102/458407383241064448.png'
          }
          if (!this.form.isOpenMicrophone) {
            this.form.microphoneType = 1
          }
          await templateEdit(this.form)
          this.$message({
            message: `${this.form.id ? '修改' : '添加'}成功!`,
            type: 'success'
          })
          this.$emit('back')
        } catch (e) {
          console.info('add', e)
        } finally {
          this.submitLoading = false
        }
      })
    },
    // 获取应用类型列表
    applicationTypeList() {
      applicationTypeList().then((res) => {
        this.applicationList = res.data
      })
    },
    // 设备型号列表
    deviceModelList() {
      deviceModelList().then((res) => {
        this.devicelList = res.data
      })
    },
    // ampe列表
    ampeList() {
      ampeList().then((res) => {
        this.ampeDataList = res.data
      })
    }
  }
}
</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>

.m-r-0 {
  margin-right: 0;
}
.m-r-10 {
  margin-right: 40px;
  margin-left: 6px;
}
.m-r-60 {
  margin-right: 60px;
}
.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>
