<template>
  <el-dialog :title="purchaseTitle" append-to-body :visible.sync="openShow" width="70%" @close="closeDialog" >

    <avue-crud 
    :data="data" 
    :option="option" 
    @current-change="currentChange" 
    @size-change="sizeChange" 
    @refresh-change="refreshChange" 
    :page.sync="page"
    @on-load="onLoad"
    ></avue-crud>
    <!-- <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
      </template> -->
  </el-dialog>
</template>
<script>
import { getPutPurchaseList } from "@/api/firstOrder/inbound";
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    purchaseTitle: {
      type: String,
      default: ''
    },
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      openShow: false,
      data: [],
      query: {},
      loading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      option: {
        menu: false,
        header: false,
        align: 'center',
        // page: true,
        column: [
          {
            label: '物资名称',
            prop: 'materialName'
          }, {
            label: '计划采购数量',
            prop: 'requiredQuantity'
          }, {
            label: '已入库数量',
            prop: 'inboundQuantity'
          }
        ]
      }
    }
  },
  mounted() {
    this.openShow = this.showDialog

  },
  methods: {
    closeDialog() {
      this.openShow = false
      this.$emit('closeDialog');
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      const queryParams = Object.assign(params, this.query, { 
        onePutStorageId: this.id 
      });
      getPutPurchaseList(page.currentPage, page.pageSize, queryParams).then(res => {
        console.log('采购单列表', res.data.result)
        // const data = res.data.data;
        this.data = res.data.result.list;
        this.loading = false;
        this.page.total = res.data.result.total;
        // this.selectionClear();
      });
    }
  }
}
</script>
<style lang="scss" scoped></style>
