<template>
  <view class="staff-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="invite-code-row">
      <text class="invite-label">员工邀请码</text>
      <text class="invite-code">{{ storeInfo.inviteCode }}</text>
      <view class="copy-btn" @click="copyCode">复制</view>
    </view>

    <view class="add-btn-wrap">
      <view class="btn-add" @click="showAddStaff = true">+ 新增员工</view>
    </view>

    <!-- 员工列表 -->
    <view class="staff-list">
      <view v-for="s in staffList" :key="s.id" class="staff-item">
        <view class="staff-avatar" :style="avatarStyle(s)">
          <image v-if="s.avatar" :src="s.avatar" class="avatar-img" />
          <text v-else class="avatar-initials">{{ s.name ? s.name[0] : '?' }}</text>
        </view>
        <view class="staff-info">
          <text class="staff-name">{{ s.name }}</text>
          <text class="staff-phone">{{ s.phone }}</text>
          <text class="staff-role">{{ s.role === 'boss' ? '🏠 店长' : '👤 员工' }}</text>
        </view>
        <text v-if="s.role !== 'boss'" class="delete-btn" @click="deleteStaff(s.id)">删除</text>
      </view>
      <view v-if="staffList.length === 0" class="empty-wrap">
        <text class="empty-icon">👥</text>
        <text class="empty-text">暂无员工</text>
      </view>
    </view>

    <!-- 新增员工弹窗 -->
    <view v-if="showAddStaff" class="dialog-mask" @click="showAddStaff = false">
      <view class="dialog-content" @click.stop>
        <view class="dialog-header">
          <text class="dialog-title">新增员工</text>
          <text class="dialog-close" @click="showAddStaff = false">✕</text>
        </view>
        <view class="dialog-body">
          <view class="form-item">
            <text class="form-label">员工姓名</text>
            <input class="form-input" v-model="newStaff.name" placeholder="请输入" />
          </view>
          <view class="form-item">
            <text class="form-label">手机号</text>
            <input class="form-input" v-model="newStaff.phone" type="tel" placeholder="请输入" maxlength="11" />
          </view>
        </view>
        <view class="dialog-footer">
          <view class="btn-cancel" @click="showAddStaff = false">取消</view>
          <view class="btn-confirm" @click="onAddStaffConfirm">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getStaffList, createStaff, deleteStaff as delStaff } from '../../../utils/api.js'

const storeInfo = JSON.parse(uni.getStorageSync('petstore_store') || '{}')

const staffList = ref([])
const showAddStaff = ref(false)
const newStaff = ref({ name: '', phone: '' })

const COLORS = ['#ff7c43', '#07c160', '#8b6914', '#e06040', '#5090d0', '#9b59b6']
const avatarStyle = (s) => {
  if (s.avatar) return {}
  const idx = (s.name?.charCodeAt(0) || 0) % COLORS.length
  return { background: COLORS[idx] }
}

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

const loadStaff = async () => {
  const res = await getStaffList(storeInfo.id)
  if (res.code === 200) staffList.value = res.data
}

const copyCode = () => {
  uni.setClipboardData({ data: storeInfo.inviteCode, success: () => uni.showToast({ title: '邀请码已复制', icon: 'success' }) })
}

const onAddStaffConfirm = async () => {
  if (!newStaff.value.name) { uni.showToast({ title: '请输入员工姓名', icon: 'none' }); return }
  if (!newStaff.value.phone || newStaff.value.phone.length !== 11) { uni.showToast({ title: '请输入正确的手机号', icon: 'none' }); return }
  const res = await createStaff({ storeId: storeInfo.id, name: newStaff.value.name, phone: newStaff.value.phone })
  if (res.code === 200) {
    uni.showToast({ title: `添加成功，密码：${res.data.password}`, icon: 'none', duration: 3000 })
    showAddStaff.value = false
    newStaff.value = { name: '', phone: '' }
    loadStaff()
  } else {
    uni.showToast({ title: res.message || '添加失败', icon: 'none' })
  }
}

const deleteStaff = async (staffId) => {
  uni.showModal({
    title: '确认删除',
    content: '确定删除该员工？',
    success: async (res) => {
      if (res.confirm) {
        const r = await delStaff(staffId)
        if (r.code === 200) {
          uni.showToast({ title: '已删除', icon: 'success' })
          loadStaff()
        } else {
          uni.showToast({ title: r.message || '删除失败', icon: 'none' })
        }
      }
    }
  })
}

onMounted(() => loadStaff())
</script>

<style scoped>
.staff-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; }

.invite-code-row {
  display: flex;
  align-items: center;
  background: #fff;
  margin: 12px 16px;
  padding: 14px 16px;
  border-radius: 12px;
  gap: 8px;
}
.invite-label { font-size: 14px; color: #666; }
.invite-code { flex: 1; font-size: 15px; color: #07c160; font-weight: 600; font-family: monospace; }
.copy-btn { font-size: 13px; color: #07c160; padding: 4px 12px; border: 1px solid #07c160; border-radius: 4px; }

.add-btn-wrap { padding: 0 16px 12px; }
.btn-add {
  width: 100%;
  height: 44px;
  background: #07c160;
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.staff-list { padding: 0 16px; }
.staff-item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  gap: 12px;
}
.staff-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-img { width: 100%; height: 100%; object-fit: cover; }
.avatar-initials { font-weight: 600; }
.staff-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.staff-name { font-size: 15px; font-weight: 500; color: #333; }
.staff-phone { font-size: 12px; color: #999; }
.staff-role { font-size: 11px; color: #999; }
.delete-btn { font-size: 13px; color: #ff4d4f; }

.empty-wrap { display: flex; flex-direction: column; align-items: center; padding: 60px 0; }
.empty-icon { font-size: 48px; }
.empty-text { font-size: 14px; color: #999; margin-top: 12px; }

/* 弹窗 */
.dialog-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-content {
  width: 80%;
  max-width: 340px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}
.dialog-title { font-size: 16px; font-weight: 600; color: #333; }
.dialog-close { font-size: 18px; color: #999; }
.dialog-body { padding: 16px 20px; }
.dialog-footer { display: flex; border-top: 1px solid #eee; }
.btn-cancel, .btn-confirm { flex: 1; text-align: center; padding: 14px 0; font-size: 15px; }
.btn-cancel { color: #666; border-right: 1px solid #eee; }
.btn-confirm { color: #07c160; font-weight: 600; }

.form-item { margin-bottom: 16px; }
.form-item:last-child { margin-bottom: 0; }
.form-label { font-size: 13px; color: #999; display: block; margin-bottom: 6px; }
.form-input {
  width: 100%;
  height: 40px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  box-sizing: border-box;
}
</style>
