<template>
  <div>
    <el-table v-loading="orderLoading" :data="orderList"> 
      <el-table-column label="订单编号" align="center"  prop="orderNo"></el-table-column>
      <el-table-column label="商品数量" align="center" prop="goodsNum"/>
      <el-table-column label="金额" align="center" prop="amount"/>
      <el-table-column label="城市" align="center" prop=""/>
      <el-table-column label="店铺" align="center" prop=""/>
      <el-table-column label="创建时间" align="center" prop="createdAt"/>
      <el-table-column label="订单状态" align="center" prop="state">
        <template slot-scope="scope">{{formatterState(scope.row.state)}}</template>
      </el-table-column>
    </el-table> 
    <pagination
      v-show="orderTotal > 0"
      :total="orderTotal"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
export default {
  name: "orderTable", 
  props: ['orderList','orderTotal','orderLoading'],
  data() {
    return {
      pageNum: 1,
      pageSize: 10
    }
  },
  methods: {
    getList(){
      this.$emit("getOrderList",this.pageNum,this.pageSize)
    },
    formatterState(state){
      if(state == 0){
        return "创建未校验";
      }else if(state == 1){
        return "未支付";
      }else if(state == 2){
        return "已支付";
      }else if(state == 3){
        return "支付制作中";
      }else if(state == 4){
        return "制作完成未取";
      }else if(state == 5){
        return "取餐中";
      }else if(state == 6){
        return "正常完成";
      }else if(state == 7){
       return "未支付取消";
      }else if(state == 8){
       return "支付后制作前取消";
      }else if(state == 9){
        return "制作中取消";
      }else if(state == 10){
        return "制作完成取消";        
      }else if(state == 11){
        return "已退款";  
      }else if(state == 12){
        return "部分退款";  
      }else if(state == 13){
        return "待取超时";  
      }else if(state == 50){
        return "其他人工干预状态";  
      }
    },
  }
}
</script>