<template>
  <el-drawer
    title="打印订单"
    :visible.sync="drawerFlag"
    direction="rtl"
    :before-close="handleClose"
    size="40%"
  >
    <div style="margin-left: 20px" class="clearfix">
      <div class="float_left">
        <el-form size="small" :inline="true">
          <el-form-item>
            <el-input
              v-model="name"
              style="width: 150px"
              placeholder="商品名称"
              clearable
              @keyup.enter.native="pageChange(1)"
              @clear="pageChange(1)"
            >
              <el-button slot="append" @click="pageChange(1)">
                <i class="el-icon-search"></i>
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="name"
              style="width: 150px"
              placeholder="订单号"
              clearable
              @keyup.enter.native="pageChange(1)"
              @clear="pageChange(1)"
            >
              <el-button slot="append" @click="pageChange(1)">
                <i class="el-icon-search"></i>
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="enableStatus"
              placeholder="订单状态"
              style="width: 150px"
              clearable
              @change="pageChange(1)"
            >
              <el-option label="审核" :value="5"></el-option>
              <el-option label="未审核" :value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="time"
              style="width: 150px"
              type="date"
              placeholder="下单时间"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <el-table
          ref="printTable"
          v-loading="loading"
          :data="type_data"
          size="small"
          @selection-change="selectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
            fixed="left"
          ></el-table-column>
          <el-table-column label="订单号" prop="id"></el-table-column>
          <el-table-column prop="driverName" label="客户名称"></el-table-column>
          <el-table-column prop="phone" label="订单状态"></el-table-column>
          <el-table-column
            prop="plateNumber"
            label="下单时间"
          ></el-table-column>
          <el-table-column prop="phone" label="订单数量"></el-table-column>
          <el-table-column prop="phone" label="打印次数"></el-table-column>
        </el-table>
        <FooterPage
          :page-size="pageSize"
          :total-page.sync="total"
          :current-page.sync="page"
          @pageChange="pageChange"
          @sizeChange="sizeChange"
        >
          <div slot="btn-div" class="foot-btn-div">
            <span class="batch-checkbox">
              <el-checkbox
                v-model="checkedAll"
                @change="checkAllChange"
              ></el-checkbox>
            </span>
            <el-button type="primary" size="mini">批量打印</el-button>
          </div>
        </FooterPage>
      </div>
    </div>
  </el-drawer>
</template>
<script>
  export default {
    props: {
      drawerFlag: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        name: "",
        enableStatus: "",
        time: "",
        loading: false,
        type_data: [{ id: 1 }],
        page: 1,
        pageSize: 10,
        total: 0,
        checkedAll: false,
        choose_data: [],
      };
    },
    methods: {
      handleClose() {
        this.$emit("close");
      },
      pageChange() {},
      sizeChange() {},
      // 批量选择
      selectionChange(val) {
        this.checkedAll = val.length === this.goods_data.length;
        this.choose_data = val;
      },
      checkAllChange() {
        this.$refs.printTable.toggleAllSelection();
      },
    },
  };
</script>
<style></style>
