<template>
  <view class="page">
    <!-- 顶部欢迎 -->
    <view class="header">
      <view class="user-section">
        <text class="welcome">{{ greeting }}</text>
        <text class="username" v-if="username">{{ username }}</text>
        <text class="username" v-else>请登录</text>
      </view>
      <view class="logout-btn" @click="logout" v-if="username">
        <text>退出</text>
      </view>
    </view>

    <!-- 订单区域 -->
    <view class="section">
      <text class="section-title">订单</text>
      <view class="menu-grid">
        <template v-if="isAdmin">
          <view class="menu-item" @click="goTo('/pages/order/create')">
            <view class="menu-icon-box blue"><text class="icon-text">订</text></view>
            <text class="menu-text">创建订单</text>
          </view>
          <view class="menu-item" @click="goToTab('/pages/order/list')">
            <view class="menu-icon-box green"><text class="icon-text">列</text></view>
            <text class="menu-text">订单列表</text>
          </view>
          <view class="menu-item" @click="goTo('/pages/order/search')">
            <view class="menu-icon-box orange"><text class="icon-text">查</text></view>
            <text class="menu-text">订单查询</text>
          </view>
          <view class="menu-item" @click="goTo('/pages/order/return')">
            <view class="menu-icon-box red"><text class="icon-text">退</text></view>
            <text class="menu-text">退货</text>
          </view>
        </template>
        <template v-else-if="isSales">
          <view class="menu-item" @click="goTo('/pages/order/create')">
            <view class="menu-icon-box blue"><text class="icon-text">订</text></view>
            <text class="menu-text">创建订单</text>
          </view>
          <view class="menu-item" @click="goToTab('/pages/order/list')">
            <view class="menu-icon-box green"><text class="icon-text">列</text></view>
            <text class="menu-text">订单列表</text>
          </view>
        </template>
        <template v-else-if="isCustomer">
          <view class="menu-item" @click="goToTab('/pages/order/list')">
            <view class="menu-icon-box green"><text class="icon-text">列</text></view>
            <text class="menu-text">我的订单</text>
          </view>
        </template>
      </view>
    </view>

    <!-- 管理区域 -->
    <view class="section" v-if="isAdmin || isSales">
      <text class="section-title">管理</text>
      <view class="menu-grid">
        <template v-if="isAdmin">
          <view class="menu-item" @click="goTo('/pages/customer/create')">
            <view class="menu-icon-box blue"><text class="icon-text">新增</text></view>
            <text class="menu-text">新增客户</text>
          </view>
          <view class="menu-item" @click="goTo('/pages/customer/list')">
            <view class="menu-icon-box cyan"><text class="icon-text">客</text></view>
            <text class="menu-text">客户列表</text>
          </view>
          <view class="menu-item" @click="goTo('/pages/product/manage')">
            <view class="menu-icon-box purple"><text class="icon-text">商</text></view>
            <text class="menu-text">商品管理</text>
          </view>
          <view class="menu-item" @click="goTo('/pages/category/index')">
            <view class="menu-icon-box pink"><text class="icon-text">类</text></view>
            <text class="menu-text">种类管理</text>
          </view>
          <view class="menu-item" @click="goStock()">
            <view class="menu-icon-box cyan"><text class="icon-text">库</text></view>
            <text class="menu-text">库存管理</text>
          </view>
          <view class="menu-item" @click="goTo('/pages/stock/in')">
            <view class="menu-icon-box orange"><text class="icon-text">入</text></view>
            <text class="menu-text">入库</text>
          </view>
          <view class="menu-item" @click="goTo('/pages/stock/flow')">
            <view class="menu-icon-box green"><text class="icon-text">流</text></view>
            <text class="menu-text">库存流水</text>
          </view>
        </template>
        <template v-else-if="isSales">
          <view class="menu-item" @click="goTo('/pages/product/list')">
            <view class="menu-icon-box purple"><text class="icon-text">商</text></view>
            <text class="menu-text">商品浏览</text>
          </view>
        </template>
      </view>
    </view>

    <!-- 商品区域（顾客） -->
    <view class="section" v-if="isCustomer">
      <text class="section-title">商品</text>
      <view class="menu-grid">
        <view class="menu-item" @click="goTo('/pages/product/list')">
          <view class="menu-icon-box purple"><text class="icon-text">商</text></view>
          <text class="menu-text">商品浏览</text>
        </view>
      </view>
    </view>

    <!-- 游客登录 -->
    <view class="guest-section" v-if="!username">
      <view class="guest-btn" @click="goTo('/pages/login/index')">
        <text class="guest-text">点击登录</text>
      </view>
    </view>
  </view>
</template>

<script>
import { isAdmin, isSales, isCustomer } from '@/utils/auth'

export default {
  data() {
    return {
      username: '',
      greeting: ''
    }
  },
  computed: {
    isAdmin() { return isAdmin() },
    isSales() { return isSales() },
    isCustomer() { return isCustomer() }
  },
  onShow() {
    this.username = uni.getStorageSync('username') || ''
    this.setGreeting()
  },
  methods: {
    setGreeting() {
      const hour = new Date().getHours()
      if (hour < 6) this.greeting = '凌晨好'
      else if (hour < 12) this.greeting = '上午好'
      else if (hour < 14) this.greeting = '中午好'
      else if (hour < 18) this.greeting = '下午好'
      else this.greeting = '晚上好'
    },
    goTo(url) {
      uni.navigateTo({ url })
    },
    goToTab(url) {
      uni.switchTab({ url })
    },
    goStock() {
      uni.navigateTo({ url: '/pages/stock/list' })
    },
    logout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出吗？',
        success: (res) => {
          if (res.confirm) {
            uni.clearStorageSync()
            uni.reLaunch({ url: '/pages/index/index' })
          }
        }
      })
    }
  }
}
</script>

<style>
.page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.user-section {
  display: flex;
  flex-direction: column;
}

.welcome {
  font-size: 24rpx;
  color: #999;
}

.username {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-top: 6rpx;
}

.logout-btn {
  font-size: 26rpx;
  color: #666;
  padding: 12rpx 24rpx;
  background: #f5f5f5;
  border-radius: 30rpx;
}

.section {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
  padding-left: 16rpx;
  border-left: 6rpx solid #1890ff;
}

.menu-grid {
  display: flex;
  flex-wrap: wrap;
}

.menu-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx 0;
}

.menu-icon-box {
  width: 130rpx;
  height: 130rpx;
  border-radius: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.menu-icon-box.blue { background: #e8f4ff; }
.menu-icon-box.green { background: #f6ffed; }
.menu-icon-box.orange { background: #fff7e6; }
.menu-icon-box.red { background: #fff1f0; }
.menu-icon-box.purple { background: #f9f0ff; }
.menu-icon-box.pink { background: #fff0f6; }
.menu-icon-box.cyan { background: #e6f7ff; }

.icon-text {
  font-size: 52rpx;
  font-weight: bold;
}

.blue .icon-text { color: #1890ff; }
.green .icon-text { color: #52c41a; }
.orange .icon-text { color: #fa8c16; }
.red .icon-text { color: #ff4d4f; }
.purple .icon-text { color: #722ed1; }
.pink .icon-text { color: #eb2f96; }
.cyan .icon-text { color: #13c2c2; }

.menu-text {
  font-size: 24rpx;
  color: #666;
}

.guest-section {
  margin-top: 200rpx;
  display: flex;
  justify-content: center;
}

.guest-btn {
  background: #1890ff;
  padding: 30rpx 80rpx;
  border-radius: 50rpx;
}

.guest-text {
  font-size: 32rpx;
  color: #fff;
}
</style>