<template>
  <div class="wrap-layout">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="160px"
      label-position="left"
    >
      <div class="item-layout">
        <span class="prompt">设备基本信息</span>
        <div class="display-config-layout">
          <el-form-item label="设备sn" prop="sn" required>
            <el-input
              v-model="form.sn"
              placeholder="请输入设备sn"
              maxlength="100"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="服务商平台名称" prop="tenantId" required>
            <el-select
              v-model="form.tenantId"
              placeholder="服务商平台名称"
              filterable
            >
              <el-option
                v-for="(item, index) in merchantLists"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="公司名称" prop="company" required>
            <el-input
              v-model="form.company"
              placeholder="请输入公司名称"
              maxlength="50"
            />
          </el-form-item>
          <el-form-item label="场景" prop="sceneId" :required="false">
            <el-select
              v-model="form.sceneId"
              placeholder="请选择场景"
              clearable
            >
              <el-option
                v-for="(item, index) in sceneLists"
                :key="index"
                :label="item.sceneName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="模式" prop="mode" required>
            <el-select v-model="form.mode" placeholder="请选择模式">
              <el-option
                v-for="(item, index) in modeLists"
                :key="index"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="!(!form.mode || form.mode === 'public')"
            label="⽤户库"
            prop="userLibId"
            :required="false"
          >
            <el-select
              v-model="form.userLibId"
              placeholder="请选择⽤户库"
              clearable
            >
              <el-option
                v-for="(item, index) in userlibLists"
                :key="index"
                :label="item.userLibName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="item-layout">
        <span class="prompt">采集配置</span>
        <div class="display-config-layout">
          <el-form-item
            label="启用支付宝人脸能力"
            prop="useAlipayFace"
            required
          >
            <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>
          <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>
          <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>
          <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>
          <el-form-item label="是否开启护照机" prop="isOpenPassport">
            <el-radio-group v-model="form.isOpenPassport">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </div>
      <div v-if="form.useAlipayFace" class="item-layout">
        <span class="prompt">支付宝刷脸配置</span>
        <div class="display-config-layout">
          <el-form-item label="刷脸模式" prop="faceMode">
            <el-radio-group v-model="form.faceMode">
              <el-radio label="auto">自动</el-radio>
              <el-radio label="click">点击</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="form.faceMode === 'click'"
            label="点击刷脸按钮的文本"
            prop="clickButtonText"
          >
            <el-input
              v-model="form.clickButtonText"
              placeholder="请输入点击刷脸按钮的文本"
              maxlength="50"
            />
          </el-form-item>
          <el-form-item
            v-if="form.faceMode === 'click'"
            label="是否抓拍人脸"
            prop="isCaptureFace"
          >
            <el-radio-group v-model="form.isCaptureFace">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            class="overlength"
            label="need1V1是否使用支付宝刷证提示页"
            prop="isNeed1V1"
          >
            <el-radio-group v-model="form.isNeed1V1">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="通行方式" prop="passWay" :required="false">
            <el-select
              v-model="form.passWay"
              placeholder="请选择通行方式"
              clearable
            >
              <el-option
                v-for="(item, index) in trafficMode"
                :key="index"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="item-layout">
        <span class="prompt">联动平台配置</span>
        <div class="display-config-layout">
          <el-form-item label="启用联动平台" prop="useLinkage">
            <el-radio-group v-model="form.useLinkage">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="form.useLinkage"
            label="联动平台地址"
            prop="linkageAds"
          >
            <el-input
              v-model="form.linkageAds"
              placeholder="请输入联动平台地址"
              maxlength="100"
            />
          </el-form-item>
        </div>
      </div>
      <div class="item-layout">
        <span class="prompt">结果页配置</span>
        <div class="display-config-layout">
          <el-form-item
            class="overlength"
            label="刷脸成功结果页时长（1~10）"
            prop="successPageTime"
          >
            <el-input-number
              v-model="form.successPageTime"
              size="mini"
              :min="1"
              :max="10"
            />
          </el-form-item>
          <el-form-item
            class="overlength"
            label="刷脸失败结果页时长（1~10）"
            prop="failPageTime"
          >
            <el-input-number
              v-model="form.failPageTime"
              size="mini"
              :min="1"
              :max="10"
            />
          </el-form-item>
          <el-form-item label="开门信号" prop="useSerialPort">
            <el-radio-group v-model="form.useSerialPort">
              <el-radio label="default" style="margin-right: 40px"
                >继电器</el-radio
              >
              <el-radio label="RS232">RS232</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="form.useSerialPort === 'RS232'"
            label="RS232默认信号"
            prop="signalNo"
          >
            <el-input
              v-model="form.signalNo"
              placeholder="请输入RS232默认信号"
              maxlength="100"
            />
          </el-form-item>
          <el-form-item label="成功语音" prop="sucVoice">
            <el-input
              v-model="form.sucVoice"
              placeholder="请输入成功语音"
              maxlength="50"
            />
          </el-form-item>
          <el-form-item label="成功文字" prop="sucText">
            <el-input
              v-model="form.sucText"
              placeholder="请输入成功文字"
              maxlength="50"
            />
          </el-form-item>
          <el-form-item label="失败语音" prop="failVoice">
            <el-input
              v-model="form.failVoice"
              placeholder="请输入成功语音"
              maxlength="50"
            />
          </el-form-item>
          <el-form-item label="失败文字" prop="failText">
            <el-input
              v-model="form.failText"
              placeholder="请输入失败文字"
              maxlength="50"
            />
          </el-form-item>
          <el-form-item label="通行统计顶部栏" prop="showTopBar">
            <el-radio-group v-model="form.showTopBar">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <template v-if="form.showTopBar">
            <el-form-item label="左侧文字" prop="leftTopBarText">
              <el-input
                v-model="form.leftTopBarText"
                placeholder="请输入左侧文字"
                maxlength="50"
              />
            </el-form-item>
            <el-form-item label="右侧文字" prop="rightTopBarText">
              <el-input
                v-model="form.rightTopBarText"
                placeholder="请输入右侧文字"
                maxlength="50"
              />
            </el-form-item>
          </template>
        </div>
      </div>
      <div class="item-layout">
        <span class="prompt">推送地址配置</span>
        <div class="display-config-layout">
          <el-form-item label="设备状态推送地址" prop="heartTrackingUrl">
            <el-input
              v-model="form.heartTrackingUrl"
              placeholder="请输入"
              maxlength="200"
            />
          </el-form-item>
          <el-form-item label="进出记录推送地址" prop="transitPushUrl">
            <el-input
              v-model="form.transitPushUrl"
              placeholder="请输入"
              maxlength="200"
            />
          </el-form-item>
        </div>
      </div>

      <div class="item-layout">
        <span class="prompt">页面背景配置</span>
        <div class="display-config-layout">
          <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>
          <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>
      <div class="item-layout">
        <span class="prompt">功能配置</span>
        <div class="display-config-layout">
          <el-form-item label="是否开启年龄限制" prop="isOpenAgeLimit">
            <el-radio-group v-model="form.isOpenAgeLimit">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="限制区间" v-if="form.isOpenAgeLimit">
            <el-input-number
              v-model="form.limitSectionStart"
              size="mini"
              :min="0"
              :max="100"
            />
            至
            <el-input-number
              v-model="form.limitSectionEnd"
              size="mini"
              :min="0"
              :max="100"
            />
          </el-form-item>
          <el-form-item
            label="禁止进入文本"
            prop="ageForbidText"
            v-if="form.isOpenAgeLimit"
          >
            <el-input
              v-model="form.ageForbidText"
              placeholder="请输入"
              maxlength="200"
            />
          </el-form-item>
          <el-form-item label="是否推送门磁信号" prop="isPushGM">
            <el-radio-group v-model="form.isPushGM">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="门磁信号推送地址"
            prop="GMAddress"
            v-if="form.isPushGM"
          >
            <el-input
              show-word-limit
              v-model="form.GMAddress"
              placeholder="请输入"
              maxlength="200"
            />
          </el-form-item>
          <el-form-item
            label="门磁信号推送频率"
            prop="GMFrequency"
            v-if="form.isPushGM"
          >
            <el-input-number v-model="form.GMFrequency" size="mini" :min="1" />
          </el-form-item>
        </div>
      </div>
      <div class="item-layout">
        <span class="prompt">系统配置</span>
        <div class="display-config-layout">
          <el-form-item label="管理员密码" prop="mpassword">
            <el-input
              v-model="form.mpassword"
              placeholder="请输入"
              maxlength="50"
            />
          </el-form-item>
          <el-form-item label="补光灯" prop="lightMode">
            <el-select v-model="form.lightMode" placeholder="请选择补光灯模式">
              <el-option
                v-for="(item, index) in lightModeLists"
                :key="index"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-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>
          <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>
          <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>
          <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>
      <div class="item-layout">
        <span class="prompt">zoloConfig摄像头配置</span>
        <div class="display-config-layout">
          <el-form-item label="预览角度" prop="displayAngle">
            <el-input-number
              v-model="form.zoloConfig.displayAngle"
              size="mini"
              :min="0"
              :max="270"
            />
          </el-form-item>
          <el-form-item label="送算法的图像角度" prop="algorithmAngle">
            <el-input-number
              v-model="form.zoloConfig.algorithmAngle"
              size="mini"
              :min="0"
              :max="270"
            />
          </el-form-item>
          <el-form-item label="用于ir摄像头算法角度" prop="supAlgorithmAngle">
            <el-input-number
              v-model="form.zoloConfig.supAlgorithmAngle"
              size="mini"
              :min="1"
              :max="270"
            />
          </el-form-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>
          <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>
    </el-form>
    <div class="foot-layout">
      <el-button style="margin-left: 20px; width: 120px" @click="back"
        >取 消</el-button
      >
      <div style="width: 80px" />
      <el-button
        type="primary"
        style="width: 120px"
        :loading="submitLoading"
        @click="submit"
        >提 交</el-button
      >
    </div>
  </div>
</template>

<script>
import { add } from "@/api/device";
import { pictureLocal } from "@/api/ordinary_user";
import { getAllList } from "@/api/merchant";
import { getList as getSceneList } from "@/api/scene";
import { getList as getUserlibList } from "@/api/userlib";

export default {
  name: "EditDevice",
  props: {
    obj: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      submitLoading: false,
      merchantLists: [],
      sceneLists: [],
      userlibLists: [],
      modeLists: [
        {
          key: "public",
          value: "开放",
        },
        {
          key: "close",
          value: "封闭",
        },
        {
          key: "elasticity",
          value: "弹性",
        },
      ],
      lightModeLists: [
        {
          key: "auto",
          value: "自动",
        },
        {
          key: "close",
          value: "关闭",
        },
        {
          key: "open",
          value: "常亮",
        },
      ],
      form: {
        // 点击刷脸按钮文本 默认 点击开始刷脸核验
        clickButtonText: "点击开始刷脸核验",
        // 公司名称
        company: null,
        // 刷脸模式: 点击/自动 click/auto 默认 auto
        faceMode: "auto",
        // 刷脸失败结果页时长 1-10 默认值5
        failPageTime: 3,
        // 失败文字 默认: 比对失败,请联系现场工作人员
        failText: "比对失败,请联系现场工作人员",
        // 失败语音 默认: 比对失败,请联系现场工作人员
        failVoice: "比对失败,请联系现场工作人员",
        // 	禁止下拉通知栏 默认: false
        forbidPullDown: false,
        // 隐藏底部导航栏 默认: false
        hideNavigationBar: false,
        // 首页图片配置
        homePageUrl: null,
        id: null,
        // 是否抓拍人脸 默认：false
        isCaptureFace: false,
        // need1V1是否使用支付宝刷证提示页 默认：true
        isNeed1V1: true,
        // 补光灯: 自动 auto 默认:auto
        lightMode: "auto",
        // 	联动平台地址
        linkageAds: "115.227.34.58:1832",
        // 模式 mode: public/close/elasticity 三个参数分别代表 开放/封闭/弹性
        mode: null,
        // 场景id
        sceneId: null,
        // RS232默认信号
        signalNo: null,
        // 设备sn
        sn: null,
        // 授权状态 false：未授权 true：已授权
        status: null,
        // 成功文字 默认: 请通行
        sucText: "请通行",
        // 成功语音 默认: 请通行
        sucVoice: "请通行",
        // 刷脸成功结果页时长 1-10 默认值2
        successPageTime: 2,
        // 商户id tenantId
        tenantId: null,
        // 过渡图片
        transitionPageUrl: null,
        // 是否启用支付宝人脸能力 默认：true
        useAlipayFace: true,
        // 是否启用身份证功能 默认：true
        useIdcard: true,
        // 	是否启用联动平台 默认：true
        useLinkage: true,
        // 	是否人证比对 默认：false
        usePersonCard: false,
        // 是否启用二维码功能 默认：true
        useQrcode: true,
        // 	开门信号: 继电器/RS232 default/RS232 默认：default
        useSerialPort: "default",
        // 用户库id
        userLibId: null,
        // 语音音量 0-100 默认值80
        volume: 80,
        // zoloConfig摄像头配置
        zoloConfig: {
          // RGB摄像头旋转角度 0-270 默认值270
          algorithmAngle: 270,
          // IR摄像头旋转角度 0-270 默认值270
          displayAngle: 90,
          // IR摄像头镜像 默认值false
          isDisplayMirror: true,
          // RGB摄像头镜像 默认值true
          isMirror: true,
          // 摄像头显示角度 0-270 默认值90
          supAlgorithmAngle: 270,
        },
        // 设备状态推送地址
        heartTrackingUrl:
          "https://tx.hz-hanghui.com:8088/yx-fyzd/api/v1/fkj/heart/tracking",
        // 进出记录推送地址
        transitPushUrl: "https://tx.hz-hanghui.com:8088/yx-fyzd/EventRecords",
        showTopBar: true,
        leftTopBarText: "已/可通行人数",
        rightTopBarText: "今日刷脸成功人数",
        passWay: "normal",
        isOpenAgeLimit: false,
        limitSectionStart: 0,
        limitSectionEnd: 18,
        ageForbidText: "未满18岁禁止进入",
        mpassword: "",
        isOpenPassport: false,
        isPushGM: false,
        GMAddress: "",
        GMFrequency: 1000,
        autoLaunch: false,
      },
      rules: {
        sn: [
          {
            required: true,
            whitespace: true,
            message: "不能为空!",
            trigger: ["change", "blur"],
          },
        ],
        tenantId: [
          {
            required: true,
            type: "number",
            whitespace: true,
            message: "不能为空!",
            trigger: ["change", "blur"],
          },
        ],
        company: [
          {
            required: true,
            whitespace: true,
            message: "不能为空!",
            trigger: ["change", "blur"],
          },
        ],
        mode: [
          {
            required: true,
            whitespace: true,
            message: "不能为空!",
            trigger: ["change", "blur"],
          },
        ],
        useAlipayFace: [
          {
            required: true,
            type: "boolean",
            whitespace: true,
            message: "不能为空!",
            trigger: "blur",
          },
        ],
      },
      trafficMode: [
        { name: "通用", code: "normal" },
        { name: "进站刷脸全量通行", code: "inStation" },
        { name: "出站刷脸全量通行", code: "outStation" },
      ],
    };
  },
  watch: {
    "form.mode": {
      handler(value) {
        if (!value || value === "public") {
          this.form.userLibId = null;
        }
      },
      immediate: true,
    },
  },
  // watch: {
  //   obj: {
  //     handler(value) {
  //       let temp = null
  //       if (value) {
  //         temp = value
  //         if (!temp.zoloConfig) {
  //           temp.zoloConfig = this.form.zoloConfig
  //         }
  //       }
  //       this.form = temp
  //       console.info('obj-->', this.form)
  //     },
  //     immediate: true
  //   }
  // },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.getMerchantList();
      this.getSceneList();
      this.getUserlibList();
      this.$nextTick(() => {
        if (this.obj) {
          if (!this.obj.zoloConfig) {
            this.obj.zoloConfig = this.form.zoloConfig;
          }
          this.form = this.obj;
        }
      });
    },
    back() {
      this.$emit("back");
    },
    getMerchantList() {
      getAllList().then((res) => {
        this.merchantLists = res.data;
      });
    },
    getSceneList() {
      getSceneList({ pageNumber: 1, pageSize: 1000 }).then((res) => {
        this.sceneLists = res.data.records;
      });
    },
    getUserlibList() {
      getUserlibList({ pageNumber: 1, pageSize: 1000 }).then((res) => {
        this.userlibLists = res.data.records;
      });
    },
    handleRemove(type) {
      if (type) {
        this.form[type] = null;
      }
    },
    // 图片上传前
    beforeAvatarUpload(file) {
      if (
        !(
          file.type === "image/png" ||
          file.type === "image/gif" ||
          file.type === "image/jpg" ||
          file.type === "image/jpeg"
        )
      ) {
        this.$notify.warning({
          title: "警告",
          message:
            "请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片",
        });
        return;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$notify.warning({
          title: "警告",
          message: "图片大小必须小于2M",
        });
        return;
      }
    },
    doUploadAvatar(obj, type) {
      this.listLoading = true;
      var avatar = new FormData();
      avatar.append("file", obj.file);
      pictureLocal(avatar).then((res) => {
        this.value = res.data;
        this.listLoading = false;
        this.$set(this.form, type, res.data);
      });
    },
    submit(e) {
      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.useAlipayFace) {
          //   this.form.faceMode = 'auto'
          //   this.form.isNeed1V1 = true
          // }
          // 通行统计顶部栏
          if (!this.form.showTopBar) {
            this.form.leftTopBarText = null;
            this.form.rightTopBarText = null;
          }
          // 是否启用联动平台
          if (!this.form.useLinkage) {
            this.form.linkageAds = null;
          }

          // 刷脸模式 非点击
          if (this.form.faceMode !== "click") {
            this.form.clickButtonText = null;
            this.form.isCaptureFace = false;
          }

          // 开门信号
          if (this.form.useSerialPort !== "RS232") {
            this.form.signalNo = null;
          }
          if (!this.form.transitionPageUrl) {
            this.form.transitionPageUrl =
              "https://tx.hz-hanghui.com:8088/yx-fyzd/file/upload/imagesnew/20231016/430151585541128192.png";
          }
          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" scoped>
.wrap-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 1120px;
  form {
    width: 100%;
  }

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

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

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