<template>
  <div id="root">
    <span>当前订单由以下收费单组成</span>
    <div v-for="bill in list.billOrderList" class="content-div">
      <div class="title-div">
        <span>收费组名称 {{ bill.billName }}</span>
        <span style="margin-left: 50px;">收费组编号 {{ bill.tpBillId }}</span>
      </div>
      <div v-for="item in bill.billInvoiceList" class="table-div">
        <table>
          <tr>
            <td class="div-td">收费单号</td>
            <td class="div-td">收费单说明</td>
            <td class="div-td">金额（元）</td>
          </tr>
          <tr>
            <td class="div-td">{{ item.id }}</td>
            <td class="div-td">{{ item.billInvoiceExplain }}</td>
            <td class="div-td">{{ item.payPrice / 100 }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      orderNumber: '',
      list: [] // 数据
    }
  },
  mounted() {
    this.orderNumber = this.$route.query.id
    this.getData()
  },
  methods: {
    getData() {
      this.$store.dispatch('GetByOrderNumberBillInvoice', this.orderNumber).then((res) => {
        this.list = res.data
      }).catch(() => {
        console.log('GetByOrderNumberBillInvoice error')
      })
    }
  }
}
</script>

<style scoped>
#root {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}
.content-div {
  margin-top: 20px;
}
.div-td {
  border: 1px solid;
  width: 150px;
  text-align: center;
}
.title-div {
  display: flex;
}
</style>
