<template>
  <a-form
    :model="form"
    :label-col="{sm: { span: 8 } }"
    :wrapper-col="{ span:24}"
    ref="formRef"
  >
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="useRecharge"
          :rules="[{ required: true, message: '请选择是否充值后用车' }]"
        >
          <template #label>
            是否充值后用车
            <a-tooltip title="是否开通用户必须充值才能骑车">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.useRecharge"
            name="radioGroup"
            @change="changeUseRecharge"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col
        v-if="showMinimumAmount"
        :xs="12"
      >
        <a-form-item
          required
          name="minimumAmount"
          :rules="[{ required: true, message: '请输入用车最低余额' }]"
        >
          <template #label>
            用车最低余额
            <a-tooltip title="账户最低的金额，大于等于这个才允许借车">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-input
            v-model:value="form.minimumAmount"
            placeholder="请输入用车最低余额"
            type="number"
            :prefix="prefixText"
            @change="changeMinimumAmount"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="pendingRecharge"
          :rules="[{ required: true, message: '请选择开启待支付充值' }]"
        >
          <template #label>
            开启待支付充值
            <a-tooltip title="用车结束后判断用户余额低于待支付金额时推荐充值后支付">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.pendingRecharge"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col :xs="12">
        <a-form-item
          :extra="extraTextByRidingFace"
          required
          name="ridingFaceRecognition"
          :rules="[{ required: true, message: '请选择骑行开启人脸识别' }]"
        >
          <template #label>
            骑行开启人脸识别
            <a-tooltip title="每次借车前是否需要人脸识别">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.ridingFaceRecognition"
            name="radioGroup"
            @change="changeRidingFaceRecognition"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          :extra="extraTextByOverFace"
          required
          name="overFaceRecognition"
          :rules="[{ required: true, message: '请选择还车开启人脸识别' }]"
        >
          <template #label>
            还车开启人脸识别
            <a-tooltip title="每次还车前是否需要人脸识别">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.overFaceRecognition"
            name="radioGroup"
            @change="changeOverFaceRecognition"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col
        v-if="faceRecognitionFlag"
        :xs="12"
      >
        <a-form-item
          required
          name="verificationInterval"
          :rules="[{ required: true, message: '请输入人脸验证间隔' }]"
        >
          <template #label>
            人脸验证间隔(分钟)
            <a-tooltip title="骑行的时候人脸有效时间，默认为0分钟，设置了人脸识别之后在设置的时间内就不需要再次进行人脸识别">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-input
            v-model:value="form.verificationInterval"
            placeholder="请输入人脸验证间隔"
            type="number"
          />
        </a-form-item>
      </a-col>
      <a-col
        v-if="faceRecognitionFlag"
        :xs="12"
      >
        <a-form-item
          required
          label="智能跳过人脸开关"
          name="intelligentSkipping"
          :rules="[{ required: true, message: '请选择智能跳过人脸开关' }]"
        >
          <a-radio-group
            v-model:value="form.intelligentSkipping"
            name="radioGroup"
            @change="changeIntelligentSkipping"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col
        v-if="intelligentSkippingFlag"
        :xs="12"
      >
        <a-form-item
          required
          label="跳过人脸时间(小时)"
          name="skipTime"
          :rules="[{ required: true, message: '请输入跳过人脸时间' }]"
        >
          <a-input
            v-model:value="form.skipTime"
            placeholder="请输入跳过人脸时间"
            type="number"
          />
        </a-form-item>
      </a-col>
      <a-col
        v-if="intelligentSkippingFlag"
        :xs="12"
      >
        <a-form-item
          required
          label="跳过人脸错误次数(次)"
          name="skipErrorCount"
          :rules="[{ required: true, message: '请输入跳过人脸错误次数' }]"
        >
          <a-input
            v-model:value="form.skipErrorCount"
            placeholder="请输入跳过人脸错误次数"
            type="number"
          />
        </a-form-item>
      </a-col>
      <a-col :xs="12">
        <a-form-item
          required
          name="autoDeduction"
          :rules="[{ required: true, message: '请选择开启自动扣款' }]"
        >
          <template #label>
            开启自动扣款
            <a-tooltip title="用户账上有余额、骑行卡、优惠券将进行自动抵扣">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.autoDeduction"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="payFirst"
          :rules="[{ required: true, message: '请选择开启先付款后还车' }]"
        >
          <template #label>
            开启先付款后还车
            <a-tooltip title="开启后用户需要先付款才能进行锁车">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.payFirst"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col :xs="12">
        <a-form-item
          required
          name="minPower"
          :rules="[{ required: true, message: '请输入禁止用户借车电量' }]"
          :label-col="{ sm: { span: 10 }}"
          :wrapper-Col="{span: 24 }"
        >
          <template #label>
            禁止用户借车电量(%)
            <a-tooltip title="电量小于这个值的时候无法借车">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-input
            v-model:value="form.minPower"
            placeholder="请输入禁止用户借车电量"
            type="number"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="24">
        <a-form-item
          required
          name="enableNoLocation"
          :rules="[{ required: true, message: '请选择车辆无坐标开放骑行' }]"
          :label-col="{ sm: { span: 5 }}"
          :wrapper-Col="{span: 24 }"
        >
          <template #label>
            车辆无坐标开放骑行
            <a-tooltip title="借车是否判断车辆的坐标，选是借完车后车子可能会不存在轨迹，导致找车困难。">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.enableNoLocation"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="poweroffCapcity"
          :rules="[{ required: true, message: '请输入低电骑行断电电量' }]"
        >
          <template #label>
            低电骑行断电电量
            <a-tooltip title="电量小于这个值的时候车辆将会断电，不会锁车，用户可以临时通电">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-input
            v-model:value="form.poweroffCapcity"
            placeholder="请输入低电骑行断电电量"
            type="number"
          />
        </a-form-item>
      </a-col>
      <a-col :xs="12">
        <a-form-item
          required
          name="limitDistance"
          :rules="[{ required: true, message: '请输入借车限制距离' }]"
        >
          <template #label>
            借车限制距离
            <a-tooltip title="借车判断用户的坐标，当车人跟的距离小于某个距离才允许开锁 ,0为不限制，设置了后当距离小于的时候才可以开锁。">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-input
            v-model:value="form.limitDistance"
            placeholder="请输入借车限制距离"
            type="number"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          label="是否开启低电提醒"
          name="lowBatteryReminder"
          :rules="[{ required: true, message: '请选择是否开启低电提醒' }]"
        >
          <a-radio-group
            v-model:value="form.lowBatteryReminder"
            name="radioGroup"
            @change="changeLowBatteryReminder"
          >
            <a-radio value="1">开启</a-radio>
            <a-radio value="2">关闭</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col
        v-if="showLowBatteryReminderFrequency"
        :xs="12"
      >
        <a-form-item
          required
          label="低电提醒频率(分钟)"
          name="lowBatteryReminderFrequency"
          :rules="[{ required: true, message: '请输入低电提醒频率' }]"
        >
          <a-input
            v-model:value="form.lowBatteryReminderFrequency"
            placeholder="请输入低电提醒频率"
            type="number"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="nodepositCard"
          :rules="[{ required: true, message: '请选择购买免押卡用车' }]"
        >
          <template #label>
            购买免押卡用车
            <a-tooltip title="用户需要先购买免押卡才可以用车">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.nodepositCard"
            name="radioGroup"
          >
            <a-radio value="1">开启</a-radio>
            <a-radio value="2">关闭</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col :xs="12">
        <a-form-item
          required
          label="是否同步电量里程"
          name="synicCapcityMileage"
          :rules="[{ required: true, message: '请选择是否同步电量里程' }]"
        >
          <a-radio-group
            v-model:value="form.synicCapcityMileage"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          label="区域外是否可用车"
          name="useOuter"
          :rules="[{ required: true, message: '请选择区域外是否可用车' }]"
        >
          <a-radio-group
            v-model:value="form.useOuter"
            name="radioGroup"
            @change="changeUseOuter"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col
        v-if="showUseOutTime"
        :xs="12"
      >
        <a-form-item
          required
          label="区域外可用车时间（分钟）"
          name="useOutTime"
          :rules="[{ required: true, message: '请输入区域外可用车时间' }]"
        >
          <a-input
            v-model:value="form.useOutTime"
            placeholder="请输入区域外可用车时间"
            type="number"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          label="骑行超区临时通电"
          name="outerTempRecharge"
          :rules="[{ required: true, message: '请选择骑行超区临时通电' }]"
        >
          <a-radio-group
            v-model:value="form.outerTempRecharge"
            name="radioGroup"
            @change="changeOuterTempRecharge"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col
        v-if="showOutTempPoweredOnTime"
        :xs="12"
      >
        <a-form-item
          required
          label="区域外临时通电时间(分钟)"
          name="outTempPoweredOnTime"
          :rules="[{ required: true, message: '请输入区域外临时通电时间' }]"
          :label-col="{ sm: { span: 10 }}"
          :wrapper-Col="{span: 24 }"
        >
          <a-input
            v-model:value="form.outTempPoweredOnTime"
            placeholder="请输入区域外临时通电时间"
            type="number"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="smartHelmet"
          :rules="[{ required: true, message: '请选择开启智能头盔' }]"
        >
          <template #label>
            开启智能头盔
            <a-tooltip title="安装了智能头盔的城市开启后会自动出来智能头盔的选项">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.smartHelmet"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col :xs="12">
        <a-form-item
          required
          label="超区是否允许打开头盔"
          name="outerOpenHelmet"
          :rules="[{ required: true, message: '请选择超区是否允许打开头盔' }]"
          :label-col="{ sm: { span: 9 }}"
          :wrapper-Col="{span: 24 }"
        >
          <a-radio-group
            v-model:value="form.outerOpenHelmet"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="autoPopupHelmet"
          :rules="[{ required: true, message: '请选择开启自动弹出头盔' }]"
        >
          <template #label>
            开启自动弹出头盔
            <a-tooltip title="开启后头盔会自动弹出">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.autoPopupHelmet"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col :xs="12">
        <a-form-item
          required
          name="nohelmetLimit"
          :rules="[{ required: true, message: '请选择头盔不在位用车限制' }]"
          :label-col="{ sm: { span: 9 }}"
          :wrapper-Col="{span: 24 }"
        >
          <template #label>
            头盔不在位用车限制
            <a-tooltip title="头盔不在位用车限制">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.nohelmetLimit"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="forceHelmetReturn"
          :rules="[{ required: true, message: '请选择开启强制归还头盔' }]"
        >
          <template #label>
            开启强制归还头盔
            <a-tooltip title="归还的时候是否需要强制归还头盔，开启后头盔不收费，但是会要求强制归还头盔">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.forceHelmetReturn"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col :xs="12">
        <a-form-item
          required
          label="是否取头盔通电"
          name="poweronHelmetTaking"
          :rules="[{ required: true, message: '请选择是否取头盔通电' }]"
        >
          <a-radio-group
            v-model:value="form.poweronHelmetTaking"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="poweronHelmetPutting"
          :rules="[{ required: true, message: '请选择是否佩戴头盔通电' }]"
        >
          <template #label>
            是否佩戴头盔通电
            <a-tooltip title="开锁用车和骑行中保持佩戴头盔，否则将会断电">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.poweronHelmetPutting"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col :xs="12">
        <a-form-item
          required
          label="临时锁车需要归还头盔"
          name="returnHelmetTempLock"
          :rules="[{ required: true, message: '请选择是否取头盔通电' }]"
          :label-col="{ sm: { span: 9 }}"
          :wrapper-Col="{span: 24 }"
        >
          <a-radio-group
            v-model:value="form.returnHelmetTempLock"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="borrowOutside"
          :rules="[{ required: true, message: '请选择桩位外是否可借车' }]"
        >
          <template #label>
            桩位外是否可借车
            <a-tooltip title="桩位外借车开关，开启则允许在桩位外借车">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.borrowOutside"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col :xs="12">
        <a-form-item
          required
          name="forbidWhileDispatch"
          :rules="[{ required: true, message: '请选择调度中禁止骑行' }]"
        >
          <template #label>
            调度中禁止骑行
            <a-tooltip title="调度中禁止骑行，开启则调度中禁止骑行">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.forbidWhileDispatch"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="disableReturnLimit"
          :rules="[{ required: true, message: '请选择是否关闭还车区域限制' }]"
          :label-col="{ sm: { span: 10 }}"
          :wrapper-Col="{span: 24 }"
        >
          <template #label>
            是否关闭还车区域限制
            <a-tooltip title="是否关闭还车区域限制（运营区、禁停区）">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.disableReturnLimit"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col :xs="12">
        <a-form-item
          required
          name="spikePoweroff"
          :rules="[{ required: true, message: '请选择是否开启道钉断电' }]"
        >
          <template #label>
            是否开启道钉断电
            <a-tooltip title="开启道钉断电后，检测到道钉后，车辆会断电">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.spikePoweroff"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="24">
        <a-form-item
          required
          name="forbidZoneNoborrow"
          :rules="[{ required: true, message: '请选择禁行区不可借车' }]"
          :label-col="{ sm: { span: 4 }}"
          :wrapper-Col="{span: 24 }"
        >
          <template #label>
            禁行区不可借车
            <a-tooltip title="开启禁行区不可借车后，检测车辆处于禁行区内，用户不可借车">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.forbidZoneNoborrow"
            name="radioGroup"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup>
import { ref, defineProps } from 'vue'
import _ from 'lodash'
import { callOperate } from '@/apis/call.js'
const formRef = ref();
const showMinimumAmount = ref(false);
const form = ref({
  tableName: 'ebikeSysRusecondsetDto'
});
const prefixText = ref("");
const extraTextByRidingFace = ref("");
const extraTextByOverFace = ref("");
const faceRecognitionFlag = ref(false);
const intelligentSkippingFlag = ref(false);
const showLowBatteryReminderFrequency = ref(false);
const useOutTime = ref(false);
const showOutTempPoweredOnTime = ref(false);


const changeUseRecharge = (e) => {
  const value = e.target.value;
  if (value == '1') {
    showMinimumAmount.value = true
  } else {
    showMinimumAmount.value = false
    form.value.minimumAmount = null;
  }
}

const changeUseOuter = (e) => {
  const value = e.target.value;
  if (value == '1') {
    useOutTime.value = true
  } else {
    useOutTime.value = false
    form.value.useOutTime = null;
  }
}

const changeOuterTempRecharge = (e) => {
  const value = e.target.value;
  if (value == '1') {
    showOutTempPoweredOnTime.value = true
  } else {
    showOutTempPoweredOnTime.value = false
    form.value.outTempPoweredOnTime = null;
  }
}

const changeLowBatteryReminder = (e) => {
  const value = e.target.value;
  if (value == '1') {
    showLowBatteryReminderFrequency.value = true
  } else {
    showLowBatteryReminderFrequency.value = false
    form.value.lowBatteryReminderFrequency = null;
  }
}

const changeIntelligentSkipping = (e) => {
  const value = e.target.value;
  if (value == '1') {
    intelligentSkippingFlag.value = true
  } else {
    intelligentSkippingFlag.value = false
    form.value.skipTime = null;
    form.value.skipErrorCount = null;
  }
}
const changeRidingFaceRecognition = (e) => {
  const value = e.target.value;
  if (value == '1') {
    extraTextByRidingFace.value = "开启需要额外收费，请联系技服人员确认"
  } else {
    extraTextByRidingFace.value = ""
  }
}

const changeOverFaceRecognition = (e) => {
  const value = e.target.value;
  if (value == '1') {
    faceRecognitionFlag.value = true
    extraTextByOverFace.value = "开启需要额外收费，请联系技服人员确认"
  } else {
    extraTextByOverFace.value = ""
    faceRecognitionFlag.value = false
    form.value.verificationInterval = null;
    form.value.intelligentSkipping = null;
    form.value.skipTime = null;
    form.value.skipErrorCount = null;
  }
}
const changeMinimumAmount = (e) => {
  const value = e.target.value;
  if (value != "") {
    prefixText.value = "￥"
  } else {
    prefixText.value = ""
  }
}

const validateForm = async () => {
  await formRef.value.validate();
  const formData = _.cloneDeep(formRef.value.getFieldsValue());
  formData['tableName'] = form.value.tableName
  formData['id'] = form.value.id
  return formData;
}

const loadFormData = (formData) => {
  if (formData) {
    form.value = { ...form.value, ...formData }
    if (formData['minimumAmount']) {
      changeMinimumAmount({ target: { value: formData['minimumAmount'] } })
    }
    if (formData['useRecharge']) {
      changeUseRecharge({ target: { value: formData['useRecharge'] } })
    }
    if (formData['ridingFaceRecognition']) {
      changeRidingFaceRecognition({ target: { value: formData['ridingFaceRecognition'] } })
    }
    if (formData['overFaceRecognition']) {
      changeOverFaceRecognition({ target: { value: formData['overFaceRecognition'] } })
    }
    if (formData['intelligentSkipping']) {
      changeIntelligentSkipping({ target: { value: formData['intelligentSkipping'] } })
    }
    if (formData['lowBatteryReminder']) {
      changeLowBatteryReminder({ target: { value: formData['lowBatteryReminder'] } })
    }
    if (formData['useOuter']) {
      changeUseOuter({ target: { value: formData['useOuter'] } })
    }
    if (formData['outerTempRecharge']) {
      changeOuterTempRecharge({ target: { value: formData['outerTempRecharge'] } })
    }
  } else {
    callOperate("/ebikesysrcostset/createSnowflakeId", {}, "get").then(res => {
      if (res.code == 200) {
        form.value['id'] = res.data;
      }
    })
  }
}

const getFormData = () => {
  return _.cloneDeep(form.value);
}

const resetFormValue = () => {
  formRef.value.resetFields()
}

defineExpose({ validateForm, resetFormValue, loadFormData, getFormData });
</script>
