<template>
  <view>
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="订单确认"></uni-nav-bar>
    <view class="address-area">
      <view class="header">
        <image class="img" src="/static/imgs/order/customer-default.png"></image>
        <text class="text">{{ orderInfo.customerEnterpriseName }}</text>
      </view>
      <!-- 送货地址 -->
      <view class="address-content" v-if="deliveryAddress.addressId" @click="go2('address-manage', { operation: 'select' })">
        <view class="left">
          <image style="width: 66rpx; height: 66rpx" src="/static/imgs/order/address-icon.png"></image>
          <text style="font-size: 22rpx; margin-top: 8rpx; transform: scale(0.8)">送货至</text>
        </view>
        <view class="center">
          <text style="font-size: 30rpx; font-weight: 600">{{ `${deliveryAddress.receiver} ${deliveryAddress.receiverMobile}` }}</text>
          <text style="font-size: 28rpx; font-weight: 500; word-break: break-all; margin-top: 10rpx; line-height: 1.2">
            {{
              `${deliveryAddress.provinceName}${deliveryAddress.cityName}${deliveryAddress.districtName}${deliveryAddress.streetName}${deliveryAddress.detail}`
            }}
          </text>
        </view>
        <image class="right" src="/static/imgs/order/edit-address-icon.png"></image>
      </view>
      <view class="address-content" v-else @click="go2('address-manage', { operation: 'select' })">
        <view class="left">
          <image style="width: 66rpx; height: 66rpx" src="/static/imgs/order/address-icon.png"></image>
        </view>
        <view class="center">
          <text style="font-size: 30rpx; font-weight: 400">请添加收货地址</text>
        </view>
        <image class="right" src="/static/imgs/order/right-arrow.png"></image>
      </view>
    </view>
    <!-- 商品信息区域 -->
    <view class="order-area">
      <view v-for="item in orderInfo.supplierOrder" :key="item.supplierOrderId">
        <view class="header">
          <text style="font-size: 32rpx; font-weight: 600">{{ item.supplierEnterpriseName }}</text>
        </view>
        <view v-for="order in item.orderItems" :key="order.supplierOderItemId">
          <view class="order-header">
            <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">
            <text>重量(吨):</text>
            <text>{{ order.buyTon }}</text>
          </view>
          <view class="order-row">
            <text>单价(元/吨):</text>
            <text>{{ order.unitPrice }}</text>
          </view>
          <view class="order-row">
            <text>小计(元):</text>
            <text>{{ order.subtotal }}</text>
          </view>
          <view class="order-row">
            <qn-easyinput
              style="background-color: #f7f8fa; border-radius: 10rpx; padding: 8rpx 0rpx; font-size: 28rpx; color: #888888; height: 88rpx"
              v-model="order.remark"
              placeholder="请输入备注"
              :inputBorder="false"
              :maxlength="100"
            ></qn-easyinput>
          </view>
        </view>
      </view>
    </view>
    <!-- 送货时间 -->
    <view class="timer-area">
      <text style="font-size: 30rpx; color: #000000">送货时间:</text>
      <qn-datetime-picker v-model="orderInfo.receivedTime" type="datetime" :border="false"></qn-datetime-picker>
    </view>
    <!-- 支付方式 -->
    <view class="pay-area">
      <view class="pay-item">
        <view class="left">
          <image class="img" src="/static/imgs/order/month-pay-icon.png"></image>
          <text style="font-size: 30rpx; color: #000000; margin: 0 16rpx">使用月结额度</text>
          <text v-if="payMap['month'] != null" style="font-size: 28rpx; color: #888888">剩余额度: {{ payMap['month'].availableCreditLine }}</text>
        </view>
        <image
          v-if="payMap['month'] != null && payMap['month'].availableCreditLine > orderInfo.totalOfferPrice"
          @click="selectPayMethod('month')"
          class="img"
          :src="currentPayType == 'month' ? '/static/imgs/order/selected-icon.png' : '/static/imgs/order/select-icon.png'"
        ></image>
        <text v-if="payMap['month'] == null" style="font-size: 28rpx; color: #888888">待申请</text>
        <text v-if="payMap['month'] != null && payMap['month'].availableCreditLine < orderInfo.totalOfferPrice" style="font-size: 28rpx; color: #888888">
          余额不足
        </text>
      </view>
      <view class="pay-item" style="border: none">
        <view class="left">
          <image class="img" src="/static/imgs/order/fs-pay-icon.png"></image>
          <text style="font-size: 30rpx; color: #000000; margin: 0 16rpx">使用飞算资金</text>
          <text v-if="payMap['fs'] != null" style="font-size: 28rpx; color: #888888">剩余额度: {{ payMap['fs'].availableCreditLine }}</text>
        </view>
        <image
          v-if="payMap['fs'] != null && payMap['fs'].availableCreditLine > orderInfo.totalOfferPrice"
          @click="selectPayMethod('fs')"
          class="img"
          :src="currentPayType == 'fs' ? '/static/imgs/order/selected-icon.png' : '/static/imgs/order/select-icon.png'"
        ></image>
        <text v-if="payMap['fs'] == null" style="font-size: 28rpx; color: #888888">待申请</text>
        <text v-if="payMap['fs'] != null && payMap['fs'].availableCreditLine < orderInfo.totalOfferPrice" style="font-size: 28rpx; color: #888888">
          余额不足
        </text>
      </view>
    </view>
    <qn-footer fixed height="120rpx">
      <view class="button-area">
        <view class="text-line">
          <text style="font-size: 28rpx">应付:</text>
          <text style="font-size: 40rpx; color: #f5222d">￥{{ orderInfo.totalOfferPrice }}</text>
        </view>
        <view class="button" @click="submitOrder">确认下单</view>
      </view>
    </qn-footer>
  </view>
</template>

<script>
import { go2, back, getCache } from '@/utils/hook.js'
import { getPreOrderInfo, getDefaultAddress, submitClientOrder } from '@/apis/orderApi'
import { getFsCredit, getMonthCredit } from '@/apis/commonApi'
import { isObject } from '@/utils/is'

export default {
  data() {
    return {
      orderInfo: {
        customerEnterpriseName: '',
        receivedTime: null
      },
      deliveryAddress: {},
      currentPayType: null,
      payMap: {
        month: {
          availableCreditLine: 0,
          value: 2
        },
        fs: {
          availableCreditLine: 0,
          value: 4
        }
      },
      loading: false
    }
  },
  onLoad(option) {
    if (option.orderId) {
      getPreOrderInfo({
        customerOrderId: option.orderId
      }).then((res) => {
        if (res) {
          this.orderInfo = res
        }
      })
    } else {
      uni.showToast({
        title: '订单信息错误',
        icon: 'error',
        success: () => {
          setTimeout(() => {
            back()
          }, 2000)
        }
      })
    }
  },
  created() {
    this.init()
  },
  onShow() {
    let address = getCache('address')
    if (address) {
      this.deliveryAddress = address
      this.deliveryAddress.addressId = address.id
    }
  },
  methods: {
    go2,
    back,
    selectPayMethod(type) {
      this.currentPayType = type
    },
    submitOrder() {
      if (this.currentPayType == null) {
        uni.showToast({
          title: '请选择支付方式',
          icon: 'none'
        })
        return
      }
      if (this.loading) {
        return
      }
      this.loading = true
      let itemsRemarkList = []
      // 拼接订单信息
      for (let i = 0; i < this.orderInfo.supplierOrder.length; i++) {
        this.orderInfo.supplierOrder[i].orderItems.forEach((item) => {
          itemsRemarkList.push({ customerOderItemId: item.customerOderItemId, remark: item.remark })
        })
      }
      submitClientOrder({
        deliveryAddress: this.deliveryAddress,
        itemsRemarkList,
        orderId: this.orderInfo.orderId,
        paymentMethod: this.payMap[this.currentPayType].value,
        receivedTime: this.orderInfo.receivedTime
      })
        .then((res) => {
          if (res) {
            uni.showToast({
              title: '前往签约',
              icon: 'success',
              success: () => {
                setTimeout(() => {
                  window.location.href = res.signUrl
                }, 1000)
              }
            })
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    init() {
      // 获取月结额度
      getMonthCredit({
        enterpriseId: this.$store.state.companyInfo.id,
        supplierId: this.$store.state.supplierId
      }).then((res) => {
        if (res) {
          if (res.supplierCredit !== null) {
            this.payMap['month'].availableCreditLine = res.supplierCredit
          } else {
            this.payMap['month'] = null
          }
        } else {
          this.payMap['month'] = null
        }
      })
      // 获取飞算额度
      getFsCredit({
        enterpriseId: this.$store.state.companyInfo.id
      }).then((res) => {
        if (isObject(res)) {
          this.payMap['fs'].availableCreditLine = res.availableCreditLine
        } else {
          this.payMap['fs'] = null
        }
      })
      // 获取默认地址
      getDefaultAddress({ enterpriseId: this.$store.state.companyInfo.id }).then((res) => {
        if (res) {
          this.deliveryAddress = res
          this.deliveryAddress.addressId = res.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.address-area {
  width: 750rpx;
  padding: 0 32rpx;
  background-color: #fff;
  .header {
    width: 686rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 24rpx 0 40rpx;
    border-bottom: 2rpx solid #dddddd;
    .img {
      width: 100rpx;
      height: 100rpx;
      flex-grow: 0;
      flex-shrink: 0;
      margin-right: 20rpx;
    }
    .text {
      font-size: 30rpx;
      color: #333333;
      font-weight: 600;
    }
  }
  .address-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 0;
    .left {
      width: 72rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      flex-grow: 0;
      flex-shrink: 0;
    }
    .center {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      flex-grow: 1;
      flex-shrink: 1;
      margin: 0 38rpx 0 24rpx;
    }
    .right {
      width: 40rpx;
      height: 40rpx;
      flex-grow: 0;
      flex-shrink: 0;
    }
  }
}
.order-area {
  width: 750rpx;
  background-color: #fff;
  padding-bottom: 14rpx;
  .header {
    width: 750rpx;
    height: 88rpx;
    background-color: #e5f1ff;
    padding: 24rpx 32rpx;
  }
  .order-header {
    width: 750rpx;
    padding: 24rpx 32rpx;
    border-bottom: 2rpx dashed #d8d8d8;
    margin-bottom: 20rpx;
  }
  .order-row {
    width: 750rpx;
    padding: 0 32rpx;
    margin-bottom: 18rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    color: #555555;
  }
}
.timer-area {
  margin-top: 20rpx;
  width: 750rpx;
  padding: 0rpx 32rpx;
  height: 88rpx;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: right;
}
.pay-area {
  background-color: #fff;
  margin-top: 20rpx;
  .pay-item {
    width: 750rpx;
    padding: 20rpx 32rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2rpx solid #d8d8d8;
    .left {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
    }
    .img {
      width: 40rpx;
      height: 40rpx;
      flex-grow: 0;
      flex-shrink: 0;
    }
  }
}
.button-area {
  width: 750rpx;
  height: 88rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  .text-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .button {
    width: 320rpx;
    height: 88rpx;
    border-radius: 48rpx;
    background-color: #007aff;
    font-size: 36rpx;
    font-weight: 500;
    color: #fff;
    text-align: center;
    line-height: 88rpx;
  }
}
</style>
