<template>
  <!-- 订单信息 -->
  <view class="order-info">
    <view class="order">
      <view class="h-number index-color">
        <text class="brand" :class="`icon-${item.vendorID}`"></text>
        <text class="num-root">
          <text>#</text>
          <text class="num">{{ item.orderSeq }}</text>
        </text>
      </view>
      <view class="timer" v-if="!item.buyerComment.includes('支付方式')">预计{{ expectedDeliveredTime }}前送达</view>
    </view>
    <span class="rushOrder" v-if="isShowRushOrder">急</span>
    <view v-if="isSrestPickTime" v-html="restPickTime"></view>

    <view v-if="isCancelTime">
      <view v-if="item.lockStatus === -5 && (item.flag & 6) === 0">
        <text class="rest-time canceltime"
          >{{ cancelTime
          }}<text v-if="cancelTime !== '已超时'">分钟</text></text
        >
      </view>
      <text class="order-delivered">{{ abnormalStatus }}</text>
    </view>
    <!-- 状态展示 -->
    <text class="compelet" v-if="item.status === 110">已完成</text>
    <text class="cancel" v-else-if="item.status === 115">已取消</text>
    <text class="fail" v-else-if="item.status === 120">已失败</text>
  </view>

  <!-- 用户名字 -->
  <view class="order-title"  v-if="!item.buyerComment.includes('支付方式')">
    <!-- <view class="title-left"> -->
      <view >
        <text class="name">{{ item.consigneeName.slice(0, 1) }}...</text>
        <!-- <img src="https://image.jxc4.com/jxapp/z_send_normal.png" alt="" class="connectUser"  @tap.stop="connectUser(item)"> -->
      </view>
      <view class="see-map" @tap.stop="callPhone(item)">拨打电话</view>
      <view class="see-map"  @tap.stop="connectUser(item)">发消息</view>
      <!-- <view class="phone">
        <view>
          <text v-if="item.consigneeMobile">临1：</text>
          <text
            class="phone-number"
            @tap.stop="phoneCall(item.consigneeMobile)"
            v-if="item.consigneeMobile.split(',')[1]"
            >{{
              item.consigneeMobile.split(',')[0] +
              '转' +
              item.consigneeMobile.split(',')[1]
            }}</text
          >
          <text
            v-else
            class="phone-number"
            @tap.stop="phoneCall(item.consigneeMobile)"
            >{{ item.consigneeMobile }}</text
          >
          <br />
          真实号
          <text v-if="item.consigneeMobile2">临2：</text>
          <text
            class="phone-number"
            @tap.stop="phoneCall(item.consigneeMobile2)"
            v-if="item.consigneeMobile2.split(',')[1]"
            >{{
              item.consigneeMobile2.split(',')[0] +
              '转' +
              item.consigneeMobile2.split(',')[1]
            }}</text
          >
          <text
            v-else
            :class="item.consigneeMobile2 ? 'phone-number' : ''"
            @tap.stop="phoneCall(item.consigneeMobile2)"
            >{{ item.consigneeMobile2 }}</text
          >
        </view>
        <img src="https://image.jxc4.com/jxapp/z_send_normal.png" alt="" class="connectUser" @tap.stop="connectUser(item)">
      </view> 
     </view> -->
     <!-- style="height:25px;line-height:25px;margin:auto 10px;" -->
    <view class="see-map"  @tap.stop="seeMap">查看地图</view>
  </view>

  <!-- 订单号 -->
  <view class="order-number" @tap.stop="copyInfo(orderNum, '复制订单号成功')">
    <text class="number">订单号：{{ orderNum }}</text>
    <text class="copy">复制</text>
  </view>
</template>

<script lang="ts" setup>
import useOrderInfo from '@/composables/useOrderInfo'
import { store } from '@/store'
import { isNullDate } from '@/utils/tools'
import { onShow } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import { setStorage } from "@/utils/storage";
import toast from "@/utils/toast";
const {
  copyInfo, // 复制内容
  phoneCall, // 拨号
} = useOrderInfo()

interface PropsType {
  item: any
}
let props = defineProps<PropsType>()


/**
 * 拨打电话
 */
 function callPhone(item:AnyObject) {
  // let itemList = [item.consigneeMobile,item.consigneeMobile2]
  let itemList:string[] = []
  if(item.consigneeMobile) itemList.push('临1：' + item.consigneeMobile.split(',')[0] +'转' + item.consigneeMobile.split(',')[1])
  if(item.consigneeMobile2) itemList.push('临2：' + item.consigneeMobile2.split(',')[0] +'转' + item.consigneeMobile2.split(',')[1])
  if(itemList.length === 0) return toast('该订单暂无联系方式', 2)
  uni.showActionSheet({
        // title: '退出后不会删除任何数据',
        itemColor: '#4eb331',
        itemList,
        popover: {
            width: 5000,
        },
        success: function (res) {
          if(res.tapIndex === 0) phoneCall(item.consigneeMobile)
          if(res.tapIndex === 1) phoneCall(item.consigneeMobile2)
        }
    });
}


/*************************************************
 * 联系用户
 */
function connectUser(item:AnyObject) {
 if(item.vendorID === 1){
   if(store.getters['storeInfo/imMtStatus'][0].imStatus !== 1) return toast('美团IM状态已关闭', 2)
   setStorage('vendorUserInfo',{
           venderOrderID:item.vendorOrderID,
           // venderOrderID:0,
           orderSeq:item.orderSeq,
           vendorOrgCode:item.vendorOrgCode,
           vendorStoreID:item.vendorStoreID,
           userID:item.vendorUserID,
           // userID:'11555078706',
           vendorID:item.vendorID
     })
     uni.navigateTo({ url: '/subPages/messageChild/msgChat/msgChat' })
 }else{
  // 饿百
  toast('暂不支持聊天', 2)
 }
}


/*************************************************
 * 查看地图
 */
function seeMap() {
  uni.navigateTo({
    url: `/subPages/orderChild/seeMap/seeMap?vendorOrderID=${props.item.vendorOrderID}&vendorID=${props.item.vendorID}`,
  })
}

/**
 * 是否显示已超时
 */
const isCancelTime = computed(() => {
  return (
    (props.item.status === 17 ||
      props.item.status === 18 ||
      props.item.status === 22) &&
    props.item.lockStatus !== -5
  )
})


/**
 * 是否显示急送 美团 饿百
 */
const isShowRushOrder = computed(() => {
  return (props.item.vendorID === 1 || props.item.vendorID === 3) 
        && props.item.status <=20 ?  
        (props.item.couponIDs && props.item.couponIDs.includes('11002') || props.item.couponIDs.includes('11003') ) 
        : false
})



/**
 * 是否显示预计送达时间
 */
const isSrestPickTime = computed(() => {
  return (
    (props.item.status === 10 ||
      props.item.status === 15 ||
      props.item.status === 20) &&
    props.item.lockStatus === 0
  )
})

/**
 * 订单号转换
 */
const orderNum = computed(() => {
  return props.item.vendorID === 3
    ? props.item.vendorOrderID2
    : props.item.vendorOrderID
})

/**
 * 异常订单转换
 */
const abnormalStatus = computed(() => {
  let order = props.item
  if (order.lockStatus === -5) {
    return '申请取消'
  } else if (order.status === 17) {
    return '待审核'
  } else if (order.status === 18) {
    return '取货失败'
  } else if (order.status === 22) {
    return '投递失败'
  } else {
    return '未知'
  }
})

/**
 * 待接单预计超时时间
 */
const cancelTime = ref<any>()
const timer = ref<any>()
onShow(() => {
  if (props.item.lockStatus === -5) {
    let { purchaseVendorInfo } = store.state.serveInfo.serviceInfo as any
    let { userApplyCancelWaitMinute } = purchaseVendorInfo[props.item.vendorID]
    let cancelTime1 =
      new Date(props.item.lockStatusTime).getTime() +
      userApplyCancelWaitMinute * 60 * 1000 -
      new Date().getTime()
    cancelTime.value =
      cancelTime1 > 0 ? `${new Date(cancelTime1).getMinutes()}` : '已超时'
    timer.value = setInterval(() => {
      cancelTime1 =
        new Date(props.item.lockStatusTime).getTime() +
        userApplyCancelWaitMinute * 60 * 1000 -
        new Date().getTime()
      cancelTime.value =
        cancelTime1 > 0 ? `${new Date(cancelTime1).getMinutes()}` : '已超时'
    }, 1000)
  }
})

/**
 * 预计送达时间
 */
const expectedDeliveredTime = computed(() => {
  let timer: any = ''
  if (isNullDate(props.item.expectedDeliveredTime)) {
    // 预计送达时间无的情况
    timer = new Date(
      new Date(props.item.orderCreatedAt).getTime() + 60 * 60 * 1000
    )
  } else {
    timer = new Date(props.item.expectedDeliveredTime)
  }
  return `${
    timer.getHours() < 10 ? '0' + timer.getHours() : timer.getHours()
  }:${timer.getMinutes() < 10 ? '0' + timer.getMinutes() : timer.getMinutes()}`
})

/**
 * 剩余拣货时间 || 剩余用户自己取消订单时间
 */
const restPickTime = computed(() => {
  // 拣货结束时间time1 = 预计送达时间 - 30分钟
  let time1: any = ''
  if (isNullDate(props.item.pickDeadline)) {
    // 没有拣货时间
    if (isNullDate(props.item.expectedDeliveredTime)) {
      // 预计送达时间为空
      time1 = new Date(props.item.orderCreatedAt).getTime() + 30 * 60 * 1000
    } else {
      // 预计送达时间有
      time1 =
        new Date(props.item.expectedDeliveredTime).getTime() - 30 * 60 * 1000
    }
  } else {
    // 有拣货时间
    time1 = new Date(props.item.pickDeadline).getTime()
  }
  let restTime = (time1 - new Date().getTime()) / 1000 / 60 // 分钟
  restTime = Math.floor(restTime)
  // 送达时间
  let time2: any = ''
  if (isNullDate(props.item.expectedDeliveredTime)) {
    // 时间是空
    time2 =
      new Date(props.item.orderCreatedAt).getTime() +
      60 * 60 * 1000 -
      new Date().getTime()
  } else {
    time2 =
      new Date(props.item.expectedDeliveredTime).getTime() -
      new Date().getTime()
  }
  let arrivedTime = Math.floor(time2 / 1000 / 60)
  switch (props.item.status) {
    case 10:
      if (props.item.lockStatus === 0) {
        if (restTime < 0) {
          // 超时
          return `<span class="order-bg-cs">&nbsp;</span>`
        } else if (restTime < 5) {
          // 小于5分钟
          return `<span class="rest-time picktime3">${restTime}分钟</span>`
        } else if (restTime < 10) {
          // 小于10分钟
          return `<span class="rest-time picktime2">${restTime}分钟</span>`
        } else if (restTime > 60 && props.item.businessType === 2) {
          // 预订单
          return `<span class="order-bg-dsd">&nbsp;</span>`
        } else {
          // 通常
          return `<span class="rest-time picktime1">${restTime}分钟</span>`
        }
      } else {
        return `<span class="order-delivered">已锁定</span>`
      }
    case 15:
      return sendTime(arrivedTime)
    case 20:
      return sendTime(arrivedTime)
    case 105:
      return `<span class="order-delivered">已送达</span>`
    case 110:
      return `<span class="order-delivered">已送达</span>`
    case 115:
      return `<span class="order-delivered">已取消</span>`
    case 120:
      return `<span class="order-delivered">已失败</span>`
    default:
      return ''
  }
})
function sendTime(time: any) {
  if (time < 0) {
    // 超时
    return `<span class="order-bg-cs">&nbsp;</span>`
  } else if (time < 5) {
    // 小于5分钟
    return `<span class="rest-time arrived3">${time}分钟</span>`
  } else if (time < 20) {
    // 小于20分钟
    return `<span class="rest-time arrived2">${time}分钟</span>`
  } else if (time > 60 && props.item.businessType === 2) {
    // 预订单
    return `<span class="order-bg-dsd">&nbsp;</span>`
  } else {
    // 通常
    return `<span class="rest-time arrived1">${time}分钟</span>`
  }
}

/**
 * 判断是否显示已完成，预计送达文字
 */
const isShow = computed(() => {
  if (
    props.item.status == 110 ||
    props.item.status == 115 ||
    props.item.status == 120
  ) {
    return false
  } else {
    return true
  }
})
</script>

<style lang="scss" scoped>
// 表哦提
.order-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 15rpx;
  background-color: #fff;
  border-bottom: 6rpx dashed #e7e7e7;

  .order {
    .timer {
      margin-top: 6rpx;
      color: rgb(0, 0, 0);
    }
  }

    .rushOrder{
    height: 30px;
    padding: 0 5px;
    line-height: 30px;
    background-color: rgba(245, 108, 108, .1);
    border-color: rgba(245, 108, 108, .2);
    color: #f56c6c;
    font-size: 20px;
    border-radius: 50%;
    box-sizing: border-box;
    // border: 1px solid rgba(64, 158, 255, .2);
    border: 1px solid rgba(245, 108, 108, .2);
    white-space: nowrap;
    position: fixed;
    left: 50%;
    animation: blink 1.8s infinite; /* 1秒循环，无限播放 */
  }

  .index-color {
    color: rgb(0, 0, 0);
  }

  .h-number {
    display: flex;
    align-items: center;

    .brand {
      display: inline-block;
      width: 60rpx;
      height: 60rpx;
      flex-shrink: 0;
      background-size: 100%;
      background-repeat: no-repeat;
      border-radius: 15rpx;
    }

    .num-root {
      margin-left: 5rpx;
    }

    .num {
      font-size: 50rpx;
      font-weight: bold;
    }
  }

  .compelet {
    color: #000;
    font-weight: bold;
  }

  .cancel {
    color: #f60d58;
    font-weight: bold;
  }

  .fail {
    color: $jx-warring;
    font-weight: bold;
  }
}

/* 定义动画 */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}


// 顶部标题
.order-title {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  // padding: 15rpx;
  padding: 10rpx;
  border-bottom: 2rpx dashed #e7e7e7;

  text-align: center;
  align-items: center;

  .name {
      color: #999999;
      // margin-right: 20rpx;
    }

  // .title-left {
  //   display: flex;
  //   align-items: center;

  //   .name {
  //     color: #999999;
  //     margin-right: 20rpx;
  //   }

  //   .phone {
  //     color: #999999;
  //     display: flex;
  //     align-items: center;
  //     border:1px solid red;

  //     .phone-number {
  //       // margin-right: 10rpx;
  //     }
  //     .connectUser{
  //       width: 38rpx;
  //       height: 38rpx;
  //     }
  //   }
  // }
}

.order-number {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  padding: 15rpx;
  border-bottom: 2rpx dashed #e7e7e7;
  color: #999999;

  .copy {
    font-size: 26rpx;
    padding: 4rpx 12rpx;
    border-radius: 5rpx;
    border: 2rpx solid #999999;
    color: #999999;
  }
}

.see-map {
  font-size: 28rpx;
  padding: 7rpx 12rpx;
  border-radius: 5rpx;
  background-color: rgba($color: $jx-primary, $alpha: 0.15);
  color: $jx-primary;

  height:25px;
  line-height:25px;
  margin:auto 10px;
}
</style>