<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="isOperate"
          :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.authentication"
            name="radioGroup"
            @change="changeIsOperate"
          >
            <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="isOperate"
          :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.freeDuration"
            placeholder="请输入临时锁车自动还车分钟数"
            type="number"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="isOperate"
          :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.authentication"
            name="radioGroup"
            @change="changeIsOperate"
          >
            <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="isOperate"
          :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.authentication"
            name="radioGroup"
            @change="changeIsOperate"
          >
            <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="isOperate"
          :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.authentication"
            name="radioGroup"
            @change="changeIsOperate"
          >
            <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="isOperate"
          :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.authentication"
            name="radioGroup"
            @change="changeIsOperate"
          >
            <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="isOperate"
          :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.freeDuration"
            placeholder="请输入临时锁车自动还车分钟数"
            type="number"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="12">
        <a-form-item
          required
          name="isOperate"
          :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.authentication"
            name="radioGroup"
            @change="changeIsOperate"
          >
            <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="isOperate"
          :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.authentication"
            name="radioGroup"
            @change="changeIsOperate"
          >
            <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'
const formRef = ref();
const time = ref(false);
const week = ref(false);
const showoperateTime = ref(false);
const form = ref({
  isOperate: "1",
  operateType: "1",
  outageNotice: "",
  accessChannel: "",
  operateTimeBytime: "",
  operateTimeByWeek: []
});
const columns = ref([
  {
    title: '周',
    key: 'phase',
    width: 150,
    align: 'center',
    dataIndex: 'phase'
  },
  {
    title: '工作时间',
    key: 'startupTime',
    width: 300,
    align: 'center',
    dataIndex: 'startupTime',
    type: 'time'
  },
  {
    title: '操作',
    key: 'action',
    width: 80,
    align: 'center',
    fixed: 'right',
  }])

const changeIsOperate = () => {

}

const changeOperateType = (data) => {
  const value = data.target.value;
  if (value == "2") {
    showoperateTime.value = true;
    time.value = true;
    week.value = false;
  } else if (value == "3") {
    showoperateTime.value = true;
    week.value = true;
    time.value = false;
  } else {
    week.value = false;
    time.value = false;
    showoperateTime.value = false;
  }
}

</script>
