<template>
  <Container>
    <!--            v-if="$accessCheck($Access.BaseDataListSearch)"
-->
    <div slot="right">
      <el-form style="margin-bottom: 0" :inline="true" size="small">
        <el-form-item>
          <GoodsCategory
            v-model="form.category"
            check-strictly
            clearable
            size="small"
            @change="categoryChange"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.keyword"
            style="width: 220px"
            placeholder="请输入商品名称"
            clearable
            @keyup.enter.native="pageChange(1)"
            @clear="pageChange(1)"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="pageChange(1)"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="form.time"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
            @change="timeChange"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="form.type"
            placeholder="单据类型"
            style="width: 140px"
            clearable
            @change="pageChange(1)"
          >
            <el-option label="全部单据类型" :value="0"></el-option>
            <el-option label="自营入库单" :value="5"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="goods_list" @row-dblclick="goDetail">
      <el-table-column
        prop="categoryTitle"
        label="商品编码"
        min-width="140"
      ></el-table-column>
      <el-table-column
        prop="categoryTitle"
        label="商品名称"
        min-width="160"
      ></el-table-column>
      <el-table-column
        prop="categoryTitle"
        label="日期"
        min-width="140"
      ></el-table-column>
      <el-table-column
        prop="categoryTitle"
        label="单据类型"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="categoryTitle"
        label="单据编号"
        min-width="160"
      ></el-table-column>
      <el-table-column
        prop="categoryTitle"
        label="期初库存"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="categoryTitle"
        label="库存(基本单位)"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="categoryTitle"
        label="结存库存"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="categoryTitle"
        label="备注"
        min-width="160"
      ></el-table-column>
      <el-table-column prop="categoryTitle" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="goDetail(scope.$index)">
            入库单详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <FooterPage
      :page-size="pageSize"
      :total-page.sync="total"
      :current-page.sync="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    ></FooterPage>
  </Container>
</template>

<script>
  import GoodsCategory from "@/component/common/GoodsCategory.vue";

  export default {
    name: "GoodsReceiptIssueSummary",
    components: {
      GoodsCategory,
    },
    data() {
      return {
        goods_list: [],
        total: 0,
        page: 1,
        pageSize: 10,
        form: {
          category: [],
          time: [],
          keyword: "",
          type: 0,
        },
      };
    },
    methods: {
      goDetail() {},
      pageChange(page) {
        this.page = page;
      },
      sizeChange(size) {
        this.pageSize = size;
      },
      categoryChange() {},
      timeChange() {},
    },
  };
</script>

<style scoped></style>
