guzijian / garbage-removal · Files

<template>
  <clashDriverDispatch ref="clashDriverDispatchRef" :valueKey="'licensePlateNumber'"
                       :onconfirm="handleDriverDispatchConfirm" :dataList="driverPersonnelList">
  </clashDriverDispatch>
  <clashDisposalDispatch ref="clashDisposalDispatchRef" :valueKey="'companyName'"
                         :onconfirm="handleDisposalDispatchConfirm" :dataList="driverPersonnelList">
  </clashDisposalDispatch>
  <u-popup :zIndex="10074" closeOnClickOverlay :show="carPopupShowFlag" :round="10" @close="handlePopupClick(false)"
           @open="handlePopupClick(true)">
    <view class="company-clean-container-car-popup">
      <!-- 主要内容 -->
      <view class="company-clean-container-car-popup-content">
        <view class="company-clean-container-car-popup-content-title">
          <view style="text-align: center;">
            车辆类型
          </view>
        </view>
        <view class="company-clean-container-car-popup-content-box">
          <view class="company-clean-container-car-popup-content-box-item"
                v-for="(item, index) in garCarInfoList" :key="index">
            <view class="company-clean-container-car-popup-content-box-item-text">
              {{ item.garOrderCarType }}
            </view>
            <view class="company-clean-container-car-popup-content-box-item-number"
                  hover-class="hoverClickStyle">
              <u-number-box :min="1" :max="9999" integer buttonSize="46" :inputWidth="100"
                            v-model="garCarInfoList[item.garOrderCarType].garOrderCarNumber"
                            :disabledInput="true"></u-number-box>
            </view>
          </view>
        </view>
      </view>
      <!-- 占位盒子 -->
      <view class="company-clean-container-car-popup-button-safe">
        <view class="company-clean-container-car-popup-button-safe-btn">
          <u-button type="primary" color="#19a97c" @click="submitUpdateCarInfo">确定</u-button>
        </view>
      </view>
    </view>
  </u-popup>
  <view class="order-detail-container" v-if="dataGram != null || dataGram != undefined">
    <view class="order-detail-container-box">
      <view class="order-detail-top">
        <view class="order-detail-top-box">
          <view class="order-detail-top-box-step">
            <u-steps :current="currentStep(dataGram.garOrderHandlerStatus)" dot>
              <u-steps-item title="待清运"></u-steps-item>
              <u-steps-item title="清运中"></u-steps-item>
              <u-steps-item title="已完成"></u-steps-item>
            </u-steps>
          </view>
        </view>
      </view>
      <!-- 信息提示 -->
      <view class="order-detail-container-box-card">
        <text v-if="dataGram.garCancelFlag == 0" style="color: red;">请于交易完成后线下支付！！</text>
        <view v-else style="display: flex; color:red;">
          <u-icon name="close-circle" color="red"></u-icon>
          <text> &nbsp;&nbsp;订单已被取消！原因：{{ dataGram.garReason }}</text>
        </view>
      </view>
      <!-- 订单信息 -->
      <view class="order-detail-container-box-card order-info-section">
        <view class="order-info-header">
          <view class="order-detail-container-header-card-uicon"></view>
          <u-icon name="file-text" size="22" color="#fff" style="margin-right: 8rpx;"></u-icon>
          <text class="title-text">订单信息</text>
        </view>

        <view class="info-item">
          <view class="info-label">
            <u-icon name="map" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
            <text>清运地点:</text>
          </view>
          <view class="info-content" @click.stop="showNavDialog(dataGram.garLongitude,dataGram.garLatitude, dataGram.garOrderAddressDetails)">
            <text class="content-text" selectable='true'>{{ dataGram.garOrderAddress + dataGram.garOrderAddressDetails }}</text>
          </view>
        </view>

        <view class="info-item">
          <view class="info-label">
            <u-icon name="photo" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
            <text>现场图片:</text>
          </view>
          <view class="info-content">
            <u-upload width="180" height="130" :fileList="currentImages" name="3" multiple :maxCount="10"
                      :previewFullImage="true" :isReadOnly="true"></u-upload>
          </view>
        </view>

        <view class="info-item">
          <view class="info-label">
            <u-icon name="account" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
            <text>负责单位:</text>
          </view>
          <view class="info-content">
            <text class="content-text">{{ dataGram.garOrderCompanyName }}</text>
          </view>
        </view>

        <view class="info-item">
          <view class="info-label">
            <u-icon name="trash" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
            <text>垃圾类型:</text>
          </view>
          <view class="info-content">
            <text class="content-text">{{ dataGram.garOrderTrashType }}</text>
          </view>
        </view>

        <view class="info-item" v-for="(disposal,index) in dataGram.disposalSites" :key="index">
          <view class="info-label">
            <u-icon name="location" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
            <text v-if="index == 0">处置场地:</text>
            <text v-else></text>
          </view>
          <view class="info-content" @click.stop="handlerJumpOtherApp(disposal.latitude, disposal.longitude, dataGram.garCoordinate)">
            <text class="content-text">{{ disposal.addrStr }}</text>
          </view>
        </view>

        <view class="info-item">
          <view class="info-label">
            <u-icon name="order" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
            <text>订单号:</text>
          </view>
          <view class="info-content">
            <text class="content-text" selectable="true">{{ orderId }}</text>
            <!-- 生成二维码 -->
            <view class="qr-code-icon" @click="handleQrCodeClick(orderId)">
              <view class="iconfont icon-erweima-xian" style="font-size: 20px; color: #19a97c;"></view>
            </view>
          </view>
        </view>
      </view>
      <!-- 车辆信息 -->

      <view class="order-detail-container-box-card vehicle-section" v-if="dataGram.garOrderHandlerStatus !== 3">
        <view class="section-header">
          <view class="header-icon-bar"></view>
          <u-icon name="car" size="22" color="#fff" style="margin-right: 10rpx;"></u-icon>
          <text class="header-title">车辆信息</text>
        </view>

        <view class="trip-summary-card">
          <view class="summary-content">
            <u-icon name="info-circle" size="18" color="#19a97c" style="margin-right: 10rpx;"></u-icon>
            <text class="summary-label">当前订单总计需发车次数:</text>
            <text class="summary-value">{{ realCarCount }}</text>
            <text class="summary-unit">次</text>
          </view>
          <view v-if="userType === '用户'" class="reduce-trip-section">
            <text class="reduce-label">减少发车次数:</text>
            <view class="right-controls">
              <u-number-box
                  v-model="reduceTripCount"
                  :min="1"
                  :max="realCarCount - 1"
                  integer
                  buttonSize="30"
                  inputWidth="50"
                  style="margin: 0 20rpx;">
              </u-number-box>
              <u-button
                  type="primary"
                  size="mini"
                  @click="handleReduceTrips"
                  :disabled="reduceTripCount <= 0 || realCarCount <= 1"
                  style="background-color: #19a97c; max-width: 120rpx; font-size: 20rpx; padding: 0 10rpx;">
                确认减少
              </u-button>
            </view>
          </view>
        </view>

        <view class="vehicle-info-card" v-if="dataGram.garCarInfoList && dataGram.garCarInfoList.length > 0 &&userType !== '用户'">
          <view class="card-header">
            <u-icon name="file-text" size="18" color="#19a97c"></u-icon>
            <text class="card-title">车辆类型详情</text>
          </view>
          <view class="car-type-list">
            <view class="car-type-item" v-for="(car, index) in garCarTypeList" :key="index">
              <view class="car-type-info">
                <u-icon name="car-fill" size="16" color="#19a97c"></u-icon>
                <text class="info-label">车型:</text>
                <text class="info-value">{{ car.garOrderCarType }}</text>
              </view>
              <view class="car-count-info">
                <u-icon name="order" size="16" color="#19a97c"></u-icon>
                <text class="info-label">数量:</text>
                <text class="info-value">{{ car.count }}辆</text>
              </view>
            </view>
          </view>
        </view>

        <view class="handler-list-card"  v-if=" userType !== '用户'">
          <view class="card-header">
            <u-icon name="list" size="18" color="#19a97c"></u-icon>
            <text class="card-title">处理人员信息</text>
          </view>
          <view class="handler-item" v-for="(item, index) in handlerList" :key="index">
            <view class="handler-basic-info">
              <text class="handler-name">{{ item.garOrderHandlerName }}</text>
              <text class="handler-car">{{ item.garHandlerCarCode }}</text>
              <text class="handler-volume">{{ item.garOrderContainerVolume }}</text>
            </view>
            <view class="handler-trip-controls">
              <u-number-box
                  v-model="item.carCountInput"
                  :min="0"
                  :max="999"
                  integer
                  buttonSize="30"
                  inputWidth="50">
              </u-number-box>
              <u-button
                  type="success"
                  size="mini"
                  class="assign-button"
                  @click="assignTripToHandler(item)">
                {{ item.garCarCount && item.garCarCount > 0 ? '保存' : '分配' }}
              </u-button>
              <u-button
                  type="error"
                  size="mini"
                  class="delete-button"
                  @click="deleteHandler(item)">
                删除
              </u-button>
            </view>
          </view>
        </view>
      </view>



      <!-- 订单人员 -->
      <view class="order-detail-container-box-card order-person-section" v-if="userType !== '用户'">
        <view class="section-header">
          <view class="header-icon-bar"></view>
          <u-icon name="account" size="22" color="#fff" style="margin-right: 8rpx;"></u-icon>
          <text class="header-title">订单信息</text>
        </view>


        <view class="info-item">
          <view class="info-label">
            <u-icon name="clock" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
            <text>预约时间:</text>
          </view>
          <view class="info-content">
            <text class="content-text">{{ dataGram.garOrderAgreementTime }}</text>
          </view>
        </view>

        <view class="info-item">
          <view class="info-label">
            <u-icon name="phone" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
            <text>联系电话:</text>
          </view>
          <view class="info-content">
            <text class="content-text" selectable="true">{{ dataGram.garOrderContactTel }}</text>
            <view class="icon-box" v-if="dataGram.handleFlag" @click="handleContactClick(dataGram.garOrderContactTel)">
              <u-icon name="phone-fill" size="20" color="#19a97c"></u-icon>
            </view>
          </view>
        </view>

        <view class="info-item">
          <view class="info-label">
            <u-icon name="account" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
            <text>订单人:</text>
          </view>
          <view class="info-content">
            <text class="content-text">{{ dataGram.garOrderContactName }}</text>
          </view>
        </view>

        <view class="info-item">
          <view class="info-label">
            <u-icon name="map" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
            <text>处理场所:</text>
          </view>
          <!-- 修改后 -->
          <view class="info-content" v-if="selectedDisposalSites.length > 0" style="flex-direction: column; align-items: flex-start;">
            <view v-for="(site, index) in selectedDisposalSites" :key="index" style="margin-bottom: 15rpx; width: 100%;">
              <text class="content-text">{{ site.companyName }}</text>
              <view v-if="site.contactName" style="margin-top: 5rpx;">
                <text class="content-text">联系人: {{ site.contactName }}</text>
              </view>
              <!-- 修改后 -->
              <view v-if="site.contactPhone" style="margin-top: 5rpx; display: flex; align-items: center;">
                <text style="flex: 1;">联系电话: {{ site.contactPhone }}</text>
                <view style="margin-left: 10rpx;" v-if="dataGram.handleFlag" @click="handleContactClick(site.contactPhone)">
                  <u-icon name="phone-fill" size="20" color="#19a97c"></u-icon>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="info-item">
          <view class="info-label">
            <u-icon name="file-text" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
            <text>备注:</text>
          </view>
          <view class="info-content">
            <text class="content-text">{{ dataGram.garRemark }}</text>
          </view>
        </view>
      </view>

      <!-- 处理信息 -->
      <view class="order-detail-container-box-card process-info-section">
        <view class="section-header">
          <view class="header-icon-bar"></view>
          <u-icon name="setting" size="22" color="#fff" style="margin-right: 8rpx;"></u-icon>
          <text class="header-title">处理信息</text>
        </view>

        <view v-if="putDownImages.length || putOnImages.length" class="photo-section">
          <view class="info-item">
            <view class="info-label">
              <u-icon name="photo" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
              <text>装车照片:</text>
            </view>
          </view>

          <view class="image-groups">
            <view v-for="group in putOnImagesGrouped" :key="group.index" class="image-group">
              <view class="image-group-header">
                <view class="image-group-title">{{ group.carName}}第 {{ group.index }} 趟</view>
                <view class="car-status" :class="{
                  'in-transit': group.carStatus === '0',
                  'completed': group.carStatus === '1' || group.carStatus === '2'
                }">
                  {{ (group.carStatus === '1'||group.carStatus === '2') ? '已运完' : '正在清运' }}
                </view>
              </view>
              <u-upload width="180" height="130" :fileList="group.images" name="3" multiple :maxCount="20"
                        :previewFullImage="true" :isReadOnly="true"></u-upload>
            </view>
          </view>
        </view>

        <view v-else class="empty-image-section">
          <image class="image-style" style="width: 200rpx; height: 200rpx;" :src="emptyBase64Image"></image>
          <text class="empty-text">暂无处理照片</text>
        </view>
      </view>
      <view class="space-box">{{ spaceStr }}</view>
    </view>

    <!-- 占位符 -->
    <view class="order-detail-bottom">
      <view class="order-detail-bottom-box">
        <!-- 上方按钮行 -->
        <view class="order-detail-top-buttons" v-show="showTopButtons">
          <!-- 修改按钮组容器类名和结构 -->
          <view class="button-group-wrap" v-if="dataGram.garOrderHandlerStatus === 0 && userType == '运输企业负责人' && dataGram.handleFlag && dataGram.garCancelFlag === 0">
            <u-button @click="handleOrderDispatchClick(orderId)" shape="square" color="#19a97c" text="分配驾驶员"></u-button>
            <u-button @click="handleDisposalDispatchClick(orderId)" shape="square" color="#19a97c" text="分配处置场所"></u-button>
            <u-button
                @click="handleOrder(orderId)"
                shape="square"
                color="#19a97c"
                text="开始运输"
                :disabled="!isDriverAndDisposalAssigned()">
            </u-button>
          </view>

          <view class="button-group-spread" v-else-if="!isAllTripsCompleted()">
            <u-button class="btn-left" @click="handleOrderDispatchClick(orderId)" shape="square" color="#19a97c" text="重新分配驾驶员"></u-button>
            <u-button class="btn-right" @click="handleDisposalDispatchClick(orderId)" shape="square" color="#19a97c" text="重新分配处置场所"></u-button>
          </view>

          <view v-else-if="dataGram.garOrderHandlerStatus === 1 && userType == '运输企业负责人' && isAllTripsCompleted()">
            <u-button @click="handleSubmitSuccess(orderId)" shape="square" color="#19a97c" text="完成订单"></u-button>
          </view>
        </view>

        <!-- 下方按钮行 -->
        <view class="order-detail-bottom-buttons">
          <view class="cancel-button-container">
            <u-button
                v-if="dataGram.garOrderHandlerStatus === 0 && userType == '运输企业负责人' && dataGram.garCancelFlag === 0"
                @click="handleOderCancelClick()" shape="square" color="#19a97c" text="取消订单"></u-button>
            <u-button
                v-if="dataGram.garOrderHandlerStatus === 0 && userType == '用户' && dataGram.garCancelFlag === 0"
                @click="handleOderCancelClick()" shape="square" color="#19a97c" text="取消订单"></u-button>
          </view>

          <view class="evaluation-buttons-container" v-show="showRightButtons">
            <u-button @click="handleEvaluate(orderId, userType)"
                      v-if="dataGram.garEvaluateFlag === 0 && userType === '用户'" shape="square" color="#19a97c"
                      text="去评价"></u-button>
            <u-button @click="handleEvaluateDetail(orderId, userType)"
                      v-if="dataGram.garHandlerEvaluateFlag === 0 && userType === '运输企业负责人'  && dataGram.haveEvaluateOfClient==1"
                      shape="square" color="#19a97c" text="查看评价"></u-button>
            <u-button @click="handleEvaluateDetail(orderId, userType)"
                      v-if="dataGram.garHandlerEvaluateFlag === 1 && userType === '运输企业负责人'  && dataGram.haveEvaluateOfClient==1"
                      shape="square" color="#19a97c" text="查看评价"></u-button>
            <u-button @click="handleEvaluateDetail(orderId, userType)"
                      v-if="dataGram.garEvaluateFlag === 1 && userType === '用户'" shape="square" color="#19a97c"
                      text="查看评价"></u-button>
          </view>
        </view>
      </view>
    </view>
    <u-action-sheet :closeOnClickOverlay="true" :closeOnClickAction="false" @actionSheetClose="handleClose"
                    @submitFunction="submitFunction" @select="selectClick" :actions="list" round="15" title="取消订单"
                    :show="cancelShow">
    </u-action-sheet>
  </view>
  <view v-if="showUQRcode" class="mask-container" @click="showUQRcode = false">
    <uqrcode :h5SaveIsDownload="true" ref="qrCodeRef" canvas-id="qrcode" :value="qrCodeText"
             :options="{ margin: 10, boxSizing: borderBox }"></uqrcode>
  </view>

  <u-popup :zIndex="10075" closeOnClickOverlay :show="driverListPopupShowFlag" :round="10" @close="driverListPopupShowFlag = false">
    <view class="driver-list-popup">
      <view class="driver-list-popup-header">
        <text class="driver-list-popup-title">司机信息列表</text>
      </view>
      <view class="driver-list-popup-content">
        <view class="driver-item" v-for="(driver, index) in driverListForAssignment" :key="index">
          <view class="driver-info">
            <text class="driver-name">{{ driver.garOrderHandlerName }}</text>
            <text class="driver-phone">{{driver.garOrderHandlerTel }}</text>
          </view>
          <u-button type="primary" size="mini" color="#19a97c" @click="assignTripToDriver()" style="width: 120rpx; height: 50rpx; font-size: 24rpx; padding: 0 10rpx; margin-right: 0;">分配趟次</u-button>
        </view>
      </view>
      <view class="driver-list-popup-footer">
        <u-button @click="driverListPopupShowFlag = false">关闭</u-button>
      </view>
    </view>
  </u-popup>
</template>

<script setup>import {
  queryCarList
} from '@/apis/carinfo.js';
import {
  dispatchDisposalOrders,
  dispatchOrders,
  getGarOrderMatchHandlers,
  queryDisposalDispatch,
  queryOrderDetail,
  queryOrderDispatch,
  sendToDriver,
  updateGarRealCarCount,
  updateOrder,
  queryCarCode,
  queryByOrderNo,
  updateCarCount,
  queryGarRealCarCountByGarOrderNo,
  selectGarOrderCar,
  insertRandomCopyByTypeAndOrderId, deleteDriverByOrderNo
} from "@/apis/order.js";
import {
  createQrCode
} from '@/apis/qrcode.js';
import uqrcode from '@/components/Sansnn-uQRCode_4.0.6/components/uqrcode/uqrcode.vue';
import clashDisposalDispatch from '@/components/clash-disposal-dispatch/index.vue';
import clashDriverDispatch from '@/components/clash-driver-dispatch/index.vue';
import zStatic from '@/components/z-paging/js/z-paging-static';
import {
  useMainStore
} from '@/stores/index.js';
import {
  onLoad,
  onShow
} from '@dcloudio/uni-app';
import {
  computed, watch
} from 'vue';
import { ref } from 'vue';
const paramFrom = ref({
  carNumber: 0,
  carType: ""
})
const totalCarNumber = ref(0);
const driverListPopupShowFlag = ref(false);
const driverListForAssignment = ref([]);
const garCarInfoList = ref({})
const carPopupShowFlag = ref(false)
const driverList = ref([]);
const isOnloadIn = ref(false)
const clashDriverDispatchRef = ref()
const clashDisposalDispatchRef = ref()
const driverPersonnelList = ref([])
const disposalPersonnelList = ref([])
const handlerList = ref([])
const orderNo = ref(null)
const carCount = ref(null)
const tel = ref(null)
const selectedHandlerTel = ref("")
const realCarCount = ref(null)
const reduceTripCount = ref(1) // 要减少的发车次数
const store = useMainStore();
const userType = computed(() => store.userType)
const dataGram = ref();
const orderId = ref(null)
const currentImages = ref([])
const putOnImages = ref([])
const putOnImagesGrouped = ref([])  // 新增这个变量
const putDownImages = ref([])
const emptyBase64Image = ref(zStatic.base64Empty)
const showUQRcode = ref(false)
const spaceStr = ref("")
const cancelShow = ref(false)
const currentCancelName = ref("")
const qrCodeRef = ref()
const qrCodeText = ref()
const candidates = ref([])
const garCarLabelInfoList = ref({})
const garCarLabelInfoNow = ref()
const selectedHandlerTels = ref("")
const garCarTypeList = ref([])
const driverAssigned = ref(false);  // 添加这行，跟踪驾驶员是否已分配
const disposalAssigned = ref(false);  // 添加这行，跟踪处置场所是否已分配
const selectedDisposalSites = ref([]);
// 新增：用于存储待分配的驾驶员列表
const pendingDriverAssignments = ref({})
const pendingDisposalAssignments = ref({})


const isInTransit = (index) => {
  // 如果订单已完成，所有趟次都不是"清运中"
  if (dataGram.value.garOrderHandlerStatus === 3) {
    return false;
  }

  // 当前正在清运的趟次索引（从1开始）
  const currentTransitIndex = putOnImagesGrouped.value.length;

  // 只有当前趟次是"清运中"
  return index === currentTransitIndex;
};

const isCompleted = (index) => {
  // 如果订单已完成，所有趟次都是"已运完"
  if (dataGram.value.garOrderHandlerStatus === 3) {
    return true;
  }

  // 已完成的趟次索引小于当前正在清运的趟次索引
  const currentTransitIndex = putOnImagesGrouped.value.length;

  return index < currentTransitIndex;
};

const getStatusText = (index) => {
  // 如果订单已完成，显示"已运完"
  if (dataGram.value.garOrderHandlerStatus === 3) {
    return '已运完';
  }

  // 当前正在清运的趟次索引（从1开始）
  const currentTransitIndex = putOnImagesGrouped.value.length;

  if (index === currentTransitIndex) {
    return '正在清运';
  } else if (index < currentTransitIndex) {
    return '已运完';
  } else {
    return '正在清运';
  }
};

const list = computed(() => {
  let reason = [{
    name: '订单信息填写有误',
  },
    {
      name: '线下协商有问题',
    },
    {
      name: '不需要清运了',
    },
    {
      name: '其他',
    },
    {
      name: '提交',
    }
  ]
  if (userType.value === '用户') {
    reason.unshift({
      name: '长时间无人接单',
    })
  }
  return reason
})

const handleReduceTrips = () => {
  if (!reduceTripCount.value || reduceTripCount.value <= 0) {
    uni.$u.toast('请输入有效的减少次数');
    return;
  }

  if (realCarCount.value <= reduceTripCount.value) {
    uni.$u.toast('减少次数不能超过当前总次数');
    return;
  }

  // 调用接口，传递负数表示减少
  updateGarRealCarCount(orderId.value, -reduceTripCount.value)
      .then(res => {
        if (res.data.success) {
          uni.$u.toast(`减少${reduceTripCount.value}次成功!`);
          // 刷新订单详情
          handleOrderDetail(orderId.value);
          refreshOrderData();
          // 重置减少次数
          reduceTripCount.value = 1;
        } else {
          uni.$u.toast(`减少次数失败!`);
        }
      })
      .catch(err => {
        uni.$u.toast('减少次数请求失败');
        console.error('减少次数失败:', err);
      });
}

const isDriverAssigned = computed(() => {
  // 检查是否有分配的驾驶员
  return handlerList.value && handlerList.value.length > 0;
});
const isDriverAndDisposalAssigned = () => {
  // 直接使用已有的响应式变量来判断分配状态
  const hasDrivers = driverAssigned.value || (pendingDriverAssignments.value && Object.keys(pendingDriverAssignments.value).length > 0);
  const hasDisposalSites = disposalAssigned.value || (pendingDisposalAssignments.value && Object.keys(pendingDisposalAssignments.value).length > 0);

  return hasDrivers && hasDisposalSites;
};

const isAllTripsCompleted = () => {
  // 检查所有趟次是否已完成
  if (!dataGram.value || !dataGram.value.garCarInfoList || !putOnImagesGrouped.value) {
    return false;
  }

  // 获取订单要求的趟次数
  const requiredTrips = dataGram.value.garCarInfoList.length;

  // 获取实际完成的趟次数
  const completedTrips = putOnImagesGrouped.value.length;

  // 如果完成的趟次数大于等于要求的趟次数，则表示全部运完
  console.log("实际完成次数" + completedTrips + "要求次数" + requiredTrips)
  return completedTrips >= requiredTrips;
}

const assignTripToDriver = ()=>{
  sendToDriver(orderId.value).then(res=>{
    if (res.data.success) {
      uni.$u.toast('分配成功');
    }
  })
}
// 获取驾驶员列表的方法
const fetchDriverList = (orderId) => {
  queryCarCode(orderId).then(res => {
    if (res.data.success) {
      driverList.value = res.data.data;
    }
  });
};

watch(selectedHandlerTel, (newVal) => {
  tel.value = newVal;
});

const refreshOrderData = () => {
  // 刷新处理人员列表
  queryByOrderNo(orderNo.value).then(res => {
    if (res.data.success) {
      handlerList.value = res.data.data
      // 为每个处理人员初始化输入框的值
      handlerList.value.forEach(handler => {
        // 将已分配的趟次数量作为初始值
        handler.carCountInput = handler.garCarCount || 0;
      });
    }
  }).catch(err => {
    console.error('获取订单信息失败:', err);
  })

  // 刷新总趟次数
  queryGarRealCarCountByGarOrderNo(orderNo.value).then(res => {
    if (res.data.success) {
      realCarCount.value = res.data.data
    }
  })

  selectGarOrderCar(orderNo.value).then(res => {
    if (res.data.success) {
      garCarTypeList.value = res.data.data
    }
  })
};

const onCarCountChange = (e, handler) => {
  handler.carCountInput = e.value;
};

const assignTripToHandler = (handler) => {
  // 检查必填字段
  if (handler.carCountInput === undefined || handler.carCountInput === null) {
    uni.$u.toast(`请输入分配的趟次!`);
    return;
  }

  // 确保输入的是非负整数
  if (handler.carCountInput < 0) {
    uni.$u.toast(`分配趟次不能为负数!`);
    handler.carCountInput = handler.garCarCount || 0;
    return;
  }

  // 获取当前已分配的趟次数
  const currentAllocated = handler.garCarCount || 0;

  // 计算需要增加或减少的趟次数
  let delta = handler.carCountInput - currentAllocated;

  // 如果没有变化则不处理
  if (delta === 0) {
    uni.$u.toast('分配数量未发生变化');
    return;
  }

  // 检查如果是增加操作，是否会超过总需求趟次
  if (delta > 0) {
    // 检查已分配趟次总和是否超过订单要求的总发车次数（排除当前正在修改的人员）
    const allocatedTrips = handlerList.value.reduce((sum, h) => {
      // 如果是当前正在操作的handler，就不要把它已有的趟次算进去
      if (h.garOrderHandlerTel === handler.garOrderHandlerTel) {
        return sum;
      }
      return sum + parseInt(h.garCarCount || 0);
    }, 0);

    const totalRequiredTrips = realCarCount.value || 0;

    if (allocatedTrips + handler.carCountInput > totalRequiredTrips) {
      uni.$u.toast(`分配趟次过多，最多只能再分配${totalRequiredTrips - allocatedTrips}趟!`);
      // 将输入框重置为之前的值
      handler.carCountInput = handler.garCarCount || 0;
      return;
    }
  }

  // 调用API传递订单ID和车辆数量（传递差值，可能是负数）
  const params = {
    carCount: delta, // 传递差值，可能是正数（增加）或负数（减少）
    tel: handler.garOrderHandlerTel,
    orderNo : orderNo.value
  };

  updateCarCount(params)
      .then(res => {
        if (res.data.success) {
          if (delta === 0) {
            uni.$u.toast('取消分配成功!');
          } else if (delta > 0) {
            uni.$u.toast('增加分配成功!');
          } else {
            uni.$u.toast('减少分配成功!');
          }
          // 刷新订单详情
          handleOrderDetail(orderId.value);
          refreshOrderData()
        } else {
          uni.$u.toast('操作失败!');
          // 将输入框重置为之前的值
          handler.carCountInput = handler.garCarCount || 0;
        }
      })
      .catch(err => {
        uni.$u.toast('操作失败');
        console.error('操作失败:', err);
        // 将输入框重置为之前的值
        handler.carCountInput = handler.garCarCount || 0;
      });
};

const confirmAddVehicles = () =>{
  const params = {
    carCount: carCount.value,
    tel: tel.value,
    orderNo : orderNo.value,
    orderCarType :selectedHandlerTels.value
  };
  if(selectedHandlerTels.value === ""){
    uni.$u.toast(`请选择车型!`);
    return;
  }
  insertRandomCopyByTypeAndOrderId(params).then(res => {
    if (res.data.success) {
      uni.$u.toast(`添加成功!`);
      // 刷新订单详情
      handleOrderDetail(orderId.value);
      refreshOrderData()
    } else {
      uni.$u.toast(`添加失败!`);
    }
  })
}



const confirmAddVehicle = () => {

  // 检查必填字段
  if (!carCount.value) {
    uni.$u.toast(`请选择分配的趟次!`);
    return;
  }
  if (!tel.value) {
    uni.$u.toast(`请选择分配人员!`);
    return;
  }


  if (selectedHandlerTel.value === 'ADD_TOTAL_TRIPS') {
    updateGarRealCarCount(orderId.value, carCount.value)
        .then(res => {
          if (res.data.success) {
            uni.$u.toast(`总趟次更新成功!`);
            // 刷新订单详情
            handleOrderDetail(orderId.value);
            refreshOrderData()
          } else {
            uni.$u.toast(`总趟次更新失败!`);
          }
        })
        .catch(err => {
          uni.$u.toast('总趟次更新请求失败');
          console.error('总趟次更新失败:', err);
        });
    return;
  }

  // 检查已分配趟次总和是否超过订单要求的总发车次数
  const allocatedTrips = handlerList.value.reduce((sum, handler) => sum + parseInt(handler.garCarCount || 0), 0);
  const totalRequiredTrips = realCarCount.value || 0;

  console.log('已分配趟次总和:', allocatedTrips);
  console.log('总需求趟次:', totalRequiredTrips);

  if (allocatedTrips >= totalRequiredTrips) {
    uni.$u.toast(`全部趟次已分配完成，无需再分配!`);
    return;
  }

  // 检查本次分配后是否会超过总发车次数
  if (allocatedTrips + carCount.value > totalRequiredTrips) {
    uni.$u.toast(`分配趟次过多，最多只能再分配${totalRequiredTrips - allocatedTrips}趟!`);
    return;
  }

  // 调用API传递订单ID和新增车辆数量
  const params = {
    carCount: carCount.value,
    tel: tel.value,
    orderNo : orderNo.value
  };

  updateCarCount(params)
      .then(res => {
        if (res.data.success) {
          uni.$u.toast(`分配成功!`);
          // 刷新订单详情
          handleOrderDetail(orderId.value);
          queryByOrderNo(orderNo.value).then(res => {
            if (res.data.success) {
              handlerList.value = res.data.data
            }
          }).catch(err => {
            console.error('获取订单信息失败:', err);
          })
        } else {
          uni.$u.toast(`分配失败!`);
        }
      })
      .catch(err => {
        uni.$u.toast('新增车辆请求失败');
        console.error('新增车辆失败:', err);
      });
};

const handlePopupClick = (val) => {
  carPopupShowFlag.value = val
}
// 创建二维码
const createQrCodeLocal = (orderId) => {
  // 获取本地地址拼接订单id
  showUQRcode.value = true;
  const hostname = window.location.hostname;
  const port = window.location.port;
  const protocol = window.location.protocol;
  const localAddress = `${protocol}//${hostname}:${port}`;
  // const localAddress = `http://localhost:5173`;
  qrCodeText.value = localAddress + "/pages/order-info/order-other/guest/index?orderId=" + orderId;
  console.log(qrCodeRef.value);
}
// 获取二维码
const handleQrCodeClick = (orderId) => {
  // 微信小程序可用
  // #ifdef MP-WEIXIN
  createQrCode(orderId).then((res) => {
    if (res.data.success) {
      uni.previewImage({
        urls: [res.data.data],
        longPressActions: {
          itemList: ['发送给朋友', '保存图片', '收藏'],
          success: function(res) {
            console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
          },
          fail: function(res) {
            console.log(res);
          }
        }
      })
    }
  })
  // #endif
  // H5
  // #ifdef H5
  createQrCodeLocal(orderId)
  // #endif
}

const handleOrderDispatchClick = (orderId) => {
  // 获取订单车辆数量
  const orderCarCount = dataGram.value?.garCarInfoList?.length || 0;

  // 在调用API前验证token有效性
  const validateTokenAndCallAPI = async () => {
    try {
      // 检查当前token是否存在
      if (!store.token) {
        uni.$u.toast("登录已过期，请重新登录");
        // 跳转到登录页面
        uni.reLaunch({
          url: "/pages/login/code",
        });
        return;
      }

      // 获取驾驶员人员 - 添加时间戳避免缓存
      const timestamp = new Date().getTime();

      // 添加重试机制
      let retryCount = 0;
      const maxRetries = 2;

      const attemptRequest = async () => {
        try {
          const res = await queryOrderDispatch(`${orderId}?t=${timestamp}`);

          if (res.data.success) {
            // 过滤车辆  非用户选择的车辆无法选中
            driverPersonnelList.value = res.data.data;
            // 恢复原始的open调用方式，只传递dataList
            clashDriverDispatchRef.value.open(res.data.data);
            refreshOrderData();
          } else {
            uni.$u.toast("驾驶员分配成功！");
            refreshOrderData();
          }
        } catch (error) {
          console.error('获取驾驶员信息失败:', error);

          // 检查是否是token相关错误
          if (error.response && (error.response.status === 401 || error.response.status === 403)) {
            retryCount++;

            if (retryCount <= maxRetries) {
              console.log(`token可能已过期，正在进行第${retryCount}次重试`);

              // 清除当前token
              store.token = null;
              setRequestToken(null);
              uni.removeStorageSync("Authorization");

              // 跳转重新登录
              uni.$u.toast("登录已过期，请重新登录");
              setTimeout(() => {
                uni.reLaunch({
                  url: "/pages/login/code",
                });
              }, 1500);
              return;
            }
          }

          // 其他错误或重试次数用完
          uni.$u.toast("获取驾驶员信息失败，请稍后重试");
        }
      };

      await attemptRequest();

    } catch (error) {
      console.error('验证token时发生错误:', error);
      uni.$u.toast("系统错误，请重新登录");
      uni.reLaunch({
        url: "/pages/login/code",
      });
    }
  };

  // 执行验证和API调用
  validateTokenAndCallAPI();
}
const handleDisposalDispatchClick = (orderId) => {
  // 获取处置场所人员
  queryDisposalDispatch(orderId).then(res => {
    if (res.data.success) {
      disposalPersonnelList.value = res.data.data
      clashDisposalDispatchRef.value.open(res.data.data)
      refreshOrderData()
    } else {
      uni.$u.toast("处理场所分配成功！")
      refreshOrderData()
    }
  })
}



const handleClose = (e) => {
  cancelShow.value = false
}
const handleEvaluateDetail = (orderId, userType) => {
  uni.$u.route(`pages/order-info/order-other/evaluate-info/index`, {
    orderId: orderId,
    userType: userType
  })
}
const selectClick = (index) => {
  currentCancelName.value = index.name;
}
const handleOrderDetail = (orderId) => {
  queryOrderDetail(orderId).then(res => {
    dataGram.value = res.data.data;
    fetchDriverList(orderId);
    currentImages.value = res.data.data.currentImages.map(item => {
      return {
        url: import.meta.env.VITE_BASE_URL + item
      };
    });

    // 同时调用queryDisposalDispatch接口获取处理场所信息
    queryDisposalDispatch(orderId).then(disposalRes => {
      if (disposalRes.data.success && disposalRes.data.data && disposalRes.data.data.length > 0) {
        // 根据实际返回数据结构提取处理场所信息，只显示选中的联系人
        selectedDisposalSites.value = disposalRes.data.data
            .map(site => {
              // 筛选出personnelInfo中checked为true的联系人
              const selectedPerson = site.personnelInfo && site.personnelInfo.length > 0 ?
                  site.personnelInfo.find(person => person.checked) : null;

              return {
                companyName: site.garOrderDisposalCompanyName,
                contactName: selectedPerson ? selectedPerson.personName : '',
                contactPhone: selectedPerson ? selectedPerson.tel : ''
              };
            })
            // 过滤掉没有选中联系人的处理场所
            .filter(site => site.contactName && site.contactPhone);

        // 设置已分配状态
        disposalAssigned.value = selectedDisposalSites.value.length > 0;
        console.log('从queryDisposalDispatch获取的处理场所信息:', selectedDisposalSites.value);
      } else {
        selectedDisposalSites.value = [];
        disposalAssigned.value = false;
      }
    });

    putOnImages.value = res.data.data.putOnImages.map(item => {
      let processedItem = item;
      let carName = '';
      let carStatus = '';

      // 提取name后面的字符串作为carName并从item中移除
      if (item.includes('name')) {
        const nameIndex = item.indexOf('name');
        carName = item.substring(nameIndex + 4);

        // 检查carName末尾是否包含状态值(0或1)
        if (carName.endsWith('0') || carName.endsWith('1') || carName.endsWith('2')) {
          carStatus = carName.slice(-1);
          carName = carName.slice(0, -1);
        }

        processedItem = item.substring(0, nameIndex);
      }

      // 保持原有逻辑不变，但添加carName和carStatus到返回对象
      const newItem = processedItem.substring(0, processedItem.length - 6);
      const newIndex = processedItem.substring(processedItem.length - 6);
      return { url: import.meta.env.VITE_BASE_URL + newItem, newIndex, carName, carStatus };
    });

    // 按照newIndex升序排序
    putOnImages.value.sort((a, b) => {
      return parseInt(a.newIndex) - parseInt(b.newIndex);
    });

    // 重新组织数据，将相同newIndex的图片放在一起
    const groupedImages = {};
    putOnImages.value.forEach(item => {
      if (!groupedImages[item.newIndex]) {
        groupedImages[item.newIndex] = [];
      }
      groupedImages[item.newIndex].push(item);
    });

    // 转换newIndex为1,2,3的连续数字
    const sortedKeys = Object.keys(groupedImages).sort((a, b) => parseInt(a) - parseInt(b));
    const newGroupedImages = {};
    sortedKeys.forEach((key, index) => {
      newGroupedImages[index + 1] = groupedImages[key];
    });

    // 转换为数组形式，方便在模板中遍历
    putOnImagesGrouped.value = Object.keys(newGroupedImages).map(key => ({
      index: key,
      images: newGroupedImages[key],
      carName: newGroupedImages[key] && newGroupedImages[key].length > 0 ? newGroupedImages[key][0].carName : '',
      carStatus: newGroupedImages[key] && newGroupedImages[key].length > 0 ? newGroupedImages[key][0].carStatus : ''
    }));
    console.log('putOnImagesGrouped.value:', putOnImagesGrouped.value);
    putDownImages.value = res.data.data.putDownImages.map(item => {
      return {
        url: import.meta.env.VITE_BASE_URL + item
      };
    });
  })
}
/**
 * 拨打电话回调
 */
const handleContactClick = (val) => {
  uni.makePhoneCall({
    phoneNumber: val
  }).then(res => {}).catch(err => {});
}

const handlerJumpOtherApp = (latitude, longitude, garCoordinate) => {
  console.log(latitude + "=================>" + longitude);
  // 给出提示确定要跳转吗
  uni.showModal({
    title: '提示',
    content: '是否跳转到app定位进行导航？',
    success: function(res) {
      if (res.confirm) {
        uni.openLocation({
          latitude: latitude,
          longitude: longitude,
          success: function() {
            console.log('success');
          }
        });
      }
    }
  })
}

/**
 * 取消订单
 * @param {*} orderId 订单id
 */
const handleOderCancelClick = () => {
  cancelShow.value = true;
}

/**
 * 提交取消订单
 */
const submitFunction = (otherReason) => {
  let reason = otherReason
  if (currentCancelName.value != "其他") {
    reason = currentCancelName.value
  }
  if (!reason) {
    uni.$u.toast("请提供取消订单的原因")
    return
  }
  let params = {
    garOrderId: orderId.value,
    garCancelFlag: 1,
    garReason: reason
  }
  updateOrder(params).then(res => {
    if (res.data.success) {
      cancelShow.value = false
      uni.$u.toast(res.data.data)
      uni.$u.route({
        type: "reLaunch",
        url: `pages/order/index`,
      })
    }
  })
}
// 提交完成
const handleSubmitSuccess = (orderId) => {
  uni.showModal({
    title: '提示',
    content: '订单已经清运完成了吗？',
    success: function(res) {
      if (res.confirm) {
        updateOrder({
          garOrderId: orderId,
          handleType: 3
        }).then(res => {
          if (res.data.success) {
            uni.$u.toast("已完成")
            handleOrderDetail(orderId)
          }
        })
      } else if (res.cancel) {}
    }
  });
}
const handleEvaluate = (orderId, userType) => {
  uni.$u.route(`pages/order-info/order-other/evaluate/index?orderId=${orderId}&userType=${userType}`)
}

// 接收订单
// 接收订单
const handleOrder = (orderId) => {
  // 在开始运输前先分配驾驶员（如果有待分配的驾驶员）
  if (pendingDriverAssignments.value && Object.keys(pendingDriverAssignments.value).length > 0) {
    let driverData = {
      garOrderId: orderId,
      dispatchList: []
    }
    for (const key in pendingDriverAssignments.value) {
      driverData.dispatchList.push({
        ...pendingDriverAssignments.value[key]
      });
    }

    dispatchOrders(driverData).then(driverRes => {
      if (driverRes.data.success) {
        // 清空待分配列表
        pendingDriverAssignments.value = {};
        // 标记驾驶员已分配
        driverAssigned.value = true;

        // 然后分配处置场所（如果有待分配的处置场所）
        if (pendingDisposalAssignments.value && Object.keys(pendingDisposalAssignments.value).length > 0) {
          let disposalData = {
            garOrderId: orderId,
            dispatchList: []
          }
          for (const key in pendingDisposalAssignments.value) {
            disposalData.dispatchList.push({
              ...pendingDisposalAssignments.value[key]
            });
          }

          dispatchDisposalOrders(disposalData).then(disposalRes => {
            if (disposalRes.data.success) {
              // 清空待分配列表
              pendingDisposalAssignments.value = {};
              // 标记处置场所已分配
              disposalAssigned.value = true;

              // 然后更新订单状态为开始运输
              updateOrder({
                garOrderId: orderId,
                handleType: 0
              }).then(res => {
                if (res.data.success) {
                  if (res.data.data === "订单已经被别人接受啦") {
                    uni.$u.toast(res.data.data)
                    uni.$u.route({
                      type: "reLaunch",
                      url: `pages/order/index`,
                    })
                  } else {
                    uni.$u.toast(res.data.data)
                    handleOrderDetail(orderId)
                    refreshOrderData()
                  }
                }
              })
            } else {
              uni.$u.toast("指定处置场所失败，请重试");
            }
          })
        } else {
          // 没有待分配的处置场所，直接更新订单状态为开始运输
          updateOrder({
            garOrderId: orderId,
            handleType: 0
          }).then(res => {
            if (res.data.success) {
              if (res.data.data === "订单已经被别人接受啦") {
                uni.$u.toast(res.data.data)
                uni.$u.route({
                  type: "reLaunch",
                  url: `pages/order/index`,
                })
              } else {
                uni.$u.toast(res.data.data)
                handleOrderDetail(orderId)
                refreshOrderData()
              }
            }
          })
        }
      } else {
        uni.$u.toast("指定人员失败，请重试");
      }
    })
  } else {
    // 没有待分配的驾驶员，检查是否有待分配的处置场所
    if (pendingDisposalAssignments.value && Object.keys(pendingDisposalAssignments.value).length > 0) {
      let disposalData = {
        garOrderId: orderId,
        dispatchList: []
      }
      for (const key in pendingDisposalAssignments.value) {
        disposalData.dispatchList.push({
          ...pendingDisposalAssignments.value[key]
        });
      }

      dispatchDisposalOrders(disposalData).then(disposalRes => {
        if (disposalRes.data.success) {
          // 清空待分配列表
          pendingDisposalAssignments.value = {};
          // 标记处置场所已分配
          disposalAssigned.value = true;

          // 然后更新订单状态为开始运输
          updateOrder({
            garOrderId: orderId,
            handleType: 0
          }).then(res => {
            if (res.data.success) {
              if (res.data.data === "订单已经被别人接受啦") {
                uni.$u.toast(res.data.data)
                uni.$u.route({
                  type: "reLaunch",
                  url: `pages/order/index`,
                })
              } else {
                uni.$u.toast(res.data.data)
                handleOrderDetail(orderId)
                refreshOrderData()
              }
            }
          })
        } else {
          uni.$u.toast("指定处置场所失败，请重试");
        }
      })
    } else {
      // 没有待分配的驾驶员和处置场所，直接开始运输
      updateOrder({
        garOrderId: orderId,
        handleType: 0
      }).then(res => {
        if (res.data.success) {
          if (res.data.data === "订单已经被别人接受啦") {
            uni.$u.toast(res.data.data)
            uni.$u.route({
              type: "reLaunch",
              url: `pages/order/index`,
            })
          } else {
            uni.$u.toast(res.data.data)
            handleOrderDetail(orderId)
            refreshOrderData()
          }
        }
      })
    }
  }
}


const currentStep = (step) => {
  if (step > 2) {
    return step - 1;
  }
  return step;
}

/**
 * 清运状态
 * @param {*} status
 */
const cleanStatus = (status) => {
  if (dataGram.garCancelFlag === 1) {
    return '取消清运';
  }
  switch (status) {
    case 0:
      return '准备清运';
    case 1:
      return '正在清运';
    case 3:
      return '清运完成';
  }
}

const handleDisposalDispatchConfirm = (val) => {
  console.log(val);
  if (!val) {
    return;
  }

  // 判断是否是重新分配（订单状态为1）
  const isReassigning = dataGram.value?.garOrderHandlerStatus === 1;

  if (isReassigning) {
    // 如果是重新分配，直接调用接口分配处置场所
    let data = {
      garOrderId: orderId.value,
      dispatchList: []
    }

    // 新增：存储选中的处理场所信息
    selectedDisposalSites.value = [];

    for (const key in val) {
      data.dispatchList.push({
        ...val[key]
      });

      // 新增：提取处理场所信息
      selectedDisposalSites.value.push({
        companyName: val[key].companyName,
        contactName: val[key].personName,
        contactPhone: val[key].tel
      });
    }
    console.log(data);
    dispatchDisposalOrders(data).then(res => {
      if (res.data.success) {
        uni.$u.toast(res.data.msg)
        // 标记处置场所已分配
        disposalAssigned.value = true;
        // 检查是否两个任务都已完成
        // 立即刷新订单详情以确保分配信息得到保存
        handleOrderDetail(orderId.value);
      } else {
        uni.$u.toast("指定人员失败，请重试")
      }
      clashDisposalDispatchRef.value.close()
    })
  } else {
    // 初次分配，将待分配的处置场所存储起来，但不立即调用后端接口
    pendingDisposalAssignments.value = { ...val };

    // 新增：存储选中的处理场所信息
    selectedDisposalSites.value = [];

    for (const key in val) {
      // 新增：提取处理场所信息
      selectedDisposalSites.value.push({
        companyName: val[key].companyName,
        contactName: val[key].personName,
        contactPhone: val[key].tel
      });
    }

    // 显示提示信息
    uni.$u.toast("处置场所已选择，将在开始运输时分配");

    // 关闭弹窗
    clashDisposalDispatchRef.value.close();
  }
}


const handlerUpdateOrderClick = () => {
  carPopupShowFlag.value = true;
  // TODO  照搬一键清运得弹窗
  console.log("点击了修改订单按钮");
  // TODO
  queryCarList({
    companyId: dataGram.value.garOrderCompanyId
  }).then(res => {
    // 设置车辆类型
    candidates.value = [
      [...new Set(res.data.rows
          .filter(item => item.containerVolume)
          .map(item => {
            garCarLabelInfoList.value[item.carType] = item
            return item.carType
          }))]
    ];
    // 设置初始车辆数量
    candidates.value[0].forEach((item, index) => {
      garCarInfoList.value[item] = {
        garOrderCarNumber: 1,
        garOrderCarType: item,
        id: garCarLabelInfoList.value[item].id,
        containerVolume: garCarLabelInfoList.value[item].containerVolume
      }
    })
    // 设置默认车辆
    paramFrom.value.carType = candidates.value[0][0];
    garCarLabelInfoNow.value = garCarLabelInfoList.value[paramFrom.value.carType]
    console.log(garCarLabelInfoList.value, garCarInfoList.value, paramFrom.value.carType);
  })
}

// 指定人员

// 指定人员
const handleDriverDispatchConfirm = (val) => {
  console.log(val);
  if (!val) {
    return;
  }

  // 获取订单车辆数量
  const orderCarCount = dataGram.value?.garCarInfoList?.length || 0;

  // 计算选择的驾驶员数量
  const selectedDriverCount = Object.keys(val).length;

  // 检查驾驶员数量是否超过订单车辆数量
  if (selectedDriverCount > orderCarCount) {
    jumpPrompt(`选择的驾驶员数量不能超过${orderCarCount}个`);
    return;
  }

  // 判断是否是重新分配（订单状态为1）
  const isReassigning = dataGram.value?.garOrderHandlerStatus === 1;

  if (isReassigning) {
    // 如果是重新分配，直接调用接口分配驾驶员
    let data = {
      garOrderId: orderId.value,
      dispatchList: []
    }
    for (const key in val) {
      data.dispatchList.push({
        ...val[key]
      });
    }

    dispatchOrders(data).then(res => {
      if (res.data.success) {
        uni.$u.toast("驾驶员重新分配成功");
        // 更新界面数据
        handleOrderDetail(orderId.value);
        refreshOrderData();
        // 标记驾驶员已分配
        driverAssigned.value = true;
      } else {
        uni.$u.toast("指定人员失败，请重试");
      }
      clashDriverDispatchRef.value.close();
    });
  } else {
    // 初次分配，将待分配的驾驶员存储起来，但不立即调用后端接口
    pendingDriverAssignments.value = { ...val };

    // 显示提示信息
    uni.$u.toast("驾驶员已选择，将在开始运输时分配");

    // 关闭弹窗
    clashDriverDispatchRef.value.close();
  }
}

const submitUpdateCarInfo = () => {
  let garCarInfos = [];
  for (const key in garCarInfoList.value) {
    garCarInfos.push(garCarInfoList.value[key])
  }

  let data = {
    garOrderId: orderId.value,
    garCarInfoList: garCarInfos,
    updated: true
  }
  if (dataGram.value.garOrderAgreementTime) {
    let index = dataGram.value.garOrderAgreementTime.indexOf(' ') + 1;
    if (index > 0) {
      let val = dataGram.value.garOrderAgreementTime.substring(index, dataGram.value.garOrderAgreementTime
          .length);


      if (val == "07:00-08:00" || val == "08:00-09:00" || val == "09:00-10:00" || val == "10:00-11:00" ||
          val == "11:00-12:00" || val == "12:00-13:00" || val == "13:00-14:00" ||
          val == "14:00-15:00" || val == "15:00-16:00" || val == "16:00-17:00" || val == "17:00-18:00" ||
          val == "18:00-19:00" || val == "19:00-20:00" || val == "20:00-21:00" ||
          val == "21:00-22:00") {
        let size = garCarInfos.length;
        for (let index = 0; index < size; index++) {
          if ((garCarInfos[index].containerVolume == "8" || parseInt(garCarInfos[index]
              .containerVolume) >= 8) && garCarInfos[index].garOrderCarNumber > 0) {
            console.log(garCarInfos[index]);

            jumpPrompt("中大型车辆只能选择22:00-07:00时间段");
            return;
          }

        }
      }

    }

  }
  console.log(dataGram.value.garOrderAgreementTime);
  console.log(garCarInfos);
  console.log("=================================>");


  updateOrder(data).then(res => {
    if (res.data.code == 200) {
      uni.$u.toast("车辆信息修改成功")
      // 更新数据
      handleOrderDetail(orderId.value)
      // 关闭弹窗
      carPopupShowFlag.value = false
    }
  }).catch(err => {
    uni.$u.toast("修改失败，请重试")
  })
}

const showNavDialog = (longitude, latitude, locationName) => {
  // 校验经纬度有效性
  if (!longitude || !latitude) {
    uni.$u.toast('暂无有效导航坐标');
    return;
  }

  uni.showActionSheet({
    itemList: ['高德导航', '百度导航'],
    success: function (res) {
      if (res.tapIndex === 0) {
        // 调用你原来的高德导航方法
        handlerJumpGaoDeApp(longitude, latitude, locationName);
      } else if (res.tapIndex === 1) {
        // 调用你原来的百度导航方法
        handlerJumpBaiDuApp(longitude, latitude, locationName);
      }
    },
    fail: function (res) {
      console.log('取消导航选择:', res.errMsg);
    }
  });
};
// ===== 新增结束 =====

const handlerJumpGaoDeApp = (longitude,latitude,locationName) => {
  window.location.href =`https://uri.amap.com/marker?position=${longitude},${latitude}&name=${locationName}`;
}

const handlerJumpBaiDuApp = (longitude,latitude,locationName) => {
  window.location.href =`http://api.map.baidu.com/marker?location=${longitude},${latitude}&title=${locationName}&output=html`;
}


const deleteHandler = (handler) => {
  uni.showModal({
    title: '确认删除',
    content: `确定要删除处理人员 ${handler.garOrderHandlerName} 吗？`,
    success: function (res) {
      if (res.confirm) {
        deleteDriverByOrderNo(orderNo.value, handler.garHandlerCarCode).then(res => {
          if (res.data.success) {
            uni.$u.toast('删除成功');
            // 重新加载处理人员信息
            refreshOrderData();
            // 重新获取驾驶员列表
            fetchDriverList(orderId.value);
          } else {
            uni.$u.toast('删除失败: ' + res.data.msg);
          }
        }).catch(err => {
          uni.$u.toast('删除失败');
          console.error('删除处理人员失败:', err);
        });
      }
    }
  });
};


const jumpPrompt = (msg) => {
  uni.showModal({
    title: '提示',
    content: msg,
    showCancel: false,
    success: function(res) {
      if (res.confirm) {} else if (res.cancel) {}
    }
  });
}
const showLeftButtons = computed(() => {
  return (dataGram.value?.garOrderHandlerStatus === 0 && userType.value == '运输企业负责人' && dataGram.value?.garCancelFlag === 0) ||
      (dataGram.value?.garOrderScanHandlerFlag === 0 && userType.value == '用户' && dataGram.value?.garOrderHandlerStatus != 3 && dataGram.value?.garAskStatus != '1');
});

const showCenterButtons = computed(() => {
  return (dataGram.value?.garOrderHandlerStatus === 0 && userType.value == '运输企业负责人' && dataGram.value?.handleFlag && dataGram.value?.garCancelFlag === 0) ||
      (dataGram.value?.garOrderHandlerStatus === 1 && userType.value == '运输企业负责人') ||
      (dataGram.value?.garOrderHandlerStatus === 1 && userType.value == '运输企业负责人' && isAllTripsCompleted());
});

const showRightButtons = computed(() => {
  return (dataGram.value?.garOrderHandlerStatus === 0 && userType.value == '用户' && dataGram.value?.garCancelFlag === 0) ||
      (dataGram.value?.garEvaluateFlag === 0 && userType.value === '用户') ||
      (dataGram.value?.garHandlerEvaluateFlag === 0 && userType.value === '运输企业负责人' && dataGram.value?.haveEvaluateOfClient == 1) ||
      (dataGram.value?.garHandlerEvaluateFlag === 1 && userType.value === '运输企业负责人' && dataGram.value?.haveEvaluateOfClient == 1) ||
      (dataGram.value?.garEvaluateFlag === 1 && userType.value === '用户');
});

const showTopButtons = computed(() => {
  return (dataGram.value?.garOrderHandlerStatus === 0 && userType.value == '运输企业负责人' && dataGram.value?.handleFlag && dataGram.value?.garCancelFlag === 0) ||
      (dataGram.value?.garOrderHandlerStatus === 1 && userType.value == '运输企业负责人' && !isAllTripsCompleted()) ||
      (dataGram.value?.garOrderHandlerStatus === 1 && userType.value == '运输企业负责人' && isAllTripsCompleted());
});
/**
 * 初始化信息
 */
onLoad((options) => {
  orderId.value = options.orderId
  orderNo.value = options.orderId
  handleOrderDetail(orderId.value)
  refreshOrderData()
})

onShow(() => {
  try {
    if (isOnloadIn.value) {
      handleOrderDetail(orderId.value)
    } else {
      isOnloadIn.value = true
    }
  } catch (error) {
    console.log(error);
  }
})
</script>


<style lang="scss" scoped>
$custom-marin-bottom: 20rpx;
$custom-page-padding: 20rpx;
$custom-border-radio: 20rpx;
$custom-bottom-height: 200rpx;

@mixin card {
  padding: $custom-page-padding;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: $custom-border-radio;
  margin-bottom: $custom-marin-bottom;
}

.order-detail-bottom {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
  padding: 20rpx $custom-page-padding;
  box-sizing: border-box;

  .order-detail-bottom-box {
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .order-detail-top-buttons {
      width: 100%;

      .button-group-wrap,
      .button-group-spread {
        display: flex;
        gap: 20rpx;
        width: 100%;

        u-button {
          flex: 1;
          height: 72rpx;
          line-height: 72rpx;
          font-size: 26rpx;
          padding: 0 20rpx;
          border-radius: 36rpx;
        }
      }

      .button-group-spread {
        justify-content: space-between;

        .btn-left,
        .btn-right {
          flex: 1;
        }
      }
    }

    .order-detail-bottom-buttons {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 20rpx;

      .cancel-button-container {
        width: 100%;

        u-button {
          width: 100%;
          height: 72rpx;
          line-height: 72rpx;
          font-size: 26rpx;
          border-radius: 36rpx;
        }
      }

      .evaluation-buttons-container {
        display: flex;
        gap: 20rpx;

        u-button {
          flex: 1;
          height: 72rpx;
          line-height: 72rpx;
          font-size: 26rpx;
          border-radius: 36rpx;
        }
      }
    }
  }
}

.order-detail-container {
  height: 100%;
  width: 100%;
  background-color: $u-info-light;
  box-sizing: border-box;
  overflow-y: scroll;
  background: linear-gradient(to bottom, #19a97c, $u-info-light, $u-info-light, $u-info-light);


  .order-detail-container-box {
    height: 100%;
    width: 100%;
    padding: $custom-page-padding;
    box-sizing: border-box;

    .order-detail-top {
      @include card();

      .order-detail-top-box {
        .order-detail-top-box-step {
          u-steps {
            u-steps-item {}
          }
        }
      }
    }


    .order-detail-container-box-card {
      @include card();

      .order-detail-container-header-card-title {
        font-weight: bold;
        line-height: 80rpx;
        border-bottom: 3rpx solid $u-info-light;
        margin-bottom: $custom-marin-bottom;
        color: $u-primary;
        display: flex;
        align-items: center;

        .order-detail-container-header-card-uicon {
          background-color: $u-primary;
          margin-right: 10rpx;
          height: 35rpx;
          width: 15rpx;
          border-radius: 4rpx;
        }
      }

      /* 订单信息标题特殊样式 */
      .order-info-header {
        display: flex;
        align-items: center;
        background: linear-gradient(90deg, #19a97c, #19a97c80);
        color: white;
        padding: 15rpx;
        border-radius: 10rpx;
        margin-bottom: 15rpx;

        .order-detail-container-header-card-uicon {
          background-color: white;
          opacity: 0.8;
          margin-right: 8rpx;
          height: 25rpx;
          width: 6rpx;
          border-radius: 3rpx;
        }

        .title-text {
          font-size: 28rpx;
          font-weight: bold;
        }
      }

      .order-detail-container-header-item {
        display: flex;
        margin-bottom: $custom-marin-bottom;

        .order-detail-container-header-title {
          color: $u-main-color;
          white-space: nowrap;
          color: $u-info;
        }

        .order-detail-container-header-content {
          display: flex;
        }
      }
    }

    /* 车辆信息板块美化 */

    /* 车辆信息板块美化 */
    .vehicle-section {
      .section-header {
        display: flex;
        align-items: center;
        background: linear-gradient(90deg, #19a97c, #19a97c80);
        color: white;
        padding: 15rpx; /* 减小内边距 */
        border-radius: 10rpx; /* 减小圆角 */
        margin-bottom: 15rpx; /* 减小外边距 */

        .header-icon-bar {
          background-color: white;
          opacity: 0.8;
          margin-right: 8rpx; /* 减小右边距 */
          height: 25rpx; /* 减小高度 */
          width: 6rpx; /* 减小宽度 */
          border-radius: 3rpx;
        }

        .header-title {
          font-size: 28rpx; /* 减小字体大小 */
          font-weight: bold;
        }
      }

      /* 卡片通用样式 */
      .trip-summary-card, .vehicle-info-card, .driver-info-card, .handler-list-card, .assign-trip-card {
        background-color: #fff;
        border-radius: 10rpx; /* 减小圆角 */
        box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.05); /* 减小阴影 */
        margin-bottom: 15rpx; /* 减小外边距 */
        overflow: hidden;
      }

      .card-header {
        display: flex;
        align-items: center;
        padding: 15rpx; /* 减小内边距 */
        background-color: #f5f5f5;
        border-bottom: 1rpx solid #eee;

        .card-title {
          font-weight: bold;
          color: #333;
          margin-left: 8rpx; /* 减小左边距 */
          font-size: 26rpx; /* 减小字体大小 */
        }
      }

      /* 发车次数摘要 */
      .trip-summary-card {
        /* 现有的 summary-content 样式保持不变 */
        .summary-content {
          display: flex;
          align-items: center;
          padding: 20rpx 15rpx;
          background: linear-gradient(90deg, #e8f4f0, #fff);

          .summary-label {
            color: #666;
            margin-right: 8rpx;
            font-size: 24rpx;
          }

          .summary-value {
            color: #19a97c;
            font-weight: bold;
            font-size: 28rpx;
            margin: 0 4rpx;
          }

          .summary-unit {
            color: #666;
            font-size: 24rpx;
          }
        }

        /* 添加 reduce-trip-section 的样式 */
        /* 添加 reduce-trip-section 的样式 */
        .reduce-trip-section {
          display: flex;
          flex-wrap: wrap; /* 允许内容换行 */
          justify-content: space-between; /* 两端对齐，使右侧控件靠右 */
          align-items: center;
          padding: 20rpx 15rpx;
          border-top: 1rpx solid #e8f4f0;

          .reduce-label {
            color: #666;
            font-size: 24rpx;
            min-width: 120rpx; /* 固定标签宽度，防止换行 */
          }

          /* 右侧控件容器 */
          .right-controls {
            display: flex;
            align-items: center;
          }

          /* 为按钮添加样式 */
          .u-button {
            max-width: 120rpx; /* 限制按钮最大宽度 */
            font-size: 20rpx; /* 减小字体大小 */
            padding: 0 10rpx; /* 调整内边距 */
          }
        }
      }

      /* 车辆类型详情 */
      .vehicle-info-card {
        .car-type-list {
          padding: 15rpx; /* 减小内边距 */

          .car-type-item {
            display: flex;
            flex-wrap: wrap;
            padding: 15rpx; /* 减小内边距 */
            background-color: #f8f8f8;
            border-radius: 6rpx; /* 减小圆角 */
            margin-bottom: 10rpx; /* 减小外边距 */

            &:last-child {
              margin-bottom: 0;
            }

            .car-type-info, .car-count-info {
              display: flex;
              align-items: center;
              width: 100%;
              margin-bottom: 8rpx; /* 减小外边距 */

              &:last-child {
                margin-bottom: 0;
              }

              .info-label {
                color: #666;
                margin: 0 8rpx; /* 减小边距 */
                font-size: 24rpx; /* 减小字体大小 */
                min-width: 80rpx; /* 减小最小宽度 */
              }

              .info-value {
                color: #333;
                font-weight: 500;
                font-size: 24rpx; /* 减小字体大小 */
              }
            }
          }
        }
      }

      /* 驾驶员信息 */
      .driver-info-card {
        .driver-list {
          padding: 15rpx; /* 减小内边距 */

          .driver-item {
            padding: 15rpx; /* 减小内边距 */
            background-color: #f8f8f8;
            border-radius: 6rpx; /* 减小圆角 */
            margin-bottom: 10rpx; /* 减小外边距 */

            &:last-child {
              margin-bottom: 0;
            }

            .driver-basic-info, .driver-car-info {
              display: flex;
              align-items: center;
              margin-bottom: 8rpx; /* 减小外边距 */

              &:last-child {
                margin-bottom: 0;
              }

              .info-label {
                color: #666;
                margin: 0 8rpx; /* 减小边距 */
                font-size: 24rpx; /* 减小字体大小 */
                min-width: 100rpx; /* 减小最小宽度 */
              }

              .info-value {
                color: #333;
                font-weight: 500;
                font-size: 24rpx; /* 减小字体大小 */
              }
            }

            .driver-status {
              text-align: right;
              margin-top: 8rpx; /* 减小外边距 */
            }
          }
        }
      }

      /* 处理人员信息 */
      .handler-list-card {
        .handler-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15rpx; /* 减小内边距 */
          border-bottom: 1rpx solid #eee;

          &:last-child {
            border-bottom: none;
          }

          .handler-basic-info {
            display: flex;
            flex-direction: column;

            .handler-name {
              font-weight: bold;
              font-size: 26rpx; /* 减小字体大小 */
              color: #333;
              margin-bottom: 4rpx; /* 减小外边距 */
            }

            .handler-car, .handler-volume {
              font-size: 22rpx; /* 减小字体大小 */
              color: #666;
              margin-right: 10rpx; /* 减小右边距 */
            }
          }

          .handler-trip-count {
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            .count-label {
              font-size: 22rpx; /* 减小字体大小 */
              color: #666;
              margin-bottom: 4rpx; /* 减小外边距 */
            }

            .count-value {
              font-weight: bold;
              color: #19a97c;
              font-size: 26rpx; /* 减小字体大小 */
            }
          }

          .handler-trip-controls {
            display: flex;
            align-items: center;
            gap: 10rpx;

            .assign-button {
              padding: 0 15rpx;
              font-size: 22rpx;
              height: 50rpx;
              line-height: 50rpx;
            }
            .delete-button {
              padding: 0 15rpx;
              font-size: 22rpx;
              height: 50rpx;
              line-height: 50rpx;
            }
          }
        }
      }

      /* 分配趟次 */
      .assign-trip-card {
        .assign-content {
          padding: 15rpx; /* 减小内边距 */

          .selector-wrapper, .number-box-wrapper {
            display: flex;
            align-items: center;
            margin-bottom: 15rpx; /* 减小外边距 */

            &:last-child {
              margin-bottom: 0;
            }

            .selector-label, .number-label {
              width: 140rpx; /* 减小宽度 */
              font-size: 24rpx; /* 减小字体大小 */
              color: #333;
            }

            .handler-selector {
              flex: 1;
              height: 40rpx; /* 减小高度 */
              border: 1px solid #DCDFE6;
              border-radius: 4px;
              padding: 0 8rpx; /* 减小内边距 */
              outline: none;
              font-size: 24rpx; /* 减小字体大小 */
            }
          }

          .confirm-button {
            width: 100%;
            border-radius: 6rpx; /* 减小圆角 */
            font-size: 26rpx; /* 减小字体大小 */
            height: 40rpx; /* 减小高度 */
          }
        }
      }
    }
  }


  .space-box {
    padding-bottom: $custom-bottom-height;
    margin-bottom: 40rpx;
  }


  .order-detail-bottom {
    position: fixed; // 改为fixed定位，确保始终在底部
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #fff; // 添加背景色，避免穿透
    box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05); // 添加阴影，提升层次感
    padding: 20rpx $custom-page-padding; // 上下内边距，左右和页面一致
    box-sizing: border-box;

    .order-detail-bottom-box {
      height: auto; // 取消固定高度，自适应内容
      padding: 0; // 移除原有内边距
      display: flex;
      flex-wrap: wrap; // 允许换行
      gap: 16rpx; // 按钮之间统一间距
      align-items: center;
    }

    .button-group-vertical {
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      width: 100%;
    }

    // 左中右三个区域统一处理
    .order-detail-bottom-left,
    .order-detail-bottom-center,
    .order-detail-bottom-right {
      min-width: auto; // 取消最小宽度限制
      flex: 1; // 三个区域平均分配宽度
      display: flex;
      justify-content: center;
      align-items: center;
    }

    // 左侧区域单独处理（取消订单按钮）
    .order-detail-bottom-left {
      justify-content: flex-start;
      flex-direction: column;
      align-items: flex-start;
    }

    // 右侧区域单独处理（评价相关按钮）
    .order-detail-bottom-right {
      justify-content: flex-end;
    }
  }

  // 中间按钮组优化（分配/处理订单按钮）
  .order-detail-bottom-center {
    .button-group-wrap {
      display: flex;
      flex-wrap: wrap; // 超出时自动换行
      gap: 16rpx; // 按钮之间间距
      justify-content: center;
      width: 100%;
    }

    // 单个按钮样式统一优化
    u-button {
      flex: 0 0 auto; // 不自动拉伸
      min-width: 180rpx; // 最小宽度，确保按钮不会太窄
      max-width: 240rpx; // 最大宽度，避免过宽
      height: 72rpx; // 统一按钮高度
      line-height: 72rpx; // 垂直居中
      font-size: 26rpx; // 字体大小优化
      padding: 0 20rpx;
      border-radius: 36rpx; // 圆角优化，更美观
    }

    // 重新分配按钮组样式
    .button-group-spread {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      gap: 16rpx; // 中间间距
    }
  }

  // 适配小屏幕，当按钮过多时自动换行
  @media (max-width: 375px) {
    .order-detail-bottom-box {
      gap: 12rpx;
    }

    .order-detail-bottom-center u-button {
      min-width: 160rpx;
      font-size: 24rpx;
      height: 68rpx;
      line-height: 68rpx;
    }
  }
}

.mask-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

// 弹出框
.company-clean-container-car-popup {
  min-height: 450rpx;
  padding: $custom-page-padding;
  box-sizing: border-box;

  .company-clean-container-car-popup-content {
    font-size: 28rpx;

    .company-clean-container-car-popup-content-box {
      box-sizing: border-box;
      padding: $custom-page-padding;
      border: 2rpx solid #19a97c;
      border-radius: 10rpx;

      .company-clean-container-car-popup-content-box-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 20rpx 0;
        box-sizing: border-box;

        .company-clean-container-car-popup-content-box-item-text {}

        .company-clean-container-car-popup-content-box-item-number {}
      }
    }

    .company-clean-container-car-popup-content-title {
      color: $u-main-color;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      font-size: 30rpx;
      font-weight: bold;
    }
  }

  .company-clean-container-car-popup-button-safe {
    width: 100%;
    height: $custom-bottom-height;
    box-sizing: border-box;
    padding: 20rpx;

    .company-clean-container-car-popup-button-safe-btn {
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
      font-size: 30rpx;
      line-height: 100rpx;
      text-align: center;
    }
  }
}
.image-group {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

.image-group-title {
  margin-bottom: 10px;
  font-weight: bold;
  color: #333;
}

/* 确保u-upload组件内的图片水平排列 */
.image-group .u-upload {
  display: flex;
  flex-wrap: wrap;
}
.image-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.car-status {
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  font-weight: bold;

  &.in-transit {
    background-color: #fff7e6;
    color: #ff9900;
  }

  &.completed {
    background-color: #e6f7ff;
    color: #19a97c;
  }
}
.driver-list-popup {
  min-height: 400rpx;
  max-height: 800rpx;
  padding: $custom-page-padding;
  box-sizing: border-box;

  .driver-list-popup-header {
    text-align: center;
    margin-bottom: 30rpx;

    .driver-list-popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: $u-main-color;
    }
  }

  .driver-list-popup-content {
    max-height: 600rpx;
    overflow-y: auto;

    .driver-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid $u-border-color;

      .driver-info {
        display: flex;
        flex-direction: column;

        .driver-name {
          font-size: 28rpx;
          font-weight: bold;
          margin-bottom: 10rpx;
        }

        .driver-phone {
          font-size: 24rpx;
          color: $u-tips-color;
        }
      }
    }
  }

  .driver-list-popup-footer {
    margin-top: 30rpx;
    text-align: center;
  }
}
.driver-info-container {
  .driver-info-row {
    display: flex;
    flex-wrap: wrap;
    padding: 10rpx 0;
    border-bottom: 1rpx solid $u-border-color;
    justify-content: flex-start;

    .driver-name, .car-code {
      margin-right: 20rpx;
      color: $u-main-color;
    }

    .driver-name {
      font-weight: bold;
    }
  }

  .driver-info-row:last-child {
    border-bottom: none;
  }
}

/* 车辆类型列表样式 */
.car-type-info-container {
  .car-type-info-header {
    font-weight: bold;
    color: $u-primary;
    margin-bottom: 20rpx;
    padding-bottom: 15rpx;
    border-bottom: 2rpx solid $u-primary;
    display: flex;
    align-items: center;

    .header-icon {
      display: inline-block;
      width: 6rpx;
      height: 30rpx;
      background-color: $u-primary;
      border-radius: 3rpx;
      margin-right: 15rpx;
    }
  }

  .car-type-info-row {
    display: flex;
    flex-direction: column;
    padding: 20rpx 15rpx;
    background-color: #f8f8f8;
    border-radius: 12rpx;
    margin-bottom: 15rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .car-info-item {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .car-type-label, .car-count-label {
        font-weight: 500;
        color: #666;
        margin-right: 10rpx;
        width: 100rpx;
      }

      .car-type-value, .car-count-value {
        color: $u-main-color;
        font-weight: bold;
      }

      .car-count-value {
        color: $u-primary;
      }
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

/* 订单信息板块样式 */
.order-info-section {
  .info-item {
    display: flex;
    padding: 15rpx;
    background-color: #f8f8f8;
    border-radius: 6rpx;
    margin-bottom: 10rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .info-label {
      display: flex;
      align-items: center;
      min-width: 140rpx;
      color: #666;
      font-size: 24rpx;
    }

    .info-content {
      flex: 1;
      display: flex;
      align-items: center;
      color: #333;
      font-size: 24rpx;

      .content-text {
        flex: 1;
      }

      .qr-code-icon {
        margin-left: 10rpx;
      }
    }
  }

  /* 处置场地特殊处理 */
  .info-item:nth-child(n+5):nth-child(-n+7) {
    .info-label {
      min-width: 140rpx;
    }
  }
}

/* 订单人员板块样式 */
.order-person-section {
  .section-header {
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #19a97c, #19a97c80);
    color: white;
    padding: 15rpx;
    border-radius: 10rpx;
    margin-bottom: 15rpx;

    .header-icon-bar {
      background-color: white;
      opacity: 0.8;
      margin-right: 8rpx;
      height: 25rpx;
      width: 6rpx;
      border-radius: 3rpx;
    }

    .header-title {
      font-size: 28rpx;
      font-weight: bold;
    }
  }

  .info-item {
    display: flex;
    padding: 15rpx;
    background-color: #f8f8f8;
    border-radius: 6rpx;
    margin-bottom: 10rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .info-label {
      display: flex;
      align-items: center;
      min-width: 140rpx;
      color: #666;
      font-size: 24rpx;
    }

    .info-content {
      flex: 1;
      display: flex;
      align-items: center;
      color: #333;
      font-size: 24rpx;

      .content-text {
        flex: 1;
      }

      .icon-box {
        margin-left: 10rpx;
      }
    }
  }
}

/* 处理信息板块样式 */
.process-info-section {
  .section-header {
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #19a97c, #19a97c80);
    color: white;
    padding: 15rpx;
    border-radius: 10rpx;
    margin-bottom: 15rpx;

    .header-icon-bar {
      background-color: white;
      opacity: 0.8;
      margin-right: 8rpx;
      height: 25rpx;
      width: 6rpx;
      border-radius: 3rpx;
    }

    .header-title {
      font-size: 28rpx;
      font-weight: bold;
    }
  }

  .photo-section {
    .info-item {
      margin-bottom: 15rpx;

      .info-label {
        display: flex;
        align-items: center;
        color: #666;
        font-size: 24rpx;
      }
    }

    .image-groups {
      .image-group {
        padding: 15rpx;
        background-color: #f8f8f8;
        border-radius: 6rpx;
        margin-bottom: 15rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .image-group-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10rpx;

          .image-group-title {
            font-size: 24rpx;
            font-weight: bold;
            color: #333;
          }
        }
      }
    }
  }

  .empty-image-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30rpx;

    .empty-text {
      margin-top: 20rpx;
      color: #999;
      font-size: 24rpx;
    }
  }
}
</style>