<template>
  <view class="merchant-header">
    <!-- 轮播图 -->
    <swiper
      class="banner-swiper"
      :indicator-dots="images.length > 1"
      :autoplay="images.length > 1"
      :circular="images.length > 1"
      indicator-color="rgba(255, 255, 255, 0.4)"
      indicator-active-color="#FFFFFF"
    >
      <swiper-item v-for="(img, index) in displayImages" :key="index">
        <image
          class="banner-image"
          :src="img"
          mode="aspectFill"
          @tap="previewImages(index)"
        />
      </swiper-item>
    </swiper>

    <!-- 商家信息卡片 -->
    <base-card class="info-card" variant="elevated" :shadow="true">
      <!-- 商家名称 -->
      <view class="merchant-name-row">
        <text class="merchant-name">{{ name }}</text>
      </view>

      <!-- 评分卡片 -->
      <view class="rating-card" v-if="rating || reviewCount">
        <rating-stars
          :rating="rating"
          :count="reviewCount"
          size="large"
          color="white"
        />
        <text class="rating-comment" v-if="ratingComment">{{ ratingComment }}</text>
      </view>

      <!-- 地址 -->
      <view class="address-row" v-if="address" @tap="handleAddressTap">
        <u-icon name="map-pin-fill" :size="iconSize" color="#6B7280" />
        <text class="address-text">{{ address }}</text>
        <u-icon name="copy" :size="iconSize - 4" color="#9CA3AF" />
      </view>

      <!-- 描述 -->
      <text class="description" v-if="description">{{ description }}</text>

      <!-- 标签 -->
      <tag-list v-if="tags && tags.length > 0" :tags="tags" class="tags" />
    </base-card>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import BaseCard from '../base/BaseCard.vue';
import RatingStars from './RatingStars.vue';
import TagList from './TagList.vue';

interface Props {
  name: string;                    // 商家名称
  images?: string[];               // 轮播图片
  logo?: string;                   // 商家logo（作为默认图）
  rating?: number;                 // 评分
  reviewCount?: number;            // 评价数量
  ratingComment?: string;          // 评分评语
  address?: string;                // 地址
  description?: string;            // 描述
  tags?: string[];                 // 标签
}

const props = withDefaults(defineProps<Props>(), {
  images: () => [],
  rating: 0,
  reviewCount: 0,
  tags: () => []
});

const emit = defineEmits<{
  'address-tap': [address: string];
  'preview-images': [index: number];
}>();

// 图标尺寸
const iconSize = computed(() => 20);

// 显示的图片列表
const displayImages = computed(() => {
  if (props.images && props.images.length > 0) {
    return props.images;
  }
  if (props.logo) {
    return [props.logo];
  }
  return ['/static/placeholder-hotel.png'];
});

// 预览图片
function previewImages(index: number) {
  if (props.images && props.images.length > 0) {
    uni.previewImage({
      current: index,
      urls: props.images
    });
    emit('preview-images', index);
  }
}

// 地址点击
function handleAddressTap() {
  if (!props.address) return;

  uni.showActionSheet({
    itemList: ['复制地址', '导航到这里'],
    success: (res) => {
      if (res.tapIndex === 0) {
        // 复制地址
        uni.setClipboardData({
          data: props.address,
          success: () => {
            uni.showToast({ title: '地址已复制', icon: 'success' });
          }
        });
      } else if (res.tapIndex === 1) {
        // 导航
        emit('address-tap', props.address);
      }
    }
  });
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';
@import '@/static/styles/mixins.scss';

.merchant-header {
  position: relative;
  margin-bottom: $spacing-xl;
}

/* ========== 轮播图 ========== */
.banner-swiper {
  width: 100%;
  height: 500rpx;
  background: $gradient-secondary;
}

.banner-image {
  width: 100%;
  height: 100%;
  display: block;
}

/* ========== 信息卡片 ========== */
.info-card {
  margin: -60rpx $spacing-xl 0;
  position: relative;
  z-index: 2;
  border-radius: $radius-lg;
  box-shadow: $shadow-lg;
}

/* ========== 商家名称 ========== */
.merchant-name-row {
  margin-bottom: $spacing-lg;
}

.merchant-name {
  font-size: $font-2xl;
  font-weight: $font-bold;
  color: $text-primary;
  line-height: $line-height-tight;
  display: block;
}

/* ========== 评分卡片 ========== */
.rating-card {
  background: $gradient-secondary;
  border-radius: $radius-md;
  padding: $spacing-lg $spacing-xl;
  @include flex-between;
  margin-bottom: $spacing-lg;
  box-shadow: $shadow-secondary;
}

.rating-comment {
  font-size: $font-sm;
  color: rgba(255, 255, 255, 0.95);
  font-weight: $font-medium;
  max-width: 300rpx;
  text-align: right;
  line-height: $line-height-normal;
}

/* ========== 地址 ========== */
.address-row {
  @include flex-row(flex-start, center);
  gap: $spacing-xs;
  margin-bottom: $spacing-lg;
  padding: $spacing-md;
  background: $gray-50;
  border-radius: $radius-base;
  transition: $transition-bg;

  &:active {
    background: $gray-100;
  }
}

.address-text {
  flex: 1;
  font-size: $font-sm;
  color: $text-secondary;
  line-height: $line-height-normal;
}

/* ========== 描述 ========== */
.description {
  font-size: $font-base;
  color: $text-secondary;
  line-height: $line-height-relaxed;
  display: block;
  margin-bottom: $spacing-md;
  @include text-ellipsis-multi(3);
}

/* ========== 标签 ========== */
.tags {
  margin-top: $spacing-md;
}
</style>
