<template>
  <a-form
    :model="form"
    :label-col="{sm: { span: 8 } }"
    :wrapper-col="{ span:24}"
    ref="formRef"
  >
    <a-row :gutter="8">
      <a-col :xs="24">
        <a-form-item
          required
          name="isOperate"
          :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.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-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="每次还车前是否需要人脸识别">
              <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-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-col :xs="12">
        <a-form-item
          required
          name="isOperate"
          :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.freeDuration"
            placeholder="请输入禁止用户借车电量"
            type="number"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :xs="24">
        <a-form-item
          required
          name="isOperate"
          :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.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-input
            v-model:value="form.freeDuration"
            placeholder="请输入低电骑行断电电量"
            type="number"
          />
        </a-form-item>
      </a-col>
      <a-col :xs="12">
        <a-form-item
          required
          name="isOperate"
          :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.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
          label="是否同步电量里程"
          name="isOperate"
          :rules="[{ required: true, message: '请选择是否同步电量里程' }]"
        >
          <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
          label="区域外是否可用车"
          name="isOperate"
          :rules="[{ required: true, message: '请选择区域外是否可用车' }]"
        >
          <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
          label="骑行超区临时通电"
          name="isOperate"
          :rules="[{ required: true, message: '请选择骑行超区临时通电' }]"
        >
          <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-col :xs="12">
        <a-form-item
          required
          label="超区是否允许打开头盔"
          name="isOperate"
          :rules="[{ required: true, message: '请选择超区是否允许打开头盔' }]"
          :label-col="{ sm: { span: 9 }}"
          :wrapper-Col="{span: 24 }"
        >
          <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-col :xs="12">
        <a-form-item
          required
          name="isOperate"
          :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.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-col :xs="12">
        <a-form-item
          required
          label="是否取头盔通电"
          name="isOperate"
          :rules="[{ required: true, message: '请选择是否取头盔通电' }]"
        >
          <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-col :xs="12">
        <a-form-item
          required
          label="临时锁车需要归还头盔"
          name="isOperate"
          :rules="[{ required: true, message: '请选择是否取头盔通电' }]"
          :label-col="{ sm: { span: 9 }}"
          :wrapper-Col="{span: 24 }"
        >
          <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-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: '请选择是否关闭还车区域限制' }]"
          :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.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-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="24">
        <a-form-item
          required
          name="isOperate"
          :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.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>
