<template>
  <div>
    <a-card :bordered="false" class="card-pd">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :span="3">
            <a-radio-group v-model="presetTimeTab" style="margin-bottom: 16px">
              <a-radio-button value="small">金额冲账</a-radio-button>
              <a-radio-button value="default">商品冲账</a-radio-button>
            </a-radio-group>
          </a-col>
          <a-col :span="4">
            <a-form-item label="">
              <a-range-picker
                  format="YYYY-MM-DD"
                  :placeholder="['开始日期', '结束日期']"
                  @change="onChange"
                  v-model="datetime"
              />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="预订单状态">
              <a-select
                ref="select"
                v-model:value="orderStatus"
                style="width: 150px"
                @focus="focus"
                @change="handleChange"
              >
                <a-select-option value="jack">Jack</a-select-option>
                <a-select-option value="lucy">Lucy</a-select-option>
                <a-select-option value="disabled" disabled>Disabled</a-select-option>
                <a-select-option value="Yiminghe">yiminghe</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="POS类型">
              <a-select
                ref="select"
                v-model:value="orderStatus"
                style="width: 150px"
                @focus="focus"
                @change="handleChange"
              >
                <a-select-option value="jack">Jack</a-select-option>
                <a-select-option value="lucy">Lucy</a-select-option>
                <a-select-option value="disabled" disabled>Disabled</a-select-option>
                <a-select-option value="Yiminghe">yiminghe</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="餐段">
              <a-select
                ref="select"
                v-model:value="orderStatus"
                style="width: 150px"
                @focus="focus"
                @change="handleChange"
              >
                <a-select-option value="jack">Jack</a-select-option>
                <a-select-option value="lucy">Lucy</a-select-option>
                <a-select-option value="disabled" disabled>Disabled</a-select-option>
                <a-select-option value="Yiminghe">yiminghe</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="4">
              <a-form-item label="预定单号">
                <j-input
                    placeholder="请输入预定单号"
                    v-model="queryParam.tableNo"
                ></j-input>
              </a-form-item>
            </a-col>
            <a-col :span="4">
            <a-form-item label="操作员">
              <a-select
                ref="select"
                v-model:value="orderStatus"
                style="width: 150px"
                @focus="focus"
                @change="handleChange"
              >
                <a-select-option value="jack">Jack</a-select-option>
                <a-select-option value="lucy">Lucy</a-select-option>
                <a-select-option value="disabled" disabled>Disabled</a-select-option>
                <a-select-option value="Yiminghe">yiminghe</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="顾客姓名">
              <j-input
                  placeholder="请输入顾客姓名"
                  v-model="queryParam.tableNo"
              ></j-input>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="顾客手机号">
              <j-input
                  placeholder="请输入顾客手机号"
                  v-model="queryParam.tableNo"
              ></j-input>
            </a-form-item>
          </a-col>
            <!-- <a-col :span="3">
              <a-form-item label="">
                <j-input
                    placeholder="取餐号"
                    v-model="queryParam.tableNo"
                ></j-input>
              </a-form-item>
            </a-col> -->
            
            <a-col :span="2">
            <span>
              <a-button
                  type="primary"
                  @click=""
                  icon="search"
              >查询</a-button
              >
            </span>
            </a-col>
            <a-col :span="2">
            <span>
              <a-button
                  type="primary"
                  @click="addReserve"
                  icon="add"
              >预定</a-button
              >
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->

      <!-- table区域-begin -->
      <div>
        <a-table
            ref="table"
            size="middle"
            :scroll="{ x: true }"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            class="j-table-force-nowrap"
            @change="handleTableChange"
        >

        </a-table>
      </div>
    </a-card>
    <reserve-modal ref="reserveModal"></reserve-modal>
  </div>
</template>

<script>
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import { mixinDevice } from '@/utils/mixin'
import ReserveModal from '@views/pos/modules/ReserveModal'

const columns = [
  // {
  //   title: '预定单号',
  //   align: 'center',
  //   dataIndex: 'code'
  // },
  // {
  //   title: '预订单状态',
  //   align: 'center',
  //   dataIndex: 'code'
  // },
  // {
  //   title: '就餐时间',
  //   align: 'center',
  //   dataIndex: 'code'
  // },
  // {
  //   title: '桌数',
  //   align: 'center',
  //   dataIndex: 'code'
  // },
  // {
  //   title: '合计价格',
  //   align: 'center',
  //   dataIndex: 'code'
  // },
  // {
  //   title: '定金',
  //   align: 'center',
  //   dataIndex: 'code'
  // },
  // {
  //   title: '创建时间',
  //   align: 'center',
  //   dataIndex: 'code'
  // },
  {
    title: '预定单号',
    align: 'center',
    dataIndex: 'code'
  },
  {
    title: '预订单状态',
    align: 'center',
    dataIndex: 'code'
  },
  {
    title: 'pos类型',
    align: 'center',
    dataIndex: 'code'
  },
  {
    title: '来源',
    align: 'center',
    dataIndex: 'code'
  },
  {
    title: '预定就餐时间',
    align: 'center',
    dataIndex: 'code'
  },
  {
    title: '餐段',
    align: 'center',
    dataIndex: 'code'
  },
  {
    title: '预定桌数',
    align: 'center',
    dataIndex: 'code'
  },
  {
    title: '预定菜品合计价格（元）',
    align: 'center',
    dataIndex: 'code'
  },
  {
    title: '订金金额（元）',
    align: 'center',
    dataIndex: 'code'
  },
  {
    title: '顾客名字',
    align: 'center',
    dataIndex: 'code'
  },
  {
    title: '性别',
    align: 'center',
    dataIndex: 'code'
  },
  {
    title: '电话',
    align: 'center',
    dataIndex: 'code'
  }
]

export default {
  components: { ReserveModal },
  mixins: [JeecgListMixin],
  name: 'reserve',
  data() {

    return {
      queryParam: {},
      datetime: [],
      columns: columns,
      // 预定时间tab
      presetTimeTab: 'small',
      // 预订单状态
      orderStatus: ''

    }
  },
  methods: {
    onChange(e, dateString) {
      this.queryParam.startTime = dateString[0]
      this.queryParam.endTime = dateString[1]
    },
    handleTableChange() {

    },
    addReserve() {
      this.$refs.reserveModal.edit()
    }
  }
}

</script>

<style scoped>
@import "~@assets/less/common.less";

</style>
