<template>
  <view class="order-confirm-page">
    <!-- 顶部返回按钮 -->
    <view class="top-nav-left-icon pf" style="top: 44px;">
      <view class="icon back-icon round cp" @click="goBack">‹</view>
    </view>

    <!-- Header Banner - 复用 ticket-header 样式 -->
    <view class="order-header-banner">
      <view class="poster">
        <image 
          class="poster-img" 
          :src="posterUrl || (goodsData.images && goodsData.images[0]) || '/static/images/common/no-image.png'" 
          mode="aspectFill"
        />
      </view>
      <view class="header-info">
        <text class="title">{{ goodsData.title || '加载中...' }}</text>
        <text class="tag" v-if="goodsData.simple_desc">#{{ goodsData.simple_desc }}</text>
        
        <!-- 日期时间（含过期时间） -->
        <view class="info-row">
          <iconfont name="icon-calendar" size="28rpx" color="#d0cdd8"></iconfont>
          <text class="info-text">{{ formattedSessionTime }}</text>
        </view>
        
        <!-- 场馆信息布局 -->
        <view class="venue-info-block">
          <!-- 第一行：图标 + 场馆名称 -->
          <view class="venue-row">
            <iconfont name="icon-location" size="28rpx" color="#d0cdd8"></iconfont>
            <text class="venue-name">{{ currentSelection.venue || '未知场馆' }}</text>
          </view>
          <!-- 第二行：场馆地址 -->
          <text class="venue-address">{{ venueAddress || '暂无位置信息' }}</text>
        </view>
      </view>
    </view>

    <!-- Main Content - 白色背景卡片 -->
    <view class="main-content">
      <!-- 座位信息卡片 -->
      <view class="section-card">
        <view class="section-header">
          <text class="section-title">座位信息</text>
          <text class="card-subtitle">共 {{ confirmedSeats.length }} 张票</text>
        </view>
        <view class="seat-list">
          <!-- 场次信息摘要 -->
          <view class="session-summary" v-if="currentSelection.session">
            <text class="session-text">{{ currentSelection.session }}</text>
            <text class="separator">|</text>
            <text class="session-text">{{ currentSelection.venue }}</text>
            <text class="separator">|</text>
            <text class="session-text">{{ currentSelection.room }}</text>
          </view>
          
          <view class="seat-item" v-for="(seat, index) in confirmedSeats" :key="index">
            <view class="seat-badge">票档 {{ seat.sectionChar || 'A' }}</view>
            <text class="seat-name">{{ seat.rowLabel }}排{{ seat.colNum }}座</text>
            <text class="seat-price">¥{{ seat.price }}</text>
          </view>
        </view>
        <view class="seat-total">
          <text class="total-label">合计</text>
          <text class="total-price">¥{{ totalPrice }}</text>
        </view>
      </view>

      <!-- 购票须知卡片 -->
      <view class="section-card">
        <view class="section-header" @click="noticeExpanded = !noticeExpanded">
          <text class="section-title">购票须知</text>
          <view class="expand-btn">
            <text>{{ noticeExpanded ? '收起' : '展开' }}</text>
            <iconfont :name="noticeExpanded ? 'icon-angle-double-up' : 'icon-angle-double-down'" size="28rpx" color="#999"></iconfont>
          </view>
        </view>
        <view class="notice-list" v-show="noticeExpanded">
          <view class="notice-item" v-for="(item, index) in buyNotices" :key="index">
            <view class="notice-dot"></view>
            <view class="notice-content">
              <text class="notice-title">{{ item.title }}</text>
              <text class="notice-desc">{{ item.desc }}</text>
            </view>
          </view>
        </view>
        <view class="notice-list collapsed" v-show="!noticeExpanded">
          <view class="notice-item" v-for="(item, index) in buyNotices.slice(0, 2)" :key="index">
            <view class="notice-dot"></view>
            <view class="notice-content">
              <text class="notice-title">{{ item.title }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 服务说明卡片 -->
      <view class="section-card">
        <view class="section-header">
          <text class="section-title">服务说明</text>
        </view>
        <view class="service-list">
          <view class="service-item" v-for="(item, index) in services" :key="index">
            <text :class="item.status === 'success' ? 'icon-success' : 'icon-warning'">
              {{ item.status === 'success' ? '✔' : '!' }}
            </text>
            <view class="service-text">
              <text class="service-title">{{ item.title }}</text>
              <text class="service-desc">{{ item.desc }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 支付方式选择卡片 -->
      <view class="section-card payment-card" v-if="total_price > 0 && payment_list.length > 0">
        <view class="section-header">
          <text class="section-title">支付方式</text>
        </view>
        <view class="payment-list">
          <view 
            class="payment-item" 
            v-for="(item, index) in payment_list" 
            :key="index"
            :class="{ 'payment-item-selected': payment_id == item.id }"
            @click="payment_event(item)"
          >
            <image v-if="item.logo" class="payment-icon" :src="item.logo" mode="widthFix"></image>
            <text class="payment-name">{{ item.name }}</text>
            <view class="payment-check">
              <iconfont 
                :name="payment_id == item.id ? 'icon-selected-solid cr-main' : 'icon-not-selected'" 
                size="40rpx"
                :color="payment_id == item.id ? theme_color : '#999'"
              ></iconfont>
            </view>
          </view>
        </view>
      </view>

      <!-- 留言卡片 -->
      <view class="section-card" v-if="user_note_status || common_order_is_booking != 1">
        <view class="section-header">
          <text class="section-title">订单留言</text>
        </view>
        <view class="textarea-container">
          <textarea 
            v-if="user_note_status" 
            class="textarea" 
            @blur="bind_user_note_blur_event" 
            @input="bind_user_note_event" 
            :focus="true" 
            :disable-default-padding="false" 
            :value="user_note_value" 
            maxlength="230" 
            placeholder="选填，可备注特殊需求"
          ></textarea>
          <view v-else @click="bind_user_note_tap_event" :class="'textarea-view ' + ((user_note_value || null) == null ? 'cr-grey' : '')">
            {{ user_note_value || '选填，可备注特殊需求' }}
          </view>
        </view>
      </view>

      <!-- 底部占位 -->
      <view class="bottom-placeholder"></view>
    </view>

    <!-- 底部固定操作栏 -->
    <view class="bottom-bar">
      <view class="price-section">
        <text class="price-label">订单金额</text>
        <view class="price-wrap">
          <text class="currency">¥</text>
          <text class="price-amount">{{ total_price > 0 ? total_price : totalPrice }}</text>
        </view>
      </view>
      <button 
        class="submit-btn" 
        :disabled="buy_submit_disabled_status"
        @click="buy_submit_event"
      >
        {{ buy_submit_disabled_status ? '提交中...' : '确认支付' }}
      </button>
    </view>

    <!-- 支付组件 -->
    <component-payment 
      ref="payment" 
      :propIsRedirectTo="true" 
      :propPayUrl="pay_url" 
      :propQrcodeUrl="qrcode_url" 
      :propToAppointPage="to_appoint_page" 
      propPayDataKey="ids" 
      :propPaymentList="payment_list" 
      :propToPageBack="to_page_back" 
      :propToFailPage="to_fail_page"
    ></component-payment>
  </view>
</template>

<script>
import iconfont from '@/components/iconfont/iconfont.vue';
import componentPayment from '@/components/payment/payment.vue';

export default {
  name: 'GoodsVrTicketOrder',
  components: {
    iconfont,
    componentPayment
  },
  data() {
    return {
      // App 实例
      app: null,
      // 主题
      theme_view: '',
      theme_color: '',
      // 商品ID
      goodsId: null,
      // 商品数据
      goodsData: {},
      // 当前选中的规格
      currentSelection: {},
      // 已确认的座位列表
      confirmedSeats: [],
      // 购票须知
      buyNotices: [],
      // 服务说明
      services: [],
      // 须知是否展开
      noticeExpanded: false,
      // 页面来源参数
      sourcePage: null,
      // 登录用户信息
      userInfo: null,
      // 批号过期时间戳（来自 URL 参数）
      batchExpire: null,
      // 场次日期时间（来自 session_meta）
      sessionDatetime: '',
      // 海报URL
      posterUrl: '',
      // 场馆地址
      venueAddress: '',
      
      // ===== Buy 页面相关数据 =====
      // 提交按钮禁用状态
      buy_submit_disabled_status: false,
      // 订单是否已进入支付
      is_order_submit_payment: 0,
      // 订单参数
      params: null,
      // 支付方式列表
      payment_list: [],
      payment_id: 0,
      // 总价（来自 API 计算）
      total_price: 0,
      // 用户留言
      user_note_value: '',
      user_note_status: false,
      // 是否首次加载
      is_first: 1,
      // 货币符号
      currency_symbol: '',
      // 是否预约模式
      common_order_is_booking: 0,
      // 支付 URL
      pay_url: '',
      qrcode_url: '',
      // 跳转页面配置
      to_page_back: {
        title: '订单详情',
        page: '/pages/user-order/user-order',
      },
      to_fail_page: '/pages/user-order/user-order',
      to_appoint_page: '/pages/user-order/user-order',
      
      // 默认购票须知
      defaultBuyNotices: [
        { title: '实名购票', desc: '本场演出实行实名制购票观演政策，一证一票。' },
        { title: '演出时长以现场为准', desc: '受现场不可控因素影响，实际演出时长以现场为准。' },
        { title: '定时购说明', desc: '使用定时购服务后，将在开票时为您自动购票。' },
        { title: '候补说明', desc: '使用候补服务后，将按照订单出票时间先后顺序候补。' }
      ],
      // 默认服务说明
      defaultServices: [
        { title: '电子票', desc: '现场验票时，请观演人出示APP票夹中的电子票二维码验票入场。', status: 'success' },
        { title: '不支持转赠', desc: '购票完成后，观演人信息不可更改，需携带购票时填写的证件验证入场。', status: 'warning' },
        { title: '不支持退换票', desc: '票品为有价票券，不支持退换。', status: 'warning' }
      ]
    };
  },
  computed: {
    totalPrice() {
      return this.confirmedSeats.reduce((sum, seat) => sum + Number(seat.price || 0), 0).toFixed(2);
    },
    batchExpireTime() {
      const timestamp = this.batchExpire || this.goodsData.batch_number_expire;
      if (!timestamp) return '';
      const date = new Date(timestamp * 1000);
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      return `${month}-${day} ${hours}:${minutes}`;
    },
    formattedSessionTime() {
      if (this.sessionDatetime) {
        return this.sessionDatetime;
      }
      const session = this.currentSelection.session || '';
      const expire = this.batchExpireTime;
      if (expire) {
        return `${session} (${expire} 过期)`;
      }
      return session;
    }
  },
  onLoad(params) {
    const app = getApp();
    this.app = app;
    
    // 主题
    this.theme_view = app.globalData.get_theme_value_view();
    this.theme_color = app.globalData.get_theme_color();
    
    // 货币符号
    this.currency_symbol = app.globalData.currency_symbol();
    
    // 获取登录用户信息
    this.userInfo = app.globalData.get_user_info();
    
    // 解析页面参数
    if (params.goodsId) {
      this.goodsId = parseInt(params.goodsId, 10) || null;
    }
    
    // 解析座位数据
    if (params.seats) {
      try {
        this.confirmedSeats = JSON.parse(decodeURIComponent(params.seats));
      } catch (e) {
        console.error('[Order Confirm] Parse seats failed:', e);
        this.confirmedSeats = [];
      }
    }
    
    // 解析选中的规格
    if (params.selection) {
      try {
        this.currentSelection = JSON.parse(decodeURIComponent(params.selection));
      } catch (e) {
        console.error('[Order Confirm] Parse selection failed:', e);
        this.currentSelection = {};
      }
    }
    
    // 解析须知数据
    if (params.buyNotices) {
      try {
        this.buyNotices = JSON.parse(decodeURIComponent(params.buyNotices));
      } catch (e) {
        this.buyNotices = this.defaultBuyNotices;
      }
    } else {
      this.buyNotices = this.defaultBuyNotices;
    }
    
    if (params.services) {
      try {
        this.services = JSON.parse(decodeURIComponent(params.services));
      } catch (e) {
        this.services = this.defaultServices;
      }
    } else {
      this.services = this.defaultServices;
    }
    
    // 解析批号过期时间
    if (params.batchExpire) {
      this.batchExpire = parseInt(params.batchExpire, 10) || null;
    }

    // 解析场次日期时间
    if (params.sessionDatetime) {
      this.sessionDatetime = decodeURIComponent(params.sessionDatetime);
    }

    // 解析海报URL
    if (params.posterUrl) {
      this.posterUrl = decodeURIComponent(params.posterUrl);
    }

    // 解析场馆地址
    if (params.venueAddress) {
      this.venueAddress = decodeURIComponent(params.venueAddress);
    }

    // 记录来源页面
    const pages = getCurrentPages();
    if (pages.length > 1) {
      const prevPage = pages[pages.length - 2];
      this.sourcePage = prevPage.route;
    }
    
    // 构建 params（用于 API 调用）
    this.buildParams();
    
    // 加载商品数据
    this.loadGoodsData();
    
    // 初始化配置
    this.init_config();
    
    // 初始化支付 URL
    this.pay_url = this.app.globalData.get_request_url('pay', 'order');
    this.qrcode_url = this.app.globalData.get_request_url('paycheck', 'order');
  },
  onShow() {
    // 数据加载
    this.init();
  },
  methods: {
    // 初始化配置
    init_config(status) {
      if ((status || false) == true) {
        this.currency_symbol = this.app.globalData.get_config('currency_symbol');
        this.common_order_is_booking = this.app.globalData.get_config('config.common_order_is_booking');
      } else {
        this.app.globalData.is_config(this, 'init_config');
      }
    },
    
    // 构建购买参数
    buildParams() {
      // 组装规格数据
      var goods_data = this.confirmedSeats.map(s => {
        var specs = [];
        
        if (s.specKey) {
          var parts = s.specKey.split('|');
          parts.forEach(part => {
            var idx = part.indexOf('=');
            if (idx > 0) {
              var type = part.substring(0, idx);
              var value = part.substring(idx + 1);
              specs.push({ type: type, value: value });
            }
          });
        }
        
        if (specs.length === 0) {
          specs = [
            { type: '$vr-场次', value: this.currentSelection.session || '' },
            { type: '$vr-场馆', value: this.currentSelection.venue || '' },
            { type: '$vr-演播室', value: this.currentSelection.room || '' },
            { type: '$vr-分区', value: this.currentSelection.section || '' },
            { type: '$vr-座位号', value: (s.rowLabel || '') + '排' + (s.colNum || '') + '座' }
          ];
        }
        
        return {
          goods_id: this.goodsId,
          stock: 1,
          spec: specs
        };
      });
      
      this.params = {
        buy_type: 'goods',
        goods_data: goods_data
      };
    },
    
    // 加载商品数据
    loadGoodsData() {
      var goods = this.app.globalData.goods_data_cache_handle(this.goodsId);
      if (goods != null) {
        console.log('[Order Confirm] Goods from cache:', goods);
        this.goodsData = goods;
        this.parseVrConfig(goods);
      } else {
        var self = this;
        uni.request({
          url: this.app.globalData.get_request_url('detail', 'goods'),
          method: 'POST',
          data: { id: this.goodsId },
          dataType: 'json',
          success: function(res) {
            if (res.data.code == 0) {
              self.goodsData = res.data.data.goods;
              self.parseVrConfig(res.data.data.goods);
            }
          }
        });
      }
    },
    
    // 解析 VR 配置获取须知
    parseVrConfig(goods) {
      if (this.buyNotices.length > 0 && this.services.length > 0) {
        return;
      }
      
      var vrConfig = goods.vr_goods_config;
      if (typeof vrConfig === 'string') {
        try {
          vrConfig = JSON.parse(vrConfig);
        } catch (e) {
          vrConfig = [];
        }
      }
    },
    
    // 获取数据（类似 buy.vue 的 init）
    init() {
      // 订单是否已经提交进入支付
      if (this.is_order_submit_payment == 1) {
        return false;
      }
      
      // 订单参数信息是否正确
      if (this.params == null) {
        console.log('[Order Confirm] params is null');
        return false;
      }

      // 加载 loading
      if (this.is_first == 0) {
        uni.showLoading({
          title: '加载中...',
        });
      }
      
      var data = {
        buy_type: this.params.buy_type,
        goods_data: this.encodeGoodsData(this.params.goods_data),
        payment_id: this.payment_id,
        site_model: 3  // 虚拟商品模式
      };
      
      var self = this;
      uni.request({
        url: this.app.globalData.get_request_url('index', 'buy'),
        method: 'POST',
        data: data,
        dataType: 'json',
        success: function(res) {
          uni.stopPullDownRefresh();
          if (self.is_first == 0) {
            uni.hideLoading();
          }
          
          if (res.data.code == 0) {
            var data = res.data.data;
            
            // 设置支付方式列表
            self.payment_list = data.payment_list || [];
            
            // 首次加载
            if (self.is_first == 1) {
              // 赋值默认支付方式
              var default_payment_id = parseInt(data.default_payment_id || 0);
              if (self.payment_list.length > 0 && default_payment_id > 0) {
                var temp_payment_ids = self.payment_list.map(function(item) { return item.id; });
                if (temp_payment_ids.indexOf(default_payment_id) != -1) {
                  self.payment_id = default_payment_id;
                }
              }
            }
            
            // 订单是否已提交
            if ((data.is_order_submit || 0) == 1) {
              self.buy_submit_response_handle(res.data);
              return false;
            }
            
            // 设置订单数据
            if ((data.goods_list || []).length > 0) {
              self.setData({
                total_price: data.base.actual_price,
                common_order_is_booking: data.common_order_is_booking || 0,
                is_first: 0,
              });
            } else {
              // 没有商品数据时使用本地计算的价格
              self.setData({
                total_price: parseFloat(self.totalPrice),
                is_first: 0,
              });
            }
          } else {
            // API 失败时使用本地价格
            self.setData({
              total_price: parseFloat(self.totalPrice),
            });
            
            // 如果没有支付方式列表，设置默认空数组
            if (!self.payment_list || self.payment_list.length === 0) {
              self.setData({
                payment_list: [],
              });
            }
            
            // 登录检查
            if (self.app.globalData.is_login_check(res.data, self, 'init')) {
              self.app.globalData.showToast(res.data.msg);
            }
          }
        },
        fail: function() {
          uni.stopPullDownRefresh();
          if (self.is_first == 0) {
            uni.hideLoading();
          }
          // 网络失败时使用本地价格
          self.setData({
            total_price: parseFloat(self.totalPrice),
          });
        }
      });
    },
    
    // 编码 goods_data（与 buy.vue 一致）
    encodeGoodsData(goods_data) {
      var base64 = require('@/common/js/lib/base64.js');
      return encodeURIComponent(base64.encode(JSON.stringify(goods_data)));
    },
    
    // 支付方式选择
    payment_event(item) {
      this.setData({
        payment_id: (this.payment_id == item.id) ? 0 : item.id,
      });
    },
    
    // 用户留言输入
    bind_user_note_event(e) {
      this.setData({
        user_note_value: e.detail.value,
      });
    },
    
    // 用户留言点击
    bind_user_note_tap_event(e) {
      this.setData({
        user_note_status: true,
      });
    },
    
    // 用户留言失去焦点
    bind_user_note_blur_event(e) {
      this.setData({
        user_note_status: false,
      });
    },
    
    // 提交订单
    buy_submit_event(e) {
      // 登录检查
      var user = this.app.globalData.get_user_info(this, 'buy_submit_event');
      if (user == false) {
        return;
      }
      
      if (this.buy_submit_disabled_status) {
        return;
      }
      
      // 数据验证
      if (!this.goodsId) {
        this.app.globalData.showToast('商品信息错误');
        return;
      }
      
      if (!this.confirmedSeats || this.confirmedSeats.length === 0) {
        this.app.globalData.showToast('请选择座位');
        return;
      }
      
      // 需要选择支付方式
      if (this.total_price > 0 && this.common_order_is_booking != 1) {
        if (!this.payment_id) {
          this.app.globalData.showToast('请选择支付方式');
          return;
        }
      }
      
      this.setData({
        buy_submit_disabled_status: true,
      });
      
      uni.showLoading({
        title: '提交中...',
      });
      
      // 构建请求数据
      var data = {
        buy_type: this.params.buy_type,
        goods_data: this.encodeGoodsData(this.params.goods_data),
        payment_id: this.payment_id,
        user_note: this.user_note_value || '',
        site_model: 3,  // 虚拟商品模式
      };
      
      console.log('[Order Confirm] Submit order with data:', JSON.stringify(data));
      
      var self = this;
      uni.request({
        url: this.app.globalData.get_request_url('add', 'buy'),
        method: 'POST',
        data: data,
        dataType: 'json',
        success: function(res) {
          uni.hideLoading();
          
          if (res.data.code == 0) {
            self.buy_submit_response_handle(res.data);
          } else {
            self.app.globalData.showToast(res.data.msg);
            self.setData({
              buy_submit_disabled_status: false,
            });
          }
        },
        fail: function() {
          uni.hideLoading();
          self.setData({
            buy_submit_disabled_status: false,
          });
          self.app.globalData.showToast('网络错误，请重试');
        }
      });
    },
    
    // 订单提交响应处理
    buy_submit_response_handle(res) {
      // 是否预约模式
      if (res.data.order_status == 0) {
        var self = this;
        uni.showModal({
          title: '提示',
          content: res.msg,
          confirmText: '确定',
          showCancel: false,
          success: function(res) {
            self.app.globalData.url_open(self.to_appoint_page, true);
          },
          fail: function(res) {
            self.app.globalData.url_open(self.to_appoint_page, true);
          }
        });
      } else if (res.data.order_status == 2) {
        // 线下支付
        this.app.globalData.url_open(this.to_appoint_page, true);
      } else {
        // 调起支付
        this.$refs.payment.pay_handle(res.data.order_ids.join(','), res.data.payment_id, this.payment_list);
      }
      
      this.setData({
        is_order_submit_payment: 1
      });
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 设置数据的兼容方法
    setData(obj) {
      Object.keys(obj).forEach(key => {
        this[key] = obj[key];
      });
    }
  }
};
</script>

<style>
@import "./goods-vr-ticket-order.css";

/* =========== 支付方式卡片 =========== */
.payment-card {
  margin-top: 0;
}

.payment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background-color: #fafafa;
  border-radius: 10px;
  border: 2rpx solid transparent;
  transition: all 0.2s;
}

.payment-item-selected {
  background-color: #fff5f5;
  border-color: #ff404f;
}

.payment-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  margin-right: 12px;
  object-fit: contain;
}

.payment-name {
  flex: 1;
  font-size: 15px;
  color: #333;
}

.payment-check {
  margin-left: 12px;
}

/* =========== 留言卡片 =========== */
.textarea-container {
  min-height: 80px;
}

.textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px;
  font-size: 14px;
  color: #333;
  background-color: #f5f6f8;
  border-radius: 8px;
  box-sizing: border-box;
  line-height: 1.6;
}

.textarea-view {
  min-height: 80px;
  padding: 12px;
  font-size: 14px;
  background-color: #f5f6f8;
  border-radius: 8px;
  line-height: 1.6;
  color: #333;
}

/* =========== 加载状态 =========== */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.loading-text {
  font-size: 14px;
  color: #999;
  margin-top: 12px;
}
</style>
