import { Cell, Checkbox, CheckboxGroup, Icon, Image } from 'vant';
import {
  PropType,
  defineComponent,
  onMounted,
  reactive,
  ref,
  watch
} from 'vue';
import styles from '../index.module.less';
// import class1 from '../images/1.png';
import activeButtonIcon from '@/common/images/icon-check-active.png';
import inactiveButtonIcon from '@/common/images/icon-check.png';
import iconStudent from '@/common/images/icon-student-default.png';
export default defineComponent({
  name: 'group-chat',
  props: {
    type: {
      type: String as PropType<'edit' | 'look'>,
      default: 'edit'
    },
    height: {
      type: [Number],
      default: 0
    },
    bottomHeight: {
      type: [String, Number],
      default: 0
    },
    headerHeight: {
      type: [Number],
      default: 0
    },
    studentList: {
      type: Array,
      default: () => []
    },
    selectItem: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:selectItem'],
  setup(props, { emit }) {
    const checkboxRefs = ref([] as any);
    const forms = reactive({
      height: props.height,
      check: [] as any
    });

    const onToggle = (index: number) => {
      if (props.type === 'look') return;
      //
      checkboxRefs.value[index].toggle();
      const list: any = [];
      props.studentList.forEach((item: any) => {
        if (forms.check.includes(item.studentId)) {
          list.push({
            studentId: item.studentId,
            studentName: item.studentName,
            studentAvatar: item.studentAvatar,
            subjectId: item.subjectId
          });
        }
      });
      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 = [];
      // console.log(selectItem, 'selectItem');
      selectItem.forEach((item: any) => {
        temp.push(item.studentId);
      });
      forms.check = temp;
    };

    onMounted(async () => {
      initSelectItem();
    });
    return () => (
      <div
        style={{
          'min-height': `calc(100vh - ${props.headerHeight}px - ${forms.height}px - ${props.bottomHeight}px )`
        }}>
        <CheckboxGroup v-model={forms.check}>
          {props.studentList.map((item: any, index: number) => (
            <Cell
              center
              onClick={() => onToggle(index)}
              class={styles.popupCell}>
              {{
                icon: () => (
                  <Image
                    src={item.studentAvatar || iconStudent}
                    class={styles.imgLogo}
                    fit="contain"
                  />
                ),
                title: () => (
                  <div class={styles.infos}>
                    <div class={styles.infoTitle}>{item.studentName}</div>
                    <div class={styles.infoContent}>{item.subjectName}</div>
                  </div>
                ),
                'right-icon': () =>
                  props.type === 'edit' && (
                    <Checkbox
                      name={item.studentId}
                      ref={e => (checkboxRefs.value[index] = e)}
                      onClick={(e: MouseEvent) => {
                        e.stopPropagation();
                      }}
                      v-slots={{
                        icon: (props: any) => (
                          <Icon
                            class={styles.boxStyle}
                            name={
                              props.checked
                                ? activeButtonIcon
                                : inactiveButtonIcon
                            }
                          />
                        )
                      }}
                    />
                  )
              }}
            </Cell>
          ))}
        </CheckboxGroup>
      </div>
    );
  }
});