const { loadBreeds, groupBreeds } = require("../../utils/breeds");
Component({
  properties: {
    value: { type: String, value: "" },
    breedId: { type: String, value: "" },
  },
  data: {
    visible: false,
    loading: false,
    error: "",
    query: "",
    groups: [],
    count: 0,
    anchor: "",
    manual: false,
    custom: "",
  },
  methods: {
    async open() {
      this.setData({
        visible: true,
        query: "",
        manual: false,
        custom: this.data.value,
      });
      await this.load();
    },
    close() {
      this.setData({ visible: false });
    },
    noop() {},
    async load(event) {
      if (this.data.loading) return;
      this.setData({ loading: true, error: "" });
      try {
        this.rows = await loadBreeds(!!event);
        this.filter();
      } catch (error) {
        this.setData({
          error: error.message || "品种列表暂不可用，仍可手动填写",
        });
      } finally {
        this.setData({ loading: false });
      }
    },
    filter() {
      const groups = groupBreeds(this.rows || [], this.data.query);
      this.setData({
        groups,
        count: groups.reduce((n, g) => n + g.items.length, 0),
      });
    },
    search(e) {
      this.setData({ query: e.detail.value, anchor: "" });
      this.filter();
    },
    jump(e) {
      this.setData({ anchor: e.currentTarget.dataset.anchor });
    },
    select(e) {
      const { id, name } = e.currentTarget.dataset;
      this.triggerEvent("change", { id, name });
      this.close();
    },
    enterManual() {
      this.setData({
        manual: true,
        custom: this.data.query || this.data.value,
      });
    },
    customInput(e) {
      this.setData({ custom: e.detail.value });
    },
    useCustom() {
      const name = this.data.custom.trim();
      if (!name) {
        wx.showToast({ title: "请输入品种名称", icon: "none" });
        return;
      }
      this.triggerEvent("change", { id: null, name });
      this.close();
    },
    clear() {
      this.triggerEvent("change", { id: null, name: "" });
      this.close();
    },
  },
});