<template>
  <!-- 地图 -->
  <map
    style="width: 100%; height: 10vh"
    :longitude="covers[0].longitude"
    :latitude="covers[0].latitude + 0.0006"
    :markers="covers"
    :scale="16"
    v-if="isHiddenOrderInfo"
  >
    <cover-view
      class="map"
      @tap="seeMap(orderData.vendorOrderID, orderData.vendorID)"
    >
      <cover-view class="store-name">{{ getStorage('storeName') }} </cover-view>
    </cover-view>
  </map>
  <view class="tip" @tap="seeMap(orderData.vendorOrderID, orderData.vendorID)"  v-if="isHiddenOrderInfo">
    点击查看地图
  </view>
  <!-- orderData.vendorID = -99 防止页渲染报错 -->
  <view v-if="orderData.vendorID != -99 && orderInfo.vendorID != -99">
    <!-- 品牌类型 -->
    <view class="brandStatus">
      <view class="left">
        <view class="h-number" :class="`index-${orderData.vendorID}`">
          <text class="brand" :class="`icon-${orderData.vendorID}`"></text>
          <text class="num-root"
            ><text>#</text
            ><text class="num">{{ orderData.orderSeq }}</text></text
          >
        </view>

        <text
          class="type"
          :class="{ 'type-active': orderData.businessType != 1 }"
          v-if="isHiddenOrderInfo"
          >{{ orderData.businessType === 1 ? '立即达' : '预订单' }}</text
        >
      </view>

      <view class="right">
        <text
          class="btn-print"
          @tap="printerOrder(orderData.vendorOrderID, orderData.vendorID)"
        ></text>
        <view class="order-status">
          {{ orderStatus }}
        </view>
      </view>
    </view>

    <!-- 订单编号-饿佰专属 -->
    <view class="order-number" v-if="orderData.vendorID !== 3">
      <view @tap.stop="copyInfo(orderData.vendorOrderID, '复制订单号成功')">
        <text class="order-num">订单编号：{{ orderData.vendorOrderID }}</text>
        <jx-icon icon="fuzhi" color="#818181" :size="38"></jx-icon>
      </view>
      <text class="cancel" @tap="cancelOrder(orderData.vendorOrderID)"
        >取消订单</text
      >
    </view>

    <!-- 订单编号-排除饿佰 -->
    <view class="order-number" v-else>
      <view @tap.stop="copyInfo(orderData.vendorOrderID2, '复制订单号成功')">
        <text class="order-num"
          >订单编号：<text>{{ elemIDPre }}</text
          ><text class="elemIDSuf">{{ elemIDSuf }}</text></text
        >
        <jx-icon icon="fuzhi" color="#818181" :size="38"></jx-icon>
      </view>
      <text class="cancel" @tap="cancelOrder(orderData.vendorOrderID2)"
        >取消订单</text
      >
    </view>

    <!-- 下单时间 -->
    <view class="create-order-timer">
      <view>下单时间：{{ timeFormatHMS(orderData.orderCreatedAt) }}</view>
      <image
        v-show="orderData.businessType != 1"
        class="icon-index"
        src="https://image.jxc4.com/image/4d21a59d213ed6319e85dd51e0b37f77.tem.png"
      />
    </view>

    <!-- 预计送达 -->
    <view
      class="estimate-service"
      :class="{ 'dsd-expectTime': orderData.businessType === 2 }"
      v-if="isHiddenOrderInfo"
    >
      (预计)送达时间：{{ expectTime }}
    </view>

    <template>
      <!-- 是否锁定 -->
      <view class="order-status" v-if="orderData.lockStatus === -20">
        订单状态：已锁定
      </view>
      <!-- 用户申请取消 -->
      <view class="order-status" v-if="orderData.lockStatus === -5"
        >订单状态：用户申请取消</view
      >
      <!-- 已转门店自送 -->
      <view class="order-status" v-if="(orderData.deliveryFlag & 1) !== 0"
        >已停止配送调度</view
      >
      <view class="order-status" v-if="(orderData.deliveryFlag & 1) !== 0"
        >已转京西自送</view
      >
      <!-- 发票抬头 -->
      <view class="order-status" v-if="invoiceTitle">{{ invoiceTitle }}</view>
      <!-- 纳税人识别码 -->
      <view class="order-status" v-if="invoiceTaxerID">{{
        invoiceTaxerID
      }}</view>
    </template>

    <!-- 条形码 -->
    <view class="barcode">
      <image
        :src="barCodeImg"
        mode="scaleToFill"
        @tap="previewImage(barCodeImg)"
      />
      <view>{{ orderData.vendorOrderID }}</view>
    </view>

    <!-- 订单亏损 -->
    <view class="order-status" v-if="earningTooSmall"
      >订单亏损严重，建议联系客户取消！</view
    >

    <!-- 新用户 -->
    <view class="order-status" v-if="isNewUser">新用户</view>

    <!-- 客户信息 -->
    <view class="user-name" v-if="isHiddenOrderInfo">
      <!-- <view class="user-info"> -->
        <view 
        style="display: flex;align-items: center;"
          >姓名：{{ orderData.consigneeName }}&nbsp;
          <!-- <img src="https://image.jxc4.com/jxapp/z_send_normal.png" alt="" class="connectUser"> -->
        </view>
        <view class="see-map" @tap.stop="callPhone(orderData)">拨打电话</view>
        <view class="see-map"  @tap.stop="realMobile">发消息</view>
        <!-- <view>
            <text v-if="orderData.consigneeMobile" class="mobile">临1：</text>
            <text
              class="mobile"
              @tap.stop="phoneCall(orderData.consigneeMobile)"
              v-if="orderData.consigneeMobile.split(',')[1]"
              >{{
                orderData.consigneeMobile.split(',')[0] +
                '转' +
                orderData.consigneeMobile.split(',')[1]
              }}</text
            >
            <text
              v-else
              class="mobile"
              @tap.stop="phoneCall(orderData.consigneeMobile)"
              >{{ orderData.consigneeMobile }}</text
            >
            <br />
            真实号
            <text v-if="orderData.consigneeMobile2"  class="mobile">临2：</text>
            <text
              class="mobile"
              @tap.stop="phoneCall(orderData.consigneeMobile2)"
              v-if="orderData.consigneeMobile2.split(',')[1]"
              >{{
                orderData.consigneeMobile2.split(',')[0] +
                '转' +
                orderData.consigneeMobile2.split(',')[1]
              }}</text
            >
            <text
              v-else
              class="mobile"
              @tap.stop="phoneCall(orderData.consigneeMobile2)"
              >{{ orderData.consigneeMobile2 }}</text
            >
        </view> -->
      <!-- </view> -->

      <!-- <view  class="user-operation">
        <view style="display: flex;align-items: center;justify-content: center;"><img src="https://image.jxc4.com/jxapp/sendMessage.png" alt="" class="connectUser" style="width: 38rpx;height: 38rpx;">在线联系</view>
        <view style="display: flex;align-items: center;justify-content: center;"><img src="https://image.jxc4.com/jxapp/z_send_normal.png" alt="" class="connectUser" style="width: 38rpx;height: 38rpx;">拨打电话</view>
      </view> -->
    </view>

    <!-- 地址 -->
    <view class="user-name" v-if="orderData.deliveryType != 'self'"
      >地址：{{ orderData.consigneeAddress }}</view
    >
    <view class="user-name user-name-self" v-else>自提订单</view>
    <view class="divider"></view>

    <!-- 备注 -->
    <view class="user-name remarks" v-if="orderData.buyerComment && isHiddenOrderInfo"
      >备注：{{ orderData.buyerComment }}</view
    >

    <!-- 购买次数 -->
    <view class="user-name">
      <text>购买次数</text>
      <text class="auxiliary">{{ orderInfo.count || 0 }}</text>
    </view>

    <!-- 差评次数 -->
    <view class="user-name">
      <text>差评数</text>
      <text class="auxiliary">{{ orderInfo.badCommentCount || 0 }}</text>
    </view>

    <!-- 均价 -->
    <view class="user-name">
      <text>均价</text>
      <text class="auxiliary">{{ avgPriceInfo }}</text>
    </view>

    <!-- 物流 -->
    <view class="divider"></view>

    <view class="logistics" v-if="orderData.waybillStatus >= 10">
      <!-- 单号 -->
      <view class="waybill">
        <text>{{
          waybillVendor(
            orderData.waybillVendorID,
            orderData.status,
            orderData.waybillStatus
          )
        }}</text>
        <text class="auxiliary">运单号：{{ orderData.vendorWaybillID }}</text>
      </view>
      <!-- 骑手 -->
      <view class="waybiller user-name">
        <view style="display: flex">
          <text class="brand" :class="`icon-${waybillType}`"></text>
          <text class="courierName">{{ orderData.courierName }}</text>
        </view>
        <text
          v-if="orderData.courierMobile.split(',')[1]"
          class="courierMobile"
          @tap.stop="phoneCall(orderData.courierMobile)"
          >{{
            orderData.courierMobile.split(',')[0] +
            '转' +
            orderData.courierMobile.split(',')[1]
          }}</text
        >
        <text
          v-else
          class="courierMobile"
          @tap.stop="phoneCall(orderData.courierMobile)"
          >{{ orderData.courierMobile }}</text
        >
      </view>

      <!-- 投诉骑手 -->
      <view
        v-if="isComplaint"
        class="finish-pick-fail"
        @tap="complaintHandler(orderData.vendorOrderID)"
        >投诉骑手</view
      >

      <!-- 小费 -->
      <view class="user-name">
        <text>已加小费</text>
        <jx-price :price="orderData.waybillTipMoney" />
      </view>

      <!-- 配送费用 -->
      <view class="user-name">
        <text>配送费用</text>
        <jx-price :price="orderData.desiredFee" />
      </view>
    </view>

    <!-- 运单状态 -->
    <view class="waybill-status-root"  v-if="isHiddenOrderInfo">
      <text>运单状态</text>
      <template v-if="waybillStatus.length != 0">
        <view
          v-for="(item, index) in waybillStatus"
          :key="item.id"
          class="waybill-status"
          :class="{
            'waybill-status-active': index == waybillStatus.length - 1,
          }"
        >
          <text class="timer" :class="{ timer1: index == 0 }">{{
            item.statusTime
          }}</text>
          <text class="statues">{{ item.status }}</text>
        </view>
      </template>
      <text v-else class="no-status">：暂无运单状态</text>
    </view>

    <!-- 售后单情况 -->
    <template v-if="afsOrder.length">
      <view
        class="afsOrder"
        v-for="item in afsOrder"
        :key="item.id"
        @tap="afterSalesDetaile(item.afsOrderID)"
      >
        发起售后单：<text class="order-num">{{ item.afsOrderID }}</text>
      </view>
    </template>

    <!-- 商品列表 -->
    <view class="goods-list">
      <view class="left">
        <view>商品列表</view>
        <view class="goods-num"
          >共{{ skuList.length }}种{{ totalCount }}件商品</view
        >
      </view>
      <view
        v-if="orderData.status < 20 && orderData.lockStatus === 0"
        class="to-adjustpage"
        @tap="toCreateAfsOrderPage(1, orderData.consigneeMobile)"
        >部分退款</view
      >
      <view
        v-if="orderData.status === 110"
        class="to-adjustpage"
        @tap="toCreateAfsOrderPage(2)"
        >发起售后</view
      >
    </view>
    <goods-list
      :realPointStore="realPointStore"
      :skuList="skuList"
      :data="orderData"
    />

    <!-- ******************************京西菜市和京西果园************************************ -->
    <!-- 京西菜市 -->
    <template v-if="getStorage('terrace') == 'jxcs' || getStorage('terrace') == 'gblm'">
      <!-- 实际支付 -->
      <view class="user-name">
        {{
          orderData.vendorPayPercentage != 0
            ? orderData.vendorPayPercentage < 50
              ? '实际支付：'
              : '实际收入：'
            : isPointStore
            ? '实际支付：'
            : '实际收入：'
        }}
        <jx-real-income :orderData="orderData" color="red" :isTip="false" />
      </view>

      <!-- 平台结算 -->
      <view class="user-name" v-if="isPointStore">
        <text>平台结算：</text>
        <!-- 未完成订单进行判断 -->
        <view v-if="orderStatus != '完成'">
          <!-- 结算金额小于0显示待更新 -->
          <jx-price
            color="red"
            :price="orderData.totalShopMoney"
            v-if="orderData.totalShopMoney > 0"
          />
          <text style="color: red" v-else>待更新</text>
        </view>
        <jx-price color="red" :price="orderData.totalShopMoney" v-else />
      </view>

      <!-- 平台补贴 -->
      <view class="user-name" v-if="realPointStore && orderInfo">
        <text>平台补贴：</text>
        <jx-price color="red" :price="orderData.pmSubsidyMoney" />
      </view>

      <!-- 自送收益 -->
      <view
        class="user-name"
        v-if="
          waybillVendor(
            orderData.waybillVendorID,
            orderData.status,
            orderData.waybillStatus
          ) === '商家自送'
        "
      >
        <text>自送收益：</text>
        <jx-price color="red" :price="orderData.baseFreightMoney" />
      </view>

      <!-- 亏损补贴金额 -->
      <view class="user-name">
        <text>亏损补贴金额：</text>
        <jx-price color="red" :price="orderData.jxSubsidyMoney" />
      </view>
    </template>
    <template v-else>
      <!-- 京西果园 -->
      <!-- 门店收益 -->
      <view class="user-name">
        门店收益：
        <jx-real-income-jxgy
          :order="orderData"
          style="color: red"
          :isTip="false"
        />
      </view>

      <!-- 自送收益 -->
      <view
        class="user-name"
        v-if="
          waybillVendor(
            orderData.waybillVendorID,
            orderData.status,
            orderData.waybillStatus
          ) === '商家自送'
        "
      >
        <text>自送收益：</text>
        <jx-price
          color="red"
          :price="(orderData.baseFreightMoney || 400) * 0.9"
        />
      </view>
    </template>

    <!-- ****************************************************************** -->

    <!-- 店铺收款人 -->
    <view class="user-name">
      <text>店铺收款人：</text>
      <text>{{ storeInfo.payeeName || '暂无门店收款人' }}</text>
    </view>

    <!-- 平台负责人 -->
    <view class="user-name">
      <text>平台负责人：</text>
      <view
        v-if="storeInfo.marketManName"
        @tap="phoneCall(storeInfo.marketManPhone)"
      >
        <jx-icon icon="24gf-telephone" color="#4eb331" />&nbsp;{{
          storeInfo.marketManName
        }}</view
      >
      <text v-else>暂无平台负责人</text>
    </view>

    <!-- 运营负责人 -->
    <view class="user-name">
      <text>运营负责人：</text>
      <view v-if="yunyingInfo.name" @tap="phoneCall(yunyingInfo.mobile)">
        <jx-icon icon="24gf-telephone" color="#4eb331" />&nbsp;{{
          yunyingInfo.name
        }}</view
      >
      <text v-else>暂无运营负责人</text>
    </view>

    <!-- 拣货完成按钮 -->
    <view
      @tap="pickingComplete(orderData.vendorOrderID, orderData.vendorID)"
      class="finish-pick"
      v-if="orderData.status === 10 && orderData.lockStatus === 0"
      >拣货完成</view
    >
  </view>
  <jx-empty title="未找到此订单" v-else />
  <!-- 公共组件 -->
  <jx-loading />
</template>

<script lang="ts" setup>
import orderDetailFn from './orderDetail'
import useOrderInfo from '@/composables/useOrderInfo'
import { timeFormatHMS } from '@/utils/tools'
import goodsList from './detailChild/goodsList.vue'
import useGlobalFunc from '@/composables/useGlobalFunc'
import { getStorage } from '@/utils/storage'
import { ref } from 'vue'
const { previewImage } = useGlobalFunc()

const {
  invoiceTitle,           // 抬头发票
  invoiceTaxerID,         // 纳税
  orderData,              // 信息1
  orderInfo,              // 信息2
  orderStatus,            // 订单状态
  cancelOrder,            // 取消订单
  elemIDPre,              // 饿了么订单编号
  elemIDSuf,              // 饿了么订单编号
  expectTime,             // 预计送达
  barCodeImg,             // 条形码
  earningTooSmall,        // 收益异常
  isNewUser,              // 新用户
  realMobile,             // 真实手机号
  avgPriceInfo,           // 均价
  waybillStatus,          // 运单状态
  afsOrder,               // 售后单
  skuList,                // 商品列表
  totalCount,             // 商品数量
  toCreateAfsOrderPage,   // 跳转到售后单页面与部分退款页面
  isPointStore,           // 扣点信息
  realPointStore,         // 平台补贴筛选
  storeInfo,              // 门店收款人
  yunyingInfo,            // 运营负责人
  waybillType,            // 快递类型
  pickingComplete,        // 拣货完成
  complaintHandler,       // 投诉骑手
  isComplaint,            // 是否可以投诉骑手
  isHiddenOrderInfo,      // 是否隐藏订单信息
  callPhone               // 拨打电话
} = orderDetailFn()
const {
  printerOrder,           // 打印订单
  copyInfo,               // 复制
  phoneCall,              // 拨号
  waybillVendor,          // 转换厂商
  afterSalesDetaile,      // 售后详情
} = useOrderInfo()
/*************************************************
 * 经纬度参数
 */
const covers = ref<Array<AnyObject>>([
  {
    latitude: getStorage('lat'),
    longitude: getStorage('lng'),
    iconPath: 'https://image.jxc4.com/image/f68d3785990263a4877ef8e2c4cb3412.png',
    width: 35,
    height: 35,
  },
])
function seeMap(vendorOrderID: string, vendorID: string) {
  uni.navigateTo({
    url: `/subPages/orderChild/seeMap/seeMap?vendorOrderID=${vendorOrderID}&vendorID=${vendorID}`,
  })
}
</script>

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