<template>
  <view>
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="订单详情"></uni-nav-bar>
    <view class="status-area flex-row-center-start">
      <image class="flex-base" style="width: 40rpx; height: 40rpx; margin-right: 16rpx" src="/static/imgs/order/status-icon.png"></image>
      <text style="font-size: 30rpx; color: #ffffff">{{ statusImg[orderInfo.status] }}</text>
    </view>
    <view class="address-area">
      <view class="flex-row-start-start" style="padding: 24rpx 0 40rpx">
        <image class="flex-base" style="width: 100rpx; height: 100rpx; margin-right: 20rpx" src="/static/imgs/order/customer-default.png"></image>
        <view class="flex-col-start-start">
          <text style="font-size: 30rpx; color: #333333; font-weight: 600">{{ orderInfo.customerEnterpriseName }}</text>
          <text style="font-size: 26rpx; color: #333333; margin-top: 26rpx">
            联系人: {{ `${orderInfo.deliveryAddress.receiver} ${orderInfo.deliveryAddress.receiverMobile}` }}
          </text>
        </view>
      </view>
      <view class="flex-row-start-start footer">
        <image style="width: 32rpx; height: 32rpx; margin-right: 10rpx" src="/static/imgs/order/location-icon.png"></image>
        <text style="font-size: 26rpx; color: #333333; word-break: break-all">{{ transformAddress(orderInfo.deliveryAddress) }}</text>
      </view>
    </view>
    <view class="order-area" v-for="(supplierOrder, index) in orderInfo.supplierOrder" :key="supplierOrder.supplierOrderId">
      <view class="flex-row-center-space header">
        <text style="font-size: 32rpx; font-weight: 600">{{ supplierOrder.supplierEnterpriseName }}</text>
        <view>
          <!-- 待收货展示 -->
          <view v-if="supplierOrder.status == supplierOrderStatusEnum.WAIT_RECEIVE" class="button-item" @click="confirmReceive(supplierOrder)">确认收货</view>
          <!-- 待借款展示 -->
          <view v-if="supplierOrder.status == supplierOrderStatusEnum.WAIT_CLIENT_LOAN" class="button-item" @click="goBorrowing(supplierOrder)">去借款</view>
          <!-- 飞算支付且待还款状态 -->
          <view
            v-if="orderInfo.paymentMethod == paymentMethodEnum.FLY_PAY && supplierOrder.status == supplierOrderStatusEnum.WAIT_CLIENT_REPAY"
            class="button-item"
            @click="goRepaying(supplierOrder)"
          >
            去借款
          </view>
          <text v-else style="font-size: 30rpx; color: #ff5368; font-weight: 600">{{ supplierOrderStatusMap[supplierOrder.status] }}</text>
        </view>
      </view>
      <view v-for="order in supplierOrder.orderItems" :key="order.productId">
        <view style="background-color: #fff; padding-bottom: 20rpx">
          <view class="order-header flex-row-start-space">
            <text style="font-size: 30rpx; font-weight: 600">
              {{ `${order.brandName}${order.productName} | ${order.gramWeight}g | ${order.width}*${order.length} | ${order.pieceQuantity}张` }}
            </text>
          </view>
          <view class="order-row flex-row-center-space">
            <text>重量(吨):</text>
            <text>{{ order.buyTon }}</text>
          </view>
          <view class="order-row flex-row-center-space">
            <text>单价(元/吨):</text>
            <text>{{ order.unitPrice }}</text>
          </view>
          <view class="order-row flex-row-center-space">
            <text>小计(元):</text>
            <text>{{ order.subtotal }}</text>
          </view>
          <view class="order-row flex-row-center-space" style="margin: 0">
            <text>备注信息:{{ order.remark }}</text>
          </view>
        </view>
        <view style="padding: 24rpx 10rpx">
          <uni-steps
            :options="transformStep(order.outboundProcessList)"
            active-color="#1890FF"
            :active="order.outboundProcessList.length > 0 ? order.outboundProcessList.length : -1"
          ></uni-steps>
        </view>
      </view>
      <!-- 送货凭证 -->
      <view v-if="showSendImgs(supplierOrder.status)" class="footer" :style="showList.includes(`${index}_send`) ? '' : 'height:88rpx;'">
        <view class="header flex-row-center-space">
          <text style="font-size: 28rpx; font-weight: 600">送货凭证</text>
          <view class="flex-row-center-end" @click="changeShowIndex(`${index}_send`)">
            <text style="font-size: 28rpx; margin-right: 8rpx">{{ showList.includes(`${index}_send`) ? '收起' : '展开' }}</text>
            <uni-icons :type="showList.includes(`${index}_send`) ? 'top' : 'bottom'" size="16"></uni-icons>
          </view>
        </view>
        <view class="imgs flex-row-start-start">
          <image style="width: 120rpx; height: 120rpx; margin-right: 12rpx" src=""></image>
        </view>
      </view>
      <!-- 收货凭证 -->
      <view v-if="showReceiveImgs(supplierOrder.status)" class="footer" :style="showList.includes(`${index}_receive`) ? '' : 'height:88rpx;'">
        <view class="header flex-row-center-space">
          <text style="font-size: 28rpx; font-weight: 600">送货凭证</text>
          <view class="flex-row-center-end" @click="changeShowIndex(`${index}_receive`)">
            <text style="font-size: 28rpx; margin-right: 8rpx">{{ showList.includes(`${index}_receive`) ? '收起' : '展开' }}</text>
            <uni-icons :type="showList.includes(`${index}_receive`) ? 'top' : 'bottom'" size="16"></uni-icons>
          </view>
        </view>
        <view class="imgs flex-row-start-start">
          <image style="width: 120rpx; height: 120rpx; margin-right: 12rpx" src=""></image>
        </view>
      </view>
    </view>
    <view class="fee flex-row-center-space">
      <text style="font-size: 28rpx; color: #555555">其他费用: ￥{{ orderInfo.otherFee || 0 }}</text>
      <view class="flex-row-center-end">
        <text style="font-size: 28rpx; color: #555555">合计:</text>
        <text style="font-size: 40rpx; color: #f5222d; font-weight: 600">￥{{ orderInfo.totalOfferPrice || 0 }}</text>
      </view>
    </view>
    <view class="order-footer">
      <view class="flex-row-center-space order-row">
        <text class="label">订单编号</text>
        <view class="flex-row-center-end value">
          <text>{{ orderInfo.orderId }}</text>
          <text style="color: #007aff; margin-left: 8rpx" @click="clip(orderInfo.orderId)">复制</text>
        </view>
      </view>
      <view class="flex-row-center-space order-row">
        <text class="label">下单时间</text>
        <text class="value">{{ orderInfo.createTime }}</text>
      </view>
      <view class="flex-row-center-space order-row">
        <text class="label">交货时间</text>
        <text class="value">{{ orderInfo.receivedTime }}</text>
      </view>
      <view class="flex-row-center-space order-row" style="border: none">
        <text class="label">支付方式</text>
        <text class="value">{{ paymentMethodMap[orderInfo.paymentMethod] || '-' }}</text>
      </view>
    </view>
    <qn-footer fixed height="120rpx">
      <view class="flex-row-center-end" style="padding: 0 32rpx">
        <view class="button">查看合同</view>
      </view>
    </qn-footer>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { getClientOrderInfo } from '@/apis/orderApi.js'
import { orderStatusEnum, supplierOrderStatusMap, supplierOrderStatusEnum, paymentMethodMap, paymentMethodEnum } from '@/enums/index.js'
const statusImg = {
  [orderStatusEnum.WAIT_SUPPLIER_CONFIRM]: '待供应商确认',
  [orderStatusEnum.ORDERED]: '已下单',
  [orderStatusEnum.FINISHED]: '已完成',
  [orderStatusEnum.CANCELED]: '已取消'
}
export default {
  data() {
    return {
      orderInfo: {
        deliveryAddress: {},
        supplierOrder: []
      },
      statusImg,
      supplierOrderStatusMap: Object.freeze(supplierOrderStatusMap),
      paymentMethodMap: Object.freeze(paymentMethodMap),
      supplierOrderStatusEnum: Object.freeze(supplierOrderStatusEnum),
      paymentMethodEnum: Object.freeze(paymentMethodEnum),
      showList: []
    }
  },
  onLoad(option) {
    if (option.orderId) {
      getClientOrderInfo({
        customerOrderId: option.orderId
      }).then((res) => {
        if (res) {
          this.orderInfo = res
        }
      })
    } else {
      uni.showToast({
        title: '订单信息错误',
        icon: 'error',
        success: () => {
          setTimeout(() => {
            back()
          }, 2000)
        }
      })
    }
  },
  methods: {
    go2,
    back,
    transformAddress(address) {
      let res = ''
      if (address) {
        res = `${address.provinceName}${address.cityName}${address.districtName}${address.detail}`
      }
      return res
    },
    // 生成步骤条
    transformStep(list) {
      // 分切 出库 完成
      let step1 = [],
        step2 = [],
        step3 = []
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.status == '30301') {
            step1.push({
              title: '分切',
              desc: item.userName + '\n\r' + item.createTime
            })
          } else if (item.status == '30302') {
            step2.push({
              title: '出库',
              desc: item.userName + item.quantity + '\n\r' + item.createTime
            })
          } else if (item.status == '30303') {
            step3.push({
              title: '完成',
              desc: '已收货'
            })
          }
        })
      }
      if (step1.length == 0) {
        step1.push({
          title: '分切',
          desc: '未完成'
        })
      }
      if (step2.length == 0) {
        step2.push({
          title: '出库',
          desc: '未完成'
        })
      }
      if (step3.length == 0) {
        step3.push({
          title: '完成',
          desc: '未完成'
        })
      }
      return [...step1, ...step2, ...step3]
    },
    changeShowIndex(index) {
      let target = this.showList.indexOf(index)
      if (target > -1) {
        this.showList.splice(target, 1)
      } else {
        this.showList.push(index)
      }
    },
    // 根据状态是否展示送货凭证
    showSendImgs(status) {
      let list = [
        supplierOrderStatusEnum.WAIT_RECEIVE,
        supplierOrderStatusEnum.WAIT_CLIENT_LOAN,
        supplierOrderStatusEnum.PAYING,
        supplierOrderStatusEnum.WAIT_CLIENT_PAY,
        supplierOrderStatusEnum.PAY_FAIL,
        supplierOrderStatusEnum.FINISHED,
        supplierOrderStatusEnum.WAIT_CLIENT_REPAY,
        supplierOrderStatusEnum.REPAYING,
        supplierOrderStatusEnum.CANCELED
      ]
      return list.includes(status)
    },
    // 根据状态是否展示收货凭证
    showReceiveImgs(status) {
      let list = [
        supplierOrderStatusEnum.WAIT_CLIENT_LOAN,
        supplierOrderStatusEnum.PAYING,
        supplierOrderStatusEnum.WAIT_CLIENT_PAY,
        supplierOrderStatusEnum.PAY_FAIL,
        supplierOrderStatusEnum.FINISHED,
        supplierOrderStatusEnum.WAIT_CLIENT_REPAY,
        supplierOrderStatusEnum.REPAYING,
        supplierOrderStatusEnum.CANCELED
      ]
      return list.includes(status)
    },
    // 去借款
    goBorrowing(order) {},
    // 确认收货
    confirmReceive(order) {},
    goRepaying(order) {},
    clip(content) {
      uni.setClipboardData({
        data: content,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'success',
            duration: 2000
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.status-area {
  padding: 24rpx 32rpx;
  width: 750rpx;
  background-image: linear-gradient(90deg, #ff4d2e 6%, #ff952f 100%);
}
.address-area {
  padding: 0 32rpx;
  width: 750rpx;
  background-color: #ffffff;
  .footer {
    padding: 24rpx 32rpx;
    background-color: #ffffff;
    border-top: 1px solid #e5e5e5;
  }
}
.order-area {
  .header {
    padding: 24rpx 32rpx;
    word-break: break-all;
    background: #e5f1ff;
    width: 750rpx;
  }
  .order-header {
    padding: 24rpx 32rpx;
    word-break: break-all;
    background: #fff;
    width: 750rpx;
    border-bottom: 2rpx dashed #d8d8d8;
    margin-bottom: 20rpx;
  }
  .order-row {
    width: 750rpx;
    padding: 0 32rpx;
    margin-bottom: 18rpx;
    font-size: 28rpx;
    color: #555555;
  }
  .footer {
    background-color: #ffffff;
    width: 750rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
    .header {
      padding: 24rpx 32rpx;
      background-color: #fff;
    }
    .imgs {
      padding: 16rpx 32rpx 32rpx;
      min-height: 120rpx;
    }
  }
}
.fee {
  padding: 24rpx 32rpx;
  width: 750rpx;
  background-color: #ffffff;
  margin: 20rpx 0;
}
.order-footer {
  padding: 0rpx 32rpx;
  width: 750rpx;
  background-color: #ffffff;
  .order-row {
    padding: 24rpx 0;
    border-bottom: 2rpx solid #d8d8d8;
    .label {
      font-size: 28rpx;
      color: #000000;
    }
    .value {
      font-size: 28rpx;
      color: #333333;
    }
  }
}
.button {
  height: 88rpx;
  width: 220rpx;
  background-color: #fff;
  line-height: 84rpx;
  border: 1px solid #007aff;
  border-radius: 10rpx;
  text-align: center;
  font-size: 30rpx;
  color: #007aff;
}
.button-item {
  padding: 0rpx 24rpx;
  height: 42rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #007aff;
  border-radius: 20rpx;
  font-size: 26rpx;
  color: #ffffff;
}
</style>
