<template>
  <el-dialog
    title="物料"
    :visible.sync="open"
    width="90%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <Com-search :search="searchObj" @handleSearch="handleSearch"></Com-search>
    <div class="tableHeight">
      <Com-table
        ref="table"
        :tableFormat="tableFormat"
        :tableData="tableData"
        @handleSelectionChange="handleSelectionChange"
      >
      </Com-table>
    </div>
    <pagination
      :total="pages.total"
      :page.sync="pages.pageNo"
      :limit.sync="pages.pageSize"
      @pagination="materialPage"
    />
    <span slot="footer">
      <el-button @click="open = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  materialsDataTableFormat,
  materialsDataSearchObj,
} from "../utils/index.json";
import { materialPage } from "@/api/home";
export default {
  data() {
    return {
      open: false,
      tableFormat: materialsDataTableFormat,
      tableData: [],
      pages: {
        pageNo: 1,
        pageSize: 50,
        total: 0,
      },
      searchObj: materialsDataSearchObj,
      searchData: {
        mtrlNo: "",
        mtrlDes: "",
      },
      selectList: [],
    };
  },
  methods: {
    handleSearch(obj) {
      this.searchData = obj;
      this.pages.pageNo = 1;
      this.pages.total = 0;
      this.materialPage();
    },
    handleInit() {
      this.open = true;
      this.materialPage();
    },
    materialPage() {
      let obj = {
        ...this.pages,
        ...this.searchData,
      };
      materialPage(obj).then((res) => {
        if (res && res.code == 200) {
          res.data.records.map((el) => {
            el.id = el.mtrlNo + el.mtrlDes + el.mtrlUnit;
            el.quotaUpper = undefined;
            el.quotaLower = undefined;
            el.equipmentType = undefined;
          });
          this.tableData = res.data.records;
          this.pages.total = res.data.total;
        }
      });
    },
    handleClose() {
      this.open = false;
    },
    handleSelectionChange(val) {
      this.selectList = val;
    },
    handleSubmit() {
      this.$confirm("是否添加物料", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = JSON.parse(JSON.stringify(this.selectList));
          // data.map((el) => {
          //   delete el.id;
          // });
          this.$emit("handleData", data);
          this.open = false;
          this.$refs.table.$refs.table.clearSelection();
        })
        .catch(() => {
          this.open = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.tableHeight {
  height: 500px;
}
::v-deep {
  .el-dialog__footer {
    text-align: center;
  }
}
</style>
