<template>
  <el-dialog
    title="废品信息"
    v-model="visible"
    width="600px"
    append-to-body
    draggable
    :close-on-click-modal="false"
    v-loading="loading"
  >
    <div class="list-btns-container" v-if="isEdit">
      <el-button type="primary" icon="Plus" @click="handleAddReject">
        新增
      </el-button>
      <el-button type="danger" icon="Delete" @click="handleDelete">
        删除
      </el-button>
    </div>
    <!-- 渲染数据区 -->
    <!-- <div class="el-table-container"> -->
    <div class="el-table-inner-container">
      <el-table
        ref="rejectTable"
        v-loading="loading"
        :data="rejectList"
        size="small"
        border
        height="400px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="48" align="center" />
        <el-table-column
          label="废品数量"
          align="center"
          prop="productionPlanDetail"
        >
          <template #default="scope">
            <el-input-number
              v-if="isEdit"
              style="width: 100%"
              v-model.trim="scope.row.rejectNum"
              placeholder="废品数量"
              :precision="0"
              :min="0"
              controls-position="right"
            />
            <span v-else>
              {{ scope.row.rejectNum }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="废品原因" align="center" prop="supplierName">
          <template #default="scope">
            <el-select
              :disabled="!isEdit"
              style="width: 100%"
              v-model="scope.row.reason"
              placeholder="请选择废品原因"
            >
              <el-option
                v-for="cause in waste_causes"
                :key="cause.value"
                :label="cause.label"
                :value="cause.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="80px"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button
              :disabled="!isEdit"
              link
              type="danger"
              icon="Delete"
              @click="handleRowDel(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <el-button type="primary" icon="Check" @click="handleSave"
        >保存</el-button
      >
      <el-button icon="Close" @click="handleCancel">取 消</el-button>
    </template>
    <!-- </div> -->
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
const { proxy } = getCurrentInstance();
const { waste_causes } = proxy.useDict("waste_causes");
const emit = defineEmits(["handleRejectSuccess"]);

/** 字典数组区 */
const rejectList = ref([]);
const rejectTable = ref(null);
const isEdit = ref(false); //是否可以修改
const daywork = ref({});
const loading = ref(false);
const visible = ref(false);
const rejectAmount = ref(0);

/** 查询对象 */
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});

const reject = ref({
  rejectNum: 0,
  reason: null,
});

/***********************  方法区  ****************************/
/** 打开抽屉 */
const open = (row, bool) => {
  reset();
  isEdit.value = bool;
  visible.value = true;
  console.log("row", row);
  daywork.value = row;
  reject.value.lotId = row.lotId;
  reject.value.deptId = row.deptId;
  reject.value.userId = row.userId;
  if (row.rejectList) {
    rejectList.value = row.rejectList;
    console.log("rejectList", rejectList.value);
  }
};

/** 取消按钮 */
function handleCancel() {
  visible.value = false;
  reset();
}

/** 新增 */
function handleAddReject() {
  const _newItem = JSON.parse(JSON.stringify(reject.value));
  rejectList.value.push(_newItem);
}

/** 删除 */
function handleFirstTabDelete() {
  const delRows = rejectTable.value.getSelectionRows();
  proxy.$modal.confirm("是否确认删除选中数据？").then(() => {
    dayworkItemList.value = dayworkItemList.value.filter(
      (item) => !delRows.includes(item)
    );
  });
}

/** 删除 */
function handleRowDel(row) {
  const index = rejectList.value.indexOf(row);
  proxy.$modal.confirm("是否确认删除数据？").then(() => {
    rejectList.value.splice(index, 1);
  });
}

/** 表单重置 */
function reset() {
  rejectList.value = [];
  rejectAmount.value = 0;
}

/** 提交按钮 */
function handleSave() {
  var reasonList = [];
  for (let i = 0; i < rejectList.value.length; i++) {
    if (rejectList.value[i].rejectNum <= 0) {
      proxy.$modal.msgError("第" + (i + 1) + "废品数应大于0");
      return;
    }
    if (!rejectList.value[i].reason) {
      proxy.$modal.msgError("第" + (i + 1) + "行废品原因不能为空");

      return;
    }
    if (reasonList.indexOf(rejectList.value[i].reason) >= 0) {
      proxy.$modal.msgError(
        "第" +
          (i + 1) +
          "行废品原因与" +
          (reasonList.indexOf(rejectList.value[i].reason) + 1) +
          "行相同"
      );
      return;
    }
    reasonList.push(rejectList.value[i].reason);
  }
  for (let i = 0; i < rejectList.value.length; i++) {
    rejectAmount.value += rejectList.value[i].rejectNum;
  }

  console.log("rejectAmount1", rejectAmount.value);
  daywork.value.rejectAmount = rejectAmount.value;

  rejectAmount.value += daywork.value.totalRejectNum;
  console.log("rejectAmount", rejectAmount.value);
  if (rejectAmount.value > daywork.value.prodNum) {
    proxy.$modal.msgError(
      "废品总数不能超过投产数，当前废品总数为" + rejectAmount.value
    );
    return;
  }

  console.log("rejectLict", rejectList.value);
  emit("handleRejectSuccess", daywork.value, rejectList.value);
  visible.value = false;
  reset();
}

/** 暴露给父组件的方法 */
defineExpose({
  open,
});
</script>
<style scoped>
.leftInfo {
  color: #000;
  font-size: 15px;
  width: 120px;
  /* display: inline-block; */
}

.middleInfo {
  color: #000;
  font-size: 15px;
  width: 65px;
  display: inline-block;
}

.switch-container {
  font-size: 15px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: left;
}
.ml-15 {
  margin-left: 15px;
  margin-right: 15px;
}

.table-container {
  max-width: 600px; /* 或者你希望的最大宽度 */
}
.rightInfo {
  font-size: 16px;
  padding-left: 0px;
}
</style>
