<template>
  <view class="itemized-bills">
    <w-navbar title="账单详情" />
    <view class="content-wrap" v-for="(item, index) in bills" :key="index">
      <view class="header">
        <view class="header-title">结算单号：{{ item.statementNumber }}</view>
      </view>
      <view class="body">
        <view class="item u-flex u-row-between">
          <view>结算类型：{{ item.businessSettlementTypeText }}</view>
          <view>结算金额：{{ "￥" + item.settlementAmount }}</view>
        </view>

        <view class="order-item" v-if="item.order">
          <u-read-more
            :toggle="true"
            :shadow-style="shadowStyle"
            :text-indent="0"
            close-text="查看更多"
            open-text="点击收起"
            show-height="72"
          >
            <view class="order-item-row u-flex">
              <view class="order-item-label">工单编号：</view>
              <view class="order-item-value">{{ item.order.orderNumber }}</view>
            </view>
            <view class="order-item-row u-flex">
              <view class="order-item-label">合作厂商：</view>
              <view class="order-item-value">{{ item.order.partnerCompanyName }}</view>
            </view>
            <view class="order-item-row u-flex">
              <view class="order-item-label">
                <view class="brand-text">品牌：</view>
              </view>
              <view class="order-item-value">{{ item.order.lianbaoBrandName }}</view>
            </view>
            <view class="order-item-row u-flex">
              <view class="order-item-label">客户信息：</view>
              <view class="order-item-value">{{ item.order.contactName }}</view>
            </view>
            <view class="order-item-row u-flex">
              <view class="order-item-label">联系方式：</view>
              <view class="order-item-value">{{ item.order.contactMobilephone }}</view>
            </view>
            <view class="order-item-row u-flex u-col-start">
              <view class="order-item-label">客户地址：</view>
              <view class="order-item-value">{{ item.order.contactFullAddress }}</view>
            </view>
          </u-read-more>
        </view>
      </view>
    </view>
    <u-gap height="60"></u-gap>
  </view>
</template>

<script>
export default {
  data() {
    return {
      payableRecordId: "",
      bills: [],
      shadowStyle: {
        backgroundImage: "none",
        paddingTop: "0",
        marginTop: "20rpx",
      },
    };
  },
  computed: {},
  onLoad(e) {
    getApp().trackPage("账单详情页");
    if (e && e.payableRecordId) {
      this.payableRecordId = e.payableRecordId;
      this.loadItemizedBills();
    }
  },
  methods: {
    async loadItemizedBills() {
      let res = await this.$u.api.listStatementDetails({payableRecordId: this.payableRecordId});
      if (res && res.code == 200 && res.data) {
        this.bills = res.data || []
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.itemized-bills {
  height: 100vh;
  overflow-y: auto;
  background-color: #f4f5f7;

  .content-wrap {
    margin: 20rpx 30rpx;
    padding: 0 30rpx;
    background: #ffffff;
    border-radius: 12px;
    display: flow-root;

    .header {
      padding: 30rpx 0;
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      line-height: 32rpx;

      .header-title {
        height: 32rpx;
        border-left: 4rpx solid #2272ff;
        border-top-left-radius: 2rpx;
        border-bottom-left-radius: 2rpx;
        padding-left: 20rpx;
      }
    }

    .body {
      border-top: 2rpx solid #f4f5f7;
      padding-top: 30rpx;

      .item {
        margin-bottom: 38rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
      }

      .order-item {
        margin-bottom: 30rpx;
        background: #f4f5f7;
        padding: 0 28rpx;

        .order-item-row {
          line-height: 40rpx;
          margin-top: 28rpx;
          font-size: 26rpx;
          font-weight: 500;

          .order-item-label {
            width: 130rpx;
            color: #666666;
            text-align: justify; 
            text-align-last: justify; 
            text-justify: inter-ideograph;
            align-self: flex-start;

            .brand-text {
                text-align: justify;
            }
          }
          .order-item-value {
            width: 444rpx;
            color: #333333;
          }
          
        }
      }
    }
  }
}
</style>
