<template>
  <view class="page-shell profile-page">
    <PageHero title="我的" subtitle="管理联系人、地址和常用信息">
      <view class="profile-page__hero-row">
        <view>
          <text class="profile-page__hero-label">联系人</text>
          <text class="profile-page__hero-value">{{ customerStore.name || '未填写' }}</text>
        </view>
        <view>
          <text class="profile-page__hero-label">手机号</text>
          <text class="profile-page__hero-value">{{ customerStore.phone || '未填写' }}</text>
        </view>
      </view>
    </PageHero>

    <view class="surface-card">
      <text class="section-title">顾客信息</text>
      <input class="field-input" :value="draftName" placeholder="请输入顾客姓名" @input="handleNameInput" />
      <input class="field-input profile-page__field-gap" :value="draftPhone" type="number" placeholder="请输入手机号" @input="handlePhoneInput" />
      <view class="profile-page__action-row">
        <NutButton type="primary" block @click="saveProfile">保存信息</NutButton>
      </view>
    </view>

    <view class="surface-card">
      <view class="row-between">
        <view>
          <text class="section-title">常用信息</text>
          <text class="section-subtitle">提前填写地址或桌号，下单时更方便。</text>
        </view>
      </view>
      <view class="profile-page__kv-list">
        <view class="profile-page__kv-item">
          <text class="caption-text">配送地址</text>
          <text class="value-text profile-page__break-all">{{ fulfillmentStore.addressText || '暂未填写' }}</text>
        </view>
        <view class="profile-page__kv-item">
          <text class="caption-text">堂食桌号</text>
          <text class="value-text">{{ fulfillmentStore.tableNo || '暂未填写' }}</text>
        </view>
      </view>
      <view class="profile-page__action-grid">
        <NutButton block plain @click="goAddress">编辑地址</NutButton>
        <NutButton block plain @click="goDineIn">编辑桌号</NutButton>
      </view>
    </view>

  </view>
</template>

<script setup lang="ts">
import { Button as NutButton } from '@nutui/nutui-taro'
import PageHero from '@/components/page-hero/index.vue'
import { useTabBarSelection } from '@/utils/useTabBarSelection'
import { useProfilePage } from './composables/useProfilePage'

useTabBarSelection(3)

const {
  customerStore,
  draftName,
  draftPhone,
  fulfillmentStore,
  goAddress,
  goDineIn,
  handleNameInput,
  handlePhoneInput,
  saveProfile
} = useProfilePage()
</script>

<style lang="scss">
@use './styles/index.scss';
</style>
