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,
  ElButton,
  ElInput,
  ElRow,
  ElCol
} from 'element-plus'
import { defineComponent } from 'vue'
import { getUserType } from '@/helpers/utils'
import Item from '@/views/student-info/components/item'
import musicLIstItem from '@/components/musicLIstItem'

export default defineComponent({
  name: 'album-list',
  props: {
    subjectIds: {
      type: Number
    },
    onSelect: {
      type: Function,
      default: (item: any) => {}
    }
  },
  components: { musicLIstItem },
  data() {
    return {
      clientType: '',
      idAndName: '',
      pageInfo: {
        // 分页规则
        limit: 5, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [5, 10] // 选择限制显示条数
      },
      list: [] as any[],
      loading: false,
      dataShow: false // 是否有数据
    }
  },
  mounted() {
    const clientType = getUserType()
    if (clientType === 'TEACHER') this.clientType = clientType
    this.getList()
  },
  methods: {
    onSearch() {
      this.pageInfo.page = 1
      this.list = []
      this.dataShow = false
      this.loading = false
      this.getList()
    },
    async getList() {
      this.loading = true
      try {
        const { data } = await request.post(
          '/api-website/open/music/sheet/list',
          {
            data: {
              idAndName: this.idAndName,
              subjectIds: this.subjectIds,
              albumStatus: 'PASS',
              page: this.pageInfo.page,
              rows: this.pageInfo.limit,
              state: 1
            },
            params: {
              clientType: getUserType()
            }
          }
        )
        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 (
      <>
        <ElRow style={{ paddingBottom: '16px' }}>
          <ElCol span={12}>
            <ElInput
              placeholder="请输入曲目名称"
              clearable
              size="large"
              v-model={this.idAndName}
            />
          </ElCol>
          <ElCol span={11} offset={1}>
            <ElButton
              type="primary"
              size="large"
              onClick={() => {
                this.onSearch()
              }}
            >
              搜索
            </ElButton>
          </ElCol>
        </ElRow>
        <div class="mt-2">
          <ElSkeleton
            loading={this.loading}
            animated
            class=" w-full m-auto px-[14px] flex items-center flex-col"
            count={3}
            v-slots={{
              template: () => (
                <div class="h-[94px] flex items-center justify-between w-full pt-2 mb-2">
                  <div class="w-2/3 flex items-center">
                    <ElSkeletonItem
                      variant="circle"
                      style={{ width: '88px', height: '88px' }}
                    ></ElSkeletonItem>
                    <div class="w-1/2 pl-2">
                      <ElSkeletonItem variant="h3"></ElSkeletonItem>
                      <ElSkeletonItem
                        variant="p"
                        style={{ width: '50%' }}
                      ></ElSkeletonItem>
                    </div>
                  </div>
                  <ElSkeletonItem
                    variant="p"
                    style={{ width: '20%' }}
                  ></ElSkeletonItem>
                </div>
              )
            }}
          >
            {this.list.map((item: any) => (
              <musicLIstItem
                item={item}
                hiddenCollect={true}
                isClick={true}
                onClick={(item: any) => {
                  this.onSelect({
                    selectType: 'MUSIC',
                    ...item
                  })
                }}
              />
            ))}
          </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 style={{ marginBottom: '30px' }} />}
      </>
    )
  }
})
