<script setup>
import { ref } from 'vue'

const pendingCount = ref(0)
const processingCount = ref(0)

const serviceCategories = ref([
  {
    icon: 'mdi-account-hard-hat',
    color: '#f57c00',
    bgColor: '#fff3e0',
    name: '用工服务',
    items: ['企业职工退休一件事联办', '浙里康养', '住房公积金'],
  },
  {
    icon: 'mdi-cash-multiple',
    color: '#00897b',
    bgColor: '#e0f2f1',
    name: '税收财务',
    items: ['公共支付', '浙里办票', '财政电子票据无纸化报销'],
  },
  {
    icon: 'mdi-shield-check-outline',
    color: '#1565c0',
    bgColor: '#e3f2fd',
    name: '生产经营',
    items: ['浙企报', '浙里交通', '数智视听'],
  },
  {
    icon: 'mdi-check-decagram-outline',
    color: '#1565c0',
    bgColor: '#e3f2fd',
    name: '准入准营',
    items: ['浙企出海', '数字政府服务商登记', '建筑业企业资质省级认定'],
  },
  {
    icon: 'mdi-stamper',
    color: '#f57c00',
    bgColor: '#fff3e0',
    name: '年检年审',
    items: ['民办学校办学许可证年检', '企业报送年度报告', '出版物印刷企业年度核检'],
  },
  {
    icon: 'mdi-swap-horizontal-circle-outline',
    color: '#f57c00',
    bgColor: '#fff3e0',
    name: '企业变更',
    items: ['报纸出版单位变更部分登记', '会计师事务所负责人变更', '律师事务所合伙人变更备案'],
  },
])

const commonServices = ref([
  { icon: 'mdi-clipboard-check-outline', title: '特种作业人员操作资格认定（...' },
  { icon: 'mdi-printer-outline', title: '查询打印高级职称电子证书' },
  { icon: 'mdi-clipboard-check-outline', title: '特种作业人员操作资格认定（...' },
  { icon: 'mdi-account-group-outline', title: '社保医保税务参保一件事联办' },
])
</script>

<template>
  <v-container fluid class="pa-0">
    <div class="pa-3 px-0">
      <v-row no-gutters>
        <!-- 左侧 Banner -->
        <v-col cols="12" md="6" class="pr-md-2 mb-3 mb-md-0">
          <div class="banner-card d-flex align-center">
            <!-- 左侧文字 -->
            <div class="banner-left">
              <h2 class="banner-title">高效办成一件事</h2>
              <p class="banner-subtitle">一表申请、一套材料、一次提交、一次办结</p>
              <v-btn variant="outlined" rounded="pill" class="banner-btn" size="small">
                点击查看
              </v-btn>
            </div>
          </div>
        </v-col>

        <!-- 右侧用户服务面板 -->
        <v-col cols="12" md="6" class="pl-md-2">
          <v-card class="service-card pa-4" height="100%">
            <!-- 用户信息头部 -->
            <div class="d-flex align-center mb-4">
              <v-avatar color="blue-lighten-4" size="36" class="mr-3">
                <v-icon color="blue-darken-1">mdi-account</v-icon>
              </v-avatar>
              <span class="font-weight-bold text-body-1 flex-grow-1">*文件</span>
              <span class="status-tag mr-3">
                待处理
                <span class="status-count">（{{ pendingCount }}）</span>
              </span>
              <span class="status-tag">
                办理中
                <span class="status-count">（{{ processingCount }}）</span>
              </span>
            </div>

            <v-divider class="mb-3" />

            <!-- 我的常用 -->
            <div class="d-flex align-center mb-3">
              <span class="text-body-2 font-weight-medium mr-1">我的常用</span>
              <v-tooltip text="展示您最常用的服务" location="top">
                <template #activator="{ props }">
                  <v-icon v-bind="props" size="15" color="grey">mdi-information-outline</v-icon>
                </template>
              </v-tooltip>
              <span class="text-caption text-medium-emphasis ml-2">暂无常用，为您推荐以下服务</span>
            </div>

            <!-- 服务列表 2x2 -->
            <v-row dense>
              <v-col v-for="(svc, i) in commonServices" :key="i" cols="6">
                <div class="service-item d-flex align-center">
                  <div class="service-icon mr-2">
                    <v-icon size="14" color="white">{{ svc.icon }}</v-icon>
                  </div>
                  <span class="text-caption service-title">{{ svc.title }}</span>
                </div>
              </v-col>
            </v-row>
          </v-card>
        </v-col>
      </v-row>
    </div>
    <!-- 个人服务 -->
    <v-card class="mt-3 pa-4">
      <div class="d-flex align-center justify-space-between mb-4">
        <div class="d-flex align-center">
          <span class="section-title">个人服务</span>
          <span class="section-title-line ml-2"></span>
        </div>
        <span class="text-caption text-blue-darken-1 cursor-pointer">查看更多 &gt;</span>
      </div>

      <v-row dense>
        <v-col v-for="(cat, i) in serviceCategories" :key="i" cols="12" sm="6" md="4">
          <div class="cat-card d-flex">
            <!-- 左侧图标区 -->
            <div class="cat-icon-wrap d-flex flex-column align-center justify-center"
              :style="{ background: cat.bgColor }">
              <v-icon :color="cat.color" size="28">{{ cat.icon }}</v-icon>
              <span class="cat-name mt-1" :style="{ color: cat.color }">{{ cat.name }}</span>
            </div>
            <!-- 右侧服务列表 -->
            <div class="cat-items flex-grow-1">
              <div v-for="(item, j) in cat.items" :key="j" class="cat-item text-truncate">{{ item }}</div>
            </div>
          </div>
        </v-col>
      </v-row>
    </v-card>
  </v-container>
</template>


<style scoped>
/* Banner 卡片 */
.banner-card {
  background: linear-gradient(135deg, #daeeff 0%, #c5e8ff 60%, #b8dff7 100%);
  border-radius: 12px;
  padding: 28px 24px;
  height: 100%;
  min-height: 180px;
  overflow: hidden;
  position: relative;
}

.banner-left {
  flex: 1;
  z-index: 1;
}

.banner-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a3c6e;
  margin-bottom: 8px;
  line-height: 1.3;
}

.banner-subtitle {
  font-size: 0.8rem;
  color: #4a6fa5;
  margin-bottom: 20px;
  line-height: 1.6;
}

.banner-btn {
  border-color: #4a6fa5 !important;
  color: #1a3c6e !important;
  font-size: 0.8rem;
  letter-spacing: 0;
}

/* 右侧插图 */
.banner-right {
  width: 160px;
  flex-shrink: 0;
  position: relative;
}

.phone-mockup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.float-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 3px;
  background: #f5a623;
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 10px;
  color: white;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.chip-1 {
  top: 10px;
  right: -10px;
}

.chip-2 {
  bottom: 10px;
  left: -10px;
  background: #1565c0;
}

/* 服务卡片 */
.service-card {
  border-radius: 12px !important;
}

.status-tag {
  font-size: 0.8rem;
  /* color: #555; */
}

.status-count {
  color: #1565c0;
  font-weight: 600;
}

/* 服务列表项 */
.service-item {
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 6px;
}

.service-item:hover .service-title {
  color: #1565c0;
}

.service-icon {
  width: 22px;
  height: 22px;
  background: #1565c0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-title {
  /* color: #333; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

/* 个人服务 */
.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1565c0;
  border-bottom: 3px solid #1565c0;
  padding-bottom: 2px;
}

.section-title-line {
  flex: 1;
  height: 1px;
  background: #e0e0e0;
  align-self: flex-end;
  margin-bottom: 3px;
}

.cat-card {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 2px;
}

.cat-card:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.cat-icon-wrap {
  width: 72px;
  flex-shrink: 0;
  padding: 12px 8px;
}

.cat-name {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

.cat-items {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  min-height: 80px;
}

.cat-item {
  font-size: 12px;
  /* color: #333; */
  padding: 3px 0;
  cursor: pointer;
}

.cat-item:hover {
  color: #1565c0;
}
</style>
