<!--
 Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

 https://www.mall4j.com/

 未经允许，不可做商业用途！

 版权所有，侵权必究！
-->
<template>
  <div class="page-order-info">
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-width="80px"
      @submit.prevent
      @keyup.enter="onSubmit()"
    >
      <div class="mod-order-orderInfo">
        <div class="content">
          <div class="order-state">
            <div class="state-box">
              <div class="state">
                {{
                  [
                    $t("order.order.waitingFosPayment"),
                    $t("order.order.waitiooShip"),
                    $t("order.order.waitingFeGoods"),
                    $t("order.order.waitingtion"),
                    $t("order.order.commoditful"),
                    $t("order.order.commodityFailed"),
                    $t("order.order.commodited"),
                  ][dataForm.status - 1]
                }}
              </div>
              <div class="state-des">
                <div v-if="dataForm.status === 1">
                  {{ $t("order.order.buyerDidNTime") }}
                </div>
                <div v-if="dataForm.status === 2">
                  {{ $t("order.order.buyPleF") }}
                </div>
                <div v-if="dataForm.status === 3 && dataForm.deliveryType !== 2">
                  {{ $t("order.order.shelF") }}
                </div>
                <div v-if="dataForm.status === 3 && dataForm.deliveryType === 2">
                  {{ $t("order.order.buyA") }}
                </div>
                <div v-if="dataForm.status === 5">
                  {{ $t("order.order.buyB") }}
                </div>
                <div v-if="dataForm.status === 6">
                  {{ $t("order.order.orderCanc") }}
                </div>
                <div v-if="dataForm.status === 7">
                  {{ $t("order.order.outTimeCanOrd") }}
                </div>
              </div>
              <div class="actions">
                <el-button
                  v-if="dataForm.status <= 2 && dataForm.dvyType !== 2"
                  plain
                  class="item-btn"
                  @click="onChangeUserAddrOrder()"
                >
                  {{ $t('order.order.modifyUseAddress') }}
                </el-button>
              </div>
            </div>
            <!-- 状态步骤 -->
            <div class="state-steps">
              <el-form-item>
                <el-steps
                  :active="stepsStatus"
                  align-center
                  class="is-finishs"
                  :process-status="dataForm.status === 6 ? 'error' : 'wait'"
                >
                  <el-step
                    :title="$t('order.order.submitOrders')"
                    :description="dataForm.createTime"
                  />
                  <el-step
                    :title="$t('order.order.theBuyerHasPaid')"
                    :description="dataForm.payTime"
                  />
                  <el-step
                    :title="
                      dataForm.deliveryType === 2
                        ? $t('order.order.buyerHasMentioned')
                        : $t('order.order.shippedBySeller')
                    "
                    :description="dataForm.deliveryTime"
                  />
                  <el-step
                    :title="$t('order.order.buyerHasReceived')"
                    :description="dataForm.finallyTime"
                  />
                </el-steps>
              </el-form-item>
            </div>
          </div>
          <div
            v-if="dataForm.deliveryType !== 3 && ((!loadingDelivery && dataForm.deliveryExpresses.length > 0) || loadingDelivery)"
            v-loading="loadingDelivery"
            class="packages"
          >
            <div
              v-if="dataForm.deliveryExpresses && dataForm.deliveryExpresses.length > 1"
              class="p-tab"
            >
              <div
                v-for="(deliveryExpresse,index) in dataForm.deliveryExpresses"
                :key="index"
                :class="indexs === index ? 'item active' : 'item'"
                @click="onClickListDelivery(deliveryExpresse, index)"
              >
                {{ $t("order.order.package") }}{{ index + 1 }}
              </div>
            </div>
            <div
              v-if="deliveryExpress"
              class="p-con"
            >
              <div class="deliver-msg">
                <div class="d-item">
                  <div class="text">
                    {{ $t("order.order.delType") }}：
                  </div>
                  <div class="res">
                    {{
                      [
                        $t("order.order.ordinaryExpress"),
                        $t("order.order.ordinaryExpress"),
                        $t("order.order.selfMention"),
                        $t("order.order.noNeedRequired"),
                      ][deliveryExpress.deliveryType]
                    }}
                  </div>
                </div>
                <div class="d-item">
                  <div class="text">
                    {{ $t("order.order.deliveryTime") }}：
                  </div>
                  <div class="res">
                    {{ deliveryExpress.createTime }}
                  </div>
                </div>
                <div
                  v-if="deliveryExpress.deliveryType === 1 || deliveryExpress.deliveryType === 0"
                  class="d-item"
                >
                  <div class="text">
                    {{ $t("order.order.courierCompany") }}：
                  </div>
                  <div class="res">
                    {{ deliveryExpress.deliveryName }}
                  </div>
                </div>
                <div
                  v-if="deliveryExpress.deliveryType === 1 || deliveryExpress.deliveryType === 0"
                  class="d-item"
                >
                  <div class="text">
                    {{ $t("order.order.waybillNumber") }}：
                  </div>
                  <div class="res">
                    {{ deliveryExpress.deliveryNo }}
                  </div>
                </div>

                <div
                  class="d-goods"
                  :class="{ over: deliveryExpress.orderItems && deliveryExpress.orderItems.length > 5 }"
                >
                  <div
                    class="arrow prev"
                    :class="{
                      disable:
                        deliveryExpress.orderItems && deliveryExpress.orderItems.length - 5 <= 0 ||
                        offsetCount < 1,
                    }"
                    @click="onSwitchPrevItem"
                  />
                  <div
                    class="arrow next"
                    :class="{
                      disable:
                        deliveryExpress.orderItems && deliveryExpress.orderItems.length - 5 <= 0 ||
                        offsetCount >= deliveryExpress.orderItems && deliveryExpress.orderItems.length - 5,
                    }"
                    @click="onSwitchNextItem"
                  />
                  <div class="item-goods">
                    <div
                      ref="carouserRef"
                      class="goods-box"
                    >
                      <div
                        v-for="(
                          orderItem, index
                        ) in deliveryExpress.orderItems && deliveryExpress.orderItems"
                        :key="index"
                        class="item"
                      >
                        <div class="img">
                          <ImgShow :src="orderItem.supplierImgUrl" />
                          <div class="number">
                            ×{{ orderItem.count }}
                          </div>
                        </div>
                        <div class="name">
                          {{ orderItem.supplierSpuName }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="logistics">
                <div
                  v-if="deliveryExpress && deliveryExpress.delivery"
                  class="l-tit"
                >
                  <span
                    class="text"
                  >{{ $t("order.order.logisticsStatus") }}：</span>
                  <span
                    v-if="deliveryExpress.delivery.state === 0"
                    class="l-state"
                  >{{ $t("order.order.noRecord") }}</span>
                  <span
                    v-if="deliveryExpress.delivery.state === 1"
                    class="l-state"
                  >{{ $t("order.order.collected") }}</span>
                  <span
                    v-if="deliveryExpress.delivery.state === 2"
                    class="l-state"
                  >{{ $t("order.order.delivering") }}</span>
                  <span
                    v-if="deliveryExpress.delivery.state === 3"
                    class="l-state"
                  >{{ $t("order.order.haveBeenReceived") }}</span>
                  <span
                    v-if="deliveryExpress.delivery.state === 201"
                    class="l-state"
                  >{{ $t("order.order.reachTheDestinationCity") }}</span>
                  <span
                    v-if="deliveryExpress.delivery.state === 4"
                    class="l-state"
                  >{{ $t("order.order.problemPiece") }}</span>
                </div>
                <div
                  v-if="deliveryExpress && deliveryExpress.delivery"
                  class="logistics-box"
                >
                  <div
                    v-if="
                      deliveryExpress.delivery.state === 0 &&
                        dataForm.status === 5 &&
                        dataForm.finallyTime !== null
                    "
                    class="item"
                  >
                    <div class="time">
                      {{ dataForm.finallyTime }}
                    </div>
                    <div class="text">
                      {{ $t("order.order.receivedGoods") }}
                    </div>
                  </div>
                  <div
                    v-for="(trace, index) in deliveryExpress.delivery
                      .traces"
                    :key="index"
                    class="item"
                  >
                    <div class="time">
                      {{ trace.acceptTime }}
                    </div>
                    <div class="text">
                      {{ trace.acceptStation }}
                    </div>
                  </div>
                  <div
                    v-if="
                      deliveryExpress.delivery.traces &&
                        deliveryExpress.delivery.traces.length < 1
                    "
                    class="item"
                  >
                    {{ $t("order.order.noLogisticsInformation") }}
                  </div>
                  <div
                    v-if="dataForm.status >= 3 && dataForm.deliveryTime !== null"
                    class="item"
                  >
                    <div class="time">
                      {{ dataForm.deliveryTime }}
                    </div>
                    <div class="text">
                      {{ $t("order.order.merchantHasShippedWa") }}
                    </div>
                  </div>
                  <div
                    v-if="dataForm.status >= 2 && dataForm.payTime !== null"
                    class="item"
                  >
                    <div class="time">
                      {{ dataForm.payTime }}
                    </div>
                    <div class="text">
                      {{ $t("order.order.buyerHasPaidWa") }}
                    </div>
                  </div>
                  <div
                    v-if="dataForm.status >= 1"
                    :class="['item', dataForm.status >= 1?'left-line':'']"
                  >
                    <div class="time">
                      {{ dataForm.createTime }}
                    </div>
                    <div class="text">
                      {{ $t("order.order.buyerSubmittedAnOrder") }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="order-info">
            <div
              v-if="dataForm.orderAddr"
              class="info-item"
            >
              <div class="item-tit">
                {{ $t("order.order.recipientInformation") }}
              </div>
              <div class="item">
                <div class="text">
                  {{
                    dataForm.deliveryType === 2
                      ? $t("order.order.deliveryPerson")
                      : $t("constant.consignee")
                  }}：
                </div>
                <div class="res">
                  {{ dataForm.orderAddr.consignee }}
                </div>
              </div>
              <div class="item">
                <div class="text">
                  {{ $t("constant.contactTel") }}：
                </div>
                <div class="res">
                  {{ dataForm.orderAddr.mobile }}
                </div>
              </div>
              <div
                v-if="dataForm.deliveryType !== 2"
                class="item"
              >
                <div class="text">
                  {{ $t("constant.deliveryAddr") }}：
                </div>
                <div class="res">
                  {{ dataForm.orderAddr.province
                  }}{{ dataForm.orderAddr.city
                  }}{{ dataForm.orderAddr.area
                  }}{{ dataForm.orderAddr.addr }}
                </div>
              </div>
            </div>
            <div class="info-item">
              <div class="item-tit">
                {{ $t("order.order.shippingInformation") }}
              </div>
              <div class="item">
                <div class="text">
                  {{ $t("order.order.delType") }}：
                </div>
                <div class="res">
                  {{
                    [
                      $t("order.order.ordinaryExpress"),
                      $t("order.order.ordinaryExpress"),
                      $t("order.order.buyerMention"),
                      $t("order.order.noNeedRequired"),
                      $t("order.order.sameCityDelivery"),
                    ][dataForm.deliveryType]
                  }}
                </div>
                <div
                  v-if="dataForm.deliveryType === null"
                  class="res"
                >
                  {{ $t("order.order.no") }}
                </div>
              </div>
              <div class="item">
                <div class="text">
                  {{ $t("order.order.deliveryTime") }}：
                </div>
                <div class="res">
                  {{ dataForm.deliveryTime }}
                </div>
                <div
                  v-if="dataForm.deliveryTime === null"
                  class="res"
                >
                  {{ $t("order.order.no") }}
                </div>
              </div>
            </div>
            <div class="info-item">
              <div class="item-tit">
                {{ $t("order.order.paymentInformation") }}
              </div>
              <div class="item">
                <div class="text">
                  {{ $t("order.order.actualAmount") }}：
                </div>
                {{
                  onHandlerPrice(dataForm.actualTotal) +
                    $t("constant.dollar") +
                    (dataForm.orderScore ? (" + " + dataForm.orderScore + $t("order.order.integral")) : "")
                }}
              </div>
              <!-- 支付方式 -->
              <div class="item">
                <div class="text">
                  {{ $t("order.order.paymentMethod") }}：
                </div>
                <div
                  v-if="dataForm.payType || dataForm.payType === 0"
                  class="res"
                >
                  {{
                    [
                      $t("order.order.pointsPayment"),
                      $t("order.order.wecProPay"),
                      $t("order.order.alipayPCPayment"),
                      $t("order.order.wechatScanCodePayment"),
                      $t("order.order.wechatH5Payment"),
                      $t("order.order.weclAccountPay"),
                      $t("order.order.alipayH5Payment"),
                      $t("order.order.alipayAPPPayment"),
                      $t("order.order.wechatAPPPayment"),
                      $t("order.order.balancePayment"),
                    ][dataForm.payType]
                  }}
                </div>
                <div v-if="!dataForm.payType && dataForm.payType !== 0">
                  {{ $t("pay.notPaid") }}
                </div>
              </div>
              <!-- 支付时间 -->
              <div class="item">
                <div class="text">
                  {{ $t("order.order.paymentTime") }}：
                </div>
                <div class="res">
                  {{ dataForm.payTime }}
                </div>
                <div
                  v-if="dataForm.payTime === null"
                  class="res"
                >
                  {{ $t("order.order.no") }}
                </div>
              </div>
            </div>
            <div class="info-item">
              <div class="item-tit">
                {{ $t("order.order.buyerInformation") }}
              </div>
              <div class="item">
                <div class="text">
                  {{ $t("order.order.orderRemarks") }}：
                </div>
                <div class="res">
                  {{ dataForm.remarks }}
                </div>
                <div
                  v-if="dataForm.remarks === null || dataForm.remarks === ''"
                  class="res"
                >
                  {{ $t("order.order.no") }}
                </div>
              </div>
            </div>
          </div>
          <div class="goods-list">
            <order-prod-table
              :data-form="dataForm"
            />
            <div class="goods-total">
              <div class="text-box">
                <div class="item">
                  <div class="text">
                    {{ $t("order.order.shippingFees") }}:
                  </div>
                  <div class="number">
                    ￥{{ onHandlerPrice(dataForm.freightAmount) }}
                  </div>
                </div>
              </div>
              <div class="item act-price">
                <div class="text">
                  {{ $t("order.order.amountDue") }}:
                </div>
                <div class="number">
                  ￥{{ onHandlerPrice(dataForm.actualTotal) +
                    (dataForm.orderScore ? (" + " + dataForm.orderScore + $t("order.order.integral")) : "") }}
                </div>
              </div>
            </div>
          </div>
          <div class="order-log">
            <div class="log-title">
              {{ $t("order.order.logs") }}
            </div>
            <!-- 创建订单(成功) -->
            <div
              v-if="dataForm.createTime"
              class="log-cont"
            >
              {{ dataForm.createTime }} {{ dataForm.nickName }}
              {{ $t("order.order.createOrder") }}
            </div>
            <!-- 订单付款（成功） -->
            <div
              v-if="dataForm.payTime"
              class="log-cont"
            >
              {{ dataForm.payTime }} {{ dataForm.nickName }}
              {{ $t("order.order.payment") }}
            </div>
            <!-- 订单自提 or 订单发货（成功） -->
            <div
              v-if="dataForm.deliveryTime"
              class="log-cont"
            >
              {{ dataForm.deliveryTime }}
              {{
                dataForm.deliveryType === 2
                  ? dataForm.nickName + $t("order.order.orderPickup")
                  : $t("order.order.deliverys")
              }}
            </div>
            <!-- 完成订单（成功） -->
            <div
              v-if="dataForm.finallyTime"
              class="log-cont"
            >
              {{ dataForm.finallyTime }} {{ dataForm.nickName
              }}{{ $t("order.order.completed") }}
            </div>
            <!-- 取消订单（成功） -->
            <div
              v-if="dataForm.cancelTime"
              class="log-cont"
            >
              {{ dataForm.cancelTime }} {{ dataForm.nickName }}
              {{ $t("order.order.cancelOrder") }}
            </div>
          </div>
        </div>
      </div>
    </el-form>
    <!-- 弹窗 -->
    <order-addr-update
      v-if="orderAddrUpdateVisible"
      ref="orderAddrUpdateRef"
      @refresh-user-addr-order="onGetDataList"
    />
  </div>
</template>

<script setup>
import OrderAddrUpdate from './components/order-addr-update.vue'
import * as api from '@/api/order/order'
import { deliveryOrder } from '@/api/delivery/delivery-company'
import Big from 'big.js'
import OrderProdTable from './components/order-prod-table/index.vue'

const dataForm = reactive({
  actualTotal: 0,
  addrOrderId: 0,
  cancelTime: '',
  createTime: '',
  deliveryExpresses: [],
  deliveryTime: '',
  deliveryType: '',
  dvyType: '',
  finallyTime: '',
  freightAmount: 0,
  nickName: '',
  orderAddr: {},
  orderAddrId: 0,
  orderId: '',
  orderItems: [],
  orderTime: '',
  orderScore: 0,
  orderType: '',
  payTime: '',
  payType: '',
  refundStatus: '',
  remarks: '',
  shopRemarks: '',
  status: 1,
  total: 0,
  updateTime: '',
  userAddrOrder: {}
})

const orderAddrUpdateVisible = ref(false)
const visible = ref(false)
watch(() => visible.value, () => {
  if (!visible.value) {
    orderAddrUpdateVisible.value = false
  }
})

const carouserRef = ref()
const deliveryExpress = ref()
const offsetCount = ref(0)
watch(() => deliveryExpress, () => {
  nextTick(() => {
    offsetCount.value = 0 // 初始化变量
    if (deliveryExpress) {
      carouserRef.value.style.left = '0px'
    }
  })
})

onMounted(() => {
  init()
})

const stepsStatus = computed(() => {
  if (dataForm.finallyTime) {
    return 4
  } else if (dataForm.deliveryTime) {
    return 3
  } else if (dataForm.payTime) {
    return 2
  } else if (dataForm.createTime) {
    return 1
  } else {
    return 0
  }
})

const dataFormRef = ref()
const indexs = ref(0)
const init = () => {
  dataForm.orderId = useRoute().query.orderId || 0
  visible.value = true
  indexs.value = 0
  nextTick(() => {
    dataFormRef.value?.resetFields()
  })
  if (dataForm.orderId) {
    onGetDataList()
  }
}

const loadingDelivery = ref(false)
const onGetDataList = () => {
  api.orderInfo(dataForm.orderId).then((data) => {
    Object.assign(dataForm, data)
    if (dataForm.deliveryType !== 3) {
      loadingDelivery.value = true
      api.deliveryExpresseInfo({ orderId: dataForm.orderId }).then((data) => {
        dataForm.deliveryExpresses = data
        deliveryExpress.value = data[0]
        loadingDelivery.value = false
      })
    }
  })
}

// 物流事件
const onClickListDelivery = (delivery, index) => {
  loadingDelivery.value = true
  deliveryOrder(delivery.deliveryOrderId).then((data) => {
    deliveryExpress.value = data
    loadingDelivery.value = false
  })
  indexs.value = index
}

// 商品切换
const onSwitchPrevItem = () => {
  const len = deliveryExpress.value.orderItems.length
  if (len - 5 > 0) {
    if (offsetCount.value > 0) {
      offsetCount.value--
      carouserRef.value.style.left = '-' + (70 * offsetCount.value) + 'px'
    } else {
      return false
    }
  } else if (len - 5 <= 0) {
    return false
  } else {
    return false
  }
}

const onSwitchNextItem = () => {
  const len = deliveryExpress.value.orderItems.length
  if (len - 5 > 0) {
    if (offsetCount.value < len - 5) {
      offsetCount.value++
      carouserRef.value.style.left = '-' + (70 * offsetCount.value) + 'px'
    } else if (len - 5 <= 0) {
      return false
    } else {
      return false
    }
  } else {
    return false
  }
}

// 表单提交
const onSubmit = () => {
}

// 修改地址
const orderAddrUpdateRef = ref()
const onChangeUserAddrOrder = () => {
  orderAddrUpdateVisible.value = true
  nextTick(() => {
    orderAddrUpdateRef.value.init(dataForm)
  })
}

// 精度运算-过滤
const onHandlerPrice = (val) => {
  if (val == null) {
    return ''
  }
  return new Big(val).div(100).toFixed(2)
}

</script>

<style lang="scss" scoped>
@use './index.scss';
</style>
