<template>
  <div style="display: flex; justify-content: space-between">
    <div class="scanCode">
      <ScanCodeInput v-model="scanCode" @keyup.enter="enterfnc" />
    </div>
    <el-button
      style="height: 50px; font-size: 20px"
      :type="!flStatus ? 'primary' : 'warning'"
      @click="flStatus = !flStatus"
      >{{ flStatus ? "切换为物料采集" : "切换为辅料采集" }}</el-button
    >
  </div>
  <div v-if="opCompentDataList.length < 1" class="showCodeBody">
    <div class="codeBox">
      <img
        src="@/assets/icons/shaoma.svg"
        style="width: 134px; height: 134px"
      />
    </div>
  </div>
  <div v-else class="materialInfoBody">
    <div
      v-for="(item, index) in opCompentDataList"
      :key="index"
      :class="item.completeStatus == 1 ? 'infoMsg infoMsgImg' : 'infoMsg'"
      @click="toXQPop(item)"
    >
      <div class="leftMsg">
        <div class="nameMsg">{{ item.itemName }}</div>
        <div class="describe">{{ item.itemModel }}</div>
        <div class="describe" v-if="!flStatus">
          单管需求：{{ item.needNum }}
        </div>
      </div>
      <div class="rightMsg">
        <div class="showSeq" @click.stop="showSeq(item.batchNoList)">
          <el-button link> 查看已绑批次号 </el-button>
        </div>
        <div v-if="!flStatus" class="info">
          <div class="describe">可采集数量:</div>
          <div class="sum">{{ item.surplusNum }}</div>
        </div>
      </div>
      <svg-icon class="svgStyle" icon-class="jiaobiao" size="25" />
    </div>
  </div>

  <xiangqingPopUp
    v-if="!flStatus"
    v-model="showXQ"
    :showInfo="seqInfoList"
    @data-list="getOpCompentData"
  />
  <flXiangqingPopUp
    v-else
    v-model="showXQ"
    :showInfo="seqInfoList"
    :isShow="isShowButton"
    @data-list="getOpCompentData"
  />
  <seqPopUp v-model="showSEQ" :showInfoData="showSeqData" />
</template>

<script setup>
import ScanCodeInput from "@/components/ScanCodeInput/index.vue";
import flXiangqingPopUp from "../popUpView/flXiangqingPopUp.vue";
import xiangqingPopUp from "../popUpView/xiangqingPopUp.vue";
import seqPopUp from "../popUpView/seqPopUp.vue";
import {
  getInfo,
  itemRecordAdd,
  recordList,
  accessoryList,
  searchMaterial,
  getCollectHistory,
  searchFlMaterial,
  getFlCollectHistory,
} from "@/api/prosteps/wuliaocaiji";
import { useProcessStore } from "@/store";
defineOptions({
  name: "Wuliaocaiji",
});
const isShowButton = ref(true);
const flStatus = ref(false);
const caijiRef = ref(null);
const store = useProcessStore();
const scanCode = ref("");
const scanCodeCopyValue = ref("");
const showXQ = ref(false);
const showCJ = ref(false);
const showSEQ = ref(false);
const seqInfoList = ref([]);
const getHistroyList = async (item) => {
  if (!flStatus.value) {
    const { data } = await getCollectHistory({
      itemCode: item.itemCode,
      operationId: store.odersData.operationId,
      pageNo: 1,
      pageSize: 9999,
      processId: store.scanInfo.id,
      workOrderCode: store.odersData.workOrderCode,
    });
    seqInfoList.value = data[0];
  } else {
    const { data } = await getFlCollectHistory({
      itemCode: item.itemCode,
      operationId: store.odersData.operationId,
      pageNo: 1,
      pageSize: 9999,
      processId: store.scanInfo.id,
      workOrderCode: store.odersData.workOrderCode,
    });
    seqInfoList.value = data[0];
  }
};
const showSeqData = ref([]);
const showSeq = (data) => {
  showSeqData.value = data;
  showSEQ.value = true;
};
//详情展示数据
const showInfoData = ref([]);
const showInfo = ref({});
//详情展示数据
const scanData = ref([]);
provide("scanData", scanData);
const enterfnc = async () => {
  isShowButton.value = true;
  let str = scanCode.value;
  if (str.length < 1) {
    ElMessage.error("请扫码采集物料");
    return;
  }
  scanCode.value = "";
  scanCodeCopyValue.value = str;
  if (flStatus.value == false) {
    const { code, data } = await searchMaterial({
      operationId: store.odersData.operationId,
      processId: store.scanInfo.id,
      seqNo: store.scanInfo.seqNo,
      scanCode: str,
      flStatus: flStatus.value,
      workOrderCode: store.odersData.workOrderCode,
    });
    if (code == "200") {
      seqInfoList.value = data[0];
      showXQ.value = true;
    }
  } else {
    const { code, data } = await searchFlMaterial({
      operationId: store.odersData.operationId,
      processId: store.scanInfo.id,
      seqNo: store.scanInfo.seqNo,
      scanCode: str,
      flStatus: flStatus.value,
      workOrderCode: store.odersData.workOrderCode,
    });
    if (code == "200") {
      seqInfoList.value = data[0];
      showXQ.value = true;
    }
  }
};
const opCompentDataList = ref([]);
//通过id获取详情
// const getInfoById = async (item) => {
//   const { data } = await getInfo({
//     itemCode: item.itemCode,
//     opId: store.odersData.operationId,
//     processId: store.scanInfo.id,
//   });
//   showInfoData.value = data;
//   showInfo.value = item;
// };
const toXQPop = async (item) => {
  // await getInfoById(item);
  await getHistroyList(item);
  showXQ.value = true;
  isShowButton.value = false;
};
//提交录入信息
const submitRecordAdd = async (index) => {
  const chooseData = scanData.value[index];
  if (!chooseData) {
    ElMessage.error("请先选择物料,并确定数量在提交录入信息");
    return;
  }
  if (!chooseData.num || chooseData.num < 1) {
    ElMessage.error("请输入数量!");
    return;
  }
  const { code, data } = await itemRecordAdd({
    itemCode: chooseData.materialCode,
    itemModel: chooseData.spec,
    itemName: chooseData.materialName,
    itemSeq: scanCodeCopyValue.value,
    operationName: store.processInfo.operationName,
    operationId: store.odersData.operationId,
    processId: store.scanInfo.id,
    num: chooseData.num,
    seqNo: store.scanInfo.seqNo,
    trackBy: "S",
    workOrderCode: store.odersData.workOrderCode,
  });
  if (code == "200") {
    showCJ.value = false;
    ElMessage.success("录入成功");
    getOpCompentData();
  }
};
const submit = () => {
  let selectIndex = caijiRef.value.selectIndex;
  submitRecordAdd(selectIndex);
};

//获取tag列表数据
const getOpCompentData = async () => {
  if (flStatus.value == false) {
    const { data } = await recordList({
      operationId: store.odersData.operationId,
      workOrderCode: store.odersData.workOrderCode,
      seqNo: store.scanInfo.seqNo,
      processId: store.scanInfo.id,
      pageNo: 1,
      pageSize: 9999,
    });
    opCompentDataList.value = data;
  } else {
    const { data } = await accessoryList({
      operationId: store.odersData.operationId,
      workOrderCode: store.odersData.workOrderCode,
      seqNo: store.scanInfo.seqNo,
      processId: store.scanInfo.id,
      pageNo: 1,
      pageSize: 9999,
    });
    opCompentDataList.value = data;
  }
};
const input = ref("");
onMounted(() => {
  getOpCompentData();
});
watch(flStatus, (value) => {
  getOpCompentData();
});
</script>

<style lang="scss" scoped>
.scanCode {
  width: 40%;
  margin-top: $p5;
}

.materialInfoBody {
  width: calc((100vw / 6 * 5) - 50px);
  margin-top: $p10;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;

  .infoMsgImg {
    background-image: url("@/assets/images/caijiwancheng.png");
    background-position: right top;
    background-repeat: no-repeat;
  }

  .infoMsg {
    min-width: 600px;
    height: 190px;
    background-color: white;
    border-radius: 16px;
    display: flex;
    padding: $p20;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .svgStyle {
      position: absolute;
      bottom: 0;
      right: 0;
    }

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

    .leftMsg {
      .nameMsg {
        font-size: $f24;
        font-weight: $Medium;
      }
    }

    .rightMsg {
      .info {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .sum {
        font-size: $f24;
        font-weight: bold;
        text-align: right;
        margin-left: 4px;
      }
    }
  }
}

.showCodeBody {
  width: calc((100vw / 6 * 5) - 50px);
  height: calc((100vh - 240px));
  @include flex;

  .codeBox {
    width: 180px;
    display: flex;
    flex-direction: column;

    img {
      margin: 0 auto;
    }

    .codeText {
      text-align: center;
      font-size: $f20;
      color: #00000030;
    }
  }
}
</style>
