<template>
  <div class="commonTitle">新增</div>
  <el-scrollbar class="barHeight">
    <div id="drawContent">
      <el-form
        ref="formRef"
        :model="formLabelAlign"
        :rules="rules"
        label-position="top"
        label-width="auto"
        size="large"
      >
        <el-form-item label="基本信息">
          <div class="base-info">
            <div class="info-item">
              <div class="item-label">产品名称</div>
              <div class="item-value">
                {{ processStore.scanInfo?.materialName }}
              </div>
            </div>
            <div class="info-item">
              <div class="item-label">产品型号</div>
              <div class="item-value">
                {{ processStore.scanInfo?.materialModel }}
              </div>
            </div>
            <div class="info-item">
              <div class="item-label">当前工序</div>
              <div class="item-value">
                {{ processStore.scanInfo?.operationName }}
              </div>
            </div>
            <div class="info-item">
              <div class="item-label">开工时间</div>
              <div class="item-value">
                {{ processStore.scanInfo?.realStartWhen }}
              </div>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="印刷板编号" prop="printingPlateCode">
          <el-input v-model="formLabelAlign.printingPlateCode" />
        </el-form-item>
      </el-form>
      <div class="bottom-btns">
        <el-button class="cancelBtn el-button-big" @click="cancelClick"
          >重置
        </el-button>
        <el-button
          class="sureBtn el-button-big"
          type="primary"
          @click="confirmClick"
          >创建
        </el-button>
      </div>
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { useProcessStore } from "@/store/modules/processView";
import { addPrintInfo } from "@/api/process/appointOut";
import { emitter, EventsNames } from "@/utils/common";

const processStore = useProcessStore();

const formRef = ref<InstanceType<typeof ElForm>>();

const formLabelAlign = reactive({
  printingPlateCode: "",
});
const rules = reactive({
  printingPlateCode: [{ required: true, message: "请输入", trigger: "blur" }],
});

const cancelClick = () => {
  formRef.value && formRef.value.resetFields();
};

onMounted(() => {});

const confirmClick = () => {
  // drawerVisible.value = false;
  formRef.value &&
    formRef.value.validate((valid: boolean) => {
      if (valid) {
        let params = {
          operationId: processStore.scanInfo.operationId,
          operationName: processStore.scanInfo.operationName,
          workOrderCode: processStore.scanInfo.workOrderCode,
          orderCode: processStore.scanInfo.orderCode,

          materialCode: processStore.scanInfo.materialCode,
          materialName: processStore.scanInfo.materialName,
          materialModel: processStore.scanInfo.materialModel,
          processId: processStore.scanInfo.id,
          printingPlateCode: formLabelAlign.printingPlateCode,
          remark: "",
        };

        addPrintInfo(params).then(() => {
          ElMessage.success("创建成功");
          emitter.emit(EventsNames.PRINTING_PLATE);
          cancelClick();
        });
      }
    });
};
</script>

<style lang="scss" scoped>
:deep(.el-form-item__label) {
  font-size: $f20;
}

#drawContent {
  width: 100%;
  //:deep(.el-form--large.el-form--label-top .el-form-item .el-form-item__label) {
  //  font-weight: 500;
  //  font-size: 22px;
  //  color: rgba(0, 0, 0, 0.9);
  //  text-align: left;
  //}
}

.base-info {
  width: 100%;
  background: #e3e5e7;
  border-radius: 16px 16px 16px 16px;
  padding: 0 30px;

  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;

    .item-label {
      font-size: 20px;
      color: rgba(0, 0, 0, 0.6);
    }

    .item-value {
      font-weight: 500;
      font-size: 24px;
      color: rgba(0, 0, 0, 0.9);
    }
  }

  .info-item:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
}

.bottom-btns {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  //margin-bottom: 20px;

  .button {
    margin-right: 20px;
  }

  .cancelBtn {
    width: 292px;
    height: 80px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 76px 76px 76px 76px;
  }

  .sureBtn {
    width: 292px;
    height: 80px;
    background: #0a59f7;
    border-radius: 76px 76px 76px 76px;
  }
}

.barHeight {
  height: calc(100vh - 170px);
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>

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