<template>
  <view class="store-page">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <text class="nav-back" @click="goBack">‹</text>
      <text class="nav-title">店铺设置</text>
      <view style="width:40px;"></view>
    </view>

    <view class="form-wrap">
      <view class="form-card">
        <view class="form-row">
          <text class="row-label">店铺名称</text>
          <input class="row-input" v-model="form.name" placeholder="请输入" />
        </view>
        <view class="form-row">
          <text class="row-label">联系电话</text>
          <input class="row-input" v-model="form.phone" placeholder="请输入" />
        </view>
        <view class="form-row">
          <text class="row-label">地址</text>
          <input class="row-input" v-model="form.address" placeholder="请输入" />
        </view>
        <view class="form-row" style="flex-direction:column; align-items:flex-start;">
          <text class="row-label" style="margin-bottom:8px;">简介</text>
          <textarea class="row-textarea" v-model="form.intro" placeholder="请输入店铺简介" rows="3" />
        </view>
      </view>

      <view class="save-btn-wrap">
        <view class="btn-save" :class="{ loading: saving }" @click="saveStore">保存设置</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { updateStore } from '../../../utils/api.js'

const storeInfo = JSON.parse(uni.getStorageSync('petstore_store') || '{}')
const saving = ref(false)
const form = ref({ name: '', phone: '', address: '', intro: '' })

const goBack = () => uni.navigateBack()

const saveStore = async () => {
  if (!form.value.name) { uni.showToast({ title: '请输入店铺名称', icon: 'none' }); return }
  saving.value = true
  const res = await updateStore({ id: storeInfo.id, ...form.value })
  saving.value = false
  if (res.code === 200) {
    uni.showToast({ title: '保存成功', icon: 'success' })
    const updated = { ...storeInfo, ...form.value }
    uni.setStorageSync('petstore_store', JSON.stringify(updated))
  } else {
    uni.showToast({ title: res.message || '保存失败', icon: 'none' })
  }
}

onMounted(() => {
  form.value = {
    name: storeInfo.name || '',
    phone: storeInfo.phone || '',
    address: storeInfo.address || '',
    intro: storeInfo.intro || ''
  }
})
</script>

<style scoped>
.store-page { min-height: 100vh; background: #f5f5f5; padding-bottom: 20px; }
.nav-bar {
  background: #fff;
  padding: 40px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
}
.nav-back { font-size: 28px; color: #333; font-weight: 300; }
.nav-title { font-size: 16px; font-weight: 600; color: #333; }

.form-wrap { padding: 12px 16px 0; }
.form-card { background: #fff; border-radius: 12px; padding: 4px 16px; }
.form-row {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
}
.form-row:last-child { border-bottom: none; }
.row-label { font-size: 14px; color: #666; width: 72px; flex-shrink: 0; }
.row-input {
  flex: 1;
  font-size: 14px;
  color: #333;
  text-align: right;
}
.row-textarea {
  width: 100%;
  font-size: 14px;
  color: #333;
  border: none;
  resize: none;
  background: transparent;
  box-sizing: border-box;
}

.save-btn-wrap { padding: 16px; }
.btn-save {
  width: 100%;
  height: 46px;
  background: #07c160;
  color: #fff;
  border-radius: 23px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-save.loading { opacity: 0.7; }
</style>
