<script lang="ts" setup>
import { useAppStore } from '@/store'
import { getImageFullPath, maskPhone } from '@/utils'

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

const appStore = useAppStore()
const userInfo = ref<any>({})
const order_list = ref<any>([
  {
    name: '未完成',
    url: '/pages-sub/myWorkOrder/myWorkOrder',
    type: 'page',
    query: {
      handelSate: '1',
    },
    icon: 'WODEGONGDAN_WEIWANC_IMAGE',
  },
  {
    name: '已完成',
    url: '/pages-sub/myWorkOrder/myWorkOrder',
    type: 'page',
    query: {
      handelSate: '2',
    },
    icon: 'WODEGONGDAN_YIWANC_IMAGE',
  },
  {
    name: '全部工单',
    url: '/pages-sub/myWorkOrder/myWorkOrder',
    type: 'page',
    query: {
      handelSate: '-1',
    },
    icon: 'WODEGONGDAN_QUANBU__IMAGE',
  },
])
const other_list = ref([
  {
    name: '设置',
    url: '/pages-sub/setting/index',
    type: 'page',
    icon: 'WODE_SHEZHI_IMAGE',
  },
])

function handleOrderClick(item: any) {
  const { type, url, query } = item
  const pageUrl = `${url}?handelSate=${query.handelSate}`
  navApp({
    type,
    url: pageUrl,
  })
}

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

  switch (type) {
    case 'page':
      uni.navigateTo({
        url: `${url}`,
      })
      break
    case 'tabbar':
      uni.switchTab({
        url,
      })
      break
    default:
      break
  }
}

onMounted(() => {
  // 获取用户信息
  userInfo.value = appStore.getUserInfo()
})
</script>

<template>
  <z-paging
    ref="paging"
    :refresher-enabled="false"
    bg-color="#f9f9f9"
  >
    <template #top>
      <view class="header_bar">
        <view class="left">
          <view class="header_icon">
            <uv-image :src="getImageFullPath('DEFAULT_HEADER_IMAGE')" mode="widthFix" width="100%" />
          </view>
          <view class="user_inof">
            <view class="name">
              {{ userInfo.username || '--' }}
            </view>
            <view class="phone">
              {{ maskPhone(userInfo.contactPhone) || '--' }}
            </view>
          </view>
        </view>
        <view class="right" />
      </view>
    </template>
    <view class="container">
      <view class="inner">
        <!-- 我的工单 -->
        <view class="card_box">
          <view class="title">
            我的工单
          </view>
          <view class="app_grid">
            <view
              v-for="(item, index) in order_list"
              :key="index"
              class="grid-item"
              @click="handleOrderClick(item)"
            >
              <view class="icon_bar">
                <uv-image :src="getImageFullPath(item.icon)" mode="widthFix" width="100%" />
              </view>
              <view class="label">
                {{ item.name }}
              </view>
            </view>
          </view>
        </view>
        <!-- 其他功能 -->
        <view class="card_box">
          <view class="title">
            其他功能
          </view>
          <view class="app_grid">
            <view
              v-for="(item, index) in other_list"
              :key="index"
              class="grid-item"
              @click="navApp(item)"
            >
              <view class="icon_bar">
                <uv-image :src="getImageFullPath(item.icon)" mode="widthFix" width="100%" />
              </view>
              <view class="label">
                {{ item.name }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
.header_bar {
  position: relative;
  width: 100%;
  height: 400rpx;
  background-image:
    linear-gradient(0deg, #f9f9f9 0%, rgba(255, 255, 255, 0) 56%), linear-gradient(135deg, #eef6ff 0%, #bbdcff 100%);

  .left {
    position: absolute;
    left: 20rpx;
    bottom: 80rpx;
    display: flex;

    .header_icon {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      overflow: hidden;
    }

    .user_inof {
      margin-left: 20rpx;

      .name {
        font-family: PingFangSC-Medium;
        font-size: 36rpx;
        color: #333333;
        font-weight: 500;
      }

      .phone {
        margin-top: 15rpx;
        padding: 5rpx 15rpx;
        background: #f0f9ff;
        border-radius: 20rpx;
        font-family: PingFangSC-Regular;
        font-size: 22rpx;
        color: #333333;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
      }
    }
  }
}
.container {
  width: 100%;

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

    .card_box {
      padding: 24rpx 30rpx;
      width: calc(100% - 60rpx);
      background: #ffffff;
      border-radius: 28rpx;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

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

      .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: 92rpx;
            height: 92rpx;
            overflow: hidden;
          }

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