// module/chats/components/message-select/message-select.ts
interface Option {
  id: string;
  name: string;
  checked?: boolean;
  options: Option[] | null;
}
interface HandleEvent {
  mark: {
    type: 'sub' | 'options';
    index: number;
    item: Option;
  }
}

Component({
  properties: {
    payload: { type: Object, value: { title: '', multiple: false, options: [] }, result: '' },
    active: { type: Boolean, value: false },
  },
  data: {
    options: [] as Option[],
    subOptions: [] as Option[],
    multiple: false,
    itemHeight: 48,

    result: '',
  },
  observers: {
    'payload.options'(options) {
      this.setData({ options });
    }
  },
  methods: {
    async handle(event: HandleEvent) {
      console.log(this.data.active);

      const { mark: { type, item, index } } = event;
      if (!item || !this.data.active) return;

      switch (type) {
        case 'options':
          const options = this._handle(this.data.options, item, index, this.data.payload.multiple);
          this.setData({ options });
          break;
        case 'sub':
          const subOptions = this._handle(this.data.subOptions, item, index, this.data.multiple);
          this.setData({ subOptions });
          break;
      }

      console.log(this.data);

    },
    _handle(options: Option[], item: Option, index: number, multiple?: boolean) {
      const checked = !item.checked;
      if (checked) {
        const fn = () => {
          if (multiple) {
            options[index].checked = checked;
          } else {
            options.forEach(option => { option.checked = option.id === item.id; })
          }
          return options;
        }
        if (item.options?.filter(option => !(<any>option)?.hide).length) {
          this.setData({
            subTitle: item.name,
            subOptions: item.options,
            multiple: (<any>item).css === 'checkbox'
          })
          this.onCancel = () => {
            this.setData({ subOptions: [] })
          }
          this.onConfirm = () => {
            if (!this.data.subOptions.some(option => option.checked)) {
              wx.showToast({ title: '请至少选择一项', icon: 'error' })
            } else {
              const options = fn();
              options[index].options = this.data.subOptions;
              this.setData({ subOptions: [], options })
            } 
          }
        } else {
          return fn();
        }
      } else {
        options[index].checked = !item.checked;
      }
      return options;
    },
    onCancel() { },
    onConfirm() { },
    onSubmit() {
      if (!this.data.options.some(option => option.checked)) {
        wx.showToast({ title: '请至少选择一项', icon: 'error' })
      } else {
        console.log(this.data.options);
        const result = this.data.options
          .filter((item: any) => item?.checked && !item?.hide)
          .map((option: any) => {
            const sub = option.options
              ?.filter((item: any) => item?.checked && !item?.hide)
              .map((item: any) => item.name)
              .join(', ');
            return [option.name, sub].filter(Boolean).join(': ')
          })
          .join('; ');
        this.setData({ result })

        this.triggerEvent('next', { options: this.data.options });
      }
    }
  }
})