<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :title="outDialogTiltle"
      :visible.sync="outDialogVisible"
      :append-to-body="true"
      @close="handleCloseDetail"
      fullscreen
    >
      <div class="dialog-content">
        <!-- 基本信息 -->
        <el-form
          :model="sizeForm"
          ref="dynamicValidateForm"
          label-width="100px"
          class="demo-dynamic"
          :rules="dynamicRules"
        >
          <div class="form-title">基本信息</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="出库申请时间">
                <el-date-picker
                  v-model="sizeForm.ldTwoOutStorage.outDate"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  disabled
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事由" prop="ldTwoOutStorage.reason">
                <el-input
                  v-model="sizeForm.ldTwoOutStorage.reason"
                  :disabled="outDialogType != 'add'"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="物资类型"
                prop="ldTwoOutStorage.materialType"
              >
                <el-select
                  v-model="sizeForm.ldTwoOutStorage.materialType"
                  placeholder="请选择"
                  style="width: 100%"
                  :disabled="outDialogType != 'add'"
                >
                  <el-option label="办公室物资" value="1"></el-option>
                  <el-option label="其他物资" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门" prop="ldTwoOutStorage.departmentInfo">
                <el-select
                  v-model="sizeForm.ldTwoOutStorage.departmentInfo"
                  placeholder="请选择"
                  style="width: 100%"
                  :disabled="outDialogType != 'add'"
                  @change="deptChange"
                  clearable
                  filterable
                  value-key="departmentId"
                >
                  <el-option
                    v-for="item in departmentOptions"
                    :key="item.departmentId"
                    :label="item.department"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="领用人" prop="ldTwoOutStorage.proposerInfo">
                <el-select
                  v-model="sizeForm.ldTwoOutStorage.proposerInfo"
                  placeholder="请选择"
                  style="width: 100%"
                  :disabled="
                    sizeForm.departmentId == '' || outDialogType == 'details'
                  "
                  clearable
                  filterable
                  value-key="userId"
                  @change="proposerChange"
                >
                  <el-option
                    v-for="item in userOptions"
                    :key="item.userId"
                    :label="item.name"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="物资分组" prop="ldTwoOutStorage.groupName">
                <el-select
                  v-model="sizeForm.ldTwoOutStorage.groupName"
                  placeholder="请选择"
                  style="width: 100%"
                  :disabled="outDialogType != 'add'"
                  clearable
                  filterable
                  value-key="departmentId"
                  @change="groupNameChange"
                >
                  <el-option
                    v-for="item in groupNameOptions"
                    :key="item.groupName"
                    :label="item.groupName"
                    :value="item.groupName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12" v-if="outDialogType == 'details'">
              <el-form-item label="填报人">
                <el-input
                  v-model="sizeForm.ldTwoOutStorage.shipperName"
                  :disabled="outDialogType != 'add'"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="form-title">{{ outDateInfo }} 出库信息：</div>
          <div v-if="sizeForm.ldTwoOutStorage.groupName !== '自由出库'">
            <el-table
              :data="groupTableData"
              style="width: 100%"
              border
              ref="groupTable"
            >
              <!-- 展开行详情 -->
              <el-table-column type="expand">
                <template slot-scope="props">
                  <!-- 关联表单列表（带复选框） -->
                  <el-table
                    :data="props.row.twoInventoryVOList || []"
                    size="mini"
                    style="width: 100%"
                    @selection-change="
                      (val) => handleSelectionChange(val, props.row)
                    "
                    border
                  >
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" label="#" width="55" />
                    <el-table-column label="物料名称" prop="materialName" />
                    <el-table-column label="物料编码" prop="materialCode" />
                    <el-table-column label="规格型号" prop="model" />
                    <el-table-column label="数量" prop="inventory" />
                    <el-table-column label="本次出库数量" prop="num">
                      <template slot-scope="scope">
                        <el-input-number
                          size="mini"
                          v-model="scope.row.num"
                          :min="0"
                          :max="getMaxQuantity(scope.row)"
                          style="width: 100%"
                          :disabled="
                            outDialogType != 'add' || scope.row.type === 'NY'
                          "
                          @change="
                            (newValue) =>
                              handleQuantityChange(newValue, scope.$index)
                          "
                        ></el-input-number>
                      </template>
                    </el-table-column>
                    <el-table-column label="单价" prop="unitPrice" width="80" />
                  </el-table>
                </template>
              </el-table-column>

              <!-- 常规列展示 -->
              <el-table-column label="物料编码" prop="materialCode" />
              <el-table-column label="物料名称" prop="materialName" />
              <el-table-column label="规格型号" prop="model" />
              <el-table-column label="申请数量" prop="applyNum" />
              <el-table-column label="单位" prop="unit" />
            </el-table>
          </div>

          <div v-if="sizeForm.ldTwoOutStorage.groupName == '自由出库'">
            <el-button
              type="primary"
              size="mini"
              style="margin-bottom: 18px"
              @click="categoryHandle"
              v-if="outDialogType != 'details'"
              >新增</el-button
            >
            <el-table
              :data="sizeForm.ldTwoOutStorageDetailList"
              border
              style="width: 100%"
              ref="table"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-table
                    :data="scope.row.twoInventoryVOList"
                    border
                    style="width: 100%"
                  >
                    <el-table-column
                      prop="materialName"
                      label="物资名称"
                    ></el-table-column>
                    <el-table-column
                      prop="materialCode"
                      label="物资编码"
                    ></el-table-column>
                    <el-table-column
                      prop="type"
                      label="物资类型"
                    ></el-table-column>
                    <el-table-column prop="num" label="数量"></el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column prop="materialCode" label="物资编码">
              </el-table-column>

              <el-table-column
                prop="materialName"
                label="物资名称"
              ></el-table-column>
              <el-table-column prop="model" label="规格/型号">
              </el-table-column>
              <el-table-column prop="type" label="类别">
                <template slot-scope="scope">
                  {{
                    scope.row.type === "NY"
                      ? "耐用品"
                      : scope.row.type === "YH"
                      ? "易耗品"
                      : ""
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="unit" label="单位"> </el-table-column>
              <el-table-column prop="num" label="数量">
                <template slot-scope="scope">
                  <el-input-number
                    size="mini"
                    v-model="scope.row.num"
                    :min="0"
                    :max="getMaxQuantity(scope.row)"
                    style="width: 100%"
                    :disabled="
                      outDialogType != 'add' || scope.row.type === 'NY'
                    "
                    @change="
                      (newValue) => handleQuantityChange(newValue, scope.$index)
                    "
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="100"
                v-if="outDialogType != 'details'"
              >
                <template slot-scope="scope">
                  <div :disabled="outDialogType == 'details'">
                    <el-button
                      type="text"
                      size="mini"
                      @click="handleDelete(scope.$index, scope.row)"
                    >
                      删除
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="form-title" v-if="outDialogType != 'details'">
            出库账目表格：
          </div>
          <el-table
            :data="statisticsList"
            border
            style="width: 100%"
            v-if="outDialogType != 'details'"
          >
            <el-table-column prop="date" label="当前库存" align="center">
              <el-table-column prop="materialCode" label="编码">
              </el-table-column>
              <el-table-column prop="materialName" label="名称">
              </el-table-column>
              <el-table-column prop="model" label="规格"> </el-table-column>
              <el-table-column prop="type" label="类别">
                <template slot-scope="scope">
                  {{
                    scope.row.type === "NY"
                      ? "耐用品"
                      : scope.row.type === "YH"
                      ? "易耗品"
                      : ""
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="unit" label="单位"> </el-table-column>
              <el-table-column prop="num" label="数量"> </el-table-column>
            </el-table-column>
            <el-table-column prop="date" label="出库信息" align="center">
              <el-table-column prop="theOutboundQuantity" label="数量">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="date" label="出库后库存" align="center">
              <el-table-column prop="totalQuantity" label="数量">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="date" label="出库信息" align="center">
              <el-table-column label="出库人">
                <template slot-scope="scope">
                  {{
                    scope.row.userInfoVO
                      ? scope.row.userInfoVO.name
                      : sizeForm.userInfoVO.name
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="outDateInfo" label="出库时间" width="150">
                <template slot-scope="scope">
                  {{ outDateInfo }}
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseDetail()">取 消</el-button>
        <el-button
          v-if="outDialogType != 'details'"
          type="primary"
          @click="sumbit()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 新增数据 -->
    <categoryDialog
      v-if="categoryVisible"
      :categoryVisible="categoryVisible"
      :selectionData="selectionData"
      :departmentId="sizeForm.ldTwoOutStorage.departmentId"
      :categoryDialogTitle="categoryDialogTitle"
      @confirm="confirm"
      @categoryClose="categoryClose"
    ></categoryDialog>
  </div>
</template>
<script>
import { getDetailedItems } from "@/api/firstOrder/outbound";
import categoryDialog from "./categoryDialog.vue";
import {
  getUserList,
  getMaterialList,
  submit,
  getDetails,
  getStatistics,
  getOutGroupName,
  getGroupMaterial,
} from "@/api/secondOrder/outbound";
import { mapGetters } from "vuex";

export default {
  components: {
    categoryDialog,
  },
  props: {
    repairVisible: {
      type: Boolean,
      default: false,
    },
    outDialogTiltle: {
      type: String,
      default: "",
    },
    outDialogType: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    rowData: {
      type: Object,
      default: {},
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
    outDateInfo() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      return `${year}年${month}月${day}日`;
    },
  },
  watch: {
    outDialogType: {
      immediate: true,
      handler(newVal) {
        if (newVal === "details") {
          this.dynamicRules = {}; // 清空校验规则
        } else {
          this.dynamicRules = this.rules; // 恢复校验规则
        }
      },
    },
  },
  data() {
    return {
      outDialogVisible: false,
      categoryVisible: false,
      categoryDialogTitle: "出库",
      allSelectedList: [],
      selectionData: [],
      sizeForm: {
        ldTwoOutStorage: {
          outDate: "",
          reason: "",
          materialType: "",
          departmentId: "",
          department: "",
          proposerId: "",
          proposerName: "",
          submitName: "", //填报人
          departmentInfo: null,
          proposerInfo: null,
          optionType: "YH",
          groupName: "", //物资分组
        },
        ldTwoOutStorageDetailList: [], //出库单详情
        inAccountsTableData: [], //库存汇总
        userInfoVO: {},
      },
      rules: {
        ldTwoOutStorage: {
          reason: [
            {
              required: true,
              message: "请填写",
              trigger: "blur",
            },
          ],
          materialType: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          departmentInfo: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          proposerInfo: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
        },
      },
      inBatchDialogVisible: false, //选择采购单的数据
      batchType: "", //批量选择类型
      materials: [], //物资列表
      userOptions: [], //领用人列表
      departmentOptions: [], //部门列表
      dynamicRules: {}, // 动态校验规则
      statisticsList: [], //批量更改后的明细数据
      groupNameOptions: [], //物资分组数据
      groupTableData: [], //选取分组表格数据
      selectedGroupMap: {}, // key: group 的唯一标识（如 materialId 或 index），value: 选中的子项数组
    };
  },
  mounted() {
    this.outDialogVisible = this.repairVisible;
    if (this.outDialogType == "add") {
      this.addInit();
    } else {
      this.inInit();
    }
    this.sizeForm.userInfoVO = this.userInfo;
    this.getDetailedItems();
    this.getOutGroupName();
  },
  methods: {
    // 监听嵌套表格的勾选事件
    handleSelectionChange(selection, parentRow) {
      // 使用 parentRow 的唯一标识作为 key，例如 materialId 或 materialCode
      const key =
        parentRow.materialId || parentRow.materialCode || parentRow.id;
      if (!key) {
        console.warn("Parent row has no unique key for selection tracking");
        return;
      }

      // 缓存当前分组的选中项
      this.$set(this.selectedGroupMap, key, selection);

      // 重建整个出库明细列表：扁平化所有选中项
      let allDetails = [];
      Object.values(this.selectedGroupMap).forEach((selectedList) => {
        allDetails = allDetails.concat(
          selectedList.map((item) => ({
            ...item,
            // 确保有 num 字段，默认为 0 或 1
            num: item.num || (item.type === "NY" ? 1 : 0),
          }))
        );
      });

      // 赋值给主表单
      this.sizeForm.ldTwoOutStorageDetailList = allDetails;
      console.log(this.sizeForm.ldTwoOutStorageDetailList, "批量数据");

      // 触发统计更新
      this.getStatistics();
    },
    groupNameChange() {
      if (this.sizeForm.ldTwoOutStorage.groupName != null) {
        getGroupMaterial(this.sizeForm.ldTwoOutStorage).then((res) => {
          this.groupTableData = res.data.result;
        });
      }
    },
    getOutGroupName() {
      // this.groupNameOptions = [
      //   {
      //     groupIds: "83,85",
      //     groupName: "测试",
      //   },
      //   {
      //     groupIds: null,
      //     groupName: "自由出库",
      //   },
      // ];
      getOutGroupName().then((res) => {
        this.groupNameOptions = res.data.result;
      });
    },
    // 批量 更改明细表数据
    getStatistics() {
      getStatistics(this.sizeForm.ldTwoOutStorageDetailList).then((res) => {
        this.statisticsList = res.data.result;
        this.statisticsList = this.statisticsList.map((stat) => {
          const detail = this.sizeForm.ldTwoOutStorageDetailList.find(
            (item) => item.materialCode === stat.materialCode
          );
          return {
            ...stat,
            theOutboundQuantity: detail.num || 0, //本次入库数量
            unitPrice: detail.unitPrice,
            totalQuantity: stat.num - detail.num,
          };
        });
      });
    },
    // 最大数量
    getMaxQuantity(row) {
      const stockInfo = this.statisticsList.find(
        (stat) => stat.materialCode === row.materialCode
      );
      if (row.type === "NY") {
        return 1;
      } else {
        return stockInfo ? stockInfo.num : 999999;
      }
    },
    categoryHandle() {
      if (
        !this.sizeForm.ldTwoOutStorage.proposerInfo ||
        !this.sizeForm.ldTwoOutStorage.departmentInfo
      ) {
        this.$message.error("请先选择部门和领用人");
        return false;
      }
      this.categoryVisible = true;
    },
    confirm(allSelectedList) {
      // 保存已选数量
      const existingQuantities = {};
      this.sizeForm.ldTwoOutStorageDetailList.forEach((item) => {
        existingQuantities[item.id] = item.num;
      });
      const updatedList = allSelectedList.map((item) => {
        const existingNum = existingQuantities[item.id];
        if (existingNum !== undefined) {
          return {
            ...item,
            num: existingNum,
          };
        }
        return item;
      });

      this.selectionData = updatedList;
      this.categoryVisible = false;
      this.sizeForm.ldTwoOutStorageDetailList = updatedList;
      this.getStatistics();
    },
    // 删除表格行数据
    handleDelete(index, row) {
      this.sizeForm.ldTwoOutStorageDetailList.splice(index, 1);
      this.getStatistics();
    },
    // 初始化  汇总库存 inAccountsTableData
    summaryTableData() {
      this.sizeForm.inAccountsTableData = JSON.parse(
        JSON.stringify(this.sizeForm.ldTwoOutStorageDetailList)
      );
    },
    handleQuantityChange(newValue, index) {
      console.log(newValue, "点击数量变化数量的值");
      const currentRow = this.sizeForm.ldTwoOutStorageDetailList[index];
      if (!currentRow) return;

      // 易耗品的有效数量
      currentRow.num = newValue;
      this.$set(this.sizeForm.ldTwoOutStorageDetailList, index, currentRow);
      this.$set(this.sizeForm.inAccountsTableData, index, { ...currentRow });
      this.getStatistics();
    },

    // 更新全局总计
    updateGlobalTotal() {
      let totalAmount = 0;
    },
    //获取单条选择的物资名称列表
    async getMaterialList(value) {
      getMaterialList({ departmentId: value }).then((res) => {
        this.materials = res.data.result;
      });
    },
    // 选中物资获取数据
    handleMaterialChange(row, index) {
      this.sizeForm.ldTwoOutStorageDetailList[index].materialId =
        row.materialId;
      this.sizeForm.ldTwoOutStorageDetailList[index].model = row.model;
      this.sizeForm.ldTwoOutStorageDetailList[index].materialCode =
        row.materialCode;
      this.sizeForm.ldTwoOutStorageDetailList[index].materialName =
        row.materialName;
      this.sizeForm.ldTwoOutStorageDetailList[index].type = row.type;
      this.sizeForm.ldTwoOutStorageDetailList[index].unit = row.unit;
    },
    // 获取领用人列表
    getUserList(value) {
      getUserList({ departmentId: value }).then((res) => {
        this.userOptions = res.data.result;
        if (this.outDialogType != "add") {
          let userArr = this.userOptions.filter(
            (item) => item.userId == this.sizeForm.ldTwoOutStorage.proposerId
          );
          this.sizeForm.ldTwoOutStorage.proposerInfo =
            userArr.length > 0 ? userArr[0] : {};
        }
      });
    },
    // 获取部门列表
    getDetailedItems() {
      getDetailedItems().then((res) => {
        this.departmentOptions = res.data.result;
      });
    },
    // 选中部门之后 获取领用人列表
    deptChange(value) {
      this.sizeForm.ldTwoOutStorage.proposerInfo = null;
      this.sizeForm.ldTwoOutStorage.departmentId = value.departmentId;
      this.sizeForm.ldTwoOutStorage.department = value.department;
      this.getUserList(value.departmentId);
      this.getMaterialList(value.departmentId);
      this.sizeForm.ldTwoOutStorageDetailList = [];
    },
    // 领用人选中
    proposerChange(value) {
      console.log("领用人", value);
      this.sizeForm.ldTwoOutStorage.proposerId = value.userId;
      this.sizeForm.ldTwoOutStorage.proposerName = value.name;
    },
    handleCloseDetail() {
      this.outDialogVisible = false;
      this.$emit("handleCloseDetail");
    },

    categoryClose() {
      this.categoryVisible = false;
    },

    inInit() {
      if (this.outDialogType != "add") {
        getDetails({ twoOutStorageId: this.rowData.id }).then((res) => {
          this.sizeForm = res.data.result;
          this.getUserList(this.sizeForm.ldTwoOutStorage.departmentId);

          let departmentArr = this.departmentOptions.filter(
            (item) =>
              item.departmentId == this.sizeForm.ldTwoOutStorage.departmentId
          );

          this.sizeForm.ldTwoOutStorage.departmentInfo =
            departmentArr.length > 0 ? departmentArr[0] : {};

          // this.sizeForm.ldTwoOutStorage.proposerInfo={}
        });
      }
    },

    addInit() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      this.sizeForm.ldTwoOutStorage.outDate = `${year}-${month}-${day} 00:00:00`; //入库时间
    },
    // 添加入库数据 ,点击新增
    inTableAdd() {
      this.sizeForm.ldTwoOutStorageDetailList.push({});
      this.summaryTableData();
    },
    // 提交
    sumbit() {
      console.log("form", this.sizeForm);
      this.$refs.dynamicValidateForm.validate((valid) => {
        if (valid) {
          submit(this.sizeForm).then((res) => {
            this.$message({
              type: "success",
              message: "提交成功",
            });
            this.handleCloseDetail();
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.form-title {
  margin: 20px 0;
}

::v-deep.el-dialog__footer {
  position: fixed !important;
  bottom: 0 !important;
  right: 0 !important;
}

::v-deep.dialog-content {
  max-height: calc(100vh - 200px);
  /* 减去标题栏和底部按钮的高度 */
  overflow-y: auto;
  padding-right: 10px;
  /* 预留滚动条空间 */
}
::v-deep.el-table th.el-table__cell {
  background: #f5f7fa;
  font-weight: 500;
}
</style>
