import { Badge, Cell, Image } from 'vant';
import { PropType, defineComponent, toRef, toRefs } from 'vue';
import icon_student_man from '@/common/images/icon-student-default.png';
import icon_vip from '@/common/images/icon-vip.png';
import styles from './index.module.less';
import { IStudentManage } from '../../type';
import { useRouter } from 'vue-router';
import icons from './icons.json';

export default defineComponent({
  name: 'm-student',
  props: {
    valueType: {
      type: String as PropType<'status' | 'statuing' | 'statued' | ''>,
      default: ''
    },
    isLink: {
      type: Boolean,
      default: true
    },
    item: {
      type: Object as PropType<IStudentManage>,
      default: () => ({})
    }
  },
  emits: ['quit', 'contact'],
  setup(props, { emit }) {
    const router = useRouter();
    const { item, isLink, valueType } = toRefs(props);
    return () => (
      <Cell
        class={[
          styles.student,
          valueType.value === 'status' ? '' : styles.studentInfo
        ]}
        center
        border={false}
        label={item.value.subjectName}
        isLink={isLink.value}
        onClick={() => {
          router.push({
            path: '/student-manage-detail',
            query: {
              studentId: item.value.studentId,
              musicGroupIds: item.value.musicGroupIds
            }
          });
        }}>
        {{
          icon: () => (
            <Badge offset={[-18, 12]}>
              {{
                default: () => (
                  <Image
                    src={item.value.studentAvatar || icon_student_man}
                    class={styles.iconTeacher}
                    fit="cover"
                    round
                  />
                ),
                content: () => (
                  <Image
                    style={{ display: item.value.vipFlag ? '' : 'none' }}
                    class={styles.dot}
                    src={icon_vip}
                  />
                )
              }}
            </Badge>
          ),
          title: () => (
            <div
              class={styles.title}
              onClick={() => {
                if (!valueType.value) return;
                emit('contact');
              }}>
              {item.value.studentName}{' '}
              {valueType.value === '' ? (
                ''
              ) : (
                <Image class={styles.iconIm} src={icons.icon_im} />
              )}
            </div>
          ),
          value: () => (
            <>
              {valueType.value === 'status' && (
                <div class={styles.statusBox}>
                  <div class={styles.status} onClick={() => emit('quit')}>
                    退团
                  </div>
                </div>
              )}
              {valueType.value === 'statuing' && (
                <div class={styles.statusBox}>
                  <div class={styles.statuing}>退团中</div>
                </div>
              )}
              {valueType.value === 'statued' && (
                <div class={styles.statusBox}>
                  <div class={styles.statued}>已退团</div>
                </div>
              )}
            </>
          )
        }}
      </Cell>
    );
  }
});
