// pages/add-stock/add-stock.ts
// const geneTree = async () => {
//   return [...Array(10).keys()].map((el) => ({
//     value: el,
//     label: el,
//   }));
import Message from "tdesign-miniprogram/message/index";
import { uploadFile } from "../../api/file";
import { addStockLog, modelList, productList, specList } from "../../api/stock";
import httpClient from "../../utils/request";
const dayjs = require("dayjs");
// };
Page({
  /**
   * 页面的初始数据
   */
  data: {
    prodPicList: [],
    totalErrMsg: "",
    defaultTime: dayjs(dayjs().format("YYYY-MM-DD")).valueOf(),
    specPickerVisible: false,
    productPickerVisible: false,
    modelPickerVisible: false,
    typePickerVisible: false,
    dateVisible: false,
    stockLimit: 0,
    picList: [],
    productOptions: [
      {
        label: "323q",
        value: "313213",
        children: [],
      },
    ],
    modelOptions: [],
    specOptions: [],
    types: [
      {
        label: "入库",
        value: "1",
      },
      {
        label: "出库",
        value: "2",
      },
    ],
    form: {
      type: undefined,
      productId: undefined,
      modelId: undefined,
      specId: undefined,
      picList: [],
      total: undefined,
      date: dayjs(dayjs().format("YYYY-MM-DD")).format("YYYY-MM-DD HH:mm:ss"),
    },
    pickerSubTitles: ["选择产品", "选择型号", "选择规格"],
  },
  onPick(e: any) {
    console.log(e);
    this.setData({
      ["productOptions[0].children"]: {
        value: "fdsf",
        label: "sdfa",
      },
    });
  },
  onChange(e: any) {
    const field = e.currentTarget.dataset.field;
    this.setData({
      [`form.${field}`]: e.detail.value,
    });
    if (field === "total") {
      console.log(e.detail);
      
      if (
        parseInt(e.detail.value) > this.data.stockLimit &&
        this.data.form.type == 2
      ) {
        this.setData({
          // @ts-ignore
          totalErrMsg: `出库数量不能大于库存数 : ` + this.data.stockLimit,
        });
      } else {
        this.setData({
          // @ts-ignore
          totalErrMsg: "",
        });
      }
    }
  },
  onPickerChange(e: any) {
    console.log(e.detail);

    const field = e.currentTarget.dataset.field;
    this.setData({
      [`form.${field}`]: e.detail.value[0],
    });
    if (field === "productId") {
      // load model options
      modelList({
        productId: this.data.form.productId,
      }).then((resp: any) => {
        this.setData({
          modelOptions: resp.rows.map((el: any) => ({
            label: el.name,
            value: el.modelId,
          })),
        });
      });
    } else if (field === "modelId") {
      // load spec options
      specList({
        modelId: this.data.form.modelId,
      }).then((resp: any) => {
        this.setData({
          specOptions: resp.rows.map((el: any) => ({
            ...el,
            label: el.name,
            value: el.specId,
          })),
        });
      });
    } else if (field === "specId") {
      const spec: any = this.data.specOptions.find(
        (el: any) => el.value == e.detail.value[0]
      );
      console.log(spec);

      this.setData({
        stockLimit: spec?.stock ?? 0,
        prodPicList:
          spec?.pic?.split(",")?.map((el: string) => {
            let url;
            if (el.startsWith("https://") || el.startsWith("http://")) {
              url = el;
            } else {
              url = `${httpClient.baseUrl}${el}`;
            }
            return {
              url,
            };
          }) ?? [],
      });
    }
  },

  onPickerCancel(e: any) {
    console.log(e);
  },

  showPicker(e: any) {
    const { pickerKey } = e.currentTarget.dataset;
    this.setData({
      [`${pickerKey}`]: true,
    });
  },
  loadProductionOptions() {
    productList().then((resp: any) => {
      this.setData({
        productOptions: resp.rows.map((el: any) => ({
          label: el.name,
          value: el.productId,
        })),
      });
    });
  },

  handleAdd(e: any) {
    const { picList } = this.data;
    const { files } = e.detail;

    this.setData({
      // @ts-ignore
      picList: [
        ...picList,
        ...files.map((el: any) => ({ ...el, status: "loading" })),
      ],
    });
    // uploadFile(files[0]);

    for (const file of files) {
      uploadFile(file)
        .then((resp: any) => {
          const { picList } = this.data;
          const index = picList.findIndex((el: any) => el.url === file.url);
          if (index != -1) {
            this.setData({
              [`picList[${index}].url`]: `${httpClient.baseUrl}${resp.url}`,
              [`picList[${index}].percent`]: 100,
              [`picList[${index}].status`]: null,
            });
          }
        })
        .catch(() => {
          const { picList } = this.data;
          const index = picList.findIndex((el: any) => el.url === file.url);
          if (index != -1) {
            picList.splice(index, 1);
            this.setData({
              picList,
            });
          }
        });
    }
  },
  hidePicker() {
    this.setData({
      dateVisible: false,
    });
  },
  handleRemove(e: any) {
    const { index } = e.detail;
    const { picList } = this.data;
    picList.splice(index, 1);
    this.setData({
      picList,
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(option: any) {
    if (option.type) {
      this.setData({
        ["form.type"]: option.type,
      });
      this.loadProductionOptions();
    } else {
      wx.navigateBack();
    }
  },
  validate() {
    const { form } = this.data;
    const rules = {
      specId: [
        {
          required: true,
          message: "请选择规格",
        },
      ],
      type: [
        {
          required: true,
          message: "请选择类别",
        },
      ],
      date: [
        {
          required: true,
          message: "请选择日期",
        },
      ],
      total: [
        {
          required: true,
          message: "请输入数量",
        },
        {
          validation: () => {
            const { total } = this.data.form;
            if (this.data.form.type == 2) {
              // @ts-ignore
              return total > this.data.stockLimit;
            } else {
              return false;
            }
          },
          message: "出库数量不能超过总库存",
        },
      ],
      provePic: [
        {
          validation: () => {
            return this.data.picList.length == 0;
          },
          message: "请上传凭证照片",
        },
      ],
    };
    for (const field of Object.keys(rules)) {
      // @ts-ignore
      for (const validation of rules[field]) {
        if (validation.validation) {
          console.log(validation.validation());

          if (validation.validation()) {
            return validation.message;
          }
        }
        if (validation.required) {
          // @ts-ignore
          if (typeof form[field] === "array") {
            // @ts-ignore
            if (form[field].length <= 0) {
              return validation.message;
              // throw new Error(validation.message);
            }
          } else {
            // @ts-ignore
            if (!form[field]) {
              return validation.message;
              // throw new Error(validation.message);
            }
          }
        }
      }
    }
  },
  handleSubmitStock() {
    let message;
    message = this.validate();

    if (message) {
      Message.error({
        context: this,
        offset: [20, 32],
        duration: 1000,
        content: message,
      });
      return;
    }
    const { form } = this.data;
    addStockLog({
      specId: form.specId,
      total: form.total,
      date: form.date,
      provePic: this.data.picList.map((el: any) => el.url).join(","),
      type: form.type,
    }).then(() => {
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2];
      prevPage.handleRefresh();
      Message.success({
        context: this,
        offset: [20, 32],
        duration: 3000,
        content: "修改成功",
      });
      setTimeout(() => {
        wx.switchTab({
          url: "/pages/stock/stock",
        });
      }, 500);
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {},
});