mschool/src/views/mass-message/components/group-chat.tsx

import { Cell, Checkbox, CheckboxGroup, Icon, Image, Sticky } from 'vant';
import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
import styles from '../index.module.less';
import class1 from '../images/ic_group_list_mussic_team_stu.png';
import class2 from '../images/ic_group_list_vip.png';
import class3 from '../images/icon_repertoire_play.png';
import class4 from '../images/icon_training.png';
import class5 from '../images/icon-edu.png';

import MSearch from '@/components/m-search';
import activeButtonIcon from '@/common/images/icon-check-active.png';
import inactiveButtonIcon from '@/common/images/icon-check.png';
import request from '@/helpers/request';
import MEmpty from '@/components/m-empty';
export default defineComponent({
  name: 'group-chat',
  props: {
    height: {
      type: [Number],
      default: 0
    },
    bottomHeight: {
      type: [String, Number],
      default: 0
    },
    headerHeight: {
      type: [Number],
      default: 0
    },
    selectItem: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:selectItem'],
  setup(props, { emit }) {
    const checkboxRefs = ref([] as any);
    const forms = reactive({
      keyword: '',
      height: props.height,
      list: [],
      check: [] as any,
      dataShow: true
    });

    const formatterImage = (type: string) => {
      if (type === 'TRAINING') {
        return class4;
      } else if (type === 'REPERTOIRE_PLAY') {
        return class3;
      } else if (type === 'VIP' || type === 'COMM') {
        return class2;
      } else if (type === 'SCHOOL') {
        return class5;
      } else {
        return class1;
      }
    };

    const onToggle = (index: number) => {
      //
      checkboxRefs.value[index].toggle();

      const list: any = [];
      forms.list.forEach((item: any) => {
        if (forms.check.includes(item.id)) {
          list.push({
            id: item.id,
            value: item.name,
            text: item.tags,
            avatar: item.img || formatterImage(item.type)
          });
        }
      });
      emit('update:selectItem', list);
    };

    watch(
      () => props.height,
      () => {
        forms.height = props.height;
        // console.log(forms.height);
      }
    );

    watch(
      () => props.selectItem,
      () => {
        initSelectItem();
      },
      { deep: true }
    );

    const initSelectItem = () => {
      const selectItem = props.selectItem || [];
      const temp: any = [];
      selectItem.forEach((item: any) => {
        temp.push(item.id);
      });
      forms.check = temp;
    };

    const getList = async () => {
      try {
        const { data } = await request.post(
          '/api-web/imGroup/schoolQueryGroupList',
          {
            data: {
              keyword: forms.keyword
            }
          }
        );
        forms.list = data || [];
      } catch {
        //
      } finally {
        forms.dataShow = forms.list.length > 0 ? true : false;
      }
    };

    onMounted(() => {
      getList();
    });
    return () => (
      <div
        style={{
          'min-height': `calc(100vh - ${props.headerHeight}px - ${forms.height}px - ${props.bottomHeight}px )`
        }}>
        <Sticky
          position="top"
          offsetTop={props.headerHeight + forms.height}
          style={{ width: '100%' }}>
          <MSearch
            placeholder="请输入群聊名称"
            onSearch={async (val: string) => {
              forms.keyword = val;
              forms.dataShow = true;
              await getList();
            }}
          />
        </Sticky>
        <CheckboxGroup v-model={forms.check}>
          {forms.dataShow ? (
            forms.list.map((item: any, index: number) => (
              <Cell
                center
                onClick={() => onToggle(index)}
                class={styles.popupCell}>
                {{
                  icon: () => (
                    <Image
                      src={item.img || formatterImage(item.type)}
                      class={styles.imgLogo}
                      fit="cover"
                    />
                  ),
                  title: () => (
                    <div class={styles.infos}>
                      <div class={styles.infoTitle}>{item.name}</div>
                      <div class={styles.infoContent}>{item.tags}</div>
                    </div>
                  ),
                  'right-icon': () => (
                    <Checkbox
                      name={item.id}
                      ref={e => (checkboxRefs.value[index] = e)}
                      onClick={(e: MouseEvent) => {
                        e.preventDefault();
                        e.stopPropagation();
                        onToggle(index);
                      }}
                      v-slots={{
                        icon: (props: any) => (
                          <Icon
                            class={styles.boxStyle}
                            name={
                              props.checked
                                ? activeButtonIcon
                                : inactiveButtonIcon
                            }
                          />
                        )
                      }}
                    />
                  )
                }}
              </Cell>
            ))
          ) : (
            <MEmpty
              style={{
                minHeight: `calc(100vh - ${props.headerHeight}px - ${forms.height}px - ${props.bottomHeight}px - 100px)`
              }}
              description="暂无数据"
            />
          )}
        </CheckboxGroup>
      </div>
    );
  }
});