import { defineComponent } from "vue";
import {Button, Cell, Image} from 'vant'
import { postMessage } from '@/helpers/native-message'
import styles from './index.module.less'
import fansBg from './images/fans-bg.png'
import icon_fans from '../../images/icon_fans.png'

export default defineComponent({
  name: 'fans-list',
  props: {
    fansList: {
      type: Array,
      default: () => []
    }
  },
  emits: ['confirm'],
  setup(props, { emit }) {
    const onDetail = async (item) => {
      // 申请入群
      if (!item.hasWaitAuditFlag && !item.existFlag) {
        // this.chatStatus = true
        // this.chatItem = item
        emit('confirm', item)
        return
      }

      // 进入群聊天
      if (item.existFlag) {
        postMessage({
          api: 'joinChatGroup',
          content: {
            type: 'multi', // single 单人 multi 多人
            id: item.id
          }
        })
      }
    }
    return () => <div class={styles.fansSection}>
      <img src={fansBg} class={styles.fansBg} />
      {props.fansList && props.fansList.length > 0 ? (
      <div class={styles.fansList}>
        {props.fansList.map((item: any) => (
          <Cell
            center
            class={styles.fansGroup}
            border={false}
            v-slots={{
              icon: () => (
                <Image
                  src={item.img || icon_fans}
                  fit="cover"
                  class={styles.fansImage}
                />
              ),
              title: () => (
                <div class={styles.fansTitle}>
                  <div class={[styles.title, 'van-ellipsis']}>
                    {item.name}
                  </div>
                  <p class={["van-ellipsis", styles.introduce]}>{item.introduce}</p>
                </div>
              ),
              default: () => (
                <Button
                  type="primary"
                  size="small"
                  round
                  disabled={item.hasWaitAuditFlag}
                  onClick={() => onDetail(item)}
                >
                  {item.existFlag ? '去聊天' : ''}
                  {item.hasWaitAuditFlag ? '审核中' : ''}
                  {!item.hasWaitAuditFlag && !item.existFlag
                    ? '申请入群'
                    : ''}
                </Button>
              )
            }}
          />
        ))}
      </div>
    ) : <div class={styles.noFans}>您还没有粉丝群哦！</div>}</div>
  }
})