h5-colexiu/src/tenant/music/train-list/index.tsx

import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  ref
} from 'vue'
import {
  List,
  DropdownMenu,
  DropdownItem,
  Tag,
  Image,
  Button,
  Cell,
  Radio,
  RadioGroup
} from 'vant'
import Search from '@/components/col-search'
import request from '@/helpers/request'
import { useRoute, useRouter } from 'vue-router'
import ColResult from '@/components/col-result'
import styles from './index.module.less'
import { getRandomKey } from '../music'
import { openDefaultWebView, state as baseState, state } from '@/state'
import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
import Song from '../component/song'
import ColHeader from '@/components/col-header'
import bgImg from '../../images/bg-image.png'
import TheSticky from '@/components/the-sticky'
import dayjs from 'dayjs'

const noop = () => {
  //
}

export default defineComponent({
  name: 'MusicList',
  props: {
    teacherId: {
      type: String || Number,
      default: ''
    },
    myself: {
      type: Boolean,
      default: false
    }
  },
  setup({ onItemClick }, { expose }) {
    localStorage.setItem('behaviorId', getRandomKey())
    const route = useRoute()
    const router = useRouter()
    //

    const subjectType = route.query.subjectType || ''
    let title = ''
    if (subjectType === 'SUBJECT') {
      title = '声部练习'
    } else if (subjectType === 'MUSIC') {
      title = '独奏曲目'
    } else if (subjectType === 'ENSEMBLE') {
      title = '合奏练习'
    }
    const params = reactive({
      keyword: (route.query.search as string) || '',
      subjectType: subjectType,
      page: 1,
      subjectId: null,
      albumId: null,
      albumName: '',
      level: '',
      type: '',
      title: title
    })
    const data = ref<any>(null)
    const loading = ref(false)
    const finished = ref(false)
    const isError = ref(false)
    const searchObj = ref<any>({})
    const searchRef = ref()
    const albumRef = ref()
    const albumRecord = ref<any>([])

    const apiSuffix = ref(
      baseState.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
    )

    const onSearch = (value: string) => {
      params.page = 1
      params.keyword = value
      data.value = null
      FetchList()
    }

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

      try {
        const res = await request.post(
          `${apiSuffix.value}/tenantAlbumMusic/page`,
          {
            data: tempParams
          }
        )
        if (data.value?.rows?.length > 0 && res.data.pageNo === 1) {
          return
        }
        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
    }

    const getSelectCondition = async () => {
      const { data } = await request.post(
        `${apiSuffix.value}/tenantAlbumMusic/selectCondition`,
        {
          data: {
            subjectType: params.subjectType,
            tenantAlbumId: params.albumId
          }
        }
      )
      searchObj.value = data || {}
    }

    const getAlbumRecordPage = async () => {
      isError.value = false
      try {
        const { data } = await request.post('/userTenantAlbumRecord/list', {
          prefix:
            state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student',
          data: {
            page: 1,
            rows: 999
          }
        })
        albumRecord.value = data || []
        if (albumRecord.value.length > 0) {
          const albumCatchType = localStorage.getItem(
            'albumCatch' + subjectType
          )
          if (albumCatchType) {
            const item = albumRecord.value.find(
              (item: any) => item.tenantAlbumId == albumCatchType
            )
            if (item) {
              params.albumId = item.tenantAlbumId
              params.albumName = item.tenantAlbumName
            } else {
              params.albumId = albumRecord.value[0].tenantAlbumId
              params.albumName = albumRecord.value[0].tenantAlbumName
            }
          } else {
            params.albumId = albumRecord.value[0].tenantAlbumId
            params.albumName = albumRecord.value[0].tenantAlbumName
          }
        }
      } catch (error) {
        isError.value = true
      }
    }

    const isSearchStatus = computed(() => {
      const obj = searchObj.value
      let status = false
      if (obj.subjects && obj.subjects.length > 0) {
        status = true
      }
      if (obj.levelList && obj.levelList.length > 0) {
        status = true
      }
      if (obj.typeList && obj.typeList.length > 0) {
        status = true
      }
      return status
    })

    onMounted(async () => {
      // SUBJECT: '声部练习',
      // MUSIC: '独奏曲目',
      // ENSEMBLE: '合奏练习'
      loading.value = true
      await getAlbumRecordPage()
      await getSelectCondition()
      if (params.albumId) {
        await FetchList()
      } else {
        loading.value = false
      }
    })

    return () => {
      return (
        <>
          <div class={styles.sticky}>
            <TheSticky>
              <ColHeader
                hideHeader={false}
                background="transparent"
                isFixed={false}
                border={false}
                title={title}
                color="#131415"
              >
                {{
                  right: () =>
                    albumRecord.value.length > 1 &&
                    params.albumId && (
                      <DropdownMenu class={styles.albumSearchSection}>
                        <DropdownItem
                          titleClass={styles.albumSearchTitle}
                          title={params.albumName}
                          ref={albumRef}
                        >
                          <div
                            class={styles.albumSearchResult}
                            style={{ maxHeight: '45vh', overflowY: 'auto' }}
                          >
                            {albumRecord.value.map((item: any) => (
                              <Cell
                                border={false}
                                class={[
                                  styles.albumSearchCell,
                                  item.tenantAlbumId === params.albumId &&
                                    styles.albumSearchCellActive
                                ]}
                                center
                                onClick={async () => {
                                  localStorage.setItem(
                                    'albumCatch' + subjectType,
                                    item.tenantAlbumId
                                  )
                                  params.albumId = item.tenantAlbumId
                                  params.albumName = item.tenantAlbumName
                                  params.subjectId = null
                                  params.level = ''
                                  params.type = ''
                                  await getSelectCondition()

                                  params.page = 1
                                  data.value = null
                                  await FetchList()

                                  albumRef.value?.toggle()
                                }}
                              >
                                {{
                                  icon: () => (
                                    <Image
                                      src={item.tenantAlbumCoverImg}
                                      class={styles.albumLogo}
                                    />
                                  ),
                                  title: () => (
                                    <div class={styles.albumContent}>
                                      <h2>{item.tenantAlbumName}</h2>
                                      <p>
                                        到期时间：
                                        {dayjs(item.endTime).format(
                                          'YYYY-MM-DD'
                                        )}
                                      </p>
                                    </div>
                                  ),
                                  'right-icon': () => (
                                    <div class={styles.iconSelect}></div>
                                  )
                                }}
                              </Cell>
                            ))}
                          </div>
                        </DropdownItem>
                      </DropdownMenu>
                    )
                }}
              </ColHeader>
              <Search
                onSearch={onSearch}
                type="tenant"
                background="transparent"
                inputBackground="transparent"
                // leftIcon={iconSearch}
                v-slots={{
                  left: () => (
                    <DropdownMenu>
                      <DropdownItem
                        disabled={!isSearchStatus.value}
                        titleClass={
                          params.subjectId || params.type || params.level
                            ? styles.titleActive
                            : ''
                        }
                        title="筛选"
                        ref={searchRef}
                      >
                        <div
                          class={styles.searchResult}
                          style={{ maxHeight: '45vh', overflowY: 'auto' }}
                        >
                          {searchObj.value.subjects &&
                            searchObj.value.subjects.length > 0 && (
                              <>
                                <div class={styles.searchTitle}>声部</div>
                                <div
                                  class={[
                                    styles['radio-group'],
                                    styles.radio,
                                    styles['organ-radio']
                                  ]}
                                >
                                  {searchObj.value.subjects.map(
                                    (subject: any) => {
                                      const isActive =
                                        subject.id === params.subjectId
                                      const type = isActive
                                        ? 'primary'
                                        : 'default'
                                      return (
                                        <Tag
                                          size="large"
                                          plain={isActive}
                                          type={type}
                                          round
                                          onClick={() => {
                                            params.subjectId = subject.id
                                          }}
                                        >
                                          {subject.name}
                                        </Tag>
                                      )
                                    }
                                  )}
                                </div>
                              </>
                            )}
                          {searchObj.value.levelList &&
                            searchObj.value.levelList.length > 0 && (
                              <>
                                <div class={styles.searchTitle}>级别</div>
                                <div
                                  class={[
                                    styles['radio-group'],
                                    styles.radio,
                                    styles['organ-radio']
                                  ]}
                                >
                                  {searchObj.value.levelList.map(
                                    (subject: any) => {
                                      const isActive =
                                        subject.id === params.level
                                      const type = isActive
                                        ? 'primary'
                                        : 'default'
                                      return (
                                        <Tag
                                          size="large"
                                          plain={isActive}
                                          type={type}
                                          round
                                          onClick={() => {
                                            params.level = subject.id
                                          }}
                                        >
                                          {subject.value}
                                        </Tag>
                                      )
                                    }
                                  )}
                                </div>
                              </>
                            )}
                          {searchObj.value.typeList &&
                            searchObj.value.typeList.length > 0 && (
                              <>
                                <div class={styles.searchTitle}>类型</div>
                                <div
                                  class={[
                                    styles['radio-group'],
                                    styles.radio,
                                    styles['organ-radio']
                                  ]}
                                >
                                  {searchObj.value.typeList.map(
                                    (subject: any) => {
                                      const isActive =
                                        subject.id === params.type
                                      const type = isActive
                                        ? 'primary'
                                        : 'default'
                                      return (
                                        <Tag
                                          size="large"
                                          plain={isActive}
                                          type={type}
                                          round
                                          onClick={() => {
                                            params.type = subject.id
                                          }}
                                        >
                                          {subject.value}
                                        </Tag>
                                      )
                                    }
                                  )}
                                </div>
                              </>
                            )}
                        </div>

                        <div class={['btnGroup', 'btnMore']}>
                          <Button
                            type="primary"
                            plain
                            round
                            onClick={() => {
                              params.subjectId = null
                              params.level = ''
                              params.type = ''
                            }}
                          >
                            重 置
                          </Button>

                          <Button
                            type="primary"
                            round
                            block
                            onClick={() => {
                              onSearch('')
                              searchRef.value?.toggle()
                            }}
                          >
                            确 认
                          </Button>
                        </div>
                      </DropdownItem>
                    </DropdownMenu>
                  )
                }}
              />
            </TheSticky>
            <img class={styles.bgImg} src={bgImg} />
          </div>

          <div class={styles.alumnList}>
            <List
              // loading={loading.value}
              finished={finished.value}
              finished-text={data.value && data.value.rows.length ? '' : ''}
              onLoad={FetchList}
              error={isError.value}
              immediateCheck={false}
            >
              {data.value && data.value.rows.length ? (
                <Song
                  showTitleImg
                  list={data.value.rows}
                  onDetail={(item: any) => {
                    router.push({
                      path: '/music-detail',
                      query: {
                        subjectType,
                        id: item.id,
                        tenantAlbumId: item.tenantAlbumId
                      }
                    })
                  }}
                />
              ) : (
                !loading.value && (
                  <ColResult
                    tips="暂无曲目"
                    classImgSize="SMALL"
                    btnStatus={false}
                  />
                )
              )}
            </List>
          </div>
        </>
      )
    }
  }
})