<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"
          >
            <a-radio value="1">默认</a-radio>
            <a-radio value="2">实名认证</a-radio>
            <a-radio value="3">学生认证</a-radio>
            <a-radio value="4">无需认证</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"
          >
            <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"
          >
            <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="0为不限制，大于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: '请选择免费时长不计入计费时长' }]"
          :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"
          >
            <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"
          >
            <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="开启后，用户在该城市的借车都需要检查是否缴纳了押金0元">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.authentication"
            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="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"
          >
            <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"
          >
            <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"
          >
            <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"
          >
            <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"
          >
            <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"
          >
            <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"
          >
            <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"
          >
            <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"
          >
            <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"
          >
            <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"
          >
            <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"
          >
            <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="用户端扫码后显示地图或者Banner图片">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-radio-group
            v-model:value="form.authentication"
            name="radioGroup"
          >
            <a-radio value="1">Banner</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"
          >
            <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
          label="充值规则"
          name="isOperate"
          :rules="[{ required: true, message: '请设置充值规则' }]"
          :label-col="{ sm: { span: 4 }}"
          :wrapper-Col="{span: 24 }"
        >
          <div style="display: flex;align-items: center;">
            <a-input
              style="width: 200px;"
              v-model:value="amountInput"
              placeholder="请输入充值金额"
              type="number"
            />
            <a-button
              style="margin-left: 20px;"
              type="primary"
              @click="addAmount"
            >
              添加金额
            </a-button>
          </div>
          <div style="margin-top: 10px;">
            <template
              v-for="(tag) in form.tags"
              :key="tag"
            >
              <a-tag
                color="#55acee"
                :closable="true"
                @close="handleClose(tag)"
                style="width: 60px; display: inline-block;"
              >
                {{tag.name}}
              </a-tag>
            </template>
          </div>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup>
import { getGUID } from '@/utils/tools';
import { ref, defineProps } from 'vue'
import _ from 'lodash'


const amountInput = ref();
const formRef = ref();
const form = ref({
  isOperate: "1",
  operateType: "1",
  outageNotice: "",
  accessChannel: "",
  operateTimeBytime: "",
  operateTimeByWeek: [],
  tags: []
});

const addAmount = (data) => {
  if (amountInput) {
    if (amountInput.value == undefined) return;
    form.value.tags.push({
      key: getGUID(),
      name: amountInput.value + "元",
      value: amountInput.value
    })
    amountInput.value = "";
  }
}

const handleClose = (data) => {
  const key = data.key;
  let item = _.clone(form.value.tags);
  remove(key, "key", item)
  form.value.tags = item;
}

const remove = (val, filed, array) => {
  const index = array.findIndex(obj => obj[filed] === val);
  if (index > -1) {
    array.splice(index, 1);
  }
}

</script>
