<template>
  <div class="midPopUp" v-if="checkPop" @click="checkPop = false">
    <div class="container" @click.stop>
      <div class="title titleText" style="font-size: 38px">
        {{ props.checkType == 1 ? "首检" : "过程检验" }}
      </div>
      <el-scrollbar class="listBody">
        <el-form ref="formRef" :model="form" label-width="aotu" :key="formKey">
          <el-form-item
            :rules="{
              required: true,
              message: '请扫码获取',
              trigger: 'change',
            }"
            label="检验人"
            prop="checkUser"
          >
            <el-input :disabled="true" v-model="form.checkUser" />
          </el-form-item>
          <el-form-item
            :rules="{
              required: true,
              message: '该选项为必选',
              trigger: 'change',
            }"
            label="是否破坏性检验："
            prop="destruction"
          >
            <el-switch v-model="form.destruction" />
          </el-form-item>
          <el-form-item
            :rules="{
              required: true,
              message: '该选项为必选',
              trigger: 'change',
            }"
            label="管号："
            prop="seqNoList"
          >
            <el-select
              v-model="form.seqNoList"
              placeholder="Select"
              @change="getType"
              multiple
            >
              <el-option
                v-for="item in seqList"
                :key="item.value"
                :label="item.seqNo"
                :value="item.seqNo"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <div class="btns">
        <el-button
          type="primary"
          @click="validate"
          class="titleText"
          style="width: 260px; height: 50px; border-radius: 16px"
          >提 交
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getSeqList, addProcessSeqDestruction } from "@/api/process";
import { emitter, EventsNames } from "@/utils/common";
import { useDictionaryStore } from "@/store";
import { useProcessStore } from "@/store/modules/processView";
const props = defineProps({
  addStatus: Boolean,
  checkType: Number,
  checkUser: String,
});
const emits = defineEmits(["getPage1", "getPage2"]);
const dictS = useDictionaryStore();
const store = useProcessStore();
const route = useRoute();

const addState = ref(true);
//点检项数组
const form = ref({
  seqNoList: [],
  destruction: false,
});
const resetForm = () => {
  form.value = {
    seqNoList: [],
    destruction: false,
  };
};
const formRef = ref(null);
const checkPop = ref(false);
const stationList = ref([]);
const formKey = ref(false);
const seqList = ref([]);
const getSeqsList = async () => {
  const { data } = await getSeqList({
    state: 0,
    workOrderCode: store.odersData.workOrderCode,
    pageNo: 1,
    pageSize: 999999,
  });
  seqList.value = data;
};
const open = () => {
  formKey.value = !formKey.value;
  resetForm();
  getSeqsList();
  if (props.checkUser) {
    form.value.checkUser = props.checkUser;
  }
  checkPop.value = true;
};
const validate = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      submit();
    } else {
      ElMessage.error("请检查是否有未填项");
    }
  });
};
const submit = async () => {
  if (addState.value) {
    const { data, code } = await addProcessSeqDestruction({
      checkType: props.checkType,
      materialCode: store.scanInfo.materialCode,
      materialModel: store.scanInfo.materialModel,
      materialName: store.scanInfo.materialName,
      operationId: store.odersData.operationId,
      operationName: store.processInfo.operationName,
      processId: store.scanInfo.id,
      workOrderCode: store.odersData.workOrderCode,
      ...form.value,
    });
    if (code == "200") {
      ElMessage.success("提交成功！");
      resetForm();
      formKey.value = !formKey.value;
      if (props.checkType == 1) {
        emits("getPage1");
      } else {
        emits("getPage2");
      }
      checkPop.value = false;
    }
  }
};
watch(
  () => props.addStatus,
  (val) => {
    console.log(val);
    if (val == true) {
      addState.value = true;
    } else {
      addState.value = false;
    }
  },
  {
    immediate: true,
  }
);
defineExpose({ open });
onMounted(() => {});
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  height: 50px;
  text-align: center;
  margin-bottom: 20px;
}

:deep(label) {
  display: inline-block;
}

.listBody {
  height: calc(100% - 160px);
  padding: 0 $p20;

  .item {
    width: 100%;
    background-color: white;
    border-radius: 16px;
    margin: 10px 0;
    padding: $p10 $p20;

    .showInfo {
      .remark {
        font-size: $f20;
        color: red;
        margin-right: 5px;
      }
    }
  }
}

.btns {
  width: 100%;
  height: 50px;
  @include flex;
}

//表单字体样式
:deep(.el-form-item__label) {
  font-size: $f20;
  max-width: 600px;
  display: inline-block;
  height: auto;
  padding-right: 0px;
}

:deep(.el-radio__label) {
  font-size: $f20;
}

:deep(.el-radio) {
  display: flex;
  align-items: center;
}

:deep(.el-textarea__inner) {
  font-size: $f20;
}
</style>
