<!-- pages/merchant-dispatch/merchant-dispatch.wxml -->
<view class="page">
  <!-- 余额卡片 -->
  <view class="balance-card">
    <text class="balance-label">可用余额</text>
    <view class="balance-row">
      <text class="balance-value">{{sjyue}}</text>
      <text class="balance-unit">元</text>
    </view>
    <text class="balance-tip">派单将从此余额扣除</text>
  </view>

  <!-- 订单类型 -->
  <view class="card">
    <view class="card-header">
      <view class="card-dot"></view>
      <text class="card-title">选择订单类型</text>
    </view>
    <scroll-view class="type-scroll" scroll-x="true" enable-flex>
      <view
        class="type-chip {{selectedTypeId === item.id ? 'type-chip--active' : ''}}"
        wx:for="{{shangpinList}}"
        wx:key="id"
        data-id="{{item.id}}"
        data-item="{{item}}"
        bindtap="onSelectType"
      >
        {{item.jieshao}}
      </view>
    </scroll-view>
  </view>

  <!-- 表单 -->
  <view class="card">
    <view class="card-header">
      <view class="card-dot"></view>
      <text class="card-title">填写订单信息</text>
    </view>

    <!-- 订单介绍 -->
    <view class="field">
      <view class="field-head">
        <text class="field-label">订单介绍</text>
        <text class="field-required">*</text>
        <text class="field-count">{{dingdanJieshao.length}}/50</text>
      </view>
      <input
        class="field-input"
        placeholder="请输入订单主要内容"
        maxlength="50"
        value="{{dingdanJieshao}}"
        bindinput="onDingdanJieshaoInput"
      />
    </view>

    <!-- 订单备注 -->
    <view class="field">
      <view class="field-head">
        <text class="field-label">订单备注</text>
        <text class="field-count">{{dingdanBeizhu.length}}/50</text>
      </view>
      <input
        class="field-input"
        placeholder="选填，补充其他信息"
        maxlength="50"
        value="{{dingdanBeizhu}}"
        bindinput="onDingdanBeizhuInput"
      />
    </view>

    <!-- 老板昵称/ID -->
    <view class="field">
      <view class="field-head">
        <text class="field-label">老板昵称/ID</text>
        <text class="field-required">*</text>
        <text class="field-count">{{laobanName.length}}/15</text>
      </view>
      <input
        class="field-input"
        placeholder="请输入老板昵称或ID"
        maxlength="15"
        value="{{laobanName}}"
        bindinput="onLaobanNameInput"
      />
    </view>

    <!-- 指定接单员UID -->
    <view class="field">
      <view class="field-head">
        <text class="field-label">指定UID</text>
        <text class="field-optional">选填</text>
      </view>
      <input
        class="field-input"
        placeholder="指定某位接单员接单"
        maxlength="10"
        value="{{zhidingUid}}"
        bindinput="onZhidingUidInput"
      />
    </view>

    <!-- 订单价格 -->
    <view class="field">
      <view class="field-head">
        <text class="field-label">订单价格</text>
        <text class="field-required">*</text>
      </view>
      <view class="price-input-wrap">
        <text class="price-prefix">¥</text>
        <input
          class="field-input price-input"
          type="digit"
          placeholder="0.1 - 10000"
          value="{{jiage}}"
          bindinput="onJiageInput"
        />
      </view>
      <text class="field-hint">范围 0.1 ~ 10000 元，最多两位小数</text>
    </view>

    <!-- 接单员标签 -->
    <view class="field" wx:if="{{currentTypeChenghaoList.length > 0}}">
      <view class="field-head">
        <text class="field-label">要求接单员标签</text>
        <text class="field-optional">选填</text>
      </view>
      <picker
        mode="selector"
        range="{{currentTypeChenghaoList}}"
        range-key="mingcheng"
        bindchange="onLabelChange"
      >
        <view class="field-picker">
          <text class="{{selectedLabelName ? '' : 'field-picker-ph'}}">{{selectedLabelName || '不限制'}}</text>
          <text class="field-picker-arrow">▸</text>
        </view>
      </picker>
    </view>

    <!-- 押金要求 -->
    <view class="field">
      <view class="field-head">
        <text class="field-label">要求接单员押金</text>
        <text class="field-optional">选填</text>
      </view>
      <view class="switch-row">
        <switch checked="{{commissionEnabled}}" bindchange="onCommissionToggle" color="#9C27B0"/>
        <text class="switch-label">{{commissionEnabled ? '已开启' : '未开启'}}</text>
      </view>
      <input
        wx:if="{{commissionEnabled}}"
        class="field-input"
        type="digit"
        placeholder="输入押金金额（建议≤50元）"
        value="{{commissionValue}}"
        bindinput="onCommissionValueInput"
      />
    </view>
  </view>

  <!-- 底部留白 -->
  <view class="bottom-space"></view>

  <!-- 提交按钮 -->
  <view class="submit-bar">
    <view
      class="submit-btn {{isSubmitting ? 'submit-btn--disabled' : ''}}"
      bindtap="onSubmit"
      hover-class="submit-btn--hover"
    >
      {{isSubmitting ? '派发中...' : '立即派发'}}
    </view>
  </view>

  <!-- 加载遮罩 -->
  <view class="loading-mask" wx:if="{{isLoading}}">
    <view class="loading-box">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
  </view>

  <global-notification id="global-notification" />

  <!-- 教程按钮 -->
  <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>
