import ColEmpty from '@/components/col-empty'
import Pagination from '@/components/pagination'
import request from '@/helpers/request'
import styles from './index.module.less'
import { ElSkeleton, ElSkeletonItem } from 'element-plus'
import { defineComponent } from 'vue'
import Item from '../components/item'
import { getUserType } from '@/helpers/utils'

export default defineComponent({
  name: 'list',
  data() {
    return {
      clientType: '',
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      list: [] as any[],
      loading: false,
      dataShow: false // 是否有数据
    }
  },
  mounted() {
    const clientType = getUserType()
    if (clientType === 'TEACHER') this.clientType = clientType
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const { data } = await request.get(
          '/api-website/music/album/favorite',
          {
            params: {
              page: this.pageInfo.page,
              rows: this.pageInfo.limit,
              clientType: this.clientType
            }
          }
        )
        this.list = data.rows || []
        this.pageInfo.total = data.total
        if (data.total <= 0) {
          this.dataShow = true
        }
      } catch {}
      if (this.dataShow) {
        this.loading = false
      } else {
        setTimeout(() => {
          this.loading = false
        }, 200)
      }
    }
  },
  render() {
    return (
      <>
        <div class="flex flex-wrap">
          <ElSkeleton
            loading={this.loading}
            animated
            class="px-[14px] flex items-center flex-row justify-between"
            count={4}
            v-slots={{
              template: () => (
                <div class="flex items-center flex-col justify-between w-[156px]">
                  <ElSkeletonItem
                    variant="image"
                    style={{ width: '156px', height: '156px' }}
                  ></ElSkeletonItem>
                  <ElSkeletonItem
                    variant="p"
                    style={{ width: '100%', margin: '4px 0' }}
                  ></ElSkeletonItem>
                  <div class="flex w-full justify-between">
                    <ElSkeletonItem
                      variant="p"
                      style={{ width: '35%' }}
                    ></ElSkeletonItem>

                    <ElSkeletonItem
                      variant="p"
                      style={{ width: '35%' }}
                    ></ElSkeletonItem>
                  </div>
                </div>
              )
            }}
          >
            {this.list.map((item: any) => (
              <>
                <div class="w-1/4 pb-5">
                  <Item
                    class="m-auto"
                    item={item}
                    onItemClick={(item: any) => {
                      this.$router.push({
                        path: '/albumDetail',
                        query: {
                          id: item.id
                        }
                      })
                    }}
                  />
                </div>
              </>
            ))}
          </ElSkeleton>
        </div>

        <Pagination
          total={this.pageInfo.total}
          v-model:page={this.pageInfo.page}
          v-model:limit={this.pageInfo.limit}
          pageSizes={this.pageInfo.page_size}
          pagination={this.getList}
        />

        {this.dataShow && <ColEmpty />}
      </>
    )
  }
})
