<template>
  <div v-loading="loading">
    <div class="heior_box">
      <div class="search-box">
        <el-input v-model="searchModel.keyWord" placeholder="请输入订单号/订单名称" clearable size="small">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
    </div>
    <el-table :data="retData.Data" size="medium" :height="$getHeight(150)" row-key="Id" border>
      <el-table-column prop="OrderNo" label="订单号" width="180"></el-table-column>
      <el-table-column prop="CourseName" label="课程" width="180"></el-table-column>
      <el-table-column prop="UserName" label="用户" width="180"></el-table-column>
      <el-table-column prop="PaymentAmount" label="金额"></el-table-column>
      <el-table-column prop="PayType" label="支付类型">
        <template slot-scope="scope">
          <el-rate disabled v-model="scope.row.Star"></el-rate>
        </template>
      </el-table-column>
      <el-table-column prop="OrderState" label="订单状态"></el-table-column>
      <el-table-column prop="OrderState" label="过期日期"></el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        v-if="retData.Data.length>0"
        @current-change="get"
        :page-size="10"
        layout="total,prev, pager, next"
        :total="retData.TotalCount"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "treeTable",
  components: {   
  },
  data() {
    return {
      loading: false,
      retData: { TotalCount: 0, Data: [] },
      searchModel: {
        PageIndex: 1,
        keyWord: "",
        Status: 0,
        PayType: 0,
        Btime: "",
        Etime: ""
      },
      formatterTime(data) {
        return data;
      }
    };
  },
  created() {
    this.get();
  },
  methods: {
    search(){
      this.searchModel.PageIndex=1;
      this.get();
    },
    get() {
      this.$api.get("courseOrder/v1/page", this.searchModel).then(res => {
        this.retData = res;
      });
    }
  }
};
</script>
<style scoped>
</style>
