<template>
  <view class="permission-example">
    <wd-navbar title="权限控制示例" left-text="返回" @clickLeft="onBack" />
    
    <view class="section li-p-30">
      <view class="section-title li-mb-20 li-text-32 li-font-bold">1. 按钮权限控制</view>
      
      <!-- 使用权限按钮组件 -->
      <permission-button type="verification" class="li-mb-20">
        <wd-button>核销按钮(F1权限)</wd-button>
      </permission-button>
      
      <permission-button type="delivery" class="li-mb-20">
        <wd-button>配送按钮(F2权限)</wd-button>
      </permission-button>
      
      <permission-button type="promotion" class="li-mb-20">
        <wd-button>推广按钮(F3权限)</wd-button>
      </permission-button>
    </view>
    
    <view class="section li-p-30">
      <view class="section-title li-mb-20 li-text-32 li-font-bold">2. 菜单列表权限控制</view>
      
      <!-- 菜单列表筛选示例 -->
      <wd-cell-group>
        <wd-cell v-for="item in filteredMenuList" :key="item.type" :title="item.title" is-link @click="handleClick(item)" />
      </wd-cell-group>
    </view>
    
    <view class="section li-p-30">
      <view class="section-title li-mb-20 li-text-32 li-font-bold">3. 内联权限控制</view>
      
      <!-- 直接使用hasPermission函数 -->
      <view v-if="hasPermission('measure', userPermissions)" class="li-mb-20">
        <view class="li-bg-#f2f2f2 li-p-20 li-rd-10">
          <text class="li-text-28">这段内容只有拥有量房权限(F4)的用户才能看到</text>
        </view>
      </view>
      
      <view v-if="hasPermission('repair', userPermissions)" class="li-mb-20">
        <view class="li-bg-#f2f2f2 li-p-20 li-rd-10">
          <text class="li-text-28">这段内容只有拥有维修权限(F6)的用户才能看到</text>
        </view>
      </view>
    </view>
    
    <view class="section li-p-30">
      <view class="section-title li-mb-20 li-text-32 li-font-bold">4. 当前权限状态</view>
      <view class="li-bg-#f2f2f2 li-p-20 li-rd-10">
        <text class="li-text-26">权限列表: {{userPermissions.join(', ') || '无权限'}}</text>
      </view>
      
      <!-- 模拟切换权限 -->
      <view class="li-mt-20">
        <wd-button @click="togglePermission('F1')">切换F1权限</wd-button>
        <wd-button @click="togglePermission('F2')" class="li-mt-10">切换F2权限</wd-button>
        <wd-button @click="togglePermission('F3')" class="li-mt-10">切换F3权限</wd-button>
        <wd-button @click="togglePermission('F4')" class="li-mt-10">切换F4权限</wd-button>
        <wd-button @click="togglePermission('F6')" class="li-mt-10">切换F6权限</wd-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, provide } from 'vue'
import { hasPermission, filterByPermission } from '@/utils/permission'
import PermissionButton from '@/components/permission-button.vue'

// 模拟用户权限数据
const userPermissions = ref(['F1', 'F3'])

// 提供权限数据给子组件
provide('userPermissions', userPermissions)

// 菜单列表
const menuList = [
  { title: '商品核销', type: 'verification' },
  { title: '商品配送', type: 'delivery' },
  { title: '推广管理', type: 'promotion' },
  { title: '量房管理', type: 'measure' },
  { title: '维修管理', type: 'repair' },
  { title: '系统设置', type: 'settings' } // 这个没有权限控制，始终显示
]

// 过滤菜单列表
const filteredMenuList = computed(() => {
  return filterByPermission(menuList, userPermissions.value)
})

// 切换权限
const togglePermission = (permissionCode) => {
  const index = userPermissions.value.indexOf(permissionCode)
  if (index >= 0) {
    userPermissions.value.splice(index, 1)
  } else {
    userPermissions.value.push(permissionCode)
  }
  // 强制更新数组引用以触发响应式更新
  userPermissions.value = [...userPermissions.value]
}

// 处理菜单点击
const handleClick = (item) => {
  uni.showToast({
    title: `点击了${item.title}`,
    icon: 'none'
  })
}

// 返回上一页
const onBack = () => {
  uni.navigateBack()
}
</script>

<style>
.section {
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
}
</style> 