<view class="dsddxq-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"
        ></image>
      </view>
      <view class="shangpin-jieshao">
        <view class="jieshao-text" bindtap="chakanWanzhengJieshao">
          {{jibenShuju.jieshao || '暂无描述'}}
        </view>
        <view class="chakan-wanzheng" wx:if="{{jibenShuju.jieshao && jibenShuju.jieshao.length > 30}}">
          <text>点击上面字体查看完整介绍</text>
        </view>
      </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 
            class="copy-btn" 
            bindtap="fuzhiWenben"
            data-text="{{jibenShuju.nicheng}}"
            hover-class="copy-btn-hover"
          >
            <text class="copy-icon">📋</text>
            <text class="copy-text">复制</text>
          </view>
      </view>
      
      <!-- 备注信息 -->
      <view class="info-item-row" wx:if="{{jibenShuju.beizhu}}">
        <text class="item-label">备注信息：</text>
        <view class="item-right-area">
          <text class="item-value">{{jibenShuju.beizhu.length > 20 ? jibenShuju.beizhu.substring(0, 20) + '...' : jibenShuju.beizhu}}</text>
          <view 
            class="chakan-btn" 
            bindtap="chakanWanzhengBeizhu"
            wx:if="{{jibenShuju.beizhu && jibenShuju.beizhu.length > 20}}"
          >
            <text>查看完整</text>
          </view>
        </view>
      </view>
      
      <!-- 订单ID（可复制） -->
      <view class="info-item-row">
        <text class="item-label">订单ID：</text>
        <view class="item-right-area">
          <text class="item-value">{{jibenShuju.dingdan_id}}</text>
          <view 
            class="copy-btn" 
            bindtap="fuzhiWenben"
            data-text="{{jibenShuju.dingdan_id}}"
            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.create_time}}</text>
      </view>
      
      <!-- 订单价格（绿色） -->
      <view class="info-item-row">
        <text class="item-label">订单价格：</text>
        <text class="item-value jine-green">¥{{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 class="info-item-row" wx:if="{{jibenShuju.fadanpingtai !== undefined && jibenShuju.fadanpingtai !== null}}">
        <text class="item-label">发单平台：</text>
        <text class="item-value">
          {{jibenShuju.fadanpingtai == 1 ? '平台发单' : (jibenShuju.fadanpingtai == 2 ? '商家发单' : '未知')}}
        </text>
      </view>
    </view>
    
    <!-- 商家信息区域 -->
    <view 
      class="shangjia-area" 
      wx:if="{{xiangxiShuju.shangjia_id || xiangxiShuju.shangjia_nicheng || xiangxiShuju.shangjia_liuyan}}"
    >
      <view class="info-title">商家信息</view>
      
      <!-- 商家ID -->
      <view class="info-item-row" wx:if="{{xiangxiShuju.shangjia_id}}">
        <text class="item-label">商家ID：</text>
        <view class="item-right-area">
          <text class="item-value">{{xiangxiShuju.shangjia_id}}</text>
          <view 
            class="copy-btn" 
            bindtap="fuzhiWenben"
            data-text="{{xiangxiShuju.shangjia_id}}"
            hover-class="copy-btn-hover"
          >
            <text class="copy-icon">📋</text>
            <text class="copy-text">复制</text>
          </view>
        </view>
      </view>
      
      <!-- 商家昵称 -->
      <view class="info-item-row" wx:if="{{xiangxiShuju.shangjia_nicheng}}">
        <text class="item-label">商家昵称：</text>
        <text class="item-value">{{xiangxiShuju.shangjia_nicheng}}</text>
      </view>
      
      <!-- 商家留言 -->
      <view class="shangjia-liuyan-container" wx:if="{{xiangxiShuju.shangjia_liuyan}}">
        <text class="section-subtitle">商家留言</text>
        <view class="liuyan-content">
          {{xiangxiShuju.shangjia_liuyan}}
        </view>
      </view>
    </view>
    
    <!-- 退款信息区域 -->
    <view 
      class="tuikuan-area" 
      wx:if="{{showRefundInfo && xiangxiShuju.tuikuan_liyou}}"
    >
      <view class="info-title">退款信息</view>
      
      <view class="info-item-row">
        <text class="item-label">退款理由：</text>
        <text class="item-value">{{xiangxiShuju.tuikuan_liyou}}</text>
      </view>
    </view>
    
    <!-- 处罚申请信息区域 -->
    <view 
      class="chufa-area" 
      wx:if="{{xiangxiShuju.chufa_liyou || xiangxiShuju.chufa_zhuangtai || xiangxiShuju.chufa_jieguo || xiangxiShuju.bohui_liyou}}"
    >
      <view class="info-title">处罚申请</view>
      
      <!-- 申请原因 -->
      <view class="info-item-row" wx:if="{{xiangxiShuju.chufa_liyou}}">
        <text class="item-label">申请原因：</text>
        <text class="item-value">{{xiangxiShuju.chufa_liyou}}</text>
      </view>
      
      <!-- 申请状态 -->
      <view class="info-item-row" wx:if="{{xiangxiShuju.chufa_zhuangtai !== undefined}}">
        <text class="item-label">申请状态：</text>
        <text 
          class="item-value" 
          style="color: {{xiangxiShuju.chufa_zhuangtai == 0 ? '#FF9800' : (xiangxiShuju.chufa_zhuangtai == 1 ? '#4CAF50' : '#FF4444')}}"
        >
          {{xiangxiShuju.chufa_zhuangtai == 0 ? '审核中' : (xiangxiShuju.chufa_zhuangtai == 1 ? '处罚成功' : '处罚驳回')}}
        </text>
      </view>
      
      <!-- 处罚结果 -->
      <view class="info-item-row" wx:if="{{xiangxiShuju.chufa_jieguo}}">
        <text class="item-label">处罚结果：</text>
        <text class="item-value">{{xiangxiShuju.chufa_jieguo}}</text>
      </view>
      
      <!-- 驳回理由 -->
      <view class="info-item-row" wx:if="{{xiangxiShuju.bohui_liyou}}">
        <text class="item-label">驳回理由：</text>
        <text class="item-value">{{xiangxiShuju.bohui_liyou}}</text>
      </view>
    </view>
    
    <!-- 接单员交付历史（只读模式） -->
    <view class="dashou-jiaofu-area" wx:if="{{!isModifying && xiangxiShuju.dashou_jiaofu.length > 0}}">
      <view class="info-title">我的交付</view>
      
      <!-- 接单员交付图片 -->
      <view class="dashou-jiaofu-container">
        <text class="section-subtitle">交付图片</text>
        <view class="jiaofu-grid">
          <block wx:for="{{xiangxiShuju.dashou_jiaofu}}" wx:key="index">
            <view 
              class="jiaofu-image-item"
              bindtap="yulanTupian"
              data-url="{{item}}"
              data-urls="{{xiangxiShuju.dashou_jiaofu}}"
            >
              <image 
                class="jiaofu-image"
                src="{{item}}"
                mode="aspectFill"
              ></image>
            </view>
          </block>
        </view>
      </view>
      
      <!-- 打手留言 -->
      <view class="dashou-liuyan-container" wx:if="{{xiangxiShuju.dashou_liuyan}}">
        <text class="section-subtitle">我的留言</text>
        <view class="liuyan-content">
          {{xiangxiShuju.dashou_liuyan}}
        </view>
      </view>
    </view>

    <!-- 🆕 修改模式下的可编辑区域（当 isModifying 为 true 时显示） -->
    <view class="dashou-jiaofu-area" wx:if="{{isModifying}}">
      <view class="info-title">修改交付</view>
      
      <!-- 图片编辑区域 -->
      <view class="xuanze-tupian-container">
        <text class="section-subtitle">交付图片（点击叉号删除）</text>
        
        <!-- 显示原图（使用 remainingOriginals 实时更新） -->
        <view class="yixuan-tupian-grid">
          <!-- 原图部分（从 remainingOriginals 循环） -->
          <block wx:for="{{remainingOriginals}}" wx:key="index">
            <view class="yixuan-tupian-item">
              <image class="yixuan-tupian" src="{{item}}" mode="aspectFill"></image>
              <view 
                class="shanchu-btn" 
                bindtap="handleDeleteImage" 
                data-url="{{item}}"
              >
                <text>×</text>
              </view>
            </view>
          </block>
          
          <!-- 新添加的本地图片 -->
          <block wx:for="{{newImages}}" wx:key="index">
            <view class="yixuan-tupian-item">
              <image class="yixuan-tupian" src="{{item}}" mode="aspectFill"></image>
              <view 
                class="shanchu-btn" 
                bindtap="handleDeleteImage" 
                data-url="{{item}}"
              >
                <text>×</text>
              </view>
            </view>
          </block>
          
          <!-- 添加按钮（基于 remainingOriginals.length + newImages.length 计算剩余容量） -->
          <view 
            class="tianjia-btn"
            bindtap="handleAddImage"
            wx:if="{{remainingOriginals.length + newImages.length < 9}}"
          >
            <text class="tianjia-icon">+</text>
            <text class="tianjia-text">添加图片</text>
            <text class="tianjia-tip">({{9 - (remainingOriginals.length + newImages.length)}}/9)</text>
          </view>
        </view>
      </view>
      
      <!-- 留言编辑 -->
      <view class="liuyan-input-container">
        <text class="section-subtitle">留言（可选，最多50字）</text>
        <textarea 
          class="liuyan-textarea"
          value="{{modifiedLiuyan}}"
          placeholder="请输入留言..."
          maxlength="50"
          bindinput="onModifyLiuyanInput"
        ></textarea>
        <text class="zi-shu">
          已输入 {{modifiedLiuyan.length}}/50 字
        </text>
      </view>
    </view>
    
    <!-- 提交订单区域（仅状态=2时显示，保持不变） -->
    <view class="tijiao-area" wx:if="{{jibenShuju.zhuangtai == 2}}">
      <view class="info-title">提交订单</view>
      
      <!-- 选择图片 -->
      <view class="xuanze-tupian-container">
        <text class="section-subtitle">选择交付图片（最多9张）</text>
        
        <!-- 已选图片预览 -->
        <view class="yixuan-tupian-grid">
          <block wx:for="{{xuanzhongTupian}}" wx:key="index">
            <view class="yixuan-tupian-item">
              <image 
                class="yixuan-tupian"
                src="{{item}}"
                mode="aspectFill"
              ></image>
              <view 
                class="shanchu-btn"
                bindtap="shanchuTupian"
                data-index="{{index}}"
              >
                <text>×</text>
              </view>
            </view>
          </block>
          
          <!-- 添加按钮 -->
          <view 
            class="tianjia-btn"
            bindtap="xuanzeTupian"
            wx:if="{{xuanzhongTupian.length < 9}}"
          >
            <text class="tianjia-icon">+</text>
            <text class="tianjia-text">添加图片</text>
            <text class="tianjia-tip">({{9 - xuanzhongTupian.length}}/9)</text>
          </view>
        </view>
      </view>
      
      <!-- 上传进度 -->
      <view class="shangchuan-jindu-container" wx:if="{{shangchuanZongshu > 0}}">
        <view class="jindu-bar">
          <view class="jindu-fill" style="width: {{jinduWidth}}"></view>
        </view>
        <text class="jindu-text">上传中: {{shangchuanJindu}}/{{shangchuanZongshu}}</text>
      </view>
      
      <!-- 留言输入 -->
      <view class="liuyan-input-container">
        <text class="section-subtitle">留言（可选，最多50字）</text>
        <textarea 
          class="liuyan-textarea"
          value="{{liuyan}}"
          placeholder="请输入留言..."
          maxlength="50"
          bindinput="shuruLiuyan"
        ></textarea>
        <text class="zi-shu">
          已输入 {{liuyan.length}}/50 字
        </text>
      </view>
    </view>
  </view>
  
  <!-- ========== 底部按钮区域 ========== -->
  <view class="bottom-btns-container" wx:if="{{!isLoading}}">

    <!-- 🆕 修改模式下的按钮（取消/确认） -->
    <block wx:if="{{isModifying}}">
      <view class="btn-row">
        <view 
          class="bottom-btn cancel-modify-btn" 
          bindtap="cancelModify"
          hover-class="btn-hover"
        >
          <text class="btn-text">取消修改</text>
        </view>
        <view 
          class="bottom-btn confirm-modify-btn" 
          bindtap="confirmModify"
          hover-class="btn-hover"
        >
          <text class="btn-text">{{isConfirming ? '提交中...' : '确认修改'}}</text>
        </view>
      </view>
    </block>

    <!-- 非修改模式下的按钮 -->
    <block wx:else>
      <!-- 第一行：联系客服 + 联系老板（当状态不为1且不为7时显示老板按钮） -->
      <view class="btn-row" wx:if="{{jibenShuju.zhuangtai != 1 && jibenShuju.zhuangtai != 7}}">
        <view 
          class="bottom-btn contact-btn" 
          bindtap="goToKefu"
          hover-class="btn-hover"
        >
          <text class="btn-text">联系客服</text>
        </view>
        <view 
          class="bottom-btn boss-btn" 
          bindtap="goToChatWithBoss"
          hover-class="btn-hover"
        >
          <text class="btn-text">联系老板</text>
        </view>
      </view>
      <!-- 如果没有老板按钮，只显示联系客服占一行 -->
      <view class="btn-row" wx:else>
        <view 
          class="bottom-btn contact-btn full-width" 
          bindtap="goToKefu"
          hover-class="btn-hover"
        >
          <text class="btn-text">联系客服</text>
        </view>
      </view>

      <!-- 🆕 新增：修改按钮（仅当状态为4或8时显示） -->
      <view class="btn-row" wx:if="{{jibenShuju.zhuangtai == 4 || jibenShuju.zhuangtai == 8}}">
        <view 
          class="bottom-btn modify-btn full-width" 
          bindtap="enterModify"
          hover-class="btn-hover"
        >
          <text class="btn-text">修改交付</text>
        </view>
      </view>
      
      <!-- 提交按钮（仅状态=2时显示） -->
      <view 
        class="bottom-btn submit-btn"
        wx:if="{{jibenShuju.zhuangtai == 2}}"
        bindtap="tijiaoDingdan"
      >
        <text class="btn-text">{{isSubmitting ? '提交中...' : '立即提交'}}</text>
        <view class="btn-shine"></view>
      </view>
    </block>

  </view>
  
  <!-- 完整介绍弹窗 -->
  <view class="modal-container" wx:if="{{showWanzhengJieshao}}">
    <view class="modal-mask" bindtap="guanbiWanzhengJieshao"></view>
    <view class="modal-content">
      <view class="modal-header">
        <text class="modal-title">订单介绍</text>
        <view class="modal-close" bindtap="guanbiWanzhengJieshao">×</view>
      </view>
      <view class="modal-body">
        <scroll-view class="modal-scroll" scroll-y="true">
          <text class="modal-content-text">{{wanzhengJieshao}}</text>
        </scroll-view>
      </view>
    </view>
  </view>
  
  <!-- 完整备注弹窗 -->
  <view class="modal-container" wx:if="{{showWanzhengBeizhu}}">
    <view class="modal-mask" bindtap="guanbiWanzhengBeizhu"></view>
    <view class="modal-content">
      <view class="modal-header">
        <text class="modal-title">订单备注</text>
        <view class="modal-close" bindtap="guanbiWanzhengBeizhu">×</view>
      </view>
      <view class="modal-body">
        <scroll-view class="modal-scroll" scroll-y="true">
          <text class="modal-content-text">{{wanzhengBeizhu}}</text>
        </scroll-view>
      </view>
    </view>
  </view>
  
  <global-notification id="global-notification" />
  <popup-notice id="popupNotice" />
</view>