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 = () => {
      postMessage({
        api: 'joinChatGroup',
        content: {
          type: 'multi', // single 单人 multi 多人
          id: props.item?.imGroupId
        }
      })
    }
    const gotoDetail = () => {
      router.push({ path: '/unitDetail', query: { id: props.item.id } })
    }
    return () => (
      <div class={styles.unitItem} onClick={gotoDetail}>
        <div class={styles.unitItemTop}>
          <div class={styles.unitItemLeft}>
            <p>
              {' '}
              <Image src={iconEdit} class={styles.editImg} />
              {props.item?.name || '--'}
            </p>
            <span>
              {dayjs(props.item?.createTime).format('YYYY-MM-DD HH:mm')} 至{' '}
              {dayjs(props.item?.expiryDate).format('YYYY-MM-DD HH:mm')}
            </span>
          </div>
          <div class={styles.unitItemICon} onClick={gotoMsg}>
            <Image src={iconMessage} class={styles.msgImg}></Image>
          </div>
        </div>
        <div class={[styles.unitItemInfo]}>
          <div class={[styles.unitItemInfoWrap, styles.unitItemInfoWrapLine]}>
            <p class={styles.unitItemInfoMain}>{props.item?.commitNum || 0}</p>
            <p class={styles.unitItemInfosub}>提交人数</p>
          </div>
          <div class={[styles.unitItemInfoWrap]}>
            <p class={[styles.unitItemInfoMain, styles.orange]}>{props.item?.passNum || 0}</p>
            <p class={styles.unitItemInfosub}>达标人数</p>
          </div>
        </div>
        <div class={styles.unitItemOrchestra}>
          <p>{props.item?.orchestraName || '--'}</p>
          <Icon class={styles.arrow} name="arrow"></Icon>
        </div>
      </div>
    )
  }
})
