<template>
  <view
    class="compelet-root position-relative"
    @tap="orderDetail(item.vendorOrderID, item.vendorID)"
  >
    <order-list-top :item="item" />
    <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="address">地址：{{ item.buyerComment.includes('支付方式') ? store.getters['storeInfo/storeAddress'] : item.consigneeAddress }}</view>

    <!-- 配送信息 -->
    <view class="distribution-msg" v-if="!item.buyerComment.includes('支付方式')">
      <text class="vender-name">{{ wbVendor }}</text>
      <text class="distribution-name">{{ item.courierName }}</text>
      <text
        v-if="item.courierMobile.split(',')[1]"
        class="distribution-mobile"
        @tap.stop="phoneCall(item.courierMobile)"
        >{{
          item.courierMobile.split(',')[0] +
          '转' +
          item.courierMobile.split(',')[1]
        }}</text
      >
      <text
        v-else
        class="distribution-mobile"
        @tap.stop="phoneCall(item.courierMobile)"
        >{{ item.courierMobile }}</text
      >
      <jx-icon
        v-show="item.courierMobile != ''"
        icon="24gf-telephone"
        color="#999999"
        @tap.stop="phoneCall(item.courierMobile)"
        :size="38"
        style="margin-left: 10rpx"
      />
    </view>
    <!-- 查看详情 -->
    <view class="detail-btn">查看详情</view>
  </view>
</template>

<script lang="ts" setup>
import useOrderInfo from '@/composables/useOrderInfo'
import { computed } 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, // 订单详情
  phoneCall, // 复制手机号
  waybillVendor, // 转换厂商
} = useOrderInfo()

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

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

<style lang="scss" scoped>
:deep(.order-totalCount) {
  border: none !important;
}
.compelet-root {
  background-color: #fff;
  padding-bottom: 1rpx;

  .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;
  }

  .detail-btn {
    background-color: #fff;
    padding: 20rpx;
    text-align: center;
    color: #fff;
    background-image: linear-gradient(135deg, #4eb331, #85c972);
    margin: 15rpx 15rpx 25rpx 15rpx;
    border-radius: 10rpx;
  }

  .distribution-msg {
    padding: 15rpx;
    border-bottom: 2rpx dashed #e7e7e7;

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