<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="isSite"
          :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.isSite"
            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="returnDistance"
          :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.returnDistance"
            placeholder="请输入临时锁车自动还车分钟数"
            type="number"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="forceRegular"
          :rules="[{ required: true, message: '请选择规范停车强制还车' }]"
        >
          <template #label>
            规范停车强制还车
            <a-tooltip title="开启后，RFID、道钉、摄像头、无线充电、90度停车等需要规范停车的站点必须按要求还车正确后才能结束订单。">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.forceRegular"
            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="parkNinety"
          :rules="[{ required: true, message: '请选择是否90度停车' }]"
        >
          <template #label>
            是否90度停车
            <a-tooltip title="该区域是否需要90度停车，主要配置90度角度">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.parkNinety"
            name="radioGroup"
            @change="changeParkNinety"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col
        v-if="showAngularOffsetError"
        :xs="12"
      >
        <a-form-item
          required
          label="站点偏移角度误差(°)"
          name="angularOffsetError"
          :rules="[{ required: true, message: '请输入站点偏移角度误差' }]"
        >
          <a-input
            v-model:value="form.angularOffsetError"
            placeholder="请输入站点偏移角度误差"
            type="number"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="ignoreRegular"
          :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.ignoreRegular"
            name="radioGroup"
            @change="changeIgnoreRegular"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col
        v-if="isIgnoreRegular"
        :xs="12"
      >
        <a-form-item
          required
          name="ignoreRegularErrorCount"
          :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.ignoreRegularErrorCount"
            placeholder="请输入临时锁车自动还车分钟数"
            type="number"
          />
        </a-form-item>
      </a-col>
      <a-col
        v-if="isIgnoreRegular"
        :xs="12"
      >
        <a-form-item
          required
          label="规范还车跳过类型"
          name="ignoreRegularType"
          :rules="[{ required: true, message: '请选择规范还车跳过类型' }]"
        >
          <a-select
            v-model:value="form.ignoreRegularType"
            mode="multiple"
            style="width: 100%"
            placeholder="请选择"
            :max-tag-count="1"
          >
            <a-select-option value="1">90度还车</a-select-option>
            <a-select-option value="2">AI拍照还车</a-select-option>
            <a-select-option value="3">蓝牙道钉还车</a-select-option>
            <a-select-option value="4">RFID还车</a-select-option>
            <a-select-option value="5">无线充电精准停车</a-select-option>
            <a-select-option value="6">摄像头还车</a-select-option>
            <a-select-option value="7">桩位还车</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="location"
          :rules="[{ required: true, message: '请选择还车判断用户坐标' }]"
        >
          <template #label>
            还车判断用户坐标
            <a-tooltip title="还车是否判断用户坐标,2G中控建议选择此项">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.location"
            name="radioGroup"
            @change="changeLocation"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col
        v-if="showDistance"
        :xs="12"
      >
        <a-form-item
          required
          name="distance"
          :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.distance"
            placeholder="请输入临时锁车自动还车分钟数"
            type="number"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="freeDispatchStudy"
          :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.freeDispatchStudy"
            name="radioGroup"
            @change="changeFreeDispatchStudy"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col
        v-if="isFreeDispatchStudy"
        :xs="12"
      >
        <a-form-item
          required
          label="学习免调度费次数"
          name="freeDispatchCount"
          :rules="[{ required: true, message: '请输入学习免调度费次数' }]"
        >
          <a-input
            v-model:value="form.freeDispatchCount"
            placeholder="请输入学习免调度费次数"
            type="number"
          />
        </a-form-item>
      </a-col>
      <a-col
        v-if="isFreeDispatchStudy"
        :xs="12"
      >
        <a-form-item
          required
          name="freeReturnType"
          :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-select
            v-model:value="form.freeReturnType"
            mode="multiple"
            style="width: 100%"
            placeholder="请选择"
            :max-tag-count="1"
          >
            <a-select-option value="1">不在运营区</a-select-option>
            <a-select-option value="2">不在停车区</a-select-option>
            <a-select-option value="3">禁停区</a-select-option>
            <a-select-option value="4">道钉还车</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="photoInStation"
          :rules="[{ required: true, message: '请选择AI拍照是否在站点内' }]"
          :label-col="{sm: { span: 10 } }"
          :wrapper-col="{ span:24}"
        >
          <template #label>
            AI拍照是否在站点内
            <a-tooltip title="开启后，AI拍照需要在站点触发">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.photoInStation"
            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 form = ref({
  tableName: 'ebikeSysRbacksetDto'
});
const showAngularOffsetError = ref(false);
const isIgnoreRegular = ref(true);
const showDistance = ref(false);
const isFreeDispatchStudy = ref(false);


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

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

const changeFreeDispatchStudy = (e) => {
  const value = e.target.value;
  if (value == '1') {
    isFreeDispatchStudy.value = true;
  } else {
    isFreeDispatchStudy.value = false;
    form.value.freeReturnType = [];
    form.value.freeDispatchCount = null;
  }
}
const changeIgnoreRegular = (e) => {
  const value = e.target.value;
  if (value == '1') {
    isIgnoreRegular.value = true;
  } else {
    isIgnoreRegular.value = false;
    form.value.ignoreRegularErrorCount = null;
    form.value.ignoreRegularType = [];
  }
}

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['parkNinety']) {
      changeParkNinety({ target: { value: formData['parkNinety'] } })
    }
    if (formData['location']) {
      changeLocation({ target: { value: formData['location'] } })
    }
    if (formData['freeDispatchStudy']) {
      changeFreeDispatchStudy({ target: { value: formData['freeDispatchStudy'] } })
    }
    if (formData['ignoreRegular']) {
      changeIgnoreRegular({ target: { value: formData['ignoreRegular'] } })
    }
  } 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>
