<script lang="ts" setup>
import { getImageFullPath } from '@/utils'
import { systemInfo } from '@/utils/systemInfo'
import { menu_list } from './config/menu'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

const app_list = ref(menu_list)
const actionSheetRef = ref<any>(null)
const createOrder_list = ref([])
function handleBack() {
  uni.navigateBack()
}

// 点击app
function navApp(item: any) {
  const { type, path, selectList } = item
  if (!path && type === 'page') {
    uni.showModal({
      title: '提示',
      content: '该功能暂未开放，敬请期待',
      showCancel: false,
      confirmText: '知道了',
    })
    return
  }

  switch (type) {
    case 'page':
      uni.navigateTo({
        url: path,
      })
      break
    case 'tabbar':
      uni.switchTab({
        url: path,
      })
      break
    case 'select':
      if (selectList && selectList.length > 0) {
        createOrder_list.value = selectList
        actionSheetRef.value.open()
      }
      break
    default:
      break
  }
}

function handleSelect(item: any) {
  const { path } = item
  uni.navigateTo({
    url: path,
  })
}
</script>

<template>
  <z-paging
    ref="paging"
    bg-color="#f9f9f9"
  >
    <template #top>
      <view class="custom_navbar" :style="{ height: `${systemInfo.statusBarHeight + 44}px` }">
        <view class="back_bar">
          <uv-icon name="arrow-left" color="white" size="24" @click="handleBack" />
          <text class="text">更多应用</text>
        </view>
      </view>
    </template>
    <view class="container">
      <view class="inner">
        <view
          v-for="item in app_list"
          :key="item.key"
          class="app_list"
        >
          <view class="header">
            <view class="title">
              常用应用
            </view>
          </view>
          <view class="app_grid">
            <view
              v-for="(appItem) in item.children"
              :key="appItem.key"
              class="grid-item"
              @click="navApp(appItem)"
            >
              <view class="icon_bar">
                <uv-image :src="getImageFullPath(appItem.customsrc)" mode="widthFix" width="100%" />
              </view>
              <view class="label">
                {{ appItem.name }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
  <uv-action-sheet
    ref="actionSheetRef"
    :actions="createOrder_list"
    title="工单类型"
    @select="handleSelect"
  />
</template>

<style lang="scss" scoped>
.custom_navbar {
  width: 100%;
  position: relative;
  background-color: #3095fc;

  .back_bar {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 25rpx;
    left: 30rpx;

    .text {
      font-family: SourceHanSansCN-Medium;
      font-size: 34rpx;
      color: white;
      letter-spacing: 0;
      font-weight: 500;
    }
  }
}

.container {
  width: 100%;

  .inner {
    padding: 30rpx 20rpx;
    width: calc(100% - 40rpx);
  }

  .app_list {
    padding: 25rpx 20rpx;
    width: calc(100% - 40rpx);
    border-radius: 28rpx;
    background-color: white;
    margin-bottom: 20rpx;

    .header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-family: PingFangSC-Medium;
        font-size: 28rpx;
        color: #343434;
        letter-spacing: 0;
        font-weight: 500;
      }

      .tips {
        display: flex;
        align-items: center;
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        color: #999999;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
      }
    }

    .app_grid {
      margin: 25rpx 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30rpx;

      .grid-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .icon_bar {
          width: 88rpx;
          height: 88rpx;
          overflow: hidden;
        }

        .label {
          margin-top: 10rpx;
          font-family: PingFangSC-Regular;
          font-size: 26rpx;
          color: #333333;
          letter-spacing: 0;
          text-align: center;
          font-weight: 400;
        }
      }
    }
  }
}
</style>
