<!--pages/dingdanxiangqing/dingdanxiangqing.wxml-->
<view class="dingdanxiangqing-page">
  
  <!-- 加载中状态 -->
  <view class="loading-container" wx:if="{{isLoading}}">
    <view class="loading-spinner"></view>
    <text class="loading-text">加载订单详情...</text>
  </view>
  
  <!-- 内容区域 -->
  <view class="content-container" wx:if="{{!isLoading}}">
    
    <!-- 商品图片和介绍区域 -->
    <view class="shangpin-area">
      <view class="shangpin-image-container">
        <image 
          class="shangpin-image"
          src="{{jibenShuju.tupian}}"
          mode="aspectFill"
          binderror="onImageError"
        ></image>
      </view>
      <view class="shangpin-jieshao">
        <text class="jieshao-text">{{jibenShuju.jieshao || '暂无描述'}}</text>
      </view>
    </view>
    
    <!-- 订单信息区域 -->
    <view 
      class="dingdan-info-area"
      style="background-color: {{zhuangtaiYanseMap[jibenShuju.zhuangtai] || '#F5F5F5'}}"
    >
      <view class="info-title">订单信息</view>
      
      <!-- 游戏昵称 -->
      <view class="info-item-row" wx:if="{{jibenShuju.nicheng}}">
        <text class="item-label">游戏昵称：</text>
        <text class="item-value">{{jibenShuju.nicheng}}</text>
      </view>
      
      <!-- 备注信息 -->
      <view class="info-item-row" wx:if="{{jibenShuju.beizhu}}">
        <text class="item-label">备注信息：</text>
        <text class="item-value">{{jibenShuju.beizhu}}</text>
      </view>
      
      <!-- 指定打手 -->
      <view class="info-item-row" wx:if="{{xiangxiShuju.zhiding}}">
        <text class="item-label">指定打手：</text>
        <text class="item-value">{{xiangxiShuju.zhiding}}</text>
      </view>
      
      <!-- 订单ID（可复制） -->
      <view class="info-item-row">
        <text class="item-label">订单ID：</text>
        <view class="item-right-area">
          <text class="item-value">{{jibenShuju.dingdanId}}</text>
          <view 
            class="copy-btn" 
            bindtap="fuzhiWenben"
            data-text="{{jibenShuju.dingdanId}}"
            hover-class="copy-btn-hover"
          >
            <text class="copy-icon">📋</text>
            <text class="copy-text">复制</text>
          </view>
        </view>
      </view>
      
      <!-- 创建时间 -->
      <view class="info-item-row">
        <text class="item-label">创建时间：</text>
        <text class="item-value">{{jibenShuju.chuangjianshijian}}</text>
      </view>
      
      <!-- 订单价格（红色） -->
      <view class="info-item-row">
        <text class="item-label">订单价格：</text>
        <text class="item-value jine-red">¥{{jibenShuju.jine}}</text>
      </view>
      
      <!-- 订单状态 -->
      <view class="info-item-row">
        <text class="item-label">订单状态：</text>
        <text class="item-value zhuangtai-text">{{zhuangtaiWenziMap[jibenShuju.zhuangtai] || '未知状态'}}</text>
      </view>
    </view>
    
    <!-- 服务区域（有服务数据时显示） -->
    <view 
      class="fuwu-area" 
      wx:if="{{xiangxiShuju.dashou || xiangxiShuju.dashoujiaofu.length > 0 || xiangxiShuju.dashouliuyan}}"
    >
      <view class="info-title">服务详情</view>
      
      <!-- 服务打手（可复制） -->
      <view class="info-item-row" wx:if="{{xiangxiShuju.dashou}}">
        <text class="item-label">服务打手：</text>
        <view class="item-right-area">
          <text class="item-value">{{xiangxiShuju.dashou}}</text>
          <view 
            class="copy-btn" 
            bindtap="fuzhiWenben"
            data-text="{{xiangxiShuju.dashou}}"
            hover-class="copy-btn-hover"
          >
            <text class="copy-icon">📋</text>
            <text class="copy-text">复制</text>
          </view>
        </view>
      </view>
      
      <!-- 打手交付图片 -->
      <view class="dashou-jiaofu-container" wx:if="{{xiangxiShuju.dashoujiaofu.length > 0}}">
        <text class="section-subtitle">打手交付</text>
        <view class="jiaofu-grid">
          <block wx:for="{{xiangxiShuju.dashoujiaofu}}" wx:key="index">
            <view 
              class="jiaofu-image-item"
              bindtap="yulanTupian"
              data-url="{{item}}"
              data-urls="{{xiangxiShuju.dashoujiaofu}}"
            >
              <image 
                class="jiaofu-image"
                src="{{item}}"
                mode="aspectFill"
              ></image>
            </view>
          </block>
        </view>
      </view>
      
      <!-- 打手留言 -->
      <view class="dashou-liuyan-container" wx:if="{{xiangxiShuju.dashouliuyan}}">
        <text class="section-subtitle">打手留言</text>
        <view class="liuyan-content">
          {{xiangxiShuju.dashouliuyan}}
        </view>
      </view>
    </view>
    
    <!-- 结算区域（仅状态=8时显示） -->
    <view class="jiesuan-area" wx:if="{{jibenShuju.zhuangtai == 8}}">
      <view class="info-title">订单结算</view>
      
      <!-- 星星评分 -->
      <view class="pingfen-container">
        <view class="xingxing-layout">
          <text class="section-subtitle">打星评分：</text>
          <view class="xingxing-wrapper">
            <block wx:for="{{xingxingData}}" wx:key="id">
              <text 
                class="xingxing-icon {{item.active ? 'xingxing-active' : ''}}"
                bindtap="dianjiXingxing"
                data-index="{{index + 1}}"
              >
                {{item.active ? '★' : '☆'}}
              </text>
            </block>
          </view>
        </view>
      </view>
      
      <!-- 留言输入 -->
      <view class="liuyan-input-container">
        <text class="section-subtitle">订单留言（可选）</text>
        <textarea 
          class="liuyan-textarea"
          value="{{jiesuanShuju.liuyan}}"
          placeholder="请输入留言（最多50字）"
          maxlength="50"
          bindinput="shuruLiuyan"
        ></textarea>
        <text class="zi-shu">
          已输入 {{jiesuanShuju.liuyan.length}}/50 字
        </text>
      </view>
    </view>
    
    <!-- 底部安全区域 -->
    <view class="safe-area"></view>
  </view>
  
  <!-- 结单按钮（固定在底部，仅状态=8时显示） -->
  <view 
    class="jiedan-btn-container"
    wx:if="{{!isLoading && jibenShuju.zhuangtai == 8}}"
  >
    <button 
      class="jiedan-btn"
      bindtap="tijiaoJiedan"
      hover-class="btn-hover"
      loading="{{isJiesuanLoading}}"
      disabled="{{isJiesuanLoading}}"
    >
      <text class="btn-text">结单</text>
      <view class="btn-sparkle"></view>
    </button>
  </view>
</view>
<global-notification id="global-notification" />
