<template>
  <div class="stepsViewScroll">
    <div class="recordBox" v-for="(item, index) in checkListData" :key="index">
      <div class="leftMsg">
        <div class="msgHeader">
          <div class="titleText">{{ item.checkName }}</div>
          <div class="describeText">单位：{{ item.unit }}</div>
        </div>
        <div class="msgFooter">
          <div class="describeText">标准值：{{ item.standard }}</div>
          <div class="describeText">上限值：{{ item.upper }}</div>
          <div class="describeText">下限值：{{ item.lower }}</div>
        </div>
      </div>
      <div class="rightOperate">
        <!-- 占位div -->
        <div style="width: 280px; font-size: 20px">
          内容：{{ item.content }}
        </div>
        <div class="operate">
          <div class="describeText operateText">结果</div>
          <div class="operateBox">
            <div
              class="operateBtn"
              @click="hege(index)"
              :style="item.result == '1' ? setBoxStatus('1') : setBoxStatus('')"
            >
              合格
            </div>
            <div
              class="operateBtn"
              @click="buhege(index)"
              :style="item.result == '2' ? setBoxStatus('2') : setBoxStatus('')"
            >
              不合格
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { checkList, checkUpdate } from "@/api/prosteps/dianjian";
import { useProcessStore } from "@/store";
defineOptions({ name: "Dianjian" });
const checkListData = ref([]);
const store = useProcessStore();
const getCheckList = async () => {
  // const { data } = await checkList({
  //   operationId: Number(store.odersData.operationId),
  //   processId: Number(store.scanInfo.id),
  //   pageSize: 9999,
  //   pageNo: 1,
  // });
  const { data } = await checkList({
    operationId: Number(store.odersData.operationId),
    processId: Number(store.scanInfo.id),
    seqNo: store.scanInfo.seqNo,
    pageSize: 9999,
    pageNo: 1,
  });
  // console.log("getCheckList",data)
  checkListData.value = data;
};
const updateCheck = async (item, res) => {
  // const {data} = await checkUpdate({
  //   id: 2,
  //   operationCheckId: 15,
  //   operator: 9999,
  //   processId: 1,
  //   result:,
  //   sortNum:,
  //   stepInstanceId:''
  // });
  await checkUpdate({
    id: item.id,
    result: res,
  }).then(() => {
    ElMessage.success("操作成功");
    item.result = res;
  });
};
const setBoxStatus = (status: string) => {
  let style = "";
  switch (status) {
    case "1":
      style = "background-color: #64BB5C;color: white;";
      break;
    case "2":
      style = "background-color: #E84026;color: white;";
      break;
    default:
      style = "background-color: #00000015;color: black;";
      break;
  }
  return style;
};
const hege = async (index) => {
  updateCheck(checkListData.value[index], "1");
};
const buhege = async (index) => {
  updateCheck(checkListData.value[index], "2");
};
onMounted(() => {
  console.log("wajajaj");
  getCheckList();
});
</script>

<style lang="scss" scoped>
.titleText {
  font-size: $f24;
  font-weight: $Medium;
}

.describeText {
  font-size: $f20;
  color: $font-default-60;
  line-height: 25px;
}

.recordBox {
  background-color: white;
  border-radius: 16px;
  display: flex;
  padding: $p20;
  justify-content: space-between;
  align-items: center;
  position: relative;

  .leftMsg {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 170px;
  }

  .rightOperate {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .operate {
      .operateText {
        margin-bottom: $p5;
      }

      .operateBox {
        width: 290px;
        height: 70px;

        border-radius: 16px;
        display: flex;
        justify-content: space-between;

        .operateBtn {
          width: 130px;
          height: 70px;
          background-color: #00000015;
          border-radius: 16px;
          text-align: center;
          line-height: 70px;
          font-size: $f24;
          font-weight: $Medium;
        }
      }
    }
  }
}
</style>
