import { Button, Cell, Icon, Image, Toast } from 'vant'
import styles from './index.module.less'
import { defineComponent } from 'vue'
import request from '@/student/home-layout-orchestra/request-home'
import bars from '../../images/bars.svg'
import TheTitle from '../the-title'
import { useRouter } from 'vue-router'
import { openDefaultWebView } from '@/student/home-layout-orchestra/state-orchestra'
import event from '../../event'

export default defineComponent({
  name: 'recommend-sage',
  props: {
    title: {
      type: String,
      default: '推荐达人'
    },
    sage: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  setup(props) {
    const router = useRouter()
    const onStart = async (item: any) => {
      // 关注与取消关注
      try {
        await request.get('/api-student/teacher/starOrUnStar', {
          params: {
            userId: item.userId,
            starStatus: 1
          }
        })
        setTimeout(() => {
          Toast('关注成功')
          item.watch = true
        }, 100)
      } catch {
        //
      }
    }
    return () => (
      <>
        {props.sage.length > 0 && (
          <TheTitle
            title={props.title}
            onDetail={() => {
              // const url =
              //   location.origin + location.pathname + '#/teacherElegant'
              // openDefaultWebView(url, () => {
              //   router.push('/teacherElegant')
              // })
              event.emit('downloadApp')
            }}
          />
        )}

        <div class={styles.sageContainer}>
          {props.sage.map((item: any) => (
            <div
              class={styles.sage}
              key={item.id}
              onClick={() => {
                // 是否要跳转到直播间
                // const url =
                //   location.origin +
                //   location.pathname +
                //   '#/teacherHome?teacherId=' +
                //   item.userId
                // openDefaultWebView(url, () => {
                //   router.push({
                //     path: '/teacherHome',
                //     query: {
                //       teacherId: item.userId
                //     }
                //   })
                // })
                event.emit('downloadApp')
              }}
            >
              {item.living && <Image src={bars} class={styles.animation} />}

              <div class={styles.header}>
                <Image class={styles.img} src={item.avatar} fit="cover" />
                {item.living && <span class={styles.living}>直播中</span>}
              </div>
              <p class={styles.username}>{item.username}</p>
              <p class={styles.cert}>认证达人</p>

              <Button
                round
                size="mini"
                class={styles.btn}
                type={item.watch ? 'default' : 'primary'}
                disabled={item.watch}
                onClick={() => {
                  // onStart(item)
                  event.emit('downloadApp')
                }}
              >
                {item.watch ? '已关注' : '关注'}
              </Button>
            </div>
          ))}
        </div>
      </>
    )
  }
})
