<template>
  <d2-container class="page">
    <el-tabs value="first">
      <el-tab-pane :label="title" name="first">
        <el-table
          v-loading="loading"
          :data="list"
          style="width: 100%">
          <el-table-column
            prop="bill_no"
            label="订单号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="bill_amount"
            label="缴费金额"
            width="100">
            <template slot-scope="scope">
              {{scope.row.bill_amount}} 元
            </template>
          </el-table-column>
          <el-table-column
            prop="bill_status"
            label="缴费状态">
          </el-table-column>
          <el-table-column
            prop="channel_type"
            label="缴费方式 ">
          </el-table-column>
          <el-table-column
            prop="bill_time"
            label="订单生成时间 ">
          </el-table-column>
          <el-table-column
            prop="reply_time"
            label="支付成功时间 "
            width="200">
          </el-table-column>
          
        </el-table>

      </el-tab-pane>
    </el-tabs>
  </d2-container>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  computed: {
    title: function() {
      return `您有 ${this.list.length} 条支付成功的订单`;
    },
     ...mapState({
      stdReg: state => state.enrol.StdReg,
    })
  },
  async mounted () {
    this.loading = true;
    let res = await this.$http.post(
    "/pay/payBillUnion/listByStd.htm",
    this.Qs.stringify({
        std_id: this.stdReg.id,
    }),
    this.$http.headers.FORM
    );
    // this.list = res.data.array;

    //过滤只显示缴费成功的数据
    let list_temp = [];
    
    res.data.array.forEach((item,idnex) =>{
      if(item.bill_status == '支付成功'){
        list_temp.push(item);
      }
    })
    this.list = list_temp;
    this.loading = false;

  },
  data() {
    return {
      loading: false,
      list:[]
    };
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/public.scss";
.page {
  .page__btn-group {
    color: $color-text-placehoder;
    font-size: 12px;
    margin-top: -10px;
    margin-bottom: 20px;
    span {
      color: $color-text-sub;
      &:hover {
        color: $color-text-main;
      }
    }
  }
}
</style>
