<template>
  <!-- 顶部系统关系 -->
  <view class="top-system-root">
    <!-- 配送停止调度 -->
    <view class="stop-delivery" v-if="(orderData.deliveryFlag & 1) !== 0">
      <uni-notice-bar
        style="border-radius: 10rpx"
        showIcon
        scrollable
        text="订单已停止配送调度，请自行操作召唤配送员"
      />
    </view>

    <!-- 余额 -->
    <view class="vender-store-money">
      <!-- 品牌 -->
      <view class="vender" v-if="!orderData.createDeliveryType">
        <view class="vender-name">
          品牌余额：<jx-price
            style="font-weight: bold"
            :price="accountBalance"
            color="#000"
          />
        </view>
        <view class="right">
          <view class="btn" @tap="handleChargeNow(5)">品牌充值</view>
        </view>
      </view>
      <!-- 门店 -->
      <view v-else class="store">
        <view class="vender-name">
          门店余额：<jx-price
            style="font-weight: bold"
            :price="StoreMoneyBalance"
            color="#000"
          />
        </view>
        <view class="right">
          <view @tap="handleChargeNow(4)" class="btn">门店充值</view>
        </view>
      </view>
    </view>

    <!-- 地址-与小费 -->
    <view class="address-tip">
      <!-- 自送 -->
      <view class="addres">
        <view class="icon">
          <image
            class="banner"
            src="https://image.jxc4.com/image/3ace5cca6d46d1244bfe11d16f00e5f3.png"
            mode="scaleToFill"
          />
          <view class="text">
            <view>
              <text>自送：</text>
              <text class="distance" @tap="seeMap">自送导航</text>
            </view>
            <image
              class="address-icon"
              src="https://image.jxc4.com/image/5fe6b33dcca1a751a34ce02872b06eb0.png"
              mode="scaleToFill"
            />
          </view>
        </view>
        <view class="waybill-price" v-if="orderData.vendorID == 0">
          +{{ selfDeliveryPrice }}<text>(平台补贴)</text>
        </view>
        <view class="sd-btn sd-ing-btn" v-if="isSelfDeliver">正在自送</view>
        <view class="sd-btn" v-else @tap="selfDelivery">立即自送</view>
      </view>
      <!-- 小费 -->
      <view class="tip">
        <view class="icon">
          <image
            class="banner"
            src="https://image.jxc4.com/image/2207d32506f746662afc58fe3ea4a148.png"
            mode="scaleToFill"
          />
          <view class="text">
            <text>已加小费：</text>
            <jx-price :price="orderData.waybillTipMoney" color="#4eb331" />
          </view>
        </view>
        <view class="tip-btn" @tap="addTipMoney">加小费</view>
      </view>
    </view>

    <!-- 配送信息 -->
    <view class="delivery-info">
      <image src="https://image.jxc4.com/image/d42a9b570418b70930188ac2288b77e1.png" mode="scaleToFill" />
      <!-- 配送状态 -->
      <view class="delivery-status">
        <view class="deliver-name"
          >当前配送：<text>{{ waitingStatus }}</text></view
        >
        <text class="status">{{ orderStatus || '' }}</text>
      </view>
      <!-- 配送员 -->
      <view
        class="delivery-person"
        v-if="orderData.waybillVendorID !== -1 && orderData.waybillStatus > 0"
      >
        <view>配送员：{{ orderData.courierName }}</view>
        <view>
          <text class="icon-tel"></text>
          <text
            v-if="orderData.courierMobile.split(',')[1]"
            @tap.stop="phoneCall(orderData.courierMobile)"
            >{{
              orderData.courierMobile.split(',')[0] +
              '转' +
              orderData.courierMobile.split(',')[1]
            }}</text
          >
          <text v-else @tap.stop="phoneCall(orderData.courierMobile)">{{
            orderData.courierMobile
          }}</text>
        </view>
      </view>
      <view class="delivery-person" v-else>
        <view>配送员：暂无配送员</view>
        <view>
          <text class="icon-tel"></text>
          <text>暂无配送电话</text>
        </view>
      </view>
      <!-- 配送费用 -->
      <view style="display: flex;justify-content: space-between;border: none;">
        <view class="money" v-if="deliverList[orderData.waybillVendorID]">配送费：<text class="number">¥{{ feeCall }}</text></view>
        <view class="money" v-else>配送费：<text class="number">暂无配送费</text></view>
        <view class="complain" v-if="orderData.waybillVendorID !== -1 && orderData.waybillStatus > 0" @tap="complainRider">
          <image src="https://image.jxc4.com/image/d37e46e336ea31132ce343bcd305f8dc.tem.png" style="width:40rpx;height:40rpx"></image>
        </view>
        <view class="complain" v-else></view>
      </view>
    </view>
  
  </view>
  <!-- 底部配送 -->
  <view class="bottom-info">
    <view class="bg"></view>

    <!-- 标题 -->
    <view class="thead">
      <view v-if="Object.keys(deliverList).length > 0"
        >三方配送({{ Object.keys(deliverList).length }})个</view
      >
      <view v-else>暂无三方配送</view>
      <view class="right">
        <view class="de-money">配送费</view>
        <view>状态/操作</view>
      </view>
    </view>

    <!-- 三方配送 -->
    <view class="delivery-flex" :class="{ active: switchActive }">
      <view v-for="(val, key) in deliverList" :key="key" class="dleivery-list">
        <threeDeliver
          v-if="val"
          :vendor="key"
          :waybillFee="val"
          :orderData="orderData"
          :accountBalance="StoreMoneyBalance"
          :sotreID="orderData.jxStoreID"
          :createDeliveryType="createDeliveryType"
          @switchStatus="switchStatus"
          @refresh="refresh"
        />
      </view>
    </view>

    <!-- 取消所有配送 -->
    <view class="cancel-all" @tap="cancelAll(false)">取消所有配送</view>
    
    <!-- 停止运单调度  -->
    <view class="stop-schedule" @tap="cancelAll(true)">停止运单调度</view>

    <view class="ther-btn" @tap="switchActive = !switchActive"
      >{{ switchActive ? '收起配送列表' : '选择其他配送' }}
      <text
        :class="{ rotate: switchActive }"
        class="iconfont icon-jiantou_yemian_xiangxia"
      ></text
    ></view>

    <!-- 费用说明 -->
    <view class="info">
      <view>
        (1)打开配送：打开表示使用该平台发单！
        <br />
        (2)关闭配送：关闭表示不使用该平台发单！
        <br />
        (3)配送费用：此处为配送调度中产生的价格变化情况，非结算费用，仅供参考。
      </view>
    </view>
  </view>

  <!-- 自配送 抖店 填写骑手信息弹框 -->
  <uni-popup ref="dyPopup" type="top" :isMask="true">
    <view class="dy-root">
      <view class="delivering-title">填写骑手信息</view>
      <jx-input class="ipt">
        <template #left>
          <text class="blod">姓名：</text>
        </template>
        <template #middle>
          <input
            type="text"
            v-model="deliveryRider.name"
            placeholder="输入骑手名字"
          />
        </template>
      </jx-input>
      <jx-input class="ipt">
        <template #left>
          <text class="blod">电话：</text>
        </template>
        <template #middle>
          <input
            type="text"
            v-model="deliveryRider.tel"
            placeholder="输入骑手电话"
          />
        </template>
      </jx-input>
      <view class="btn-root">
        <text @tap="selfDelivering" class="cancel">取消</text>
        <text @tap="handleConfirm" class="confirm">确定</text>
      </view>
    </view>
  </uni-popup>

  <!-- 公共组件 -->
  <jx-loading />
</template>

<script lang="ts" setup>
import useGlobalFunc from '@/composables/useGlobalFunc'
import deliverMangetFn from './deliverManager'
import threeDeliver from './threeDeliver/threeDeliver.vue'
const { phoneCall } = useGlobalFunc()
const {
  waitingStatus,        // 配送状态
  orderData,            // 订单数据
  createDeliveryType,   // 创建交货类型
  orderStatus,          // 待配送状态
  deliverList,          // 获取配送费用
  // isCharge,          // 判断
  accountBalance,       // 品牌账户余额
  StoreMoneyBalance,    // 门店账户余额
  feeCall,              // 召唤骑手费用
  selfDeliveryPrice,    // 平台补贴
  isSelfDeliver,        // 立即召唤
  chargeMoney,          // 充值金额
  selfDelivery,         // 立即自送
  deliveryRider,        // 抖音自送骑手信息
  dyPopup,              // 抖音自送 popup 实例
  // dyCancel,          // 取消抖音自送
  selfDelivering,       // 取消填写骑手信息 还是进行转自配送
  handleConfirm,        // 确定骑手信息
  addTipMoney,          // 加小费
  switchStatus,         // 自动发单
  refresh,              // 刷新状态
  switchActive,         // 切换状态
  seeMap,               // 查看地图
  handleChargeNow,      // 充值金额
  cancelAll,            // 一键取消所有配送
  complainRider         // 投诉骑手
} = deliverMangetFn()
</script>

<style lang="scss" scoped>
@import './deliverManager.scss';
</style>