<script setup lang="ts">
/**
 * 基于 page-container 的详情抽屉，防止小程序侧滑误退页面。
 * 只读展示键值对，底部可插操作按钮（如咨询状态变更）。
 */
withDefaults(defineProps<{
  show: boolean
  title?: string
  rows?: { label: string, value: string }[]
}>(), {
  title: '详情',
  rows: () => [],
})

const emit = defineEmits<{
  'update:show': [boolean]
  close: []
}>()

function onLeave() {
  emit('update:show', false)
  emit('close')
}
</script>

<template>
  <!-- #ifdef MP-WEIXIN -->
  <page-container :show="show" position="bottom" round :overlay="true" @afterleave="onLeave" @clickoverlay="onLeave">
    <view class="drawer">
      <view class="head">
        <text class="title">{{ title }}</text>
        <wd-icon name="close" size="20px" @click="onLeave" />
      </view>
      <scroll-view scroll-y class="body">
        <view v-for="(row, i) in rows" :key="i" class="row">
          <text class="label text-art-muted">{{ row.label }}</text>
          <text class="value">{{ row.value || '—' }}</text>
        </view>
        <slot />
      </scroll-view>
      <view v-if="$slots.footer" class="footer">
        <slot name="footer" />
      </view>
    </view>
  </page-container>
  <!-- #endif -->
  <!-- #ifndef MP-WEIXIN -->
  <view v-if="show" class="mask" @click="onLeave">
    <view class="drawer" @click.stop>
      <view class="head">
        <text class="title">{{ title }}</text>
        <wd-icon name="close" size="20px" @click="onLeave" />
      </view>
      <scroll-view scroll-y class="body">
        <view v-for="(row, i) in rows" :key="i" class="row">
          <text class="label text-art-muted">{{ row.label }}</text>
          <text class="value">{{ row.value || '—' }}</text>
        </view>
        <slot />
      </scroll-view>
      <view v-if="$slots.footer" class="footer">
        <slot name="footer" />
      </view>
    </view>
  </view>
  <!-- #endif -->
</template>

<style scoped lang="scss">
.mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
}
.drawer {
  background: #1a1a1c;
  border-radius: 24rpx 24rpx 0 0;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 32rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.title { font-size: 32rpx; color: rgb(var(--art-text)); font-weight: 600; }
.body { max-height: 55vh; padding: 16rpx 32rpx 32rpx; box-sizing: border-box; }
.row {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  padding: 18rpx 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.label { font-size: 22rpx; }
.value { font-size: 28rpx; color: rgb(var(--art-text)); word-break: break-all; }
.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  padding: 16rpx 32rpx 28rpx;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
</style>
