<template>
  <div v-if="!loading" class="page-container column-container">
    <el-form
      class="list-search"
      style=""
      :model="lot"
      ref="queryRef"
      :inline="true"
    >
      <el-row style="margin-top: 10px">
        <el-form-item class="bold-large">
          <span>{{ "批次号：" }}</span>
          <span>{{ lot.lotCode }}</span>
        </el-form-item>
        <el-form-item>
          <el-tag class="spacing" :type="status(lot)">{{
            statusText(lot)
          }}</el-tag>
          <el-tag v-if="lot.isWaste == 1" class="spacing" type="danger">{{
            "报废"
          }}</el-tag>
          <el-tag v-if="lot.isAmend == 1" class="spacing" type="danger">{{
            "工艺修改"
          }}</el-tag>
          <el-tag
            v-if="lot.isWasteRecycling == 1"
            class="spacing"
            type="primary"
            >{{ "废品回用" }}</el-tag
          >
        </el-form-item>
      </el-row>

      <el-row :gutter="24" style="margin-top: 10px">
        <el-col :span="6">
          <el-form-item label="客户简称" class="custom-label">
            <span>{{ lot.productionPlanDetail.companyAlias }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="生产计划单" class="custom-label">
            <span>{{ lot.productionPlanDetail.productionPlanNo }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="序号" class="custom-label">
            <span style="margin-left: 28px">
              {{ lot.productionPlanDetail.lineNumber }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品描述" class="custom-label">
            <span>{{ lot.productionPlanDetail.productDescription }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-top: 10px">
        <el-col :span="6">
          <el-form-item label="图纸版本" class="custom-label">
            <span>{{ lot.technologyVersion }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="单批量" class="custom-label">
            <span style="margin-left: 28px"> {{ lot.productionQuantity }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="领料部门" class="custom-label">
            <span>{{
              lot.productionPlanDetail.requisitionDepartmentName
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="下达日期" class="custom-label">
            <span>{{ lot.productionPlanDetail.issueDate }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24" style="margin-top: 10px">
        <el-col :span="6">
          <el-form-item label="当前箱号" class="custom-label">
            <span>{{ lot.carrierName }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="母批号" class="custom-label">
            <span style="margin-left: 23px">{{ lot.fromCode }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <span style="font-weight: bold; font-size: 18px">基础信息</span>
      </el-row>
      <el-row :gutter="30" style="margin-top: 10px">
        <el-col :span="4">
          <el-form-item label="炉号" class="custom-label">
            <span>{{
              lot.furnaceNoInfo.furnaceNumber
                ? lot.furnaceNoInfo.furnaceNumber
                : "-"
            }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="厂家" class="custom-label">
            <span>{{
              lot.furnaceNoInfo.factory ? lot.furnaceNoInfo.factory : "-"
            }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="牌号" class="custom-label">
            <span style="margin-left: 28px">{{
              lot.furnaceNoInfo.brandNumber
                ? lot.furnaceNoInfo.brandNumber
                : "-"
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="规格" class="custom-label">
            <span>{{
              lot.furnaceNoInfo.spec ? lot.furnaceNoInfo.spec : "-"
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="形状" class="custom-label">
            <span>{{
              lot.furnaceNoInfo.shape ? lot.furnaceNoInfo.shape : "-"
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="材料直径" class="custom-label">
            <span>{{
              lot.furnaceNoInfo.diameter ? lot.furnaceNoInfo.diameter : "-"
            }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-top: 10px">
        <el-col :span="4">
          <el-form-item label="原料编码" class="custom-label">
            <span>{{
              lot.furnaceNoInfo.rawMaterialCode
                ? lot.furnaceNoInfo.rawMaterialCode
                : "-"
            }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="来料日期" class="custom-label">
            <span>{{
              lot.furnaceNoInfo.incomingDate
                ? lot.furnaceNoInfo.incomingDate
                : "-"
            }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="材质1" class="custom-label">
            <span style="margin-left: 28px">
              {{
                lot.furnaceNoInfo.firstTechnicalRequirement
                  ? lot.furnaceNoInfo.firstTechnicalRequirement
                  : "-"
              }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="材质2" class="custom-label">
            <span>
              {{
                lot.furnaceNoInfo.secondTechnicalRequirement
                  ? lot.furnaceNoInfo.secondTechnicalRequirement
                  : "-"
              }}
            </span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="padding: 16px">
      <span style="font-weight: bold; font-size: 18px">工艺路线</span>
      <el-button
        v-if="showVerify(true, 'business:lot:onceSingleChange')"
        type="primary"
        style="float: right; margin-left: 10px"
        @click="handleOnceSingleChange"
      >
        单批单改
      </el-button>
      <el-button
        v-if="showVerify(true, 'business:lot:inBatch')"
        type="primary"
        style="float: right; margin-left: 10px"
        @click="handleSplit()"
      >
        分批
      </el-button>
      <el-button
        v-if="showVerify(true, 'business:lot:waste')"
        :disabled="lot.isWaste == 1"
        type="danger"
        style="float: right; margin-left: 10px"
        @click="handlelotWaste(route.params.lotCode)"
      >
        批废
      </el-button>
      <el-button
        v-if="showVerify(lot.isAmend == 1, 'business:lot:standard')"
        type="primary"
        style="float: right; margin-left: 10px"
        @click="handleStandardProcess(lot.technologicalProcessId)"
      >
        查看标准工艺
      </el-button>
    </div>
    <div class="el-table-container">
      <div class="el-table-inner-container">
        <el-table
          height="95%"
          :data="processDetails"
          @row-click="handleRowClick"
        >
          <el-table-column
            type="index"
            label="行号"
            align="center"
          ></el-table-column>
          <el-table-column
            label="工序名称"
            prop="processAlias"
            align="center"
          ></el-table-column>
          <el-table-column label="状态" prop="status" align="center">
            <template #default="scope">
              <span>{{ getStatusText(scope.row.status) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="投产量"
            prop="investNum"
            align="center"
          ></el-table-column>
          <el-table-column
            label="合格量"
            prop="qualifiedNum"
            align="center"
          ></el-table-column>
          <el-table-column
            label="废品量"
            prop="abandonNum"
            align="center"
          ></el-table-column>
          <el-table-column
            label="结束日期"
            prop="endTime"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
    </div>
    <once-change ref="onceChangeRef" @handleSaveSuccess="init" />
    <lot-waste-dialog ref="lotWasteDialogRef" @handleSaveSuccess="init" />
    <el-dialog
      title="标准工序"
      v-model="visible"
      width="680px"
      append-to-body
      draggable
    >
      <div class="el-table-inner-container">
        <el-table
          style="height: 600px"
          @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>
    </el-dialog>
    <InBatchesDialog ref="inBatchesDialogRef" :getList="init" />
    <DayworkItemList ref="dayworkItemListRef" />
  </div>
  <div v-else v-loading="loading" class="page-container column-container"></div>
</template>

<script setup name="LotProductionPlan">
import { ref } from "vue";
import useUserStore from "@/store/modules/user";
import DayworkItemList from "./DayworkItemList.vue";
import onceChange from "./onceSingleChangeDialog";
import InBatchesDialog from "@/views/business/lot/InBatchesDialog.vue";
import {
  lotParticulars,
  selectStandardProcess,
} from "@/api/business/technologicalAmend.js";
import lotWasteDialog from "./dayworkWasteDialog.vue";
const { proxy } = getCurrentInstance();

/** 查询 对象 */
const processDetails = ref([]);
const loading = ref(true);
const visible = ref(false);
const dayworkItemListRef = ref(null);
const processList = ref([]); //工序列表
const permissions = useUserStore().permissions;
const all_permission = "*:*:*";
const route = useRoute();
const inBatchesDialogRef = ref(null);
const statusMap = {
  0: { type: "info", text: "未开始" },
  1: { type: "primary", text: "进行中" },
  2: { type: "success", text: "已完成" },
};

const lot = ref({
  productionPlanDetail: {
    companyAlias: "",
  },
  furnaceNoInfo: {},
  daywork: {},
}); //批次信息

/****************************  方法区  ****************************/
/** 单批单改按钮操作 */
function handleOnceSingleChange() {
  if (lot.value.isWaste == 1) {
    proxy.$message.error("批废不能再进行操作");
    return;
  }
  proxy.$refs.onceChangeRef.open(lot.value.lotCode);
}

/** 按钮是否显示 */
function showVerify(bool, quer) {
  return (
    bool && (permissions.includes(all_permission) || permissions.includes(quer))
  );
}

/** 工序状态 */
function getStatusText(status) {
  switch (status) {
    case "0":
      return "未开始";
    case "1":
      return "进行中";
    case "2":
      return "已完成";
    default:
      return "";
  }
}

/** 批次状态文本 */
function statusText(lot) {
  if (!lot.daywork) {
    return "未开始";
  }

  return statusMap[lot.daywork.status].text;
}

/** 批次状态样式 */
function status(lot) {
  if (!lot.daywork) {
    return statusMap[0].type;
  }
  return statusMap[lot.daywork.status].type;
}

/** 初始化数据 */
function init(data) {
  loading.value = true;
  const lotCode = (route.params && route.params.lotCode) || data;
  if (lotCode) {
    lotParticulars(lotCode).then((res) => {
      if (res.code == 200) {
        lot.value = res.data;
        processDetails.value = lot.value.technologicalProcessDetailList;
        loading.value = false;
      }
    });
  }
}

/** 查询标准工艺操作 */
function handleStandardProcess(processId) {
  selectStandardProcess(processId).then((res) => {
    if (res.code == 200) {
      processList.value = res.rows;
      visible.value = true;
    }
  });
}

//批废
function handlelotWaste(lotCode) {
  if (lot.value.daywork) {
    if (lot.value.daywork.status == 0) {
      proxy.$modal.msgError("领料后未报工，暂时无法批废");
    } else {
      let row = {};
      row.lotCode = lotCode;
      row.lotId = lot.value.id;
      row.companyAlias = lot.value.productionPlanDetail.companyAlias;
      row.productionPlanNo = lot.value.productionPlanDetail.productionPlanNo;
      row.productDescription =
        lot.value.productionPlanDetail.productDescription;
      row.technologyVersion = lot.value.technologyVersion;
      row.productionQuantity = lot.value.productionQuantity;
      row.createTime = lot.value.daywork.createTime;
      row.id = lot.value.daywork.id;
      row.isWaste = lot.value.isWaste;
      row.deptName = lot.value.daywork.deptName;
      row.temporaryProcessQualifiedNum =
        lot.value.daywork.temporaryProcessQualifiedNum;
      proxy.$refs.lotWasteDialogRef.open(row);
    }
  } else {
    proxy.$modal.msgError("该批未投产，不能进行批废");
  }
}

function handleSplit() {
  if (lot.value.isWaste == 1) {
    proxy.$message.error("批废不能再进行操作");
    return;
  }
  inBatchesDialogRef.value.open({
    ...lot.value,
    lotId: lot.value.id,
    companyAlias: lot.value.productionPlanDetail.companyAlias,
    productionPlanNo: lot.value.productionPlanDetail.productionPlanNo,
    productDescription: lot.value.productionPlanDetail.productDescription,
  });
}

function handleRowClick(row) {
  console.log("row click", row);
  dayworkItemListRef.value.open({ ...row, dayworkId: lot.value.daywork.id });
}

init();
</script>

<style lang="scss" scoped>
.bold-large span {
  font-weight: bold;
  /* 设置内容加粗 */
  font-size: 22px;
  /* 设置内容字体大小 */
}

.spacing {
  margin-left: 10px;
}

.list-search {
  padding: 16px;
  border-bottom: 8px solid #eef0f5;
}

.list-search .el-form-item {
  margin-top: 0px;
  margin-right: 15px;
  margin-bottom: 0px;
  margin-left: 0;
}

.list-search .el-form-item .el-form-item__label {
  font-size: 16px;
  padding-right: 0;
}
</style>
