<template>
  <div class="midPopUp" v-if="modelValue">
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="14" class="leftView">
          <div class="btns">
            <!-- <el-button :class="selectedType == 'default' ? 'activeBtn' : ''" @click="setSelectedType('default')"
              type="primary" plain>全 部</el-button> -->
            <el-button
              :class="selectedType == 'yes' ? 'activeBtn' : ''"
              @click="setSelectedType('yes')"
              :disabled="disabled"
              type="primary"
              plain
              >符 合</el-button
            >
            <el-button
              :class="selectedType == 'no' ? 'activeBtn' : ''"
              @click="setSelectedType('no')"
              :disabled="disabled"
              type="primary"
              plain
              >不符合</el-button
            >
            <div class="submitBox">
              <el-button
                type="primary"
                @click="close"
                v-if="!bingdingStatus && !outboundStatus"
                plain
                >关 闭</el-button
              >
              <el-button
                type="primary"
                style="background-color: #f9bf5c90"
                v-if="!bingdingStatus && selectedType == 'yes'"
                @click="binding"
                plain
                >绑 定</el-button
              >

              <el-button
                @click="cancelBingding"
                type="primary"
                v-if="bingdingStatus || outboundStatus"
                plain
                >取 消</el-button
              >
              <el-button
                type="primary"
                style="background-color: #f9bf5c90"
                v-if="
                  !bingdingStatus &&
                  selectedType == 'no' &&
                  outboundStatus == false
                "
                @click="outboundFnc"
                plain
                >出 库</el-button
              >
              <el-button
                type="primary"
                @click="submit"
                style="background-color: #f9bf5c90; color: white; border: 0px"
                v-if="bingdingStatus"
                plain
                >确 认</el-button
              >
              <el-button
                type="primary"
                @click="submit"
                style="background-color: #f9bf5c90; color: white; border: 0px"
                v-if="outboundStatus"
                plain
                >确 认</el-button
              >
            </div>
          </div>
          <div class="selectInfoBox">
            <el-scrollbar class="scrollbarTop">
              <div class="scroll">
                <div class="needMaterialInfo">
                  <div>{{ selectRowData.materialName }}</div>
                  <div>{{ selectRowData.materialCode }}</div>
                  <div>
                    已装数量：{{
                      selectRowData.completeNum
                        ? selectRowData.completeNum
                        : "-"
                    }}
                  </div>
                  <div>所需总数：{{ selectRowData.totalMaterial }}</div>
                  <div>
                    还需数量：{{
                      selectRowData.totalMaterial -
                        selectRowData.completeNum -
                        topSum <
                      1
                        ? 0
                        : selectRowData.totalMaterial -
                          selectRowData.completeNum -
                          topSum
                    }}
                  </div>
                </div>
                <div
                  class="selectInfoItem"
                  v-if="selectedType == 'yes'"
                  @click="closeTopItem(item.selectedIndex)"
                  v-for="item in setTopItem"
                >
                  <div>料箱名称：</div>
                  <div>{{ item.name }}</div>
                  <div>料箱编号：</div>
                  <div>{{ item.code }}</div>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <el-scrollbar class="scrollbar">
            <template v-for="(item, index) in materialData">
              <div
                :class="
                  index == outboundIndex
                    ? 'item bound'
                    : item.selected == true
                      ? 'item active'
                      : item.isEnable == 2
                        ? 'item noBound'
                        : 'item'
                "
                :style="
                  index == selectIndex
                    ? 'border: 3px solid #6cc2ff;box-shadow: 5px #6cc2ff;'
                    : ''
                "
                v-if="itemShowStatus(item)"
                @click="setSelectIndex(index)"
              >
                <div>料箱名称：</div>
                <div>{{ item.name }}</div>
                <div>料箱编号：</div>
                <div>{{ item.code }}</div>
              </div>
            </template>
            <Empty v-if="materialData.length < 1" />
          </el-scrollbar>
        </el-col>
        <el-col :span="10">
          <el-scrollbar class="infoBox">
            <el-table class="infoTable" :data="selectIndexInfoData" border>
              <el-table-column
                prop="materialName"
                label="物料名称"
                width="120"
              />
              <el-table-column prop="materialNo" label="物料编号" />
              <el-table-column prop="num" label="出入库数量" />
              <el-table-column prop="coordinate" label="储位坐标" />
              <template #empty>
                <Empty />
              </template>
            </el-table>
          </el-scrollbar>
        </el-col>
      </el-row>
    </div>
    <Bangding
      v-model="showStatus"
      :title="bindingTitle"
      @submit="submitData"
      :submitType="submitType"
      :outboundIndex="outboundIndex"
    />
  </div>
</template>

<script lang="ts" setup>
import Bangding from "./bangding.vue";
import { vehicleBiding, outBox } from "@/api/prepare";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  workOrderCode: {
    type: String,
  },
  operationId: {
    type: String,
  },
});
const emits = defineEmits(["update:modelValue", "resetOptionsData"]);
const selectedType = ref("yes");
const disabled = ref(false);
const materialData = inject("materialData");
const selectRowData = inject("selectRowData");
const showStatus = ref(false);
const outboundIndex = ref(null);
const bindingTitle = ref("");
//1-出库 2-绑定
const submitType = ref(null);
const bingdingStatus = ref(false);
const outboundStatus = ref(false);
const selectIndex = ref(null);
const itemShowStatus = (item: any) => {
  if (selectedType.value == "yes") {
    if (item.isEnable == 1) {
      return true;
    } else {
      return false;
    }
  } else {
    if (item.isEnable == 0 || item.isEnable == 2) {
      return true;
    } else {
      return false;
    }
  }
};
const setSelectedType = (type: string) => {
  selectedType.value = type;
  selectIndex.value = null;
};
const outboundFnc = () => {
  outboundStatus.value = true;
  disabled.value = true;
};
const selectIndexInfoData = computed(() => {
  if (materialData.value.length > 0 && selectIndex.value != null) {
    return materialData.value[selectIndex.value].list;
  } else {
    return [];
  }
});
//盒子点击事件
const setSelectIndex = (index: number) => {
  selectIndex.value = index;
  if (selectedType.value == "yes") {
    //先判定是否现在数量已经够了
    if (
      selectRowData.value.totalMaterial -
        selectRowData.value.completeNum -
        topSum.value <
        1 &&
      bingdingStatus.value
    )
      return ElMessage.warning("现数目已达需要值，请不要过量绑定！");
    //在符合的条件下
    if (bingdingStatus.value) {
      if (materialData.value[selectIndex.value].selected == true) {
        materialData.value[selectIndex.value].selected = false;
      } else {
        materialData.value[selectIndex.value].selected = true;
      }
      materialData.value[selectIndex.value].selectedIndex = index;
    }
  } else {
    //在不符合的条件下
    if (
      outboundStatus.value &&
      materialData.value[selectIndex.value].isEnable != 2
    ) {
      outboundIndex.value = selectIndex.value;
    }
  }
};
const closeTopItem = (index: number) => {
  materialData.value[index].selected = false;
};
//展示已选择的待绑定的盒子数组
const setTopItem = computed(() => {
  return materialData.value.filter((item) => item.selected == true);
});
const topSum = computed(() => {
  let sum = 0;
  const array = materialData.value.filter((item) => item.selected == true);
  for (let i = 0; i < array.length; i++) {
    sum = sum + array[i].num;
  }
  return sum;
});
const close = () => {
  emits("update:modelValue", false);
  reset();
};
const binding = () => {
  bingdingStatus.value = true;
  disabled.value = true;
};
const cancelBingding = () => {
  bingdingStatus.value = false;
  outboundStatus.value = false;
  disabled.value = false;
};
//确认操作
const submit = () => {
  if (bingdingStatus.value == true) {
    if (setTopItem.value.length > 0) {
      bindingTitle.value = "绑定确认";
    } else {
      return ElMessage.warning("绑定载具数量不能为0！");
    }
  }
  if (outboundStatus.value == true) {
    if (outboundIndex.value != null) {
      bindingTitle.value = "确认出库";
    } else {
      return ElMessage.warning("请选择出库载具！");
    }
  }
  showStatus.value = true;
};
const reset = () => {
  selectedType.value = "yes";
  materialData.value = [];
  outboundIndex.value = null;
};
//提交函数（包含绑定、出库）
const submitData = async () => {
  if (bingdingStatus.value == true) {
    const codes = [];
    materialData.value.forEach((item) => {
      if (item.selected == true) {
        codes.push(item.code);
      }
    });
    const { data, code } = await vehicleBiding({
      codes,
      operationId: props.operationId,
      workOrderCode: props.workOrderCode,
    });
    if (code == "200") {
      ElMessage.success("绑定成功！");
      emits("resetOptionsData");
      close();
    }
  } else {
    //出库
    const { data, code } = await outBox({
      vehicleNo: materialData.value[outboundIndex.value].code,
      taskId: 0,
      houseNo: materialData.value[outboundIndex.value].houseNo,
    });
    if (code == "200") {
      ElMessage.success("出库成功！");
      //页面数据删除
      materialData.value.splice(outboundIndex.value, 1);
      outboundIndex.value = null;
      showStatus.value = false;
    }
  }
};
</script>

<style lang="scss" scoped>
:deep(.el-table__inner-wrapper:before) {
  width: 0 !important;
}

.bound {
  background-color: #a52a2a80 !important;
  color: white;
}

.noBound {
  background-color: grey !important;
  color: white;
}

.leftView {
  width: calc(100vw);

  .activeBtn {
    background-color: #6cc2ff !important;
    color: white !important;
    border: 0px !important;
  }
}

.body {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  padding: 24px;

  .selectInfoBox {
    width: 100%;
    height: 160px;
    border-radius: 16px;
    background-color: #ffffff60;

    .scrollbarTop {
      padding: $p10;
      height: 170px;
      width: calc(100vw * 7 / 12 - 34px);
      margin-bottom: $p10;

      .scroll {
        display: flex;

        .needMaterialInfo {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          width: 200px;
          height: 140px;
          border-radius: 16px;
          background-color: #ffffff60;
          padding: $p10;

          div {
            font-size: $p20;
            line-height: 20px;
            width: 100%;
          }
        }

        .selectInfoItem {
          margin-left: $p10;
          flex-shrink: 0;
          width: 150px;
          height: 140px;
          border-radius: 16px;
          background-color: #ffffff60;
          background-image: url("@/assets/images/caijiwancheng.png");
          background-position: right top;
          background-repeat: no-repeat;
          padding: 20px;
        }
      }
    }
  }

  .infoBox {
    height: calc(100vh - 48px);
    width: calc(100vw * 5 / 12 - 48px);
    border-radius: 16px;
    background-color: #ffffff60;

    .infoTable {
      height: calc(100vh - 48px);
      background-color: white;
    }
  }

  .btns {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-evenly;
    padding-bottom: 10px;

    .submitBox {
      width: 300px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .el-button {
      width: 150px;
      height: 60px;
      border: 1px solid #00000030;
      font-size: $f24;
      color: black;
      background-color: transparent;
      border-radius: 16px;
    }
  }

  .scrollbar {
    height: calc(100vh - 288px);
    margin-top: $p10;

    .item {
      width: 190px;
      height: 180px;
      border-radius: 16px;
      background-color: #ffffff60;
      display: inline-block;
      margin: $p20;
      padding: $p20;
      cursor: pointer;
      box-sizing: border-box !important;
    }
  }
}

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