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

const apps = ref([
  { icon: 'mdi-cog-outline', name: '高级查询', desc: '多条件组合查询', active: false },
  { icon: 'mdi-account-group-outline', name: '企业受益人', desc: '穿透表象锁定受益人', active: false },
  { icon: 'mdi-domain', name: '企业核名', desc: '评估企业名注册通过率', active: false },
  { icon: 'mdi-bullhorn-outline', name: '公告大全', desc: '海量企业公告免费查', active: false },
  { icon: 'mdi-web', name: '网址快查', desc: '网站真伪一查便知', active: false },
  { icon: 'mdi-view-list-outline', name: '批量查询', desc: '查企业/受益人/集团', active: false },
  { icon: 'mdi-file-chart-outline', name: '查年报', desc: '洞察企业经营状况', active: false },
  { icon: 'mdi-account-alert-outline', name: '被执行人', desc: '查案件、避风险', active: false },
  { icon: 'mdi-swap-horizontal', name: '进出口信用', desc: '查询海关注册资质', active: false },
  { icon: 'mdi-scale-balance', name: '司法大数据', desc: '风险融合查询', active: false },
])

const policies = ref([
  {
    title: '2023年杭州市余杭区数字经济核心产业企业认定申报',
    tag: '其它工业与信息化项目',
    dept: '余杭区经济和信息化局',
    period: '2023-10-01 至 2023-11-24',
    deadline: '2023-11-24',
    remaining: '11天12小时',
  },
  {
    title: '2023年度杭州市高新技术企业认定申报通知',
    tag: '高新技术企业',
    dept: '杭州市科学技术局',
    period: '2023-09-15 至 2023-12-10',
    deadline: '2023-12-10',
    remaining: '27天08小时',
  },
])

</script>

<template>
  <v-container fluid class="pa-0">
    <!-- 热门应用 -->
    <v-card class="mx-auto mt-3 pa-4" >
      <!-- 标题栏 -->
      <div class="d-flex align-center justify-space-between mb-4">
        <div class="d-flex align-center">
          <span class="title-bar mr-2"></span>
          <span class="text-h6 font-weight-bold">热门应用</span>
        </div>
        <div class="d-flex align-center text-body-2 text-blue-darken-1 cursor-pointer">
          <v-icon size="16" color="blue-darken-1" class="mr-1">mdi-view-grid</v-icon>
          全部工具
        </div>
      </div>

      <!-- 应用网格 -->
      <v-row dense>
        <v-col v-for="(app, index) in apps" :key="index" cols="12" sm="4" md="3" lg="2dot4">
          <v-card
            class="app-item d-flex align-center pa-3"
            variant="flat"
            rounded="lg"
            hover
          >
            <v-icon :color="app.active ? 'white' : 'blue-darken-1'" size="36" class="mr-3 flex-shrink-0">
              {{ app.icon }}
            </v-icon>
            <div class="flex-grow-1 overflow-hidden">
              <div class="text-body-2 font-weight-bold text-truncate" :class="app.active ? 'text-white' : ''">
                {{ app.name }}
              </div>
              <div class="text-caption text-truncate" :class="app.active ? 'text-white' : 'text-medium-emphasis'">
                {{ app.desc }}
              </div>
            </div>
            <v-icon size="16" :color="app.active ? 'white' : 'blue-darken-1'" class="ml-1 flex-shrink-0">
              mdi-chevron-right
            </v-icon>
          </v-card>
        </v-col>
      </v-row>
    </v-card>

    <v-card class="mx-auto mt-3 mb-3 pa-4">
      <!-- 标题栏 -->
      <div class="d-flex align-center justify-space-between mb-4">
        <div class="d-flex align-center">
          <span class="title-bar mr-2"></span>
          <span class="text-h6 font-weight-bold">企业目录</span>
        </div>
      </div>
      <v-divider class="py-2" />
      <!-- 列表 -->
      <v-card v-for="(item, index) in policies" :key="index" class="policy-item px-3">
        <div class="d-flex align-start">
          <!-- 左侧信息 -->
          <div class="flex-grow-1 pr-6">
            <div class="policy-title mb-2">{{ item.title }}</div>
            <div class="flex-wrap gap-2 mb-1">
              <v-chip size="small" color="blue-darken-1" label>{{ item.tag }}</v-chip>
              <div class="pt-2 pl-1">
                <span class="policy-meta">
                  牵头部门：{{ item.dept }}
                </span>
                <span class="policy-meta ml-4">
                  政策时效：{{ item.period }}
                </span>
              </div>
            </div>
          </div>

          <!-- 右侧操作 -->
          <div class="d-flex flex-column align-end flex-shrink-0 pt-2" style="min-width:160px">
            <div class="text-blue-darken-1 font-weight-bold ">{{ item.deadline }}</div>
            <div class="text-medium-emphasis mb-1 mt-5">申报截止</div>
          </div>
          <div class="d-flex flex-column align-end flex-shrink-0 mr-8 pt-2" style="min-width:160px">
            <div class="policy-remaining">{{ item.remaining }}</div>
            <div class="text-medium-emphasis mb-1  mt-5">剩余申报期</div>
          </div>
          <div class="d-flex flex-column align-end flex-shrink-0" style="min-width:100px">
              <v-btn variant="flat" color="primary"  class="mb-2" style="width:88px;">立即申报</v-btn>
              <v-btn variant="outlined" color="blue-darken-1"  style="width:88px;">
                <v-icon size="14" class="mr-1">mdi-heart-outline</v-icon>收藏
              </v-btn>
          </div>
        </div>
        <v-divider v-if="false" />
      </v-card>
    </v-card>
  </v-container>
</template>


<style scoped>

/* 标题栏 */
.title-bar {
  display: inline-block;
  width: 4px;
  height: 18px;
  background: linear-gradient(180deg, #1565c0, #42a5f5);
  border-radius: 2px;
}

/* 应用卡片 */
.app-item {
  cursor: pointer;
  min-height: 72px;
  border: 1px solid #e0e0e0 !important;
  box-shadow: none !important;
}

.app-item:hover {
  box-shadow: 0 2px 12px rgba(25, 118, 210, 0.15) !important;
}

.app-item--active {
  background: linear-gradient(135deg, #1565c0, #42a5f5) !important;
  border-color: #1565c0 !important;
}

/* 5列布局适配 */
.v-col.lg-2dot4 {
  flex: 0 0 20%;
  max-width: 20%;
}

/* 企业目录 */
.policy-item {
  cursor: pointer;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
  border: 1px solid #e0e0e0 !important;
  box-shadow: none !important;
}

.policy-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
}

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

.policy-meta {
  font-size: 14px;
}

.policy-remaining {
  font-weight: 600;
  color: #f57c00;
}
</style>
