<script setup lang="ts">
/**
 * C 端菜单行：图标 + 标题/副标题 + 右侧值或箭头。
 * 使用 art-card 与按压缩放，替代 wd-cell 的白底样式。
 * 若父级 ArtMenuGroup 为 grid，改为上图标下标题的宫格单元。
 */
import { computed, inject, type Ref } from 'vue'

withDefaults(defineProps<{
  title: string
  label?: string
  value?: string
  icon?: string
  /** 是否显示右侧箭头（可点击入口）；宫格模式下隐藏 */
  isLink?: boolean
}>(), {
  label: '',
  value: '',
  icon: '',
  isLink: false,
})

const emit = defineEmits<{ click: [] }>()

/** 从分组注入布局；无分组时保持列表 */
const injected = inject<Ref<'list' | 'grid'> | undefined>('artMenuLayout', undefined)
const isGrid = computed(() => injected?.value === 'grid')

/** 点击整行时向外抛出，由页面决定跳转或弹层 */
const onTap = () => {
  emit('click')
}
</script>

<template>
  <view
    class="art-menu-item art-card art-card-press"
    :class="{ 'art-menu-item--grid': isGrid }"
    @click="onTap"
  >
    <view v-if="icon" class="icon-wrap">
      <wd-icon :name="icon" :size="isGrid ? '26px' : '22px'" color="rgb(212,179,131)" />
    </view>
    <view class="content">
      <text class="title">{{ title }}</text>
      <!-- 宫格空间有限，不展示长副标题 -->
      <text v-if="label && !isGrid" class="label text-art-muted">{{ label }}</text>
      <text v-if="value && isGrid" class="value-grid text-art-muted">{{ value }}</text>
    </view>
    <text v-if="value && !isGrid" class="value text-art-muted">{{ value }}</text>
    <wd-icon
      v-if="isLink && !isGrid"
      name="arrow-right"
      size="16px"
      color="rgb(136,136,136)"
    />
  </view>
</template>

<style scoped lang="scss">
.art-menu-item {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 28rpx 28rpx;
  min-height: 104rpx;
  box-sizing: border-box;
}
.art-menu-item--grid {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  padding: 28rpx 12rpx 24rpx;
  min-height: 168rpx;
  text-align: center;
}
.icon-wrap {
  flex-shrink: 0;
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 179, 131, 0.12);
}
.art-menu-item--grid .icon-wrap {
  width: 72rpx;
  height: 72rpx;
  border-radius: 20rpx;
}
.content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}
.art-menu-item--grid .content {
  flex: none;
  align-items: center;
  width: 100%;
}
.title {
  font-size: 30rpx;
  color: rgb(var(--art-text));
  line-height: 1.35;
}
.art-menu-item--grid .title {
  font-size: 26rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.label {
  font-size: 24rpx;
  line-height: 1.4;
}
.value {
  flex-shrink: 0;
  font-size: 26rpx;
  max-width: 200rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.value-grid {
  font-size: 22rpx;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
