import { defineComponent, reactive, ref } from 'vue'
import { Cell, Icon, Image, List } from 'vant'
import request from '@/helpers/request'
// import { useAsyncState } from '@vueuse/core'
// import Item from '../list/item'
import styles from './index.module.less'
import { useRoute, useRouter } from 'vue-router'
import ColResult from '@/components/col-result'
// import { state as tempState } from '@/state'
import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
import Song from '../component/song'
import { openDefaultWebView, state } from '@/state'

export default defineComponent({
  name: 'Songbook',
  setup() {
    const router = useRouter()
    const tempParams: any = {}
    if (state.version) {
      tempParams.version = state.version || '' // 处理ios审核版本
      tempParams.platform =
        state.platformType === 'STUDENT' ? 'ios-student' : 'ios-teacher'
    }
    // 判断是否在搜索页面用过
    const getSubject: any = useSubjectId(SubjectEnum.SEARCH)
    if (getSubject) {
      tempParams.subjectIds = getSubject.id
    }
    const params: any = reactive({
      auditStatus: 'PASS',
      myself: false,
      page: 1,
      ...tempParams
    })
    const data = ref<any>(null)
    const loading = ref(false)
    const finished = ref(false)
    const isError = ref(false)

    const FetchList = async () => {
      if (loading.value) {
        return
      }
      loading.value = true
      isError.value = false
      const tempParams = {
        ...params
      }

      try {
        const res = await request.post(
          `${state.platformApi}/music/sheet/list`,
          {
            data: tempParams
          }
        )
        if (data.value) {
          const result = (data.value?.rows || []).concat(res.data.rows || [])
          data.value.rows = result
        }
        data.value = data.value || res.data
        params.page = res.data.pageNo + 1
        finished.value = res.data.pageNo >= res.data.totalPage
      } catch (error) {
        isError.value = true
      }
      loading.value = false
    }

    return () => (
      <>
        {data.value && data.value.rows.length > 0 && (
          <Cell
            class={styles.title}
            titleClass={styles.cellTitle}
            title="曲谱"
            to="/music-list"
            border={false}
            v-slots={{
              value: () => (
                <span class={styles.cellValue}>
                  更多
                  <Icon name="arrow" />
                </span>
              )
            }}
          />
        )}

        <List
          loading={loading.value}
          finished={finished.value}
          finished-text={
            data.value && data.value.rows.length ? '没有更多了' : ''
          }
          onLoad={FetchList}
          error={isError.value}
        >
          {data.value && data.value.rows.length ? (
            <div class={styles.listContainer}>
              <Song
                list={data.value.rows}
                onDetail={(item: any) => {
                  const url =
                    location.origin +
                    location.pathname +
                    '#/music-detail?id=' +
                    item.id
                  openDefaultWebView(url, () => {
                    router.push({
                      path: '/music-detail',
                      query: {
                        id: item.id
                      }
                    })
                  })
                }}
              />
            </div>
          ) : (
            !loading.value && (
              <ColResult
                tips="暂无曲目"
                classImgSize="SMALL"
                btnStatus={false}
              />
            )
          )}
        </List>
      </>
    )
  }
})
