import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
import hold from '@/components/albumItem/images/hold.png'
import start from '@/components/albumItem/images/start.png'
import lineStart from '@/components/albumItem/images/lineStart.png'
import smallPan from '@/components/albumItem/images/pan.png'
import classes from './index.module.less'
// import arrow from '@/components/musicLIstItem/images/arrow.png'
import arrow from '@/views/home/images/moreArrow.png'
import hot from '@/components/hotSearch/images/hot.png'
import pan from './images/pan.png'
import somePan from './images/somePan.png'
import tagItem from '@/components/tagItem'
import pagination from '@/components/pagination'
import albumItem from './modals/albumItem'
import request from '@/helpers/request'
// import musicLIstItem from './modals/musicLIstItem'
import musicLIstItem from '@/components/musicLIstItem'
import ColEmpty from '@/components/col-empty'
import { useRoute, useRouter } from 'vue-router'
import oStart from '@/common/images/oStart.png'
import oLineStart from '@/common/images/oLineStart.png'
import titleDot from '@/views/home/images/titleDot.png'
import { watch } from 'fs'
import {
  getUserType,
  vaildTeachingUrl,
  getAuth,
  setAuth
} from '@/helpers/utils'
import { state as states } from '@/state'
export default defineComponent({
  name: 'albumDetail',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  components: { tagItem, pagination, albumItem, musicLIstItem, ColEmpty },
  setup(props, conent) {
    const state = reactive({
      title: props.title,
      hotList: [],
      hotTagList: [],
      relatedMusicAlbum: [],
      id: '',
      musicList: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      details: {} as any,
      userType: '',
      isshowData: false
    })
    const route = useRoute()
    const router = useRouter()
    const getList = async () => {
      try {
        const res = await request.post('/api-website/open/music/album/detail', {
          data: {
            id: state.id,
            page: state.pageInfo.page,
            rows: state.pageInfo.limit,
            clientType: getUserType()
          },
          params: {
            clientType: getUserType()
          }
        })
        state.details = res.data
        state.pageInfo.total = res.data.musicSheetList.total
        if (state.pageInfo.total == 0) {
          state.isshowData = true
        } else {
          state.isshowData = false
        }
        state.musicList =
          (Array.isArray(res.data.musicSheetList.rows) &&
            res.data.musicSheetList.rows.map(n => {
              if (typeof n.paymentType === 'string')
                n.paymentType = n.paymentType.split(',')
              return n
            })) ||
          []
        state.hotList = res.data.hotMusicAlbum
        state.hotTagList = res.data.musicTagNames
          ? res.data.musicTagNames.split(',')
          : []
        state.relatedMusicAlbum = res.data.relatedMusicAlbum
      } catch (e) {
        console.log(e)
      }
    }

    const favoriteAlbum = async () => {
      const tockn = getAuth()
      if (!tockn) {
        states.loginPopupStatus = true
        return
      }
      try {
        const res = await request.post(
          `/api-website/music/album/favorite/${state.id}`,
          {
            params: {
              clientType: getUserType()
            }
          }
        )
        getList()
      } catch (e) {
        console.log(e)
      }
    }
    onMounted(() => {
      if (route.query.id) {
        state.id = route.query.id as string
      }
      state.userType = getUserType()
      getList()
    })
    const getDetail = (id: number | string) => {
      state.id = id as string
      getList()
    }

    const gotoMore = () => {
      router.push({ path: '/albumibrary' })
    }
    return () => (
      <>
        <div class={[classes.wrap]}>
          <div class={classes.wall}></div>
          <div class={[classes.w1200]}>
            <div class={classes.left}>
              <div class={classes.albumInfo}>
                <div class={classes.albumTitle}>
                  <h2>{state.details.albumName}</h2>
                  <img
                    src={state.details.favorite ? lineStart : start}
                    alt=""
                    onClick={() => favoriteAlbum()}
                  />
                </div>

                <div class={classes.albumInfoTop}>
                  <div class={classes.albumInfoTopImg}>
                    {state.details.paymentType === 'CHARGE' && (
                      <span class={classes.albumType}>付费</span>
                    )}
                    <img
                      src={
                        state.details.albumCoverUrl
                          ? state.details.albumCoverUrl
                          : hold
                      }
                      alt=""
                      class={classes.albumCover}
                    />
                    {/* <img src={pan} alt="" class={classes.pan} /> */}
                  </div>
                  <div class={classes.albumInfoTopConent}>
                    <p>{state.details.albumDesc}</p>
                    <div class={classes.tagWrap}>
                      {state.hotTagList.map((item: any) => {
                        return <div class={classes.tag}>{item}</div>
                      })}
                    </div>
                    <div class={classes.albumInfoBottom}>
                      <div class={classes.albumInfoLeft}>
                        <div class={classes.itemBottomL}>
                          <img src={pan} alt="" />
                          <span>共{state.details.musicSheetCount}首曲目</span>
                        </div>
                        <div class={classes.itemBottomR}>
                          <img
                            src={state.details.favorite ? oLineStart : oStart}
                            alt=""
                            onClick={() => favoriteAlbum()}
                          />
                          <span>
                            共{state.details.albumFavoriteCount}人收藏
                          </span>
                        </div>
                      </div>
                      {/* {state.userType == 'STUDENT' ? (
                        <div class={classes.albumInfoRight}>
                          <div
                            class={classes.itemBottomR}
                            onClick={() => favoriteAlbum()}
                          >
                            <img
                              src={state.details.favorite ? lineStart : start}
                              alt=""
                            />
                            <span>
                              {state.details.favorite ? '已收藏' : '收藏'}
                            </span>
                          </div>
                        </div>
                      ) : null} */}
                    </div>
                  </div>
                </div>
              </div>
              <div class={classes.musicWrap}>
                <div class={classes.title}>
                  <span>曲目列表</span>
                  <div class={classes.dot}>
                    <img src={titleDot} alt="" />
                  </div>
                </div>
                <div class={classes.musicList} style="padding: 0 20px">
                  {state.musicList.map(item => {
                    return <musicLIstItem item={item}></musicLIstItem>
                  })}
                  {state.isshowData && <ColEmpty></ColEmpty>}
                </div>
              </div>
              <pagination
                total={state.pageInfo.total}
                v-model:page={state.pageInfo.page}
                v-model:limit={state.pageInfo.limit}
                pageSizes={state.pageInfo.page_size}
                pagination={getList}
              ></pagination>
            </div>
            <div class={classes.right}>
              <div class={classes.some}>
                <div class={classes.someTitle}>
                  <div class={classes.tilteL}>
                    {/* <img src={somePan} alt="" /> */}
                    <span>相关专辑</span>
                  </div>
                  <div
                    class={classes.tilteR}
                    onClick={() => {
                      gotoMore()
                    }}
                  >
                    <span>更多</span>
                    <img class={classes.arrow} src={arrow} alt="" />
                  </div>
                </div>

                <div class={classes.someWrap}>
                  {state.relatedMusicAlbum.map(item => (
                    <albumItem
                      detail={item}
                      onAlbumDetail={id => getDetail(id)}
                    ></albumItem>
                  ))}
                </div>
              </div>
              <div class={classes.some}>
                <div class={classes.someTitle}>
                  <div class={classes.tilteL}>
                    {/* <img src={hot} alt="" /> */}
                    <span>热门专辑</span>
                  </div>
                  <div
                    class={classes.tilteR}
                    onClick={() => {
                      gotoMore()
                    }}
                  >
                    <span>更多</span>
                    <img class={classes.arrow} src={arrow} alt="" />
                  </div>
                </div>

                <div class={classes.someWrap}>
                  {state.hotList.map(item => (
                    <albumItem
                      detail={item}
                      onAlbumDetail={id => getDetail(id)}
                    ></albumItem>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }
})
