import { PropType, defineComponent, toRefs } from 'vue';
import styles from './index.module.less';
import icontimer from '@/common/images/icon-timer.png';
import icon_student_man from '@/common/images/icon-student-default.png';
import iconIm from '@/common/images/icon-im.png';
import { Cell, Image } from 'vant';
import icon_cancel from './icons/icon-cancel.png';
import icon_comfirm from './icons/icon-comfirm.png';
import { MusicGroupQuitDetailDto } from '../schedule';
import { postMessage } from '@/helpers/native-message';

export default defineComponent({
  name: 'schedule-manage-list-item',
  props: {
    item: {
      type: Object as PropType<MusicGroupQuitDetailDto>,
      default: () => ({})
    }
  },
  emits: ['goto'],
  setup(props, { emit }) {
    const { item } = toRefs(props);

    /** 去聊天 */
    const openIm = () => {
      postMessage({
        api: 'joinChatGroup',
        content: {
          type: 'single', // single 单人 multi 多人
          id: item.value.studentId
        }
      });
    };
    return () => (
      <div class={styles.item_box}>
        <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>
          </div>
          <Cell center label={item.value.subjectName}>
            {{
              icon: () => (
                <Image
                  src={item.value.studentAvatar || icon_student_man}
                  class={styles.iconTeacher}
                  fit="cover"
                  round
                />
              ),
              title: () => (
                <div class={styles.cellTitle}>
                  <span>{item.value.studentName}</span>
                  <img
                    class={styles.iconIm}
                    src={iconIm}
                    onClick={() => openIm()}
                  />
                </div>
              )
            }}
          </Cell>
        </div>
        {item.value.status === 'PASS' && (
          <img class={styles.iconResult} src={icon_comfirm} />
        )}
        {item.value.status === 'REJECT' && (
          <img class={styles.iconResult} src={icon_cancel} />
        )}
      </div>
    );
  }
});
