<template>
  <div class="rechargeDetail">
    <div class="user_head">
      <img src="../../assets/image/payrollback_left@2x.png" class="leftIcon" alt="" @click="$router.replace('/recharge/list')">
      <span>
        充值订单详情
      </span>
    </div>
    <div class="detail social-detail white-box" style="color:#333">
      <h6 class="d-flex justify-content-between align-items-center pb-2" style=" font-size: 1.5rem;">
          订单编号：
          <label  style=" font-size: 1.3rem;" class="m-0 p-0">{{this.refill_order_sn}}</label>
      </h6>
      <h6 class="d-flex justify-content-between align-items-center two-h6" style=" font-size: 1.5rem;">
        下单时间：
        <label class="small" style=" font-size: 1.3rem;">{{this.order_time}}</label>
      </h6>
      <h6 class="d-flex justify-content-between align-items-center two-h6" style=" font-size: 1.5rem;">
          用户姓名：
          <label class="small" style=" font-size: 1.3rem;">{{realname}}</label>
      </h6>
      <h6 class="d-flex justify-content-between align-items-center two-h6" style=" font-size: 1.5rem;">
        充值类别：
        <label class="small" style=" font-size: 1.3rem;" v-if="card_type == 'PetroChinaCard'">中石油</label>
        <label class="small" style=" font-size: 1.3rem;" v-if="card_type == 'SinopecCard'">中石化</label>
        <label class="small" style=" font-size: 1.3rem;" v-if="card_type == 'ChinaMobileCard'">中国移动</label>
        <label class="small" style=" font-size: 1.3rem;" v-if="card_type == 'ChinaUnicomCard'">中国联通</label>
        <label class="small" style=" font-size: 1.3rem;" v-if="card_type == 'ChinaTelecomCard'">中国电信</label>
      </h6>
      <h6 class="d-flex justify-content-between align-items-center two-h6" style=" font-size: 1.5rem;">
          充值号码：
          <label class="small" style=" font-size: 1.3rem;">{{this.card_no}}</label>
      </h6>
      <hr>
      <h6 class="d-block badges pb-3 text-right"  style=" font-size: 1.3rem;color: #333;">
        应付金额：&yen;{{refill_amount}}
      </h6>
      <h6 class="d-block badges pb-3 text-right"  style=" font-size: 1.3rem;color: #333;">
        实付款：<span style="color: #EC2C2C">&yen;{{order_price}}</span>
      </h6>
    </div>
    <div class="bottom-twobtn">
      <button type="button" class="button-1" @click="gopay" v-if="!isShow">
          <img class="button-2-img" src="../../assets/image/payFoot@2x.png" alt="">
          去缴费
      </button>
      <button type="button" class="button-2" @click="cancel" v-if="!isShow">
          取消订单
      </button>
    </div>
  </div>
</template>

<script>
import Http from "../../extend/Http";
import {Message} from "element-ui";
export default {
  name: 'rechargeDetail',
  data() {
    return {
      // id
      id: '',
      // 充值卡号
      card_no:'',
      // 订单状态文本
      order_state_text: '',
      // 支付状态文本
      pay_status_text: '',
      // 下单时间
      order_time: '',
      // 订单号
      refill_order_sn: '',
      // 订单金额
      refill_amount: '',
      // 实付金额
      order_price: '',
      // 卡类型
      card_type: '',
      realname: localStorage.getItem('realname') || '',
      isShow: false
    }
  },
  created() {
    this.RechargeOrderDetail()
  },
  methods: {
    async RechargeOrderDetail() {
      let res = await Http.getInstance().RechargeOrderDetail({
        order_id: this.$route.params["id"] || localStorage.getItem('rechageId'),
      });
      console.log('订单详情', res);
      if (res && res.code == 1) {
        this.refill_order_sn = res.data.refill_order_sn
        this.order_state_text = res.data.order_state_text
        this.order_time = res.data.order_time
        this.card_no = res.data.card_no
        this.refill_amount = res.data.refill_amount
        this.order_price = res.data.order_price
        this.card_type = res.data.card_type
        this.id = res.data.id
      }
    },
    // 去缴费
    async gopay(){
      let res = await Http.getInstance().RechargeOrder({
        cardno: this.card_no,
        amount: this.refill_amount
      });
      console.log('石化充值', res);
      if (res && res.msg == '请求成功') {
        localStorage.setItem('order_paying', JSON.stringify(res.data));
        this.$router.replace({
          name: 'opayment',
          params: {
            order_sn: res.data.order_sn,
            type: '1',
            recharfe: 'false'
          }
        });
      }
    },
    // 取消订单
    async cancel() {
      let res = await Http.getInstance().RechargecancelOrder({
        order_id: this.id || localStorage.getItem('rechageId'),
       });
       console.log('取消订单', res);
      if(res && res.code == 1){
        Message({
            message: '订单已取消', duration: 2000, type: "success"
        });
        localStorage.removeItem('rechageId')
        setTimeout(() => {
          this.$router.replace('/recharge/list')
        },1000)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 顶部导航
.user_head{
    text-align: center;
    font-size: 2rem;
    // font-family: 'PingFang SC';
    padding-bottom: 1.667rem;
    padding-top: 1rem;
    // font-weight: bold;
    line-height: 1.5rem;
    background-color: #fff;
    .leftIcon{
        position: absolute;
        left: 1.667rem;
        top: 1.4rem;
        width: 0.667rem;
    }
    span {
        vertical-align: middle;
        color: #333;
    }
}
.rechargeDetail {
  position: absolute;
  width: 100%;
  height: 100%;
  font-family: "HiraginoSansGB";
  background: #f0f0f0;
  padding-bottom: 5.5rem;
}
.white-box{
    background: white;
}
hr {
    margin: 0.5rem 0;
}
// 间距
h6 {
    line-height: 1.5;
}
.two-h6{
    // color: #666666;
    color: #333333;
}
.two-li{
    // color: #999999;
    color: #333;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    // padding-right: 1.5rem;
}
.detail {
    padding: 1.2rem;
    padding-bottom: 0;
    font-size: 1.5rem;
    margin-top: 1rem;
}
// 底部按钮
.bottom-twobtn{
    width: 100%;
    padding-left: 0 !important;
    position: fixed;
    bottom: 0;
    // height: 4rem;
    height: 5rem;
    // margin-top: 1.2rem;
    .button-1{
        width: 50%;
        height: 100%;
        border: none;
        background: #4FDCA2;
        color: #ffffff;
        font-size: 1.5rem;
        .button-2-img{
            width: 1.5rem;
        }
    }
    .button-2{
        width: 50%;
        height: 100%;
        border: none;
        background: #fff;
        color: #7D7D7D;
        font-size: 1.5rem;
    }
}
</style>