<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>
  </view>
</template>

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

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

const formSubmit = async ({ detail }: any) => {
  if (!detail.value.seat || !detail.value.phone)
    return Taro.showToast({
      title: "请填写完整信息",
      icon: "none",
    });
  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: "",
      };
    },
  });
};
</script>

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