<template>
  <el-card class="box-card" v-loading="loading">
    <el-form :model="formData.data" label-width="120px" :rules="rules" ref="submit">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="仓库:" prop="warehouseId">
            <el-select v-model="formData.data.warehouseId" placeholder="请选择仓库" style="width: 100%">
              <el-option v-for="item in warehouseList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="事业部:" prop="departmentId">
            <el-select v-model="formData.data.departmentId" placeholder="请选择事业部" style="width: 100%">
              <el-option v-for="item in departmentList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div style="margin-bottom: 10px">
        <el-button type="primary" size="small" @click="clickAddBOM()">选择BOM</el-button>
      </div>
      <el-table :data="formData.data.inOutStorageBomList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
        <el-table-column label="品号" prop="code" width="180" />
        <el-table-column label="品名" prop="name" min-width="220" />
        <el-table-column label="修正数量" width="180">
          <template #default="{ row, $index }">
            <el-form-item
              label-width="0"
              :prop="'inOutStorageBomList.' + $index + '.quantity'"
              :rules="rules.quantity"
              :inline-message="true"
              style="width: 100%">
              <el-input-number
                onmousewheel="return false;"
                v-model="row.quantity"
                placeholder="修正数量"
                style="width: 100%"
                :controls="false"
                :min="0"
                :precision="0" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="60">
          <template #default="{ $index }">
            <el-button type="danger" @click="clickDelete($index)" text>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div style="padding: 10px; text-align: center">
      <el-button @click="clickReset()">重 置</el-button>
      <el-button type="primary" @click="submitForm()" v-preReClick>提 交</el-button>
    </div>

    <el-dialog title="选择BOM" v-if="openBOM" v-model="openBOM" width="90%">
      <SelectBOM :selectStatus="true" @selectBOM="selectBOM"></SelectBOM>
      <template #footer>
        <el-button @click="openBOM = false" size="large">关 闭</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import { ElMessage } from "element-plus";
import SelectBOM from "/src/views/group/BOM/management/index";

const { proxy } = getCurrentInstance();
const warehouseList = ref([]);
const departmentList = ref([{ dictKey: "0", dictValue: "胜德体育" }]);
const getDemandData = () => {
  proxy.post("/warehouse/page", { pageNum: 1, pageSize: 999 }).then((res) => {
    if (res.rows && res.rows.length > 0) {
      warehouseList.value = res.rows.map((item) => {
        return {
          dictKey: item.id,
          dictValue: item.name,
        };
      });
    }
  });
  proxy.post("/department/page", { pageNum: 1, pageSize: 999 }).then((res) => {
    if (res.rows && res.rows.length > 0) {
      departmentList.value = departmentList.value.concat(
        res.rows.map((item) => {
          return {
            dictKey: item.id,
            dictValue: item.name,
          };
        })
      );
    }
  });
};
getDemandData();
const formData = reactive({
  data: {
    inOutStorageBomList: [],
  },
});
const rules = ref({
  warehouseId: [{ required: true, message: "请选择仓库", trigger: "change" }],
  departmentId: [{ required: true, message: "请选择事业部", trigger: "change" }],
  quantity: [{ required: true, message: "请输入修正数量", trigger: "blur" }],
});
const clickReset = () => {
  formData.data = {
    inOutStorageBomList: [],
  };
};
const openBOM = ref(false);
const clickAddBOM = () => {
  openBOM.value = true;
};
const selectBOM = (item) => {
  if (formData.data.inOutStorageBomList && formData.data.inOutStorageBomList.length > 0) {
    let list = formData.data.inOutStorageBomList.filter((itemFilter) => itemFilter.bomSpecId === item.id);
    if (list && list.length > 0) {
      return ElMessage("该BOM已添加");
    }
  }
  if (item.id) {
    formData.data.inOutStorageBomList.push({
      bomSpecId: item.id,
      code: item.code,
      name: item.name,
      quantity: undefined,
    });
    ElMessage({ message: "选择完成", type: "success" });
  }
};
const clickDelete = (index) => {
  formData.data.inOutStorageBomList.splice(index, 1);
};
const loading = ref(false);
const submitForm = () => {
  proxy.$refs.submit.validate((valid) => {
    if (valid) {
      loading.value = true;
      proxy.post("/inventory/correction", formData.data).then(
        () => {
          ElMessage({ message: "修正成功", type: "success" });
          loading.value = false;
        },
        (err) => {
          console.log(err);
          ElMessage("修正失败");
          loading.value = false;
        }
      );
    }
  });
};
</script>

<style lang="scss" scoped>
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>
