<template>
  <el-row :gutter="20">
    <el-col :span="5" class="elColClasss">
      <el-input
        v-model="seachInput"
        class="searchInput"
        placeholder="搜索工单编号"
        style="margin-bottom: 10px"
      >
        <template #prefix></template>
      </el-input>
      <el-scrollbar class="scrollbarSty" v-loading="map.get('getListData')">
        <Order
          v-for="(item, index) in seachOrderData"
          :key="index"
          :hoverStatus="index == selectOrderIndex ? true : false"
          :item="item"
          @click="setOrderIndex(index)"
        />
        <Empty v-if="orderData.length == 0" />
      </el-scrollbar>
    </el-col>
    <el-col :span="5" class="elColClasss">
      <el-scrollbar>
        <Steps
          :opsArray="opsArray"
          :selectStepIndex="selectStepIndex"
          @setstepindex="setSelectStepIndex"
        />
      </el-scrollbar>
    </el-col>
    <el-col :span="14" class="elColClasss">
      <div class="rightCol">
        <div class="showTable">
          <el-table
            id="table"
            :data="tableData"
            :height="tableFlexHeight"
            v-loading="map.get('operationMaterial')"
          >
            <el-table-column label="物料名称" prop="materialName" width="180" />
            <el-table-column label="规格" prop="spec" width="180" />
            <el-table-column label="所需总数" prop="totalMaterial" />
            <el-table-column label="已经装箱数量" prop="completeNum" />
            <el-table-column label="还需装箱数量" prop="">
              <template #default="scope">
                <span
                  :class="
                    scope.row.totalMaterial - scope.row.completeNum < 0
                      ? 'sumOk'
                      : 'sumFail'
                  "
                  >{{
                    scope.row.totalMaterial - scope.row.completeNum < 1
                      ? 0
                      : scope.row.totalMaterial - scope.row.completeNum
                  }}</span
                >
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template #default="scope">
                <span class="opera" @click="showInfoPop(scope.row)"
                  >查询料箱</span
                >
              </template>
            </el-table-column>
            <template #empty>
              <div class="empty">
                <Empty />
              </div>
            </template>
          </el-table>

          <Pagination
            :limit="limit"
            :page="page"
            :position="'right'"
            :total="total"
            @pagination="getPagination"
          />
        </div>
        <!-- <div class="scanCode">
          <ScanCode />
        </div> -->
      </div>
    </el-col>
  </el-row>
  <div class="scanBox">
    <el-button
      :disabled="disabled"
      plain
      type="primary"
      @click="openPop('扫描料箱')"
      >扫描料箱
    </el-button>
  </div>
  <Transition>
    <ScanCode
      v-model="modelValue"
      :operationId="operationId"
      :title="scanCodeTitle"
      :workOrderCode="workOrderCode"
      @gettable="getTableData"
    />
  </Transition>
  <Transition>
    <ShowInfo
      :key="showInfoKey"
      v-model="infoModelValue"
      :operationId="operationId"
      :workOrderCode="workOrderCode"
      @reset-options-data="getTableData"
    />
  </Transition>
</template>

<script lang="ts" setup>
import Order from "./order.vue";
import Steps from "./steps.vue";
import ScanCode from "../firstPopUpView/scanCode.vue";
import ShowInfo from "../firstPopUpView/showInfo.vue";
import {
  getBoxInfo,
  getListData,
  getStation,
  workOrderPage,
} from "@/api/prepare";
import { useCommonStoreHook } from "@/store";
const commonS = useCommonStoreHook();
const map = commonS.loadingMap;
const orderData = ref([]);
const opsArray = ref([]);
const tableData = ref([]);
const seachInput = ref("");
const scanCode = ref("");
const modelValue = ref(false);
const infoModelValue = ref(false);
const showInfoKey = ref(true);
const scanCodeTitle = ref("");
const total = ref(0);
const page = ref(1);
const limit = ref(10);
const selectOrderIndex = ref(0);
const selectStepIndex = ref(0);
const tableFlexHeight = ref(0);
const materialData = ref([]);
const selectRowData = ref({});
const operationId = ref("0");
const workOrderCode = ref("0");
const disabled = ref(false);
provide("scanCode", scanCode);
provide("materialData", materialData);
provide("selectRowData", selectRowData);
const showInfoPop = async (row: any) => {
  //获取对应row箱子数据
  selectRowData.value = row;
  await getMaterialData(row.materialCode);
  infoModelValue.value = true;
};
const seachOrderData = computed(() => {
  if (seachInput.value == "") return orderData.value;
  else {
    return orderData.value.filter(
      (item) => item.workOrderCode == seachInput.value
    );
  }
});
const getPagination = (obj: any) => {
  page.value = obj.page;
  limit.value = obj.limit;
  getTableData();
};
const openPop = (title: string) => {
  scanCodeTitle.value = title;
  modelValue.value = true;
};
//获取封箱数据
const getMaterialData = async (code: string) => {
  const { data } = await getBoxInfo({
    materialCode: code,
    pageNo: 1,
    pageSize: 9999,
    operationId: opsArray.value[selectStepIndex.value].operationId,
    workOrderCode: orderData.value[selectOrderIndex.value].workOrderCode,
  });
  materialData.value = data;
};
//获取当前订单信息数据
const getOrderData = async () => {
  const { data } = await workOrderPage({
    itemAllotState: "0",
    pageNo: 1,
    pageSize: 999,
  });
  orderData.value = data.records;
};

const setOrderIndex = (index: number) => {
  selectOrderIndex.value = index;
  if (orderData.value.length > 0) {
    getStationData(orderData.value[selectOrderIndex.value].workOrderCode);
  } else {
    disabled.value = true;
  }
};
const getStationData = async (id: any) => {
  const { data } = await getStation(id);
  opsArray.value = data;
};
const getTableData = async () => {
  const { data } = await getListData({
    operationId: String(opsArray.value[selectStepIndex.value].operationId),
    workOrderCode: orderData.value[selectOrderIndex.value].workOrderCode,
    pageNo: page.value,
    pageSize: limit.value,
  });
  operationId.value = String(opsArray.value[selectStepIndex.value].operationId);
  workOrderCode.value = orderData.value[selectOrderIndex.value].workOrderCode;
  tableData.value = data.records;
  total.value = data.totalCount;
};
const setSelectStepIndex = (index: number) => {
  selectStepIndex.value = index;
  getTableData();
};
onMounted(async () => {
  tableFlexHeight.value = Number(document.getElementById("table").offsetHeight);
  await getOrderData();
  setOrderIndex(0);
});
watch(infoModelValue, () => {
  showInfoKey.value = !showInfoKey.value;
});
</script>

<style lang="scss" scoped>
.sumOk {
  color: #67c23a;
}

.sumFail {
  color: #f56c6c;
}

:deep(.el-table__inner-wrapper:before) {
  width: 0 !important;
}

.opera {
  color: var(--el-color-primary);
  font-size: $f20;
  cursor: pointer;
}

.opera:active {
  color: rgb(255, 145, 0);
}

.scanBox {
  width: calc(100vw - 1342px);
  height: 80px;
  position: fixed;
  right: 24px;
  top: 80px;
  display: flex;
  border-radius: 16px;
  justify-content: space-evenly;
  padding: 0 20px;

  .el-button {
    background-color: #0a59f7;
    color: white;
    height: 100%;
    flex: 1;
    border-radius: 16px;
    font-size: $f24;
    font-weight: $Medium;
  }
}

.elColClasss {
  padding-bottom: 69px;

  .rightCol {
    display: flex;
    flex-direction: column;
    height: 100%;

    .showTable {
      height: 100%;
      display: flex;
      flex-direction: column;

      #table {
        flex: 1;
        border-radius: 16px;
        max-height: 100%;

        .empty {
          @include flex;
        }
      }
    }

    .scanCode {
      flex: 1;
      padding-bottom: $p10;
      display: flex;
      flex-direction: column;
    }
  }
}

.scrollbarSty {
  height: calc(100vh - 260px);
}
</style>
