<template>
  <view>
    <back-component title="填写信息" />
    <view class="container">
      <form class="form" @submit="formSubmit">
        <view class="form-item">
          <text class="label">台号：</text>
          <input
            type="text"
            placeholder="请输入台号，比如：包厢A01"
            name="seat"
            v-model="formVal.seat"
            required
          />
        </view>
        <view class="form-item">
          <text class="label">手机号：</text>
          <input
            type="text"
            placeholder="请输入客人手机号码"
            name="phone"
            v-model="formVal.phone"
            required
          />
        </view>
        <view class="form-item">
          <text class="label">备注：</text>
          <input
            type="textarea"
            placeholder="备注"
            name="notes"
            v-model="formVal.notes"
          />
        </view>
        <nut-button
          style="border-radius: 7px"
          type="primary"
          block
          shape="square"
          form-type="submit"
          >下一步</nut-button
        >
      </form>
    </view>
    <nut-dialog v-model:visible="visible" no-cancel-btn>
      <template #header>提示</template>
      <template #default
        >客户手机号:
        <text style="color: #fd0100">{{ formVal.phone }}</text>
        没有注册捷兑
通，请通知他登录捷兑通小程序注册。</template
      >
    </nut-dialog>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Taro from "@tarojs/taro";
import BackComponent from "../../../../components/Back.vue";
import { checkPhone } from "../../../../api/admin";

const formVal = ref({
  seat: "",
  phone: "",
  notes: "",
});

const visible = ref(false);

const formSubmit = async ({ detail }: any) => {
  if (!detail.value.seat)
    return Taro.showToast({
      title: "请填写台号",
      icon: "none",
    });
  if (
    !/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(
      detail.value.phone
    )
  )
    return Taro.showToast({
      title: "请输入正确的手机号码",
      icon: "none",
    });
  try {
    await checkPhone({ phone: detail.value.phone });
    const user_info = await Taro.getStorageSync("userInfo");
    Taro.navigateTo({
      url: `/pages/admin/add_order/add_menu/index?type=1&bid=${user_info.data.bid}&seat=${formVal.value.seat}&phone=${formVal.value.phone}&notes=${formVal.value.notes}`,
      success: () => {
        formVal.value = {
          seat: "",
          phone: "",
          notes: "",
        };
      },
    });
  } catch (error) {
    console.log(error);
    visible.value = true;
  }
};
</script>

<style lang="scss">
@import "./index.scss";
</style>
