<template>
  <div class="stepsViewScroll">
    <div class="btns">
      <el-button class="btn" type="success" @click="hegeAll"
        >全部合格</el-button
      >
      <el-button class="btn" type="danger" @click="buhegeAll"
        >全部不合格</el-button
      >
    </div>
    <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 class="describeText">
            内容：{{ item.content }}
          </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></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>
  <div
    style="
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    "
    v-if="checkListData.length == 0"
  >
    <Empty />
  </div>
</template>

<script 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),
    seqNo: store.scanInfo.seqNo,
    pageSize: 9999,
    pageNo: 1,
  });
  checkListData.value = data;
};
const updateCheck = async (item, res) => {
  await checkUpdate({
    id: item.id,
    result: res,
  }).then(() => {
    ElMessage.success("操作成功");
    item.result = res;
  });
};
const updateAllCheck = async (res) => {
  await checkUpdate({
    processId: store.scanInfo.id,
    result: res,
    batch: true,
  }).then(() => {
    ElMessage.success("操作成功");
    getCheckList();
  });
};
const setBoxStatus = (status) => {
  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 hegeAll = async () => {
  updateAllCheck("1");
};
const buhegeAll = async () => {
  updateAllCheck("2");
};
const hege = async (index) => {
  updateCheck(checkListData.value[index], "1");
};
const buhege = async (index) => {
  updateCheck(checkListData.value[index], "2");
};
onMounted(() => {
  getCheckList();
});
onActivated(() => {
  getCheckList();
});
</script>

<style lang="scss" scoped>
.stepsViewScroll {
  position: relative;
  padding-top: 50px;
}
.btns {
  position: fixed;
  z-index: 2;
  height: 60px;
  width: 100%;
  background-color: rgb(241, 243, 245);
  top: 230px;
  .btn {
    font-size: 20px;
    height: 50px;
  }
}
.titleText {
  font-size: $f24;
  font-weight: $Medium;
}

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

.recordBox {
  min-width: 600px;
  height: 210px;
  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>
