<template>
  <div class="mainContentBox">
    <el-table id="table" border :data="tableData">
      <el-table-column prop="workOrderSeqNo" label="流转卡号" />
      <!-- <el-table-column prop="checkStr" width="60" label="上限值">
        <template #default="{ row }">
          <span>{{
            row.up ? dictS.getLableByValue("outsource_state", row.up) : "-"
          }}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="created" label="创建时间" />
      <!-- <el-table-column label="操作" width="60">
        <template #default="{ row }">
          <el-button
            link
            type="primary"
            size="small"
            @click="deleteSettings(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
    <el-form
      style="margin-top: 10px"
      :model="formData"
      ref="ruleFormRef"
      label-width="100px"
    >
      <el-form-item
        label="流转卡号"
        v-if="detailsData?.stockType != '2'"
        prop="workOrderSeqNos"
        :rules="[
          {
            required: true,
            message: '请选择流转卡号',
            trigger: 'blur',
          },
        ]"
      >
        <el-select v-model="formData.workOrderSeqNos" multiple>
          <el-option
            v-for="item in tableData"
            :key="item"
            :label="item.workOrderSeqNo"
            :value="item.workOrderSeqNo"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="出库工单号"
        v-if="detailsData?.stockType != '2'"
        prop="outWorkOrderCode"
        :rules="[
          {
            required: true,
            message: '请选择出库工单号',
            trigger: 'blur',
          },
        ]"
      >
        <el-select
          v-model="formData.outWorkOrderCode"
          @click="dialog1.visible = true"
        />
      </el-form-item>
    </el-form>
    <el-button
      type="primary"
      @click="submit"
      v-if="detailsData?.stockType != '2'"
      >出库</el-button
    >
    <el-dialog
      v-model="dialog1.visible"
      :title="dialog1.title"
      width="950px"
      @close="dialog1.visible = false"
    >
      <work-order-page
        :queryComplete="0"
        :opType="1"
        @order-info="materialInfo1"
      />
    </el-dialog>
  </div>
</template>
<script setup>
import { getSemi, oprerate } from "@/api/storage/index";
import { useDictionaryStore } from "@/store";
const { dicts } = useDictionaryStore();
const emits = defineEmits(["close"]);
const ruleFormRef = ref(null);
const dialog1 = reactive({
  title: "工单号选择",
  visible: false,
});
const materialInfo1 = (value) => {
  formData.value.outWorkOrderCode = value.workOrderCode;
  dialog1.visible = false;
};
const formData = ref({
  stockId: "",
  stockType: "2",
  inWorkOrderCode: "",
  workOrderSeqNos: [],
});
const props = defineProps({
  id: {
    type: String,
  },
});
const detailsData = ref();
const tableData = ref([]);
const getData = async () => {
  const { data } = await getSemi(props.id);
  detailsData.value = data;
  formData.value.inWorkOrderCode = data.inWorkOrderCode;
  tableData.value = detailsData.value.detailsList;
};
const submit = async () => {
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      const { code } = await oprerate({ ...formData.value, stockId: props.id });
      if (code == "200") {
        ElMessage.success("出库成功！");
        ruleFormRef.value.resetFields();
        getData();
        emits("close");
      }
    } else {
    }
  });
};
onMounted(() => {
  getData();
});
watch(
  () => props.id,
  () => {
    getData();
  }
);
</script>
