import { PropType, defineComponent, toRefs } from 'vue';
import styles from './index.module.less';
import icontimer from '@/common/images/icon-timer.png';
import iconTeacher from '@/common/images/icon-student-default.png';
import { Cell, Image } from 'vant';
import { MusicGroupQuitPageDto } from './schedule';

export default defineComponent({
  name: 'schedule-manage-list-item',
  props: {
    status: {
      type: String as PropType<'success' | 'error' | ''>,
      default: ''
    },
    item: {
      type: Object as PropType<MusicGroupQuitPageDto>,
      default: () => ({})
    },
    isLink: {
      type: Boolean,
      default: false
    }
  },
  emits: ['goto'],
  setup(props, { emit }) {
    const { item, isLink } = toRefs(props);
    return () => (
      <div class={styles.listItem}>
        <div class={styles.itemTop}>
          <img class={styles.icon} src={icontimer} />
          <span class={styles.timeTitle}>审批时间：</span>
          <span class={styles.time}>{item.value.createTime}</span>
          {props.status === 'success' && (
            <div class={[styles.timeBtn, styles.success]}>已通过</div>
          )}
          {props.status === 'error' && (
            <div class={[styles.timeBtn, styles.error]}>未通过</div>
          )}
        </div>
        <Cell
          center
          title={item.value.studentName}
          label={item.value.subjectName}
          value={'退团申请'}
          isLink={isLink.value}
          onClick={() => emit('goto')}>
          {{
            icon: () => (
              <Image
                src={item.value.studentAvatar || iconTeacher}
                class={styles.iconTeacher}
                fit="cover"
                round
              />
            )
          }}
        </Cell>
      </div>
    );
  }
});
