import { createVNode, render, h, reactive } from 'vue';
import { ElDialog, ElForm, ElFormItem, ElSelect, ElOption, ElButton, ElMessage, ElLoading } from 'element-plus';
import gridHeader from './extend/CrossAreaRelocationDialog.vue'
let extension = {
  components: {
    //查询界面扩展组件
    gridHeader: gridHeader,
    gridBody: '',
    gridFooter: '',
    //新建、编辑弹出框扩展组件
    modelHeader: '',
    modelBody: '',
    modelFooter: ''
  },
  tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
  buttons: { view: [], box: [], detail: [] }, //扩展的按钮
  methods: {
    //下面这些方法可以保留也可以删除
    onInit() {
      // let InOrder = this.buttons.find(x => x.value == 'StockOutbound');
      // if (InOrder) {
      //   InOrder.onClick = function () {
      //     let rows = this.$refs.table.getSelected();
      //     if (rows.length == 0) return this.$error("请选择数据!");
      //     if (rows.length > 1) return this.$error("请选择单条数据!");
      //     var keys = rows.map(x => { return x.stockId });
      //     this.http
      //       .post("api/Task/Outbound?id="+keys[0], null, "数据处理中")
      //       .then((x) => {
      //         if (!x.status) return this.$message.error(x.message);
      //         this.$message.success("操作成功");
      //         this.refresh();
      //       });
      //   }
      // }
      this.columns.forEach(column => {
        // if (column.field == 'materielCode') {
        //   column.formatter = (row) => {
        //     var str = '';
        //     var list = row.materielCode.split(',');
        //     for (let index = 0; index < list.length; index++) {
        //       str += list[index] + '<br>';
        //     }
        //     return str = list[0] == "" ? "空箱" : str;
        //   }
        // }
        // if (column.field == 'batchNo') {
        //   column.formatter = (row) => {
        //     var str = '';
        //     var list = row.batchNo.split(',');
        //     for (let index = 0; index < list.length; index++) {
        //       str += list[index] + '<br>';
        //     }
        //     return str = list[0] == "" ? "无" : str;
        //   }
        // }
        // if (column.field == 'materielInfo') {
        //   const today = new Date()
        //   column.formatter = (row) => {
        //     if (row.details.length > 0) {
        //       const today = new Date();
        //       const closestDate = row.details
        //         .map(x => {
        //           const date = new Date(x.effectiveDate);
        //           const diffInDays = Math.ceil(Math.abs((today - date) / (1000 * 60 * 60 * 24)));
        //           return { date, diffInDays };
        //         })
        //         .reduce((closest, current) => (current.diffInDays < closest.diffInDays ? current : closest))
        //         .date;

        //       const daysSinceClosest = Math.ceil(Math.abs((today - closestDate) / (1000 * 60 * 60 * 24)));
        //       return '<span style="color: #F56C6C">' + daysSinceClosest + "天" + '</span>';
        //     } else {
        //       return '<span style="color: #F56C6C">' + "无保质期" + '</span>';
        //     }

        //   }
        // }
        if (column.field == 'sumStock') {
          column.formatter = (row) => {
            if (row.details.length > 0) {
              var sum = 0;
              const closestDate = row.details
                .map(x => {
                  sum += (x.stockQuantity)
                })
              return '<span style="color: #F56C6C">' + sum + row.details[0].unit + '</span>';
            } else {
              return '<span style="color: #F56C6C">' + "1个" + '</span>';
            }

          }
        }
        if (column.field === 'orderStatistics') {
          column.formatter = (row) => {
            // 校验details是否存在且有数据
            if (row.details && row.details.length > 0) {
              // 按barcode + supplyCode + BatchNo 组合维度分组统计stockQuantity总和，并记录单位（取第一个非空单位）
              const groupSumMap = row.details.reduce((acc, item) => {
                // 获取分组关键字段，为空时赋予默认值
                const supplyCode = item.supplyCode || '未知供应商编码';
                const batchNo = item.batchNo || '未知批次号';
                const materielCode = item.materielCode || '未知物料'; // 保留原有物料编码
                const quantity = Number(item.stockQuantity) || 0;
                const unit = item.unit || ''; // 获取单位，无则为空

                // 组合分组键（可根据需要调整显示格式）
                const groupKey = `${supplyCode}|${batchNo}|${materielCode}`;

                // 累加数量，保留第一个非空单位
                acc[groupKey] = {
                  total: (acc[groupKey]?.total || 0) + quantity,
                  unit: acc[groupKey]?.unit || unit,
                  supplyCode,
                  batchNo,
                  materielCode
                };
                return acc;
              }, {});

              // 每个分组项生成独立div，跨行显示（包含所有分组维度和单位）
              const displayItems = Object.entries(groupSumMap).map(([_, data]) => {
                // 处理单位显示：有单位则加空格显示，无则不显示
                const unitText = data.unit ? ` ${data.unit}` : '';

                // 组装显示文本（可根据需求调整字段显示顺序和格式）
                return `<div style="line-height: 1.5; white-space: normal; margin-bottom: 4px;">
                  供应商编码：${data.supplyCode} | 批次号：${data.batchNo} | 物料编码：${data.materielCode}：${data.total}${unitText}
        </div>`;
              });

              const displayContent = displayItems.join('');
              return `<div style="color: #716cf5ff; white-space: normal; word-break: break-all;">${displayContent}</div>`;
            } else {
              return '<span style="color: #F56C6C">空箱</span>';
            }
          };
        }
        if (column.field == 'stockOrderNo') {
          column.formatter = (row) => {
            // 有明细数据时处理
            if (row.details && row.details.length > 0) {
              // 提取所有非空的orderNO并去重
              const uniqueOrderNOs = [...new Set(
                row.details.map(item => item.orderNo).filter(no => no) // 过滤空单据号
              )];

              // 有有效单据号则换行显示，否则显示默认文本
              if (uniqueOrderNOs.length > 0) {
                return `<span style="color: #F56C6C">${uniqueOrderNOs.join('<br>')}</span>`;
              } else {
                return '<span style="color: #F56C6C">暂无单据</span>';
              }
            } else {
              // 无明细数据时显示默认文本
              return '<span style="color: #F56C6C">暂无单据</span>';
            }
          }
        }
      })

      let SelectTake = this.buttons.find(x => x.value == 'SelectStockTake');
      if (SelectTake) {
        // 改为箭头函数确保this指向Vue组件实例
        SelectTake.onClick = async () => {
          // 获取选中数据（与原逻辑一致，确保是数组格式）
          let stockViews = this.$refs.table.getSelected();
          
          // 数据校验：至少选择一条数据
          if (stockViews.length === 0) return ElMessage.error("请选择需要操作的数据!");
          
          // 站台选项（可根据实际业务调整选项值）
          const stationOptions = [
            { label: "站台2", value: "2-1" },
            { label: "站台3", value: "3-1" },
            { label: "站台4", value: "4-1" },
          ];
          
          // 创建弹窗挂载节点
          const mountNode = document.createElement("div");
          document.body.appendChild(mountNode);
          
          // 表单数据（绑定选中的站台）
          const formData = reactive({
            outStation: stationOptions[0].value, // 默认选中第一个站台
          });
          
          // 创建弹窗VNode
          const vnode = createVNode(
            ElDialog,
            {
              title: "库存操作 - 选择出库站台",
              width: "500px",
              modelValue: true,
              appendToBody: true,
              "onUpdate:modelValue": (isVisible) => {
                if (!isVisible) {
                  render(null, mountNode);
                  document.body.removeChild(mountNode);
                }
              },
              style: {
                padding: "20px 0",
                borderRadius: "8px",
              },
            },
            {
              default: () =>
                h(
                  ElForm,
                  {
                    model: formData,
                    rules: {
                      outStation: [
                        { required: true, message: "请选择出库站台", trigger: "change" },
                      ],
                    },
                    ref: "stockTakeForm", // 表单ref标识
                    labelWidth: "100px",
                    style: {
                      padding: "0 30px",
                    },
                  },
                  [
                    // 站台选择下拉框
                    h(ElFormItem, {
                      label: "出库站台",
                      prop: "outStation",
                      style: { marginBottom: "24px" },
                    }, [
                      h(ElSelect, {
                        placeholder: "请选择出库站台",
                        modelValue: formData.outStation,
                        "onUpdate:modelValue": (val) => {
                          formData.outStation = val;
                        },
                        style: {
                          width: "100%",
                          height: "40px",
                          borderRadius: "4px",
                          borderColor: "#dcdfe6",
                        },
                      }, stationOptions.map((station) =>
                        h(ElOption, { label: station.label, value: station.value })
                      )),
                    ]),
                    // 底部按钮区域
                    h("div", {
                      style: {
                        textAlign: "right",
                        marginTop: "8px",
                        paddingRight: "4px",
                      },
                    }, [
                      // 取消按钮
                      h(ElButton, {
                        type: "text",
                        onClick: () => {
                          render(null, mountNode);
                          document.body.removeChild(mountNode);
                          ElMessage.info("取消库存操作");
                        },
                        style: { marginRight: "8px", color: "#606266" },
                      }, "取消"),
                      // 确定按钮
                      h(ElButton, {
                        type: "primary",
                        onClick: async () => {
                          // 确保表单ref已挂载
                          await this.$nextTick();
                          const formRef = vnode.component.refs.stockTakeForm;

                          if (!formRef) {
                            ElMessage.error("表单初始化失败，请重试");
                            return;
                          }

                          // 表单验证
                          try {
                            await formRef.validate();
                          } catch (err) {
                            return;
                          }

                          const requestBody = stockViews;
                          const outStation = formData.outStation;

                          try {

                            const url = `api/Task/TakeOutbound?outStation=${encodeURIComponent(outStation)}`;
                            
                            const x = await this.http.post(
                              url, // 带查询参数的URL
                              requestBody, // 请求体：stockViews数组
                              "数据处理中"
                            );

                            if (!x.status) {
                              ElMessage.error(x.message || "库存操作失败");
                              return;
                            }

                            ElMessage.success("操作成功");
                            this.refresh(); // 原刷新逻辑保留
                          } catch (error) {
                            console.error("库存接口请求失败：", error);
                            ElMessage.error("请求失败，请稍后重试");
                          } finally {
                            // 无论成功失败，关闭弹窗
                            render(null, mountNode);
                            document.body.removeChild(mountNode);
                          }
                        },
                        style: { borderRadius: "4px", padding: "8px 20px" },
                      }, "确定操作"),
                    ]),
                  ]),
            }
          );

          // 绑定app上下文（确保弹窗内组件正常工作）
          vnode.appContext = this.$.appContext;
          render(vnode, mountNode);
        };
      }
      let SelectTakeArea = this.buttons.find(x => x.value == 'SelectStockAreaOut');
      if (SelectTakeArea) {
        SelectTakeArea.onClick = function () {
          let stockViews = this.$refs.table.getSelected();
          this.http
            .post("api/Task/AreaOutbound",stockViews, "数据处理中")
            .then((x) => {
              if (!x.status) return this.$message.error(x.message);
              this.$message.success("操作成功");
              this.refresh();
            });
        }
      }
      var SelectStockAreaIn = this.buttons.find(x => x.value == "SelectStockAreaIn");
      if (SelectStockAreaIn != null) {
        SelectStockAreaIn.onClick = () => {
          let rows = this.$refs.table.getSelected();
          if (rows.length == 0) {
              return this.$message.error("请先选择需要移库的数据！");
            }
          this.$refs.gridHeader.open();
        }
      }
    },
    onInited() {
      //框架初始化配置后
      //如果要配置明细表,在此方法操作
      //this.detailOptions.columns.forEach(column=>{ });
    },
    searchBefore(param) {
      //界面查询前,可以给param.wheres添加查询参数
      //返回false，则不会执行查询
      return true;
    },
    searchAfter(result) {
      //查询后，result返回的查询数据,可以在显示到表格前处理表格的值
      return true;
    },
    addBefore(formData) {
      //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
      return true;
    },
    updateBefore(formData) {
      //编辑保存前formData为对象，包括明细表、删除行的Id
      return true;
    },
    rowClick({ row, column, event }) {
      //查询界面点击行事件
      this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
    },
    modelOpenAfter(row) {
      //点击编辑、新建按钮弹出框后，可以在此处写逻辑，如，从后台获取数据
      //(1)判断是编辑还是新建操作： this.currentAction=='Add';
      //(2)给弹出框设置默认值
      //(3)this.editFormFields.字段='xxx';
      //如果需要给下拉框设置默认值，请遍历this.editFormOptions找到字段配置对应data属性的key值
      //看不懂就把输出看：console.log(this.editFormOptions)
    }
  }
};
export default extension;