import { RadioGroupProps } from "ant-design-vue";
import { CollocationModule } from "../..";

export const designStore = CollocationModule.store({
  state: () => ({
    designDetail: {
      matMatchs: [],
      prodMatchs: [],
    } as any,
  }),
  getters: {
    menuOptions(state) {
      const options: RadioGroupProps["options"] = [
        { label: "换料", value: "mat" },
        { label: "换单品", value: "product" },
      ];

      const sourceData: any = {
        mat: state.designDetail.matMatchs,
        product: [],
      };

      state.designDetail.prodMatchs?.forEach((element: ProductMatching) => {
        console.log("element: ", element);
        const key = element.category || "product";
        if (!sourceData[key]) {
          sourceData[key] = [];
          options.push({ label: key, value: key });
        }
        sourceData[key].push(element);
      });
      return {
        options: options.concat({ label: "+", value: "add" }),
        sourceData,
      };
    },
  },
  actions: {
    setDesignDetail(data: IStyle) {
      this.store.designDetail = data;
    },
    addMatchCategory(data) {
      if (!this.store.designDetail.prodMatchs)
        this.store.designDetail.prodMatchs = [];
      this.store.designDetail.prodMatchs?.push(data);
    },
  },
});