import { ActionSheet, Button, Cell, CellGroup, Icon, Image, List } from 'vant'
import { defineComponent, reactive } from 'vue'
import styles from './unit-list-item.module.less'
import iconEdit from '../../images/icon-edit.png'
import iconMessage from '@common/images/icon-muit-message.png'

import { postMessage } from '@/helpers/native-message'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
export default defineComponent({
  name: 'unit-list-item',
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  setup(props) {
    const router = useRouter()
    const gotoMsg = (e: any) => {
      e.stopPropagation()
      postMessage({
        api: 'joinChatGroup',
        content: {
          type: 'multi', // single 单人 multi 多人
          id: props.item?.imGroupId
        }
      })
    }
    const gotoDetail = () => {
      router.push({ path: '/unitDetail', query: { id: props.item.id } })
    }
    return () => (
      <>
        <CellGroup inset class={styles.unitItem} onClick={gotoDetail}>
          <Cell center>
            {{
              icon: () => <Image src={iconEdit} class={styles.editImg} />,
              title: () => (
                <div class={['van-ellipsis', styles.testName]}>{props.item?.name || '--'}</div>
              ),
              extra: () => <Image src={iconMessage} class={styles.msgImg} onClick={gotoMsg}></Image>
            }}
          </Cell>
          <Cell>
            {{
              title: () => (
                <div class={styles.testContent}>
                  <div class={styles.testItem}>
                    <span class={styles.name}>班级名称</span>
                    <p>{props.item?.classGroupName}</p>
                  </div>
                  <div class={styles.testItem}>
                    <span class={styles.name}>乐团名称</span>
                    <p>{props.item?.orchestraName}</p>
                  </div>
                  <div class={styles.testItem}>
                    <span class={styles.name}>截止时间</span>
                    <p>{dayjs(props.item?.expiryDate).format('YYYY-MM-DD')}</p>
                  </div>
                  <div class={styles.testItem}>
                    <span class={styles.name}>提交人数</span>
                    <p>{props.item?.commitNum || 0}人</p>
                  </div>
                  <div class={styles.testItem}>
                    <span class={styles.name}>达标人数</span>
                    <p style={{ color: 'var(--van-primary)' }}>{props.item?.passNum || 0}人</p>
                  </div>
                </div>
              )
            }}
          </Cell>
        </CellGroup>
      </>
    )
  }
})
