<template>
  <div>
    <el-dialog
      :title="type == 'add' ? '新增常用物料' : '修改常用物料'"
      :visible.sync="open"
      width="90%"
      :close-on-click-modal="false"
      @close="handleClose"
    >
      <el-button
        type="primary"
        v-if="type === 'add'"
        style="margin-bottom: 10px"
        @click="handleAdd"
        >新增物料</el-button
      >
      <div class="tableHeight">
        <Com-table :tableFormat="tableFormat" :tableData="tableData">
          <template #quotaUpper="scope">
            <el-input-number
              v-model="scope.row.quotaUpper"
              :min="0"
            ></el-input-number>
          </template>
          <template #quotaLower="scope">
            <el-input-number
              v-model="scope.row.quotaLower"
              :min="0"
            ></el-input-number>
          </template>
          <template #equipmentType="scope">
            <el-select
              v-model="scope.row.equipmentType"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in options"
                :key="item.equipmentType"
                :label="item.equipmentType"
                :value="item.equipmentType"
              >
              </el-option>
            </el-select>
          </template>
          <template #operation="scope">
            <el-button type="danger" @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </Com-table>
      </div>
      <span slot="footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">提 交</el-button>
      </span>
    </el-dialog>
    <material-data ref="materialData" @handleData="handleData"></material-data>
  </div>
</template>

<script>
import { materialsTableFormat } from "../utils/index.json";
import materialData from "./materialData.vue";
import {
  queryEquipmentTypeList,
  materialPageSave,
  materialPageUpdateById,
} from "@/api/home";
export default {
  components: { materialData },
  props: {
    getData: Function,
  },
  data() {
    return {
      open: false,
      tableData: [],
      tableFormat: materialsTableFormat,
      options: [],
      type: "",
    };
  },
  methods: {
    queryEquipmentTypeList() {
      queryEquipmentTypeList().then((res) => {
        if (res && res.code == 200) {
          this.options = res.data || [];
        }
      });
    },
    handleClose() {
      this.open = false;
    },
    handleInit({ data, type }) {
      this.type = type;
      this.tableData = [];
      if (data && data.length) {
        this.tableData = JSON.parse(JSON.stringify(data));
      }
      this.open = true;
      this.queryEquipmentTypeList();
    },
    handleAdd() {
      this.$refs.materialData.handleInit();
    },
    // 物料
    handleData(val) {
      this.tableData = [...this.tableData, ...val];
    },
    handleDelete(row) {
      const saveIndex = this.tableData.findIndex((item) => item.id == row.id);
      if (saveIndex >= 0) {
        this.tableData.splice(saveIndex, 1);
        this.$message.success("删除成功！");
      }
    },
    handleSubmit() {
      let flag = true;
      let flag2 = true;
      this.tableData.forEach((res, index) => {
        const item = this.tableFormat.find((item) => {
          return item.required && !res[item.prop];
        });
        if (item) {
          flag = false;
          return true;
        }
        const item2 = this.tableData.find((item, index2) => {
          return index !== index2 && res.id == item.id;
        });
        if (item2) {
          flag2 = false;
          return true;
        }
      });
      if (!flag) {
        this.$message.warning("请将必填项填写完整再提交再保存！");
        return;
      }
      if (!flag2) {
        this.$message.warning("当前数据存在相同规格型号物料，请更改后再保存！");
        return;
      }
      if (this.type === "add") {
        let data = JSON.parse(JSON.stringify(this.tableData));
        data.map((el) => {
          delete el.id;
        });
        materialPageSave(data).then((res) => {
          if (res && res.code == 200) {
            this.$message.success("操作成功");
            this.open = false;
            this.getData();
          } else {
            this.$message.warning("操作失败");
          }
        });
      } else {
        materialPageUpdateById(this.tableData[0]).then((res) => {
          if (res && res.code == 200) {
            this.$message.success("操作成功");
            this.open = false;
            this.getData();
          } else {
            this.$message.warning("操作失败");
          }
        });
      }
    },
  },
};
</script>

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