<template>
  <scroll-view scroll-y class="page">
    <!-- 顶部欢迎与Logo -->
    <view class="header card">
      <view class="header-left">
        <text class="hello">您好，欢迎使用</text>
        <text class="app-name">卓越智慧配送</text>
        <text class="sub">高效 · 可视 · 可追溯</text>
      </view>
      <view class="header-right">
        <image class="logo" src="/static/logo.png" mode="aspectFit" />
        <button v-if="!isLoggedIn" class="login-btn" @tap="goLogin">登录</button>
        <view v-else class="user-box">
          <text class="user-name">{{ staff?.name || '已登录' }}</text>
          <button class="logout-btn" @tap="logout">退出</button>
        </view>
      </view>
    </view>

    <!-- 顶部滑动轮播图 -->
    <view class="swiper-card card">
      <swiper class="swiper" :current="swiperIndex" @change="changeSwiper" previous-margin="50rpx" next-margin="50rpx"
        :indicator-dots="true" indicator-color="rgba(51,51,51,0.25)" indicator-active-color="#4b7aff" autoplay
        interval="3000" circular>
        <swiper-item v-for="(img, idx) in swiperImgs" :key="idx">
          <view class="swiper-item-wrap" :class="{ 'swiper-scale': swiperIndex !== idx }">
            <image class="swiper-img" :src="img" mode="aspectFill" />
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 主操作 -->
    <view class="ops">
      <view class="op-btn" v-show="isPatient || isDoctor" @tap="goStretcherApply">
        <image class="op-icon" src="/static/icons/stretcher-loan.png" />
        <text class="op-text">担架申请</text>
      </view>
      <view class="op-btn" v-show="isPatient || isDoctor || isRider" @tap="goStretcherApplyFor">
        <image class="op-icon" src="/static/icons/stretcher-temp-loan.png" />
        <text class="op-text">担架代申请</text>
      </view>
    </view>

    <!-- 资产管理：可折叠卡片，明确从属关系 -->
    <view class="section-card card">
      <view class="section-header" @tap="toggleAsset">
        <view class="section-left">
          <image class="section-icon" src="/static/icons/asset-management.png" />
          <view class="section-text">
            <text class="section-title-text">资产管理</text>
            <text class="section-sub">固定资产、借用、盘点、扫码、易耗品</text>
          </view>
        </view>
        <view class="chevron" :class="{ open: assetOpen }"></view>
      </view>
      <view class="asset-grid" v-show="assetOpen">
        <view class="grid-item" v-for="item in assetItems" :key="item.key" @tap="handleAsset(item.key)">
          <image class="grid-icon" :src="item.icon" />
          <text class="grid-text">{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- 公告：担架收费标准 -->
    <view class="section-title">
      <text>公告 · 担架收费标准</text>
    </view>
    <view class="notice card" @tap="previewCharge">
      <image class="notice-img" src="/static/stretcher-charge-standard.png" mode="widthFix" />
      <text class="notice-tip">点击可放大查看</text>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
// @ts-ignore JS模块无类型声明
import queryService from '@/service/queryService.js'
// @ts-ignore JS模块无类型声明
import config from '@/config.js'
// @ts-ignore JS模块无类型声明
import * as staffRole from '@/constant/staffRole.js'
// @ts-ignore JS模块无类型声明
import util from '@/utils/util.js'
// 资产管理展开状态
const assetOpen = ref(true)

// 资产管理宫格项
const assetItems = [
  { key: 'fixed', text: '固定资产', icon: '/static/icons/fixed-assets.png' },
  { key: 'mine', text: '我的借用', icon: '/static/icons/my-loans.png' },
  { key: 'scan', text: '扫码查看信息', icon: '/static/icons/scan-to-view-info.png' },
  { key: 'inventory', text: '资产盘点', icon: '/static/icons/asset-inventory.png' },
  { key: 'plan', text: '易耗品领用计划', icon: '/static/icons/consumables-plan.png' },
  { key: 'consumable', text: '易耗品盘点', icon: '/static/icons/consumables-inventory.png' }
]

// 轮播图状态
const swiperIndex = ref(0)
const swiperImgs = ref<string[]>([
  '/static/logo.png',
  '/static/logo.png',
  '/static/logo.png'
])

function changeSwiper(e: any) {
  swiperIndex.value = e.detail.current || 0
}

async function loadSwiperImages() {
  try {
    const res = await queryService.getAppSlipPicUrl()
    if (res?.data?.code === 0) {
      const dataStr: string = res?.data?.data || ''
      const pics = dataStr ? dataStr.split(';').filter(Boolean) : []
      if (pics.length >= 3) {
        // 取最后三张，保持与老页面一致的顺序
        const last3 = pics.slice(-3)
        swiperImgs.value = last3.map(p => `${config.picturePath}${p}`)
      } else if (pics.length > 0) {
        // 不足3张时重复填充
        const filled: string[] = []
        while (filled.length < 3) {
          const next = pics[filled.length % pics.length]
          filled.push(`${config.picturePath}${next}`)
        }
        swiperImgs.value = filled
      }
    }
  } catch (err) {
    // 出错则保留默认占位图
    console.warn('加载轮播图失败：', err)
  }
}

onMounted(() => {
  loadSwiperImages()
  syncLoginState()
})

// 登录与角色态
const isLoggedIn = ref(false)
const staff = ref<any | null>(null)
const isWeixin = ref(false)
const isPatient = ref(true)
const isDoctor = ref(false)
const isRider = ref(false)

function syncLoginState() {
  staff.value = uni.getStorageSync('staff') || null
  isLoggedIn.value = !!staff.value
  // 平台
  // @ts-ignore
  isWeixin.value = process?.env?.VUE_APP_PLATFORM === 'mp-weixin'
  // 角色判定（简化：有担架运送角色则认为骑手，否则当作患者/医生）
  if (staff.value && Array.isArray(staff.value.role_ids)) {
    const set = staffRole.STRETCHER_CONVEY
    const hasRider = staff.value.role_ids.some((r: string) => set.has(r))
    isRider.value = hasRider
    isPatient.value = !hasRider
    isDoctor.value = !hasRider
  } else {
    isRider.value = false
    isPatient.value = true
    isDoctor.value = false
  }
}

function goLogin() {
  uni.navigateTo({ url: '/pages/login/index' })
}
function logout() {
  uni.setStorageSync('staff', null)
  uni.setStorageSync('token', null)
  isLoggedIn.value = false
  staff.value = null
  isRider.value = false
  isPatient.value = true
  isDoctor.value = false
  uni.showToast({ title: '已退出登录', icon: 'none' })
}

// 导航占位：根据后续页面路由替换
function goStretcherApply() {
  uni.navigateTo({ url: '/pages/stretcher/apply/index' })
}
function goStretcherApplyFor() {
  uni.navigateTo({ url: '/pages/stretcher/apply-agent/index' })
}
function toggleAsset() {
  assetOpen.value = !assetOpen.value
}
function handleAsset(key: string) {
  const item = assetItems.find(i => i.key === key)
  if (!item) return
  if (key === 'fixed') {
    uni.navigateTo({ url: '/pages/fixed-assets/index' })
    return
  }
  if (key === 'mine') {
    uni.navigateTo({ url: '/pages/fixed-assets/my-borrows' })
    return
  }
  if (key === 'inventory') {
    uni.navigateTo({ url: '/pages/fixed-assets/inventory-plan' })
    return
  }
  if (key === 'plan') {
    uni.navigateTo({ url: '/pages/consumables/plan' })
    return
  }
  if (key === 'consumable') {
    uni.navigateTo({ url: '/pages/consumables/inventory-plan' })
    return
  }
  if (key === 'scan') {
    uni.navigateTo({ url: '/pages/fixed-assets/scan' })
    return
  }
  // 其他入口可在此对接具体页面
  uni.showToast({ title: `打开：${item.text}`, icon: 'none' })
}
function previewCharge() {
  uni.previewImage({
    urls: ['/static/stretcher-charge-standard.png']
  })
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #f5f7fb;
}

.card {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
}

.header {
  margin: 32rpx;
  padding: 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.hello {
  color: #7a7a7a;
  font-size: 26rpx;
}

.app-name {
  color: #111;
  font-size: 40rpx;
  font-weight: 600;
}

.sub {
  color: #9a9aa0;
  font-size: 24rpx;
}

.logo {
  width: 120rpx;
  height: 120rpx;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.login-btn,
.logout-btn {
  padding: 0rpx 20rpx;
  background: #3a5ddd;
  color: #fff;
  border-radius: 10rpx;
  font-size: 24rpx;
}

.logout-btn {
  background: #ef5350;
}

.user-box {
  display: flex;
  align-items: center;
  gap: 12rpx;
  flex-direction: column;
}

.user-name {
  font-size: 24rpx;
  color: #333;
}

/* 轮播卡片 */
.swiper-card {
  margin: 0 32rpx 24rpx;
  padding: 12rpx;
}

.swiper {
  width: 100%;
  height: 300rpx;
}

.swiper-item-wrap {
  width: 100%;
  height: 100%;
  border-radius: 24rpx;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.08);
}

.swiper-scale {
  transform: scale(0.95);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
}

.swiper-img {
  width: 100%;
  height: 100%;
  display: block;
}

.ops {
  margin: 0 32rpx 24rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.op-btn {
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
  border-radius: 20rpx;
  padding: 28rpx 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
}

.op-icon {
  width: 80rpx;
  height: 80rpx;
}

.op-text {
  font-size: 26rpx;
  color: #333;
}

.section-card {
  margin: 0 32rpx 24rpx;
}

.section-header {
  padding: 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.section-icon {
  width: 48rpx;
  height: 48rpx;
}

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

.section-title-text {
  font-size: 30rpx;
  color: #222;
  font-weight: 600;
}

.section-sub {
  font-size: 22rpx;
  color: #9a9aa0;
}

.chevron {
  width: 24rpx;
  height: 24rpx;
  border-right: 4rpx solid #b5b6ba;
  border-bottom: 4rpx solid #b5b6ba;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.chevron.open {
  transform: rotate(135deg);
}

.asset-grid {
  padding: 0 24rpx 24rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.grid-item {
  background: #fafbff;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24rpx 12rpx;
  gap: 10rpx;
}

.grid-icon {
  width: 64rpx;
  height: 64rpx;
}

.grid-text {
  font-size: 24rpx;
  color: #444;
  text-align: center;
  line-height: 1.4;
}

.section-title {
  padding: 0 32rpx 12rpx;
  color: #666;
  font-size: 26rpx;
}

.notice {
  margin: 0 32rpx 32rpx;
  padding: 20rpx;
  text-align: center;
}

.notice-img {
  width: 100%;
  border-radius: 12rpx;
}

.notice-tip {
  display: block;
  color: #9a9aa0;
  font-size: 22rpx;
  margin-top: 12rpx;
}
</style>
