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 './item'

export default defineComponent({
  name: 'list',
  data() {
    return {
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      list: [] as any[],
      loading: false,
      dataShow: false // 是否有数据
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const { data } = await request.post(
          '/api-website/student/queryMyFollow',
          {
            requestType: 'json',
            data: {
              page: this.pageInfo.page,
              rows: this.pageInfo.limit
            }
          }
        )
        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="px-3 pt-5">
          <ElSkeleton
            loading={this.loading}
            animated
            class="w-full m-auto flex flex-wrap"
            count={2}
            v-slots={{
              template: () => (
                <div class="w-[334px] rounded-[10px] p-[18px] flex mb-4 m-auto flex-col user-shadow relative">
                  <div class="flex w-full">
                    <ElSkeletonItem
                      variant="circle"
                      style={{ width: '48px', height: '48px' }}
                    ></ElSkeletonItem>

                    <div class="flex flex-1 flex-col pl-5">
                      <ElSkeletonItem
                        variant="h3"
                        style={{
                          width: '50%',
                          marginBottom: '8px'
                        }}
                      ></ElSkeletonItem>
                      <ElSkeletonItem
                        variant="p"
                        style={{ width: '60%' }}
                      ></ElSkeletonItem>
                    </div>
                  </div>
                  <ElSkeletonItem
                    variant="p"
                    style={{ width: '60%', marginTop: '6px' }}
                  ></ElSkeletonItem>
                </div>
              )
            }}
          >
            <div class="flex flex-wrap">
              {this.list.map((item: any) => (
                <div class="basis-1/2">
                  <Item item={item} getList={this.getList} />
                </div>
              ))}
            </div>
          </ElSkeleton>
        </div>

        {this.dataShow && <ColEmpty />}

        <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}
        />
      </>
    )
  }
})
