<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="autoReturnType"
          :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.autoReturnType"
            name="radioGroup"
            @change="changeAutoReturnType"
          >
            <a-radio value="1">自动锁车</a-radio>
            <a-radio value="2">先临时锁车再自动还</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col
        v-if="autoReturn"
        :xs="12"
      >
        <a-form-item
          required
          name="autoReturn"
          :rules="[{ required: true, message: '请输入临时锁车自动还车分钟数' }]"
          :label-col="{sm: { span: 12 } }"
          :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.autoReturn"
            placeholder="请输入临时锁车自动还车分钟数"
            type="number"
          />
        </a-form-item>
      </a-col>
      <a-col
        v-if="autoLock"
        :xs="12"
      >
        <a-form-item
          required
          name="autoLock"
          :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.autoLock"
            placeholder="请输入自动锁车分钟数"
            type="number"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="autoLockNolocation"
          :rules="[{ required: true, message: '请输入有单无坐标自动锁车分钟数' }]"
          :label-col="{sm: { span: 12 } }"
          :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.autoLockNolocation"
            placeholder="请输入有单无坐标自动锁车分钟数"
            type="number"
          />
        </a-form-item>
      </a-col>
      <a-col :xs="12">
        <a-form-item
          required
          name="autoLockMonitor"
          :rules="[{ required: true, message: '请选择开启自动锁车监控' }]"
        >
          <template #label>
            开启自动锁车监控
            <a-tooltip title="开启后，因为系统优先会结束订单，部分2G中控可能出现结束订单后没有真正锁车的情况，开启后系统会在1-10分内自动结束订单">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.autoLockMonitor"
            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="limitOverZone"
          :rules="[{ required: true, message: '请选择骑行开启人脸识别' }]"
        >
          <a-radio-group
            v-model:value="form.limitOverZone"
            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="powerChecking"
          :rules="[{ required: true, message: '请输入车辆断电检测频率' }]"
        >
          <a-input
            v-model:value="form.powerChecking"
            placeholder="请输入车辆断电检测频率"
            type="number"
          />
        </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 form = ref({
  tableName: 'ebikeSysRlocksetDto'
});
const autoReturn = ref(false);
const autoLock = ref(false);

const changeAutoReturnType = (e) => {
  const value = e.target.value;
  if (value == '1') {
    autoLock.value = true;
    autoReturn.value = false;
  } else {
    autoLock.value = false;
    autoReturn.value = true;
  }
}

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['autoReturnType']) {
      changeAutoReturnType({ target: { value: formData['autoReturnType'] } })
    }
  } 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>
