<template>
  <view class="qr-popup-container">
    <!-- 弹窗标题栏 -->
    <view class="popup-header">
      <view class="popup-sublabel-row">
        <view class="popup-pulse-dot"></view>
        <text class="popup-sublabel">VRTICKET 电子检票凭证</text>
      </view>
      <text class="popup-title">{{ showInfo.title }}</text>
      <text class="popup-time">{{ showInfo.session_time }}</text>
    </view>

    <!-- QR 码区域（Swiper） -->
    <view class="qr-area">
      <swiper
        class="qr-swiper"
        :indicator-dots="false"
        :autoplay="false"
        :current="currentIndex"
        @change="onSwiperChange"
      >
        <swiper-item
          class="qr-swiper-item"
          v-for="(ticket, tIdx) in tickets"
          :key="ticket.id"
        >
          <view class="qr-content">
            <!-- 亮白底卡：确保扫描仪和闸机能顺利识别码 -->
            <view class="scanner-white-block">
              <!-- 二维码 -->
              <view class="qrcode-wrapper">
                <w-qrcode :options="getQrcodeOptions(ticket)" />
                <!-- 过期遮罩（覆盖在 QR 上） -->
                <view
                  v-if="ticket.qr_expires_in !== undefined && ticket.qr_expires_in <= 0"
                  class="expired-overlay"
                  @click="onRefreshClick"
                >
                  <image
                    class="refresh-icon"
                    src="/static/images/common/refresh.png"
                    mode="aspectFit"
                  />
                  <text class="expired-text">二维码已过期</text>
                  <text class="expired-tip">点击刷新</text>
                </view>
              </view>

              <!-- 条形码 -->
              <view class="barcode-wrapper">
                <w-barcode :options="getBarcodeOptions(ticket)" />
              </view>
            </view>

            <!-- 核销码明文 -->
            <view class="short-code-text">
              <text class="short-code-label">TIX 核销密匙</text>
              <text class="short-code-value">{{ formatShortCode(ticket.short_code) }}</text>
            </view>
            <text class="scan-tip-text">请对准影院或检票闸机扫码，由检票员销退</text>
          </view>
        </swiper-item>
      </swiper>

      <!-- 多票指示器 -->
      <view class="indicator-dots" v-if="tickets.length > 1">
        <view
          class="dot"
          v-for="(ticket, tIdx) in tickets"
          :key="'dot-' + tIdx"
          :class="{ 'dot-active': tIdx === currentIndex }"
        ></view>
      </view>
    </view>

    <!-- 座位信息联动区 -->
    <view class="seat-info-area">
      <view class="seat-divider"></view>
      <view class="seat-detail-row">
        <view class="seat-detail-item">
          <text class="seat-detail-label">座位位置</text>
          <text class="seat-detail-value">{{ currentTicket ? currentTicket.seat_number : '-' }}</text>
        </view>
        <view class="seat-detail-divider"></view>
        <view class="seat-detail-item">
          <text class="seat-detail-label">实名观演人</text>
          <text class="seat-detail-value">{{ currentTicket && currentTicket.real_name ? currentTicket.real_name : '探票员' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TicketQrPopup',
  props: {
    // 票据数组（含 qr_payload + short_code）
    tickets: {
      type: Array,
      default: function() {
        return [];
      },
    },
    // 当前 Swiper 索引
    currentIndex: {
      type: Number,
      default: 0,
    },
    // 演出信息
    showInfo: {
      type: Object,
      default: function() {
        return {};
      },
    },
  },
  computed: {
    currentTicket: function() {
      return this.tickets[this.currentIndex] || null;
    },
  },
  methods: {
    // Swiper 滑动回调
    onSwiperChange: function(e) {
      this.$emit('change', e.detail.current);
    },

    // 点击过期遮罩刷新
    onRefreshClick: function() {
      this.$emit('refresh');
    },

    // 格式化核销码，4位一组用空格隔开
    formatShortCode(code) {
      if (!code) return '';
      const str = String(code).replace(/\s/g, '');
      if (str.length <= 4) return str;
      const chunks = [];
      for (let i = 0; i < str.length; i += 4) {
        chunks.push(str.slice(i, i + 4));
      }
      return chunks.join(' ');
    },

    // 构造 w-qrcode 配置
    getQrcodeOptions: function(ticket) {
      return {
        code: ticket.qr_payload || '',
        size: 450,
        bgColor: '#ffffff',
      };
    },

    // 构造 w-barcode 配置
    getBarcodeOptions: function(ticket) {
      return {
        code: ticket.short_code || '',
        width: 480,
        height: 100,
        bgColor: '#ffffff',
        color: '#000000',
      };
    },
  },
};
</script>

<style>
/* ========== 弹窗容器 ========== */
.qr-popup-container {
  width: 620rpx;
  background: #111111;
  color: #ffffff;
  border-radius: 48rpx;
  overflow: hidden;
  border: 4rpx solid #333333;
}

/* ========== 标题栏 ========== */
.popup-header {
  padding: 40rpx 40rpx 24rpx;
  border-bottom: 2rpx solid #222222;
  display: flex;
  flex-direction: column;
}

/* 呼吸红点与上方标签 */
.popup-sublabel-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 12rpx;
}

.popup-pulse-dot {
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  background: #e1251b;
  box-shadow: 0 0 10rpx #e1251b;
  animation: pulse-glow 1.5s infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.popup-sublabel {
  font-size: 18rpx;
  font-weight: 900;
  color: #888888;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.popup-title {
  display: block;
  font-size: 36rpx;
  font-weight: 900;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.popup-time {
  font-size: 22rpx;
  font-weight: 700;
  color: #aaaaaa;
  margin-top: 8rpx;
}

/* ========== QR 区域 ========== */
.qr-area {
  padding: 40rpx;
  background: #111111;
}

.qr-swiper {
  width: 100%;
  height: 740rpx;
}

.qr-swiper-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #1e1e1e;
  border: 2rpx solid #2a2a2a;
  border-radius: 36rpx;
  padding: 40rpx 30rpx;
  box-sizing: border-box;
}

/* 亮白块，保障扫描仪和闸机完美高清晰扫码 */
.scanner-white-block {
  background: #ffffff;
  padding: 30rpx;
  border-radius: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30rpx;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 28rpx;
}

/* ========== 二维码 ========== */
.qrcode-wrapper {
  position: relative;
  width: 320rpx;
  height: 320rpx;
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
}

/* 过期遮罩 */
.expired-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  /* #ifdef H5 || APP-PLUS */
  backdrop-filter: blur(4rpx);
  /* #endif */
}

.refresh-icon {
  width: 64rpx;
  height: 64rpx;
  opacity: 0.8;
}

.expired-text {
  font-size: 26rpx;
  font-weight: 900;
  color: #111111;
}

.expired-tip {
  font-size: 22rpx;
  color: #e1251b;
  font-weight: 700;
}

/* ========== 条形码 ========== */
.barcode-wrapper {
  width: calc(100% - 60rpx);
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== 核销码明文 ========== */
.short-code-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rpx;
  margin-bottom: 8rpx;
}

.short-code-label {
  font-size: 18rpx;
  color: #aaaaaa;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.short-code-value {
  font-size: 34rpx;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.15em;
  font-family: 'Courier New', Courier, monospace;
}

.scan-tip-text {
  font-size: 18rpx;
  color: #888888;
  font-weight: 700;
  text-align: center;
}

/* ========== 多票指示器 ========== */
.indicator-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12rpx;
  margin-top: 16rpx;
}

.dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #333333;
  transition: all 0.3s ease;
}

.dot-active {
  width: 28rpx;
  border-radius: 6rpx;
  background: #e1251b;
}

/* ========== 座位信息区 ========== */
.seat-info-area {
  padding: 0 40rpx 40rpx;
}

.seat-divider {
  height: 2rpx;
  background: #222222;
  margin-bottom: 30rpx;
}

.seat-detail-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.seat-detail-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.seat-detail-divider {
  width: 2rpx;
  height: 60rpx;
  background: #333333;
}

.seat-detail-label {
  font-size: 20rpx;
  color: #888888;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.seat-detail-value {
  font-size: 32rpx;
  font-weight: 900;
  color: #ffffff;
}
</style>
