<template>
  <el-drawer
    v-model="drawerVisible"
    :show-close="false"
    direction="rtl"
    size="972px"
  >
    <template #header>
      <div class="drawerTitle">报故</div>
    </template>
    <template #default>
      <el-scrollbar>
        <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">{{ infoData?.materialName }}</div>
                </div>
                <div class="info-item">
                  <div class="item-label">阶段</div>
                  <div class="item-value">
                    {{
                      dictStroe.getLableByValue(
                        "stage",
                        infoData?.stageDictValue
                      )
                    }}
                  </div>
                </div>
                <div class="info-item">
                  <div class="item-label">生产数量</div>
                  <div class="item-value">{{ infoData?.planNum }}</div>
                </div>
              </div>
            </el-form-item>
            <el-form-item
              :label="`报故数量[${formLabelAlign.seqNo.length}]`"
              prop="escalationItemList"
            >
              <el-select
                v-model="formLabelAlign.seqNo"
                multiple
                placeholder="请选择"
                value-key="seqNo"
                @change="selectProcessWorkSeqChange"
              >
                <el-option
                  v-for="item in infoData?.processWorkSeq"
                  :key="item.seqNo"
                  :label="item.seqNo"
                  :value="item.seqNo"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="不合格原因分类" prop="reason">
              <el-select
                v-model="formLabelAlign.reason"
                multiple
                placeholder="请选择"
                value-key="dictValue"
              >
                <el-option
                  v-for="item in dictStroe.dicts.unqualified_type"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="是否首检" prop="firstInspection">
              <el-radio-group v-model="formLabelAlign.firstInspection">
                <el-radio :value="0" border size="large">否</el-radio>
                <el-radio :value="1" border size="large">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="不合格品分布情况及工序" prop="processes">
              <el-select
                v-model="formLabelAlign.processes"
                multiple
                placeholder="请选择"
                value-key="operationId"
              >
                <el-option
                  v-for="item in operationList"
                  :key="item.operationId"
                  :label="item.operationName"
                  :value="item.operationId"
                />
              </el-select>
            </el-form-item>

            <el-row :gutter="20" style="width: 100%">
              <el-col :span="12">
                <el-form-item label="责任/经办者" prop="personResponsible">
                  <el-select
                    v-model="formLabelAlign.personResponsible"
                    filterable
                    placeholder="请选择"
                    value-key="id"
                  >
                    <el-option
                      v-for="item in allUsers"
                      :key="item.id"
                      :label="item.userName"
                      :value="item.userName"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检验员" prop="userName">
                  <el-select
                    v-model="formLabelAlign.userName"
                    filterable
                    placeholder="请选择"
                    value-key="id"
                  >
                    <el-option
                      v-for="item in allUsers"
                      :key="item.id"
                      :label="item.userName"
                      :value="item.userName"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="归档编号" prop="archiveNumber">
              <el-input v-model="formLabelAlign.archiveNumber" />
            </el-form-item>
            <el-form-item label="工作令号" prop="workOrderNumber">
              <el-input v-model="formLabelAlign.workOrderNumber" />
            </el-form-item>
            <el-form-item label="追踪卡号" prop="trackingNumber">
              <el-input v-model="formLabelAlign.trackingNumber" />
            </el-form-item>
            <el-form-item label="特征和程度" prop="remark">
              <el-input
                v-model="formLabelAlign.remark"
                :rows="3"
                type="textarea"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-scrollbar>
    </template>
    <template #footer>
      <div class="bottom-btns">
        <el-button class="cancelBtn" @click="cancelClick">取消</el-button>
        <el-button class="sureBtn" type="primary" @click="confirmClick"
          >报故
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import {
  addBreakReport,
  breakReportInfoById,
  operationListByIds,
} from "@/api/process/reportBreak";
import { useProcessStore } from "@/store/modules/processView";
import { useDictionaryStore } from "@/store/modules/dictionary";
import { getUserList } from "@/api/auth";

const processStore = useProcessStore();
const dictStroe = useDictionaryStore();

const drawerVisible = ref(false);

const infoData = ref<any>({});

const formRef = ref<InstanceType<typeof ElForm>>();
const formLabelAlign = reactive({
  seqNo: [],
  reason: [],
  processes: [],
  firstInspection: 0,
  personResponsible: "",
  userName: "",
  archiveNumber: "",
  workOrderNumber: "",
  trackingNumber: "",
  remark: "",
});
const rules = reactive({
  trackingNumber: [
    { required: true, message: "请输入 追踪卡号", trigger: "blur" },
  ],
  workOrderNumber: [
    { required: true, message: "请输入 工作令号", trigger: "blur" },
  ],
  archiveNumber: [
    { required: true, message: "请输入 归档编号", trigger: "blur" },
  ],
  escalationItemList: [{ required: true, message: "请选择 ", trigger: "blur" }],
});

// 获取所有用户列表
const allUsers = ref<any[]>([]);

const openReportBreakDrawer = () => {
  drawerVisible.value = true;
  breakReportInfoById(processStore.scanInfo.id).then((res) => {
    infoData.value = res.data;
  });
  getUserList().then((res) => {
    allUsers.value = res.data || [];
  });
};

// 报故数量，选择工序号相关. 选择之后获取工序列表
const operationList = ref<any[]>([]);
const selectProcessWorkSeqChange = useDebounceFn(() => {
  operationListByIds(formLabelAlign.escalationItemList).then((res) => {
    operationList.value = res.data;
  });
}, 2000);

const cancelClick = () => {
  drawerVisible.value = false;
};

const confirmClick = () => {
  // drawerVisible.value = false;
  formRef.value &&
    formRef.value.validate((valid: boolean) => {
      if (valid) {
        let params = {
          processId: processStore.scanInfo.id,
          ...formLabelAlign,
        };
        addBreakReport(params).then(() => {
          ElMessage.success("报故成功");
          drawerVisible.value = false;
        });
      } else {
        return false;
      }
    });
};

defineExpose({
  openReportBreakDrawer,
});
</script>

<style lang="scss" scoped>
#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 {
  height: 351px;
  width: 100%;
  background: #e3e5e7;
  border-radius: 16px 16px 16px 16px;

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

    .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);
    }
  }
}

.bottom-btns {
  display: flex;
  justify-content: center;
  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;
  }
}
</style>
