<template>
  <div class="app-container">
    <el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
      <el-form-item label="日期范围" prop="dateRange">
        <el-date-picker
          v-model="queryParams.dateRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="物料编号" prop="materialCode">
        <el-input v-model="queryParams.materialCode" placeholder="请输入物料编号" clearable />
      </el-form-item>
      <el-form-item label="物料名称" prop="materialName">
        <el-input v-model="queryParams.materialName" placeholder="请输入物料名称" clearable />
      </el-form-item>
      <el-form-item label="操作人" prop="operator">
        <el-input v-model="queryParams.operator" placeholder="请输入操作人" clearable />
      </el-form-item>
      <el-form-item>
        <el-button icon="search" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    
    <el-row :gutter="15" class="mb10">
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

    <el-table :data="dataList" v-loading="loading" ref="table" border header-cell-class-name="el-table-header-cell" highlight-current-row>
      <el-table-column type="index" width="50" align="center" />
      <el-table-column prop="materialCode" label="物料编号" align="center" />
      <el-table-column prop="materialName" label="物料名称" align="center" />
      <el-table-column prop="quantity" label="出库数量" align="center" />
      <el-table-column prop="outboundTime" label="出库时间" align="center" />
      <el-table-column prop="operator" label="操作人" align="center" />
    </el-table>
    
    <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script>
export default {
  name: 'mmDailyOutboundReport',
  data() {
    // 默认日期范围为当天00:00:00到23:59:59
    const startOfDay = this.$dayjs().startOf('day').toDate()
    const endOfDay = this.$dayjs().endOf('day').toDate()
    
    return {
      loading: false,
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dateRange: [startOfDay, endOfDay],
        materialCode: '',
        materialName: '',
        operator: ''
      },
      columns: [],
      total: 0,
      dataList: [],
      queryRef: null
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      // 这里应该调用实际的API获取数据
      // 模拟数据
      setTimeout(() => {
        this.dataList = [
          { materialCode: 'MAT001', materialName: '物料1', quantity: 100, outboundTime: '2023-05-01 10:30:00', operator: '张三' },
          { materialCode: 'MAT002', materialName: '物料2', quantity: 200, outboundTime: '2023-05-01 14:45:00', operator: '李四' }
        ]
        this.total = this.dataList.length
        this.loading = false
      }, 500)
    },
    // 查询
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 重置查询操作
    resetQuery() {
      this.resetForm("queryRef")
      // 重置为当天日期范围
      const startOfDay = this.$dayjs().startOf('day').toDate()
      const endOfDay = this.$dayjs().endOf('day').toDate()
      this.queryParams.dateRange = [startOfDay, endOfDay]
      this.handleQuery()
    }
  }
}
</script>

<style scoped>
/* 可以添加一些自定义样式 */
</style>