<template>
  <el-dialog
      title="单批单改"
      v-model="visible"
      width="680px"
      append-to-body
      draggable
      @close="cancel"
  >
    <el-form class="list-search-container" :inline="true">
      <el-form-item>
        <el-button
            type="primary"
            icon="Plus"
            :disabled="click"
            @click="handleAdd"
        >在此工序前添加新工序
        </el-button
        >
        <el-button type="danger" :disabled="click"  @click="handleDel" icon="delete"
        >删除
        </el-button
        >
      </el-form-item>
    </el-form>
    <div class="el-table-inner-container">
      <el-table
          ref="processTable"
          style="height: 500px"
          v-loading="loading"
          @selection-change="handleSelectionChange"
          :data="processList"
      >
        <el-table-column
            type="selection"
            :selectable="checkSelectable"
            width="50"
            align="center"
        />
        <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"
        ></el-table-column>
        <el-table-column label="工序名称" prop="processAlias" align="center"/>

        <el-table-column
            label="工序编号"
            prop="processStepNumber"
            width="200"
            align="center"
        />
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
      title="选择工序"
      v-model="addProcess"
      width="800px"
      append-to-body
      draggable
      @close="processClose"
  >
    <div class="page-container column-container">
      <el-form style="padding: 16px" :inline="true">
        <el-form-item label="工序名称：">
          <el-input
              placeholder="请输入工序名称或简称"
              @keydown.enter.prevent
              @keyup.enter="handleQuery"
              clearable
              v-model="queryParams.keyword"
              style="width: 200px"
          />
          <el-button
              style="margin-left: 20px"
              type="primary"
              @click="handleSelect"
          >搜索
          </el-button
          >
        </el-form-item>
      </el-form>
      <div class="el-table-inner-container">
        <el-table height="95%" :data="addProcessList">
          <el-table-column
              label="工序编号"
              prop="processCode"
              align="center"
          ></el-table-column>

          <el-table-column
              label="工序名称"
              prop="processAlias"
              align="center"
          ></el-table-column>

          <el-table-column label="操作" width="80" align="center">
            <template #default="scope">
              <el-button
                  link
                  size="small"
                  type="primary"
                  icon="check"
                  @click="handleProcess(scope.row)"
              >选择
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="handleSelect"
      />
    </div>
  </el-dialog>
</template>
<script setup>
import {getDayworkItemProcess} from "@/api/business/daywork.js";
import {getProcessList, addAmend} from "@/api/business/technologicalAmend.js";
import {ref} from "vue";

/** 变量 */
const visible = ref(false);
const loading = ref(false);
const haveModified = ref(false); //是否已经修改
const addProcess = ref(false); //新增工序弹窗
const processTable = ref(null);
const total = ref(0);
const emit = defineEmits(["handleSaveSuccess"]);
const ids = ref([]); //多选框选中数据
const click = ref(true); //按钮不可点
const addProcessList = ref([]); //新增选择工序列表
const processList = ref([]); //工序列表
const lot = ref({}); //批次信息
const dayworkItem = ref({}); //报工信息

const {proxy} = getCurrentInstance();

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

/***********************  方法区  ****************************/
/** 打开弹窗 */
function open(id) {
  visible.value = true;
  loading.value = true;
  getDayworkItemProcess(id).then((res) => {
    lot.value = res.data.lot;
    dayworkItem.value = res.data.dayworkItem;
    processList.value = res.data.processDetails;
    console.log(processList.value)
    loading.value = false;
  });
}

/** 新增工序弹窗搜索按钮操作 */
function handleSelect() {
  getProcessList(queryParams.value).then((res) => {
    addProcessList.value = res.rows;
    total.value = res.total;
  });
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  click.value = ids.value.length == 1 ? false : true;
}

/** 删除按钮操作 */
function handleDel() {
  //查询选中数据
  const delRows = processTable.value.getSelectionRows();
  if(delRows.length >0){

  proxy.$modal.confirm("是否确认删除该条数据？").then(() => {
    processList.value = processList.value.filter(
        (item) => !delRows.includes(item)
    );
    haveModified.value = true;
  });
}
}

/** 新增工序确认按钮 操作*/
function handleProcess(row) {
  //查询选中工序位置
  const clickProcess = processTable.value.getSelectionRows();
  let indexNum = processList.value.findIndex((item) =>
      Object.is(item, clickProcess[0])
  );
  console.log("indexNum", indexNum);

  //获取新增工序上一条排序
  let num = processList.value[indexNum - 1].processStepNumber; //

  //复制选中数据
  let process = {...processList.value[indexNum]};

  //修改新增数据
  process.processAlias = row.processAlias;
  process.processCode = row.processCode;
  process.processId = row.id;

  //插入数据
  processList.value.splice(indexNum, 0, process);

  //修改排序数据
  processList.value.forEach((item, index) => {
    if (index >= indexNum) {
      num = Number(num) + 1;
      item.processStepNumber = Number(num);
    }
  });
  haveModified.value = true;
  processClose();
}

/** 是否可选 */
function checkSelectable(row) {
  console.log(row.processStepNumber)
  console.log(dayworkItem.value.processStepNumber)
  console.log(dayworkItem.value)
  //第一道序备料，跳过第一道序
  if(row.processCode == processList.value[0].processCode){
    console.log("888")
    return false
  }
  if (dayworkItem.value && dayworkItem.value.status != 0) {
    console.log("999")
    return dayworkItem.value.status != 0
        ? row.processStepNumber > dayworkItem.value.processStepNumber
        : row.processStepNumber >= dayworkItem.value.processStepNumber;
  }
  if (dayworkItem.value && dayworkItem.value.status == 0) {
    console.log("999")
    return  row.processStepNumber >= dayworkItem.value.processStepNumber;
  }
   else {
    console.log("777")
    return true;
  }
}

/** 添加新工序按钮操作 */
function handleAdd() {
  // if (haveModified.value) {
  //   proxy.$modal.msgError("只能修改一次工序数据");
  //   return;
  // }
  queryParams.value.keyword = ""
  handleSelect();
  addProcess.value = true;
}

/** 关闭新增工序弹窗 */
function processClose() {
  addProcess.value = false;
}

/** 关闭弹窗 */
function cancel() {
  visible.value = false;
  addProcess.value = false;
  haveModified.value = false;
}

/** 确定按钮 */
function submitForm() {
  if (!haveModified.value) {
    proxy.$modal.msgError("未进行修改，清修改后再进行确认");
    return;
  } else {
    loading.value = true;
    console.log("processList", JSON.stringify(processList.value));
    addAmend(lot.value.id, processList.value).then((res) => {
      if (res.code == 200) {
        loading.value = true;
        proxy.$modal.msgSuccess("修改成功");
        emit("handleSaveSuccess", lot.value.lotCode);
        cancel();
      } else {
        loading.value = true;
        proxy.$modal.msgError(res.msg);
      }
    });
  }
}

/** 暴露给父组件的方法 */
defineExpose({
  open,
});
</script>
