import ColResult from '@/components/col-result'
import request from '@/student/home-layout-orchestra/request-home'
import { Image, List } from 'vant'
import { defineComponent, reactive } from 'vue'
import styles from './index.module.less'
import bars from '../../images/bars2.svg'
import iconVideoPlay from '../../images/icon_video_play.png'
import { openDefaultWebView } from '@/student/home-layout-orchestra/state-orchestra'
import { useRouter } from 'vue-router'
import event from '../../event'

export default defineComponent({
  name: 'talent-list',
  setup() {
    const router = useRouter()
    const params = reactive({
      platformType: 'STUDENT',
      page: 1,
      rows: 20
    })
    const state = reactive({
      list: [],
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false
    })
    const getList = async () => {
      try {
        const res = await request.post('/api-student/teacher/stylePage', {
          data: {
            ...params
          }
        })
        state.loading = false
        const result = res.data || {}
        // 处理重复请求数据
        if (state.list.length > 0 && result.pageNo === 1) {
          return
        }
        state.list = state.list.concat(result.rows || [])
        state.finished = result.pageNo >= result.totalPage
        params.page = result.pageNo + 1
        state.dataShow = state.list.length > 0
      } catch {
        state.dataShow = false
        state.finished = true
      }
    }

    getList()
    return () => (
      <>
        {state.dataShow ? (
          <List
            v-model:loading={state.loading}
            finished={state.finished}
            finishedText=" "
            immediateCheck={false}
            class={styles.style}
            onLoad={getList}
          >
            <div class={styles.lineContainer}>
              <div class={styles.line}>
                {state.list.map(
                  (item: any, index: number) =>
                    index % 2 === 0 && (
                      <div
                        class={styles.styleItem}
                        onClick={() => {
                          // const url =
                          //   location.origin +
                          //   location.pathname +
                          //   '#/teacherHome?teacherId=' +
                          //   item.userId
                          // openDefaultWebView(url, () => {
                          //   router.push({
                          //     path: '/teacherHome',
                          //     query: {
                          //       teacherId: item.userId
                          //     }
                          //   })
                          // })
                          event.emit('downloadApp')
                        }}
                      >
                        <div class={styles.styleImg}>
                          <Image
                            src={item.cover}
                            fit="cover"
                            class={[styles.img, index === 0 && styles.first]}
                          />

                          {item.living === 1 ? (
                            <div class={styles.living}>
                              <div class={styles.animationContainer}>
                                <Image src={bars} class={styles.animation} />
                              </div>
                              <span>直播中</span>
                            </div>
                          ) : (
                            <Image
                              src={iconVideoPlay}
                              class={styles.iconVideoPlay}
                            />
                          )}
                        </div>
                        <div class={styles.userInfo}>
                          <p class={styles.user}>
                            <Image
                              src={item.avatar}
                              fit="cover"
                              class={styles.userImg}
                            />
                            <span>{item.username}</span>
                          </p>
                          <p class={styles.lookNum}>{item.browse}人观看</p>
                        </div>
                      </div>
                    )
                )}
              </div>
              <div class={styles.line}>
                {state.list.map(
                  (item: any, index: number) =>
                    index % 2 === 1 && (
                      <div
                        class={styles.styleItem}
                        onClick={() => {
                          // const url =
                          //   location.origin +
                          //   location.pathname +
                          //   '#/teacherHome?teacherId=' +
                          //   item.userId
                          // openDefaultWebView(url, () => {
                          //   router.push({
                          //     path: '/teacherHome',
                          //     query: {
                          //       teacherId: item.userId
                          //     }
                          //   })
                          // })
                          event.emit('downloadApp')
                        }}
                      >
                        <div class={styles.styleImg}>
                          <Image
                            src={item.cover}
                            fit="cover"
                            class={[styles.img, index === 0 && styles.first]}
                          />
                          {item.living === 1 ? (
                            <div class={styles.living}>
                              <div class={styles.animationContainer}>
                                <Image src={bars} class={styles.animation} />
                              </div>
                              <span>直播中</span>
                            </div>
                          ) : (
                            <Image
                              src={iconVideoPlay}
                              class={styles.iconVideoPlay}
                            />
                          )}
                        </div>
                        <div class={styles.userInfo}>
                          <p class={styles.user}>
                            <Image
                              src={item.avatar}
                              fit="cover"
                              class={styles.userImg}
                            />
                            <span>{item.username}</span>
                          </p>
                          <p class={styles.lookNum}>{item.browse}人观看</p>
                        </div>
                      </div>
                    )
                )}
              </div>
            </div>
          </List>
        ) : (
          <ColResult
            btnStatus={false}
            classImgSize="SMALL"
            tips="暂无达人风采"
          />
        )}
      </>
    )
  }
})
