<template>
  <view>
    <CuNavbar :isBack="false" title="我的">
      <template #right>
        <view class="h-full flex-center">
          <image
            @click="goPath('/pages/setting/index')"
            class="w-32rpx h-32rpx"
            src="/static/images/setting.svg"
          ></image>
        </view>
      </template>
    </CuNavbar>
    <view class="px-base mt-30rpx">
      <view class="card-shadow bg-white rounded-19rpx p-base relative">
        <view class="flex">
          <view class="w-120rpx h-120rpx rounded-full overflow-hidden">
            <image class="w-full h-full" :src="userInfo?.avatar"></image>
          </view>
          <view class="ml-20rpx">
            <view class="text-28rpx font-medium flex items-center">
              <view>{{ userInfo.name }}</view>
              <view class="ml-20rpx" @click="goPath('/pages/userInfo/index')">
                <uv-icon size="36rpx" name="edit-pen"></uv-icon>
              </view>
            </view>
            <view class="text-26rpx">{{ userInfo.phone }}</view>
            <view class="flex">
              <uv-tags
                v-for="(item, i) in userInfo.jobs"
                :key="i"
                plain
                size="mini"
                :text="item.name"
              ></uv-tags>
            </view>
          </view>
        </view>
        <view class="absolute right-base top-base">
          <view class="flex items-center">
            <view
              class="flex items-center mr-10rpx"
              @click="goPath('/pages/clockout/index')"
            >
              <image
                class="w-40px h-40rpx"
                src="@/static/images/rl.svg"
              ></image>
            </view>
            <cu-badge color="white" :value="unread_notifications">
              <uv-icon
                @click="goPath('/pages/message/index')"
                color="#8a8a8a"
                size="54rpx"
                name="chat"
              ></uv-icon>
            </cu-badge>
          </view>
        </view>
      </view>
    </view>
    <view class="px-base space-y-15rpx mt-30rpx">
      <view class="card" v-for="(item, i) in opList" :key="i">
        <TitleComp :title="item.title"></TitleComp>
        <view class="grid grid-cols-3 mt-20rpx gap-34rpx">
          <template v-for="(child, ii) in item.children" :key="ii">
            <OpItem
              :data="child"
              v-if="child?.rouls ? checkPermission(child.rouls) : true"
            ></OpItem>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { computed } from 'vue'
import TitleComp from '@/components/title-comp/index'
import OpItem from './components/op-item.vue'
import CuNavbar from '@/components/cu-navbar/index'
import checkPermission from '@/utils/permission'
import { useUserStore } from '@/store/modules/user'
import performanceIcon from '@/static/images/performance.svg'
import brokerageIcon from '@/static/images/brokerage.svg'
import userIcon from '@/static/images/user.svg'
import taskIcon from '@/static/images/task.svg'
import expenseIcon from '@/static/images/expense.svg'
import workIcon from '@/static/images/work.svg'
import makeIcon from '@/static/images/make.svg'
import leaveIcon from '@/static/images/leave.svg'
import businessIcon from '@/static/images/business.svg'
import overtimeIcon from '@/static/images/overtime.svg'
import contractIcon from '@/static/images/contract.svg'
import booksIcon from '@/static/images/books.svg'
import examinationIcon from '@/static/images/examination.svg'
import cuBadge from '@/components/cu-badge/index.vue'
import { onShow } from '@dcloudio/uni-app'
const userStore = useUserStore()

const userInfo = computed(() => userStore.userInfo)
const unread_notifications = computed(
  () => userInfo.value.unread_notifications || 0
)

onShow(() => {
  userStore.fetchUserInfo()
})

const opList = [
  {
    title: '门店数据',
    children: [
      {
        icon: performanceIcon,
        title: '业绩数据',
        url: '/pages/data/performance/index',
      },
      {
        icon: brokerageIcon,
        title: '提成数据',
        url: '/pages/data/brokerage/index',
        rouls: ['store'],
      },
    ],
  },
  {
    title: '办公管理',
    children: [
      {
        icon: userIcon,
        title: '员工管理',
        url: '/pages/user/index',
        rouls: ['store', 'admin'],
      },
      {
        icon: taskIcon,
        title: '我的任务',
        url: '/pages/task/index',
      },
      {
        icon: expenseIcon,
        title: '报销管理',
        url: '/pages/expense-account/index',
      },
      {
        icon: workIcon,
        title: '升职申请',
        url: '/pages/work/list',
      },
      {
        icon: makeIcon,
        title: '补卡申请',
        url: '/pages/make-card/list',
      },
      {
        icon: leaveIcon,
        title: '请假申请',
        url: '/pages/ask-leave/list',
      },
      {
        icon: businessIcon,
        title: '出差报备',
        url: '/pages/business/list',
      },
      {
        icon: overtimeIcon,
        title: '加班报备',
        url: '/pages/overtime/list',
      },
      {
        icon: contractIcon,
        title: '合同管理',
        url: '/pages/contract/list',
      },
    ],
  },
  {
    title: '天天向上',
    children: [
      {
        icon: booksIcon,
        title: '培训课件',
        url: '/pages/train-books/index',
      },
      {
        icon: examinationIcon,
        title: '培训考试',
        url: '/pages/examination/index',
      },
    ],
  },
]

const goPath = (url) => {
  uni.navigateTo({
    url,
  })
}
</script>
