<!--pages/merchant-order-detail/merchant-order-detail.wxml - 商家订单详情页完整结构（正方形九宫格，圆形头像）-->
<!-- 页面根容器 -->
<view class="sjddxq-page">
  <!-- 加载状态区域，当 isLoading 为 true 时显示 -->
  <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="card shangpin-card">
      <!-- 商品图片，固定宽高180rpx，已是正方形 -->
      <image class="shangpin-img" src="{{jibenShuju.tupian}}" mode="aspectFill"/>
      <!-- 商品介绍文本区域 -->
      <view class="shangpin-text">
        <!-- 订单介绍文字 -->
        <text class="jieshao-text">{{jibenShuju.jieshao || '无描述'}}</text>
      </view>
    </view>

    <!-- 订单信息卡片，左侧带状态颜色边框 -->
    <view class="card info-card" style="border-left: 8rpx solid {{zhuangtaiYanseMap[jibenShuju.zhuangtai]}}">
      <view class="card-title">订单信息</view>
      <!-- 游戏昵称行 -->
      <view class="info-row" wx:if="{{jibenShuju.nicheng}}"><text class="label">游戏昵称</text><text class="value">{{jibenShuju.nicheng}}</text></view>
      <!-- 备注信息行 -->
      <view class="info-row" wx:if="{{jibenShuju.beizhu}}"><text class="label">备注</text><text class="value">{{jibenShuju.beizhu}}</text></view>
      <!-- 订单ID行，可复制 -->
      <view class="info-row"><text class="label">订单ID</text><view class="value-with-copy"><text class="value">{{jibenShuju.dingdan_id}}</text><text class="copy-btn" bindtap="fuzhiWenben" data-text="{{jibenShuju.dingdan_id}}">📋</text></view></view>
      <!-- 创建时间行 -->
      <view class="info-row"><text class="label">创建时间</text><text class="value">{{jibenShuju.create_time}}</text></view>
      <!-- 订单金额行，红色高亮 -->
      <view class="info-row"><text class="label">订单金额</text><text class="value price-red">¥{{jibenShuju.jine}}</text></view>
      <!-- 订单状态行 -->
      <view class="info-row"><text class="label">状态</text><text class="value zhuangtai-text">{{zhuangtaiWenziMap[jibenShuju.zhuangtai]}}</text></view>
      <!-- 新增：退款操作按钮（仅退款中状态） -->
      <view class="refund-actions" wx:if="{{jibenShuju.zhuangtai == 4}}">
        <view class="action-btn action-cancel" bindtap="showCancelTuikuan">撤销退款申请</view>
        <view class="action-btn action-modify" bindtap="showModifyTuikuan">修改退款理由</view>
      </view>
    </view>

    <!-- 接单员信息卡片，仅当接单员ID存在时显示 -->
    <view class="card dashou-card" wx:if="{{dashouInfo.yonghuid}}">
      <view class="card-title">服务接单员</view>
      <view class="dashou-header">
        <!-- 接单员头像，圆形 -->
        <image class="dashou-avatar" src="{{dashouInfo.avatar || '/images/default-avatar.png'}}" mode="aspectFill"/>
        <view class="dashou-detail">
          <!-- 接单员昵称 -->
          <text class="dashou-nicheng">{{dashouInfo.nicheng || '未知昵称'}}</text>
          <!-- 接单员用户ID行，可复制 -->
          <view class="dashou-id-row"><text class="label">用户ID</text><text class="value">{{dashouInfo.yonghuid}}</text><text class="copy-btn" bindtap="fuzhiWenben" data-text="{{dashouInfo.yonghuid}}">📋</text></view>
        </view>
      </view>
    </view>

    <!-- 服务详情卡片，展示交付图片、留言、退款理由等 -->
    <view class="card service-card" wx:if="{{xiangxiShuju.dashou_jiaofu.length > 0 || xiangxiShuju.dashou_liuyan || xiangxiShuju.tuikuan_liyou || xiangxiShuju.shangjia_liuyan}}">
      <view class="card-title">服务详情</view>
      <!-- 交付图片区域：使用 grid-img-wrapper 实现正方形九宫格 -->
      <block wx:if="{{xiangxiShuju.dashou_jiaofu.length > 0}}">
        <view class="sub-title">交付图片</view>
        <view class="image-grid">
          <!-- 循环渲染每张交付图片 -->
          <block wx:for="{{xiangxiShuju.dashou_jiaofu}}" wx:key="index">
            <!-- 正方形容器 -->
            <view class="grid-img-wrapper">
              <!-- 图片绝对定位填充容器 -->
              <image class="grid-img" src="{{item}}" mode="aspectFill" bindtap="yulanTupian" data-url="{{item}}" data-urls="{{xiangxiShuju.dashou_jiaofu}}"/>
            </view>
          </block>
        </view>
      </block>
      <!-- 接单员留言 -->
      <block wx:if="{{xiangxiShuju.dashou_liuyan}}">
        <view class="sub-title">接单员留言</view>
        <view class="content-box">{{xiangxiShuju.dashou_liuyan}}</view>
      </block>
      <!-- 退款理由 -->
      <block wx:if="{{xiangxiShuju.tuikuan_liyou}}">
        <view class="sub-title">退款理由</view>
        <view class="content-box">{{xiangxiShuju.tuikuan_liyou}}</view>
      </block>
      <!-- 商家留言 -->
      <block wx:if="{{xiangxiShuju.shangjia_liuyan}}">
        <view class="sub-title">商家留言</view>
        <view class="content-box">{{xiangxiShuju.shangjia_liuyan}}</view>
      </block>
    </view>

    <!-- 罚款信息卡片，仅当罚单数据存在时显示 -->
    <view class="card fakuan-card" wx:if="{{fadanData}}">
      <view class="card-title">罚款信息</view>
      <!-- 罚款金额，红色显示 -->
      <view class="info-row"><text class="label">罚款金额</text><text class="value price-red">¥{{fadanData.fakuanjine || '0.00'}}</text></view>
      <!-- 罚款理由 -->
      <view class="info-row"><text class="label">罚款理由</text><text class="value">{{fadanData.chufaliyou || '-'}}</text></view>
      <!-- 是否影响抢单 -->
      <view class="info-row"><text class="label">是否影响抢单</text><text class="value">{{fadanData.yingxiang_qiangdan == 1 ? '是' : '否'}}</text></view>
      <!-- 罚单状态 -->
      <view class="info-row"><text class="label">罚单状态</text><text class="value">{{fadanData.zhuangtai == 1 ? '待缴纳' : fadanData.zhuangtai == 2 ? '已缴纳' : fadanData.zhuangtai == 3 ? '申诉中' : '已驳回'}}</text></view>
      <!-- 如果有申诉理由，显示 -->
      <block wx:if="{{fadanData.shensuliyou}}"><view class="sub-title">申诉理由</view><view class="content-box">{{fadanData.shensuliyou}}</view></block>
      <!-- 如果有同意处罚理由，显示 -->
      <block wx:if="{{fadanData.tongyi_chufaliyou}}"><view class="sub-title">同意处罚理由</view><view class="content-box">{{fadanData.tongyi_chufaliyou}}</view></block>
      <!-- 如果有驳回理由，显示 -->
      <block wx:if="{{fadanData.bohuiliyou}}"><view class="sub-title">驳回理由</view><view class="content-box">{{fadanData.bohuiliyou}}</view></block>
      <!-- 创建时间 -->
      <view class="info-row"><text class="label">创建时间</text><text class="value">{{fadanData.create_time}}</text></view>
      <!-- 更新时间 -->
      <view class="info-row"><text class="label">更新时间</text><text class="value">{{fadanData.update_time}}</text></view>
      <!-- 新增：罚单操作按钮区域（根据状态显示） -->
      <view class="fakuan-actions" wx:if="{{fadanData}}">
        <!-- 待缴纳(1) 或 申诉中(3)：显示修改和撤销按钮 -->
        <block wx:if="{{fadanData.zhuangtai == 1 || fadanData.zhuangtai == 3}}">
          <view class="action-btn action-modify" bindtap="showModifyFakuan">修改罚款</view>
          <view class="action-btn action-cancel" bindtap="showCancelFakuan">撤销罚款</view>
        </block>
        <!-- 已驳回(4)：显示再次申请按钮 -->
        <block wx:if="{{fadanData.zhuangtai == 4}}">
          <view class="action-btn action-resubmit" bindtap="showResubmitFakuan">再次申请罚款</view>
        </block>
      </view>
    </view>

    <!-- 更换接单员后生成的新订单ID展示卡片 -->
    <view class="card new-order-card" wx:if="{{xinDingdanId}}">
      <view class="card-title">更换接单员成功</view>
      <view class="info-row"><text class="label">新订单ID</text><view class="value-with-copy"><text class="value">{{xinDingdanId}}</text><text class="copy-btn" bindtap="fuzhiWenben" data-text="{{xinDingdanId}}">📋</text></view></view>
    </view>

    <!-- 结算区域卡片，仅当订单状态为8（结算中）时显示 -->
    <view class="card jiesuan-card" wx:if="{{jibenShuju.zhuangtai == 8}}">
      <view class="card-title">订单结算</view>
      <view class="star-row">
        <text class="label">打星评分</text>
        <view class="stars">
          <!-- 循环渲染五颗星星 -->
          <block wx:for="{{xingxingData}}" wx:key="id">
            <!-- 点击星星触发评分 -->
            <text class="star {{item.active ? 'star-active' : ''}}" bindtap="dianjiXingxing" data-index="{{index+1}}">{{item.active ? '★' : '☆'}}</text>
          </block>
        </view>
      </view>
      <!-- 结算留言输入框 -->
      <textarea class="liuyan-input" placeholder="留言（选填，50字）" maxlength="50" value="{{jiesuanLiuyan}}" bindinput="shuruLiuyan"/>
      <!-- 结算按钮 -->
      <view class="jiesuan-btn" bindtap="showJiesuanConfirm">立即结算</view>
    </view>
  </view>

  <!-- 底部固定操作栏 -->
  <view class="bottom-bar">
    <!-- 第一行按钮：联系客服、联系接单员 -->
    <view class="bottom-btn-group">
      <view class="btn-outline" bindtap="goToKefu">联系客服</view>
      <view class="btn-outline" bindtap="goToChatWithDashou" wx:if="{{dashouInfo.yonghuid}}">联系接单员</view>
    </view>
    <!-- 第二行按钮：各种操作按钮，根据订单状态显示 -->
    <view class="bottom-btn-group">
      <!-- 撤销按钮：状态为1或7时显示 -->
      <view class="btn-warn" bindtap="showChexiaoBtn" wx:if="{{jibenShuju.zhuangtai == 1 || jibenShuju.zhuangtai == 7}}">撤销订单</view>
      <!-- 【暂时隐藏】更换接单员按钮：恢复时取消下面整段注释即可 -->
      <!-- <view class="btn-primary" bindtap="showGhDashouConfirm" wx:if="{{(jibenShuju.zhuangtai == 2 || jibenShuju.zhuangtai == 8) && dashouInfo.yonghuid}}">更换接单员</view> -->
      <!-- 申请退款按钮：状态为2或8时显示 -->
      <view class="btn-danger" bindtap="showTuikuanBtn" wx:if="{{jibenShuju.zhuangtai == 2 || jibenShuju.zhuangtai == 8}}">申请退款</view>
    </view>
  </view>

  <!-- 撤销订单弹窗 -->
  <view class="modal" wx:if="{{showChexiaoModal}}">
    <view class="modal-mask" bindtap="closeChexiaoModal"></view>
    <view class="modal-content">
      <view class="modal-hd">撤销订单<text class="modal-close" bindtap="closeChexiaoModal">×</text></view>
      <textarea class="modal-input" placeholder="输入撤销原因（最多50字）" maxlength="50" value="{{chexiaoLiyou}}" bindinput="shuruChexiaoLiyou"/>
      <view class="modal-btns">
        <view class="modal-btn cancel" bindtap="closeChexiaoModal">取消</view>
        <view class="modal-btn confirm" bindtap="tijiaoChexiao">{{isChexiaoLoading ? '处理中' : '确认撤销'}}</view>
      </view>
    </view>
  </view>

  <!-- 申请退款弹窗 -->
  <view class="modal" wx:if="{{showTuikuanModal}}">
    <view class="modal-mask" bindtap="closeTuikuanModal"></view>
    <view class="modal-content">
      <view class="modal-hd">申请退款<text class="modal-close" bindtap="closeTuikuanModal">×</text></view>
      <textarea class="modal-input" placeholder="输入退款原因（最多50字）" maxlength="50" value="{{tuikuanLiyou}}" bindinput="shuruTuikuanLiyou"/>
      <view class="modal-btns">
        <view class="modal-btn cancel" bindtap="closeTuikuanModal">取消</view>
        <view class="modal-btn confirm" bindtap="tijiaoTuikuan">{{isTuikuanLoading ? '处理中' : '确认申请'}}</view>
      </view>
    </view>
  </view>

  <!-- 更换接单员确认弹窗 -->
  <view class="modal" wx:if="{{showGhDashouModal}}">
    <view class="modal-mask" bindtap="closeGhDashouModal"></view>
    <view class="modal-content">
      <view class="modal-hd">更换接单员<text class="modal-close" bindtap="closeGhDashouModal">×</text></view>
      <view class="modal-body">
        <text class="modal-tip">确认更换接单员吗？当前订单将被撤销，并生成一条相同内容的新订单（接单员清空）。</text>
      </view>
      <view class="modal-btns">
        <view class="modal-btn cancel" bindtap="closeGhDashouModal">取消</view>
        <view class="modal-btn confirm" bindtap="tijiaoGhDashou">{{isGhDashouLoading ? '处理中' : '确认更换'}}</view>
      </view>
    </view>
  </view>

  <!-- 申请罚款弹窗 -->
  <view class="modal" wx:if="{{showFakuanModal}}">
    <view class="modal-mask" bindtap="closeFakuanModal"></view>
    <view class="modal-content">
      <view class="modal-hd">申请罚款<text class="modal-close" bindtap="closeFakuanModal">×</text></view>
      <view class="modal-body">
        <text class="modal-tip">罚款原因</text>
        <textarea class="modal-input" placeholder="输入罚款原因（最多50字）" maxlength="50" value="{{fakuanLiyou}}" bindinput="inputFakuanLiyou"/>
        <text class="modal-tip">罚款金额</text>
        <input class="modal-input-num" type="digit" placeholder="0.00" value="{{fakuanJine}}" bindinput="inputFakuanJine"/>
        <view class="toggle-row" bindtap="toggleQiangdan">
          <text class="label">是否影响抢单</text>
          <view class="toggle {{yingxiangQiangdan ? 'toggle-on' : ''}}">
            <view class="toggle-knob"></view>
          </view>
        </view>
        <view class="fenhong-tip">此次罚款应得分红：¥{{jisuanFenhong()}}（利率 {{fenhongLilv*100}}%）</view>
      </view>
      <view class="modal-btns">
        <view class="modal-btn cancel" bindtap="closeFakuanModal">取消</view>
        <view class="modal-btn confirm" bindtap="tijiaoFakuan">{{isFakuanLoading ? '处理中' : '确认申请'}}</view>
      </view>
    </view>
  </view>

  <!-- 结算确认弹窗 -->
  <view class="modal" wx:if="{{showJiesuanConfirm}}">
    <view class="modal-mask" bindtap="closeJiesuanConfirm"></view>
    <view class="modal-content">
      <view class="modal-hd">确认结算<text class="modal-close" bindtap="closeJiesuanConfirm">×</text></view>
      <view class="modal-body">
        <text class="modal-tip">确认结算该订单吗？结算后状态变为“已完成”。</text>
      </view>
      <view class="modal-btns">
        <view class="modal-btn cancel" bindtap="closeJiesuanConfirm">取消</view>
        <view class="modal-btn confirm" bindtap="tijiaoJiesuan">{{isJiesuanLoading ? '处理中' : '确认结算'}}</view>
      </view>
    </view>
  </view>

  <!-- ========== 新增：修改罚款弹窗 ========== -->
  <view class="modal" wx:if="{{showModifyFakuanModal}}">
    <view class="modal-mask" bindtap="closeModifyFakuanModal"></view>
    <view class="modal-content">
      <view class="modal-hd">修改罚款<text class="modal-close" bindtap="closeModifyFakuanModal">×</text></view>
      <view class="modal-body">
        <text class="modal-tip">罚款理由</text>
        <textarea class="modal-input" placeholder="输入罚款理由" maxlength="100" value="{{modifyFakuanLiyou}}" bindinput="inputModifyFakuanLiyou"/>
        <text class="modal-tip">罚款金额</text>
        <input class="modal-input-num" type="digit" placeholder="0.00" value="{{modifyFakuanJine}}" bindinput="inputModifyFakuanJine"/>
      </view>
      <view class="modal-btns">
        <view class="modal-btn cancel" bindtap="closeModifyFakuanModal">取消</view>
        <view class="modal-btn confirm" bindtap="submitModifyFakuan">确认修改</view>
      </view>
    </view>
  </view>

  <!-- 撤销罚款弹窗 -->
  <view class="modal" wx:if="{{showCancelFakuanModal}}">
    <view class="modal-mask" bindtap="closeCancelFakuanModal"></view>
    <view class="modal-content">
      <view class="modal-hd">撤销罚款<text class="modal-close" bindtap="closeCancelFakuanModal">×</text></view>
      <view class="modal-body">
        <text class="modal-tip">驳回理由</text>
        <textarea class="modal-input" placeholder="输入驳回理由" maxlength="100" value="{{cancelFakuanLiyou}}" bindinput="inputCancelFakuanLiyou"/>
      </view>
      <view class="modal-btns">
        <view class="modal-btn cancel" bindtap="closeCancelFakuanModal">取消</view>
        <view class="modal-btn confirm" bindtap="submitCancelFakuan">确认撤销</view>
      </view>
    </view>
  </view>

  <!-- 再次申请罚款弹窗 -->
  <view class="modal" wx:if="{{showResubmitFakuanModal}}">
    <view class="modal-mask" bindtap="closeResubmitFakuanModal"></view>
    <view class="modal-content">
      <view class="modal-hd">再次申请罚款<text class="modal-close" bindtap="closeResubmitFakuanModal">×</text></view>
      <view class="modal-body">
        <text class="modal-tip">罚款理由</text>
        <textarea class="modal-input" placeholder="输入罚款理由" maxlength="100" value="{{resubmitFakuanLiyou}}" bindinput="inputResubmitFakuanLiyou"/>
        <text class="modal-tip">罚款金额</text>
        <input class="modal-input-num" type="digit" placeholder="0.00" value="{{resubmitFakuanJine}}" bindinput="inputResubmitFakuanJine"/>
      </view>
      <view class="modal-btns">
        <view class="modal-btn cancel" bindtap="closeResubmitFakuanModal">取消</view>
        <view class="modal-btn confirm" bindtap="submitResubmitFakuan">确认申请</view>
      </view>
    </view>
  </view>

  <!-- 撤销退款申请弹窗 -->
  <view class="modal" wx:if="{{showCancelTuikuanModal}}">
    <view class="modal-mask" bindtap="closeCancelTuikuanModal"></view>
    <view class="modal-content">
      <view class="modal-hd">撤销退款申请<text class="modal-close" bindtap="closeCancelTuikuanModal">×</text></view>
      <view class="modal-body">
        <text class="modal-tip">撤销理由</text>
        <textarea class="modal-input" placeholder="输入撤销理由" maxlength="100" value="{{cancelTuikuanLiyou}}" bindinput="inputCancelTuikuanLiyou"/>
      </view>
      <view class="modal-btns">
        <view class="modal-btn cancel" bindtap="closeCancelTuikuanModal">取消</view>
        <view class="modal-btn confirm" bindtap="submitCancelTuikuan">确认撤销</view>
      </view>
    </view>
  </view>

  <!-- 修改退款理由弹窗 -->
  <view class="modal" wx:if="{{showModifyTuikuanModal}}">
    <view class="modal-mask" bindtap="closeModifyTuikuanModal"></view>
    <view class="modal-content">
      <view class="modal-hd">修改退款理由<text class="modal-close" bindtap="closeModifyTuikuanModal">×</text></view>
      <view class="modal-body">
        <text class="modal-tip">退款理由</text>
        <textarea class="modal-input" placeholder="输入新的退款理由" maxlength="100" value="{{modifyTuikuanLiyou}}" bindinput="inputModifyTuikuanLiyou"/>
      </view>
      <view class="modal-btns">
        <view class="modal-btn cancel" bindtap="closeModifyTuikuanModal">取消</view>
        <view class="modal-btn confirm" bindtap="submitModifyTuikuan">确认修改</view>
      </view>
    </view>
  </view>

  <!-- 全局通知组件 -->
  <global-notification id="global-notification" />

  <!-- 教程按钮（紧贴右侧，右上角，5秒后缩进） -->
  <view 
    class="tutorial-btn {{tutorialBtnHidden ? 'tutorial-btn-hidden' : ''}}"
    bindtap="onTutorialBtnTap"
    hover-class="tutorial-btn-hover"
  >
    <text class="tutorial-btn-text">教程</text>
  </view>

  <!-- 使用教程弹窗组件 -->
  <popup-notice id="popupNotice" />
</view>