<template>
  <div class="cashier">
    <div class="payment-time">
      <div class="payment-number">￥{{ Number(orderData.realAmount).toFixed(2) }}</div>
      <div v-if="time !== 0" class="time flex jc ac">
        支付时间剩余：
        <van-count-down style="color: #999999" format="mm:ss" :time="time" />
      </div>
      <div style="color: #fe0505" class="time" v-else>支付已过期</div>
    </div>
    <div class="payment-method">
      <div @click="cardIndex = index" v-for="(item, index) in cardList" :key="index" class="payment-method-item flex bw ac">
        <span>企业{{ item.cardType ? '外请' : '自营' }}油卡支付（余额：{{ item.balance ? item.balance : 0 }}）</span>
        <van-icon :color="cardIndex == index ? '#ff6700' : '#C9C7C7'" name="success" />
      </div>
    </div>
    <detailsCard :title="'请提醒加油员使用  <span>“星油云站”</span> 进行订单核实'" :detailsList="detailsList"> </detailsCard>
    <div @click="goplay" :class="time == 0 ? 'debgcolor' : ''" class="payment-footer flex ac jc">立即支付</div>
  </div>
</template>

<script>
import detailsCard from './components/detailsCard.vue'
import oilOrderApi from '@/api/oil-order.js'

export default {
  components: {
    detailsCard
  },
  data() {
    return {
      cardIndex: 0,
      cardList: [],
      time: 600000,
      orderData: null,
      detailsCardTitle: {},
      detailsList: [
        [
          {
            lable: '订单编号：',
            value: '0101001001',
            valueStyle: {
              color: ''
            }
          }
        ],
        [
          {
            lable: '油站：',
            value: '壳牌加油站'
          },
          {
            lable: '油品油枪：',
            value: '0# 1号枪'
          },
          {
            lable: '加油升数：',
            value: '100L'
          }
        ],

        [
          {
            lable: '加油金额：',
            value: '￥581.00'
          },
          {
            lable: '星油优惠：',
            value: '-￥0.00',
            valueStyle: {
              color: '#FF0000'
            }
          },
          {
            lable: '优惠券：',
            value: '-￥1.00',
            valueStyle: {
              color: '#FF0000'
            }
          }
        ],
        [
          {
            lable: '合计：',
            value: '-￥1.00',
            valueStyle: {
              color: '#FF0000'
            }
          }
        ]
      ]
    }
  },
  created() {
    this.orderData = JSON.parse(this.$route.query.order)
    this.time = this.getCountDownTime(this.orderData.createTime)
    this.updateDetails()

    this.cardListFn()
  },
  methods: {
    cardListFn() {
      let networkId = this.$pinia.state.value.user.user?.networkId
      let company = this.orderData.companyAccounts
        ? this.orderData.companyAccounts
            .filter(item => {
              return item.companyId == networkId
            })
            .map(item => {
              item['cardType'] = 0
              return item
            })
        : []
      let other = this.orderData.otherAccounts
        ? this.orderData.otherAccounts
            .filter(item => {
              return item.companyId == networkId
            })
            .map(item => {
              item['cardType'] = 1
              return item
            })
        : []
      this.cardList = [...company, ...other]
    },
    updateDetails() {
      this.detailsList[0][0].value = this.orderData.orderSerialNumber || '暂无数据'
      this.detailsList[1][0].value = this.orderData.siteName || '暂无数据'
      this.detailsList[1][1].value = this.orderData.oilsCode + ' ' + this.orderData.oilsBar + '号枪' || '暂无数据'
      this.detailsList[1][2].value = Number(this.orderData.volume).toFixed(2) + 'L' || '暂无数据'
      this.detailsList[2][0].value =
        '￥' + Number(this.orderData.xoilAmountGun).toFixed(2) || '￥' + Number(this.orderData.baseRealPriceAmount).toFixed(2) || '暂无数据'
      this.detailsList[2][1].value =
        '-￥' + Number(this.orderData.oilDiscountAmount).toFixed(2) || '-￥' + Number(this.orderData.discountAmount).toFixed(2) || '暂无数据'
      this.detailsList[2][2].value = '-￥' + Number(this.orderData.couponDiscountAmount).toFixed(2) || '暂无数据'
      this.detailsList[3][0].value = '￥' + Number(this.orderData.realAmount).toFixed(2) || '暂无数据'
    },
    getCountDownTime(e) {
      let createTime = new Date(e)
      let nowTime = new Date()
      let difference = Date.parse(nowTime) - Date.parse(createTime)
      let a = 600000
      return difference > a ? 0 : a - difference
    },
    async goplay() {
      if (!this.time) {
        this.$notify('支付已过期')
        return
      }
      let payData = {
        ...this.cardList[this.cardIndex],
        orderSerialNumber: this.orderData.orderSerialNumber, //类型：String  必有字段  备注：订单编号
        payChannel: 'BALANCE_PAYMENT', //类型：String  必有字段  备注：支付渠道（BALANCE_PAYMENT：余额支付）
        orderMethod: 'CUSTOMER_ACTIVE', //类型：String  必有字段  备注：订单产生方式（CUSTOMER_ACTIVE：客户扫码支付：客户扫描油站二维码完成支付）
        createSource: 'XOIL_DRIVER_COMPANY_WECHAT_APPLET',
        oilCardType: -1
      }
      let orderType = false
      oilOrderApi
        .payOrder(payData)
        .then(res => {
          if (res.code == 20000) {
            orderType = true
          }
        })
        .finally(e => {
          this.$router.push({
            name: 'paymentl',
            query: {
              orderData: JSON.stringify(this.orderData),
              type: JSON.stringify(orderType)
            }
          })
        })
    }
  }
}
</script>

<style scoped>
.debgcolor {
  background-color: #999999 !important;
}
.payment-time {
  margin-top: 50px;
}

.payment-details-item-row-lable {
  color: #999999;
}

.payment-details-item-row {
  margin-top: 10px;
}

.payment-details-item:first-child {
  margin-top: 0Q;
}

.payment-details-item:last-child {
  border-bottom: dashed 0px #b9b9b9;
}

.payment-details-item {
  box-sizing: border-box;
  border-bottom: dashed 1px #b9b9b9;
  padding-bottom: 20px;
  margin-top: 20px;
}

.payment-details-container {
  width: 100%;
  margin-top: 30px;
  padding: 0 20px;
  box-sizing: border-box;
}

.payment-details-title span {
  color: #ff6700;
}

.payment-details-title {
  width: 690px;
  height: 82px;
  background: #f6f6f6;
  box-shadow: 5px 5px 0px 1px rgba(0, 0, 0, 0.0118);
  border-radius: 10px 10px 0px 0px;
  opacity: 1;
  font-size: 28px;
  font-family: PingFang SC-中等, PingFang SC;
  font-weight: normal;
  color: #333333;
}

.payment-method-item:last-child {
  border-bottom: 0px #f1f2f7;
  padding-bottom: 0px;
}

.payment-method-item:first-child {
  margin-top: 0px;
}

.payment-method-item {
  text-align: left;
  border-bottom: solid 2px #f1f2f7;
  padding-bottom: 20px;
  margin-top: 30px;

  color: #333333;
  font-size: 28px;
}

.time {
  font-size: 24px;
  font-family: PingFang SC-中等, PingFang SC;
  font-weight: normal;
  color: #999999;
}

.payment-number {
  font-size: 48px;
  font-family: PingFang SC-粗体, PingFang SC;
  font-weight: normal;
  color: #fe0505;
}

.payment-footer {
  width: 690px;
  height: 100px;
  background: #ff6700;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  color: #ffffff;
  font-size: 38px;
  box-sizing: border-box;
}

.payment-method {
  width: 690px;
  /* min-height: 346px; */
  background: #ffffff;
  box-shadow: 0px 3px 10px 1px rgba(221, 221, 221, 0.502);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  margin: 0 auto;
  margin-top: 45px;
  padding: 45px;
  box-sizing: border-box;
}

.payment-details {
  width: 690px;
  background: #ffffff;
  box-shadow: 0px 3px 10px 1px rgba(221, 221, 221, 0.502);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  margin: 0 auto;
  margin-top: 39px;
  margin-bottom: 150px;
}

.cashier {
  position: relative;
  /* padding-bottom: 80px; */
  font-size: 28px;
  height: 100%;
  overflow: auto;
}
</style>
