<script setup lang="ts">
import { getRouteInfo } from "@/views/flow/common/CheckTopInfos/utils";
import { getReplaceDetailById } from "@/api/replace";
import Replace from "@/views/quality/replace/components/replace-material.vue";

const infoObj = ref({});

const props = defineProps({
  row: {
    type: Object,
    required: true,
  },
});

onMounted(async () => {
  console.log("CheckTopInfos routeFlowComService mounted", props.row);
  let res = await getReplaceDetailById(props.row.businessId);
  infoObj.value = res.data;
});

const dialog3 = reactive({
  title: "物料替换",
  visible: false,
});
const replace = ref({});
const showMaterial = (row) => {
  replace.value = row;
  dialog3.visible = true;
};
</script>

<template>
  <el-card>
    <el-form label-width="120px">
      <el-row>
        <el-form-item label="生产批号:">
          <el-text class="mx-1">{{ infoObj?.workOrderCode }}</el-text>
        </el-form-item>
        <el-form-item label="产品名称:">
          <el-text class="mx-1">{{ infoObj?.materialName }}</el-text>
        </el-form-item>
        <el-form-item label="产品编码:">
          <el-text class="mx-1">{{ infoObj?.materialCode }}</el-text>
        </el-form-item>
        <el-form-item label="产品规格:">
          <el-text class="mx-1">{{ infoObj?.materialModel }}</el-text>
        </el-form-item>
        <el-form-item label="订单编号:">
          <el-text class="mx-1">{{ infoObj?.orderCode }}</el-text>
        </el-form-item>
        <el-form-item label="工序名称:">
          <el-text class="mx-1">{{ infoObj?.operationName }}</el-text>
        </el-form-item>
        <el-form-item label="采集替换:">
          <el-button type="primary" @click="showMaterial(infoObj)"
            >查看</el-button
          >
        </el-form-item>
      </el-row>
      <el-form-item label="管号:">
        <el-scrollbar style="height:145px;width:798px">
          <el-row>
            <el-col
              :span="4"
              v-for="(item, index) in infoObj?.seqNoList"
              :key="index"
              >{{ item }}</el-col
            >
          </el-row>
        </el-scrollbar>
      </el-form-item>
    </el-form>

    <el-dialog
      v-model="dialog3.visible"
      :title="dialog3.title"
      width="950px"
      @close="dialog3.visible = false"
      :destroy-on-close="true"
      append-to-body
    >
      <Replace
        :replaceId="replace.id"
        :dialog="dialog3"
        :flowState="replace.flowState"
      />
    </el-dialog>
  </el-card>
</template>

<style scoped lang="scss"></style>
