<template>
  <div class="store-map-readonly" v-loading="loading">
    <div class="content-wrapper">
      <h2 class="block-heading">效果预览</h2>
      <div class="preview-area">
        <div class="preview-card preview-card--blue">
          <div class="preview-media">
            <!-- 效果预览为固定示意图，与实际头图无关 -->
            <img :src="previewDemoImg" alt="效果预览示例" class="preview-img preview-img--single" />
            <div class="preview-album-pill" aria-hidden="true">
              <span>相册</span>
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
          <div class="preview-meta">
            <div class="store-title">
              {{ storeNameDisplay }}
            </div>
            <div class="store-rating-row">
              <div class="rating-left">
                <el-rate :model-value="5" disabled show-score text-color="#f47d1f" score-template="{value}" />
              </div>
              <div class="reviews-right">
                {{ previewReviews }} 条评价
                <el-icon class="reviews-arrow">
                  <ArrowRight />
                </el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>

      <h2 class="block-heading">头图</h2>
      <div class="source-panel">
        <div class="source-frame">
          <span class="source-badge" v-if="firstImageUrl" role="button" tabindex="0" @click.stop="openHeadPreview(0)">查看</span>
          <img
            v-if="firstImageUrl"
            :src="firstImageUrl"
            alt="头图"
            class="source-img source-img--clickable"
            @click.stop="openHeadPreview(0)"
          />
          <div v-else class="source-empty">暂无图片</div>
        </div>
      </div>
    </div>

    <PcImagePreviewViewer v-model:visible="headPreviewVisible" :url-list="imageUrls" :initial-index="headPreviewInitialIndex" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";
import { getStoreHeadImg } from "@/api/modules/storeDecoration";
import { getDetail } from "@/api/modules/homeEntry";
import { localGet } from "@/utils";
import previewDemoImg from "@/assets/images/uDianShiImg4.svg";
import PcImagePreviewViewer from "@/components/pcMediaPreview/PcImagePreviewViewer.vue";

/** 与商户端头图 imgType 一致 */
const IMG_TYPE_HEAD = 22;

const loading = ref(false);
const imageUrls = ref<string[]>([]);
const storeNameDisplay = ref("示例门店");
const previewReviews = ref(1853);

const firstImageUrl = computed(() => imageUrls.value[0] || "");

const headPreviewVisible = ref(false);
const headPreviewInitialIndex = ref(0);

const openHeadPreview = (index: number) => {
  if (!imageUrls.value.length) return;
  const i = Math.min(Math.max(0, index), imageUrls.value.length - 1);
  headPreviewInitialIndex.value = i;
  headPreviewVisible.value = true;
};

const fetchStoreDetail = async () => {
  try {
    const param = { id: localGet("geeker-user")?.userInfo?.storeId };
    if (!param.id) return;
    const res: any = await getDetail(param as any);
    if (res?.code === 200 && res.data?.storeName) {
      storeNameDisplay.value = String(res.data.storeName);
    }
  } catch {
    /* ignore */
  }
};

const fetchHeadImages = async () => {
  const userInfo: any = localGet("geeker-user")?.userInfo || {};
  const storeId = userInfo.storeId;
  if (!storeId) {
    imageUrls.value = [];
    return;
  }
  loading.value = true;
  try {
    const res: any = await getStoreHeadImg(storeId, IMG_TYPE_HEAD);
    if (res && (res.code === 200 || res.code === "200") && res.data) {
      const dataAny = res.data as any;
      const imgList = Array.isArray(dataAny) ? dataAny : dataAny.storeImgList || [];
      const sorted = [...imgList].sort((a: any, b: any) => (Number(a?.imgSort) || 0) - (Number(b?.imgSort) || 0));
      imageUrls.value = sorted.map((item: any) => String(item?.imgUrl || "").trim()).filter(Boolean);
    } else {
      imageUrls.value = [];
    }
  } catch {
    imageUrls.value = [];
  } finally {
    loading.value = false;
  }
};

onMounted(async () => {
  await fetchStoreDetail();
  await fetchHeadImages();
});
</script>

<style scoped lang="scss">
.store-map-readonly {
  min-height: 100%;
  padding: 24px;
  background: #ffffff;
}
.content-wrapper {
  /* 与移动端卡片预览宽度接近，整块靠左不靠中 */
  width: 100%;
  max-width: 360px;
  margin: 0;
}
.block-heading {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: #151515;
  text-align: left;
}
.preview-area {
  margin-bottom: 32px;
}
.preview-card {
  padding: 12px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
}
.preview-card--blue {
  border: 2px solid #6c8ff8;
}
.preview-media {
  position: relative;
  margin-bottom: 12px;
  overflow: hidden;
  background: #f0f2f5;
  border-radius: 8px;
}
.preview-album-pill {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1;
  color: #ffffff;
  pointer-events: none;
  background-color: rgb(0 0 0 / 60%);
  border-radius: 20px;
  .el-icon {
    font-size: 12px;
  }
}
.preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.preview-img--single {
  display: block;
  width: 100%;
  max-height: 198px;
  object-fit: cover;
}
.preview-meta {
  .store-title {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #151515;
    text-align: left;
  }
  .store-rating-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    .rating-left {
      display: flex;
      flex: 1;
      align-items: center;
      min-width: 0;
      :deep(.el-rate) {
        .el-rate__icon {
          font-size: 14px;
        }
      }
    }
    .reviews-right {
      display: inline-flex;
      flex-shrink: 0;
      gap: 2px;
      align-items: center;
      font-size: 13px;
      color: #606266;
      white-space: nowrap;
      .reviews-arrow {
        font-size: 14px;
        color: #909399;
      }
    }
  }
}
.source-panel {
  padding-top: 0;
}
.source-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid #aaaaaa;
  border-radius: 8px;
}
.source-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  padding: 8px 16px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
  background-color: rgb(0 0 0 / 60%);
  border-radius: 6px;
  transform: translate(-50%, -50%);
}
.source-img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
}
.source-img--clickable {
  cursor: pointer;
}
.source-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  font-size: 14px;
  color: #909399;
}
</style>
