<template>
  <a-form
    label-align="left"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 18 }"
  >
    <div class="title">订单信息</div>
    <a-row>
      <a-col :span="8">
        <a-form-item
          label="订单号"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderInfo.orderId}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="车辆编号"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderInfo.bikeCode}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="运营区域"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderInfo.operate}}</span>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="8">
        <a-form-item
          label="订单来源"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderInfo.orderSource}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="租借方式"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderInfo.rentMethod}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="骑行状态"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderInfo.cyclingState}}</span>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="8">
        <a-form-item
          label="还车类型"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderInfo.returnCarType}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="开锁时间"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderInfo.unLockTime}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="锁车时间"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderInfo.lockTime}}</span>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="8">
        <a-form-item
          label="骑行时长"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderInfo.cyclingDuration}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <template #label>
            轨迹里程
            <a-tooltip title="由轨迹相加得出，有可能因为飘点导致和实际里程有差异">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <span>{{costInfo.orderInfo.trajectoryMileage}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <template #label>
            中控里程
            <a-tooltip title="由中控上传得出，有可能因为速度误差和实际里程有差异">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <span>{{costInfo.orderInfo.ecuMileage}}</span>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="8">
        <a-form-item
          label="创建时间"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderInfo.createTime}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="结束时间"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderInfo.endTime}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="订单备注"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderInfo.orderRemark}}</span>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="8">
        <a-form-item
          label="起始行政区域"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderInfo.startRegion}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="结束行政区域"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderInfo.endRegion}}</span>
        </a-form-item>
      </a-col>
    </a-row>
    <div class="title">用户信息</div>
    <a-row>
      <a-col :span="8">
        <a-form-item
          label="用户昵称"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.userInfo.userName}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="用户手机号"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.userInfo.phone}}</span>
        </a-form-item>
      </a-col>
    </a-row>
    <div class="title">借用信息</div>
    <a-row>
      <a-col :span="8">
        <a-form-item
          label="用户借车坐标"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.borrowingInfo.borrowCarCoordinate}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="借用站点"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.borrowingInfo.borrowSite}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="借用地址"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.borrowingInfo.borrowAddress}}</span>
        </a-form-item>
      </a-col>
    </a-row>
    <div class="title">归还信息</div>
    <a-row>
      <a-col :span="8">
        <a-form-item
          label="用户还车坐标"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.returnInfo.returnCarCoordinate}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="归还站点"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.returnInfo.returnSite}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="归还地址"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.returnInfo.returnAddress}}</span>
        </a-form-item>
      </a-col>
    </a-row>
    <div class="title">费用信息</div>
    <a-row>
      <a-col :span="24">
        <a-form-item
          label="订单金额"
          :label-col="{ span: 2 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderDetailInfo.totalAmount}} 元
            <span class="spanCss">
              = 起步费用：{{costInfo.orderDetailInfo.startupCost}} 元 + 时长费用：{{costInfo.orderDetailInfo.durationCost}} 元
              + 调度费：{{costInfo.orderDetailInfo.dispatchFee}} 元
            </span>
          </span>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <a-form-item
          label="调度费用"
          :label-col="{ span: 2 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderDetailInfo.dispatchFee}} 元
            <span class="spanCss">
              = 运营区外调度费用：{{costInfo.orderDetailInfo.dispatchFeeOutOperateArea}} 元 + 禁停区调度费：{{costInfo.orderDetailInfo.dispatchFeeBanArea}} 元
              + 停车区外调度费：{{costInfo.orderDetailInfo.parkingAreaOutDispatchFee}} 元 + 头盔管理费：{{costInfo.orderDetailInfo.helmetManagementFee}} 元
              + 不规范停车费：{{costInfo.orderDetailInfo.improperParkFee}} 元
            </span>
          </span>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <a-form-item
          label="实付金额"
          :label-col="{ span: 2 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.orderDetailInfo.actualAmount}} 元
            <span class="spanCss">
              = 订单金额：{{costInfo.orderDetailInfo.totalAmount}} 元 - 优惠金额：{{costInfo.orderDetailInfo.discountAmount}} 元
              - 优惠券抵扣金额：{{costInfo.orderDetailInfo.couponAmount}} 元 - 骑行卡抵扣金额：{{costInfo.orderDetailInfo.cyclingCardAmount}} 元
            </span>
          </span>
        </a-form-item>
      </a-col>
    </a-row>
    <div class="title">支付信息</div>
    <a-row>
      <a-col :span="8">
        <a-form-item
          label="实付金额"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.payInfo.actualAmount}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="优惠方式"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.payInfo.discountMethod}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="总优惠金额"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.payInfo.discountAmount}}</span>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="8">
        <a-form-item
          label="支付方式"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.payInfo.payMethod}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="付款时间"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.payInfo.payTime}}</span>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="交易号"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>{{costInfo.payInfo.tradingNumber}}</span>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup>
import { ref, defineProps, onMounted } from 'vue'
import { callPayment } from '@/apis/call.js'
import { message } from 'ant-design-vue'
import _ from 'lodash'

const props = defineProps({
  orderParams: {
    type: Object,
    required: true
  }
});

const costInfo = ref({
  orderInfo: {
    orderId: "",
    bikeCode: "",
    operate: "",
    orderSource: "",
    rentMethod: "",
    cyclingState: "",
    returnCarType: "",
    unLockTime: "",
    lockTime: "",
    cyclingDuration: "",
    trajectoryMileage: "",
    ecuMileage: "",
    createTime: "",
    endTime: "",
    orderRemark: "",
    startRegion: "",
    endRegion: ""
  },
  userInfo: {
    userName: "",
    phone: ""
  },
  borrowingInfo: {
    borrowCarCoordinate: "",
    borrowSite: "",
    borrowAddress: ""
  },
  returnInfo: {
    returnCarCoordinate: "",
    returnSite: "",
    returnAddress: ""
  },
  orderDetailInfo: {
    totalAmount: 0,
    startupCost: 0,
    durationCost: 0,
    dispatchFee: 0,
    dispatchFeeOutOperateArea: 0,
    dispatchFeeBanArea: 0,
    parkingAreaOutDispatchFee: 0,
    helmetManagementFee: 0,
    improperParkFee: 0,
    actualAmount: 0,
    discountAmount: 0,
    couponAmount: 0,
    cyclingCardAmount: 0,
    applyRefundAmount: 0,
  },
  payInfo: {
    actualAmount: 0,
    discountMethod: "",
    discountAmount: 0,
    payMethod: "",
    payTime: "",
    tradingNumber: ""
  },
})

onMounted(() => {
  if (props.orderParams['orderNumber']) {
    callPayment("/wxPayment/refundApplyOrderDetail/" + props.orderParams['orderNumber'], {}, "get").then(res => {
      if (res.code == 200) {
        costInfo.value = res.data
      } else {
        message.error(res.message)
      }
    })
  }
})

</script>

<style scoped>
.title {
  display: flex;
  flex-basis: 100%;
  margin: 6px 0;
  font-weight: 700;
  font-size: 16px;
}

.ant-form-item {
  margin-bottom: 2px;
}

.spanCss {
  height: 32px;
  margin-left: 8px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 32px;
  background: #f2f6fc;
  border-radius: 4px;
}
</style>