<template>
  <div class="div_page_bg">
    <div class="div_location">
      <img src="../../assets/images/icon_location.png" width="25px" height="25px"/>
      <div class="div_location_content">
        <div>
          <span class="span_value">{{recordDetail.ownerName}}</span>
          <span class="span_value" style="margin-left: 5px">{{recordDetail.ownerPhone}}</span>
        </div>
        <span class="span_value">{{recordDetail.location}}</span>
      </div>
    </div>
    <div class="div_pay_detail">
      <span class="span_pay" style="margin-bottom: 10px">费用明细</span>
      <charge-record-pay-item v-for="(data,index) in billHistoryDetailList" :key="index" :pay-model="data"></charge-record-pay-item>
      <div class="div_total_pay">
        <span class="span_total_pay">合计：¥ {{recordDetail.receivableMoney}}</span>
      </div>
    </div>
    <div class="div_pay_info">
      <span class="span_pay" style="margin-bottom: 10px">支付信息</span>
      <div class="div_pay_info_item">
        <span class="span_value" style="width: 80px">支付方式:</span>
        <span class="span_value">{{recordDetail.paymentTypeList[0].paymentType}}</span>
      </div>
      <div class="div_pay_info_item">
        <span class="span_value" style="width: 80px">支付时间:</span>
        <span class="span_value">{{recordDetail.receivableTime}}</span>
      </div>
      <div class="div_pay_info_item">
        <span class="span_value" style="width: 80px">收款人:</span>
        <span class="span_value">{{userName}}</span>
      </div>


    </div>
    <loading v-model="loading" text="加载中"></loading>
  </div>
</template>

<script>
  import ChargeRecordPayItem from "../../components/mobileCharge/chargeRecordPayItem";
  import {getOrderRhDetail} from "../../service/getData";
  export default {
    name: "chargeRecordDetail",
    components: {ChargeRecordPayItem},
    data(){
      return{
        rhId:'',
        userName:localStorage.getItem("userName"),
        recordDetail:{},
        loading:false,
        billHistoryDetailList:[]
      }
    },
    created(){
      try {
        EbeiPlugins.setNavigationItemTitle("记录详情");
        EbeiPlugins.cleanNavigationRightButton();
      }
      catch (e) {

      }
      this.rhId = this.$route.query.rhId;
      this.getOrderRhDetailJs();
    },
    methods:{
      getOrderRhDetailJs(){
        let that = this;
        let params = {
          rhId:this.rhId
        }
        this.loading = true;
        getOrderRhDetail(params).then(res => {
          console.log(res)
          that.loading = false;
          if (res.status === 200) {
            that.recordDetail = res.data;
            that.billHistoryDetailList = that.recordDetail.billHistoryDetailList;
          } else {
            that.showTips(res.message)
          }
        }).catch(error => {
          that.loading = false;
        })
      },
      showTips (tip) {
        this.$vux.toast.show({
          type: 'text',
          text: tip,
          position: 'bottom'
        })
      }
    }
  }
</script>

<style scoped>
  .div_page_bg{
    width: 100%;
    height: 100vh;
    background-color: #F9F9F9;
    overflow-y: auto;
  }
  .div_location{
    padding: 0 20px;
    background-color: white;
    display: flex;
    align-items: center;
    height: 80px;
  }
  .div_location_content{
    display: flex;
    flex-direction: column;
    margin-left: 10px;
  }
  .div_pay_detail{
    margin-top: 10px;
    padding: 20px;
    background-color: white;
  }
  .span_pay{
    font-size: 16px;
    font-weight: bold;
    color: #000000;
  }
  .div_total_pay{
    display: flex;
    flex-direction: row-reverse;
    margin: 10px 0 0;
    font-weight: bold;
  }
  .span_total_pay{
    font-size: 14px;
    color: #57A3FF;
  }
  .line_h{
    width: 100%;
    background-color: #e8e8e8;
    height: 1px;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
  }
  .div_pay_info{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    padding: 20px;
    background-color: white;
  }
  .div_pay_info_item{
    display: flex;
    flex-direction: row;
    margin-top: 2px;
  }
  .span_value{
    color: #333333;
    font-size: 12px;
  }
</style>
