<template>
  <view
    class="distribution-root position-relative"
    @tap="orderDetail(item.vendorOrderID, item.vendorID)"
  >
    <order-list-top :item="item" />
    <view class="address">地址：{{ item.consigneeAddress }}</view>

    <template v-if="getStorage('terrace') == 'jxcs' || getStorage('terrace') == 'gblm'">
      <!-- 京西菜市 -->
      <order-money :item="item" />
    </template>
    <template v-else>
      <!-- 京西果园 -->
      <order-money-jxgy :item="item" />
    </template>

    <view class="distribution-msg" v-if="item.courierName">
      <text class="vender-name">{{ wbVendor }}</text>
      <text class="distribution-name">{{ item.courierName }}</text>
      <text
        class="distribution-mobile"
        @tap.stop="phoneCall(item.courierMobile)"
        v-if="item.courierMobile.split(',')[1]"
        >{{
          item.courierMobile.split(',')[0] +
          '转' +
          item.courierMobile.split(',')[1]
        }}</text
      >
      <text v-else class="distribution-mobile">{{ item.courierMobile }}</text>
      <jx-icon
        icon="24gf-telephone"
        color="#999999"
        @tap.stop="phoneCall(item.courierMobile)"
        :size="38"
      />
    </view>

    <!-- 自提订单 -->
    <view class="self-order self" v-if="item.deliveryType === 'self'">[自提订单]</view>

    <!-- 操作按钮 -->
    <view class="operation">
      <view class="printerBtn" @tap.stop="deliverManager(item.vendorOrderID)">配送管理</view>
      <view class="pickingBtn">查看详情</view>
    </view>

    <!-- 确定自提 -->
    <template v-if="isSelfBtn">
      <!--     v-if="item.vendorID != 9" -->
      <view
        class="btn-picked"
    
        @tap.stop="inputTakeCode"
        >输入自提码</view
      >
      <!-- <view class="btn-picked" v-else @tap.stop="jxSelfTake('jx')">完成自提</view> -->
    </template>

    <!-- 商家自送送达按钮 status 20 -->
    <template v-if="isConfrim">
      <div class="btn-picked" @tap.stop="handleSelfDelivered">
        确认送达
        <text v-if="(item.flag & 128) === 128">[已操作]</text>
      </div>
    </template>
  </view>

  <!-- 自提码弹窗 -->
  <uni-popup ref="popup" type="top">
    <view class="takeCode-root">
      <view class="title">自提订单</view>
      <input
        class="ipt"
        type="text"
        placeholder="请输入自提码"
        v-model="takeCode"
      />
      <view class="btn-root">
        <view class="cancel" @tap.stop="popup.close()">取消</view>
        <view class="confirm" @tap.stop="jxSelfTake('noJx')">确定</view>
      </view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
import order from '@/api/https/order'
import useOrderInfo from '@/composables/useOrderInfo'
import toast from '@/utils/toast'
import { computed, ref } from 'vue'
import orderListTop from '../component/orderListTop.vue'
import orderMoney from '../component/orderMoney.vue'
import orderMoneyJxgy from '../component/orderMoneyJxgy.vue'
import { getStorage } from '@/utils/storage'
import { store } from '@/store'
const {
  orderDetail, // 订单详情
  deliverManager, // 配送管理
  phoneCall, // 拨打电话
  waybillVendor, // 转换厂商
} = useOrderInfo()

interface PropsType {
  item: any
  type: number
}
const props = defineProps<PropsType>()

/**
 * 转换快递厂商
 */
const wbVendor = computed(() => {
  return waybillVendor(
    props.item.waybillVendorID,
    props.item.status,
    props.item.waybillStatus
  )
})

/**
 * 计算属性展示确认送达按钮
 */
const isConfrim = computed(() => {
  return (
    (props.item.deliveryFlag & 3) === 3 &&
    props.item.lockStatus === 0 &&
    props.item.deliveryType !== 'self' &&
    !props.item.vendorWaybillID
  )
})

/**
 * 计算属性计算出是否显示自提订单按钮
 */
const isSelfBtn = computed(() => {
  return (
    props.item.status === 15 &&
    props.item.waybillVendorID === -1 &&
    props.item.lockStatus === 0 &&
    props.item.deliveryType === 'self'
  )
})

/**
 * 除开京西自提订单
 */
const popup = ref<any>(null)
function inputTakeCode() {
  takeCode.value = ''
  popup.value.open()
}

/**
 * 自提订单 默认京西自提订单
 */
const takeCode = ref<any>() // 自提码
function jxSelfTake(type: string) {
  // if (type != 'jx' && takeCode.value == '') return toast('请输入自提码')
  if (takeCode.value == '') return toast('请输入自提码')
  uni.jxConfirm({
    title: '自提订单',
    content: '是否完成自提(请确保用户已出示正确订单，以免引起不必要的损失)',
    success: async () => {
      let data = {
        vendorOrderID: props.item.vendorOrderID,
        vendorID: props.item.vendorID,
        // selfTakeCode: type === 'jx' ? '135246' : takeCode.value,
        selfTakeCode: takeCode.value,
      }
      let res = await order.confirm_self_take(data)
      if (res.code == 0) {
        toast('自提成功', 1)
        popup.value.close()
        // 刷新订单
        store.commit('serveInfo/setUpdateOrder', Date.now())
      } else {
        toast('自提发生异常', 2)
      }
    },
  })
}

/**
 * 确认送达
 */
function handleSelfDelivered() {
  // if ((props.item.flag & 128) === 128) return false
  uni.jxConfirm({
    title: '提示',
    content: '是否确认送达商品',
    success: async () => {
      let data = {
        vendorOrderID: props.item.vendorOrderID,
        vendorID: props.item.vendorID,
      }
      let res = await order.self_delivered(data)
      if (res.code == 0) {
        toast('送达成功', 1)
        // 刷新订单
        store.commit('serveInfo/setUpdateOrder', Date.now())
      } else {
        toast('送达异常' + res.desc, 2)
      }
    },
  })
}
</script>

<style lang="scss" scoped>
:deep(.order-number) {
  border: none !important;
}
.distribution-root {
  position: relative;
  background-color: #fff;
  padding-bottom: 20rpx;
}

.self {
  padding: 15rpx;
  border-bottom: 2rpx dashed #e7e7e7;
}

.address {
  display: flex;
  justify-content: space-between;
  padding: 15rpx;
  font-size: 32rpx;
  color: #000000;
  background-color: rgba($color: #908f96, $alpha: 0.15);
  border-radius: 10rpx;
}

// 操作按钮
.operation {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 15rpx 20rpx 0 20rpx;

  .printerBtn,
  .pickingBtn {
    width: 100%;
    padding: 20rpx;
    text-align: center;
    border-radius: 10rpx;
    color: #fff;
  }

  .printerBtn {
    margin-right: 15rpx;
    background-image: linear-gradient(135deg, #ec903f, #ff6a20);
  }

  .pickingBtn {
    margin-left: 15rpx;
    background-image: linear-gradient(135deg, $jx-primary, #85c972);
  }
}

// 自提
.takeCode-root {
  box-sizing: border-box;
  background-color: rgb(255, 255, 255);
  border-radius: 0 0 15rpx 15rpx;
  padding: 25rpx;

  .title {
    width: 100%;
    text-align: center;
  }

  .ipt {
    width: 100%;
    height: 80rpx;
    border: 1rpx solid #cecece;
    border-radius: 10rpx;
    margin: 20rpx 0;
    text-align: center;
  }

  .btn-root {
    display: flex;
    justify-content: space-between;

    .cancel,
    .confirm {
      width: 100%;
      padding: 15rpx 0;
      text-align: center;
      border-radius: 10rpx;
    }
    .cancel {
      color: $jx-primary;
      border: 1rpx solid $jx-primary;
      margin-right: 15rpx;
    }

    .confirm {
      background-color: $jx-primary;
      margin-left: 15rpx;
      color: #fff;
    }
  }
}

.distribution-msg {
  padding: 15rpx;
  border-bottom: 2rpx dashed #e7e7e7;
  .distribution-name {
    margin-right: 25rpx;
    font-weight: bold;
  }
}

.distribution-mobile {
  color: #999999;
}

.vender-name {
  color: #999999;
  margin-right: 25rpx;
}
</style>