<template>
  <div class="page-body activeType">
    <div class="page-search row items-center flex q-col-gutter-md">
      <div class="col-3">
        <q-input @change="resetSearch" dense clearable filled v-model="msg.OrderNo" label="订单号" @clear="resetSearch"
          maxlength="20" />
      </div>
      <div class="col-3">
        <q-input @change="resetSearch" dense clearable filled v-model="msg.OrderId" label="订单Id" @clear="resetSearch"
          maxlength="20" />
      </div>
      <div class="col-3">
        <q-select @input="resetSearch" dense filled v-model="msg.OrderStatus" class="col-6" option-label="label"
          option-value="value" :options="statusOpts" emit-value map-options label="订单状态" />
      </div>
      <div class="col-3">
        <q-select @input="resetSearch" dense filled v-model="msg.OrderType" class="col-6" option-label="label"
          option-value="value" :options="typeOpts" emit-value map-options label="订单类型" />
      </div>
    </div>
    <div class="page-content">
      <OrderList :dataList="dataList" :loading="loading"></OrderList>
      <div>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
      </div>
    </div>
  </div>
</template>
<script>
  import {
    getCoffeeOrderList
  } from "../../../api/stuMan/index"
  import OrderList from '../../../components/sale/orderlistbycoffee.vue'
  export default {
    meta: {
      title: "咖啡订单列表"
    },
    components:{
      OrderList
    },
    data() {
      return {
        dataList: [],
        loading: false,
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          OrderNo: "",
          OrderId: "",
          OrderType: 0,
          OrderStatus: 0,
        },
        pageCount: 0,
        typeOpts: [{
            label: "不限",
            value: 0
          },
          {
            label: "咖啡券",
            value: 1
          },
          {
            label: "耗材类",
            value: 2
          },
          {
            label: "教师类",
            value: 3
          },
        ],
        statusOpts: [{
            label: "不限",
            value: 0
          },
          {
            label: "待付款",
            value: 1
          },
          {
            label: "已完成",
            value: 2
          },
        ],

        columns: [{
            name: "orderInfo",
            label: "订单信息",
            field: "",
            align: "left",
            style: 'width: 30%',
          },
          {
            name: "goodsInfo",
            label: "商品信息",
            align: "left",

          },
          {
            name: "priceInfo",
            label: "费用信息",
            align: "left",
          },
           {
            name: "Number",
            label: "数量",
            field:"Number",
            align: "left",
          },
           {
            name: "Remark",
            label: "备注",
            field:"Remark",
            align: "left",
          },
          // {
          //   name: 'optioned',
          //   label: '操作',
          //   align: "left"
          // }
        ],
      }
    },

    mounted() {
     if(this.$route.query.id){
       this.msg.OrderId=this.$route.query.id
     }
      this.getList();
    },
    methods: {
      getList() {
        this.loading = true;
        getCoffeeOrderList(this.msg).then(res => {
          this.loading = false;
          this.dataList = res.Data.PageData
          this.pageCount=res.Data.PageCount
        })
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList();
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList()
      },
    }
  }
</script>
<style scoped>
  .label{
    display: inline-block;
    width:60px;
    text-align-last: justify;
  }
</style>