import ColEmpty from '@/components/col-empty'
import Pagination from '@/components/pagination'
import request from '@/helpers/request'
import { ElImage, ElSkeleton, ElSkeletonItem, ElTag } from 'element-plus'
import { defineComponent } from 'vue'

import iconVip from '../images/icon_vip.png'
import iconSvip from '../images/icon_svip.png'
import iconVipDefault from '../images/icon_vip_default.png'

export default defineComponent({
  name: 'MyFans',
  data() {
    return {
      pageInfo: {
        // 分页规则
        limit: 12, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [12, 24, 48, 60] // 选择限制显示条数
      },
      list: [] as any[],
      loading: false,
      dataShow: false // 是否有数据
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const { data } = await request.post(
          '/api-website/teacher/queryMyFans',
          {
            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="rounded-md overflow-hidden">
        <div class="text-2xl font-semibold text-black leading-none px-6 py-5 ">
          我的粉丝
        </div>

        <div class={!this.dataShow && 'pt-4'}>
          <ElSkeleton
            loading={this.loading}
            animated
            class=" w-full m-auto px-[14px] flex"
            count={4}
            v-slots={{
              template: () => (
                <div class="w-[158px] rounded-[10px] pt-10 pb-7 mb-4 m-auto flex items-center justify-center flex-col user-shadow relative">
                  <ElSkeletonItem
                    variant="circle"
                    style={{ width: '48px', height: '48px' }}
                  ></ElSkeletonItem>

                  <ElSkeletonItem
                    variant="h3"
                    style={{
                      width: '50%',
                      marginTop: '8px',
                      marginBottom: '20px'
                    }}
                  ></ElSkeletonItem>
                  <ElSkeletonItem
                    variant="p"
                    style={{ width: '60%', marginTop: '6px' }}
                  ></ElSkeletonItem>
                </div>
              )
            }}
          >
            <div class="flex flex-wrap px-3">
              {this.list.map((item: any) => (
                <div class="basis-1/4 ">
                  <div class="w-[158px] rounded-[10px] pt-10 pb-7 mb-4 m-auto flex items-center justify-center flex-col user-shadow relative">
                    <div class="bg-[#FFE7CF] absolute left-2.5 top-2.5 text-[#AB5400] text-xs py-0.5 px-2 rounded-[10px]">
                      学生
                    </div>
                    <div class="flex flex-col items-center">
                      <ElImage
                        src={item.avatar}
                        class="w-12 h-12 rounded-full border-2 border-[#2DC7AA]"
                      />
                      {item.vipType && item.vipType !== 'NORMAL' && (
                        <ElImage
                          src={item.vipType === 'VIP' ? iconVip : iconSvip}
                          class="h-5 -mt-4"
                        />
                      )}
                    </div>

                    <p class="text-base text-[#333] font-semibold leading-tight pb-5 pt-2 text-center max-w-[120px] whitespace-nowrap overflow-hidden text-ellipsis">
                      {item.userName}
                    </p>
                    <p class="h-6">
                      {item.subjectName && (
                        <ElTag
                          effect="dark"
                          // size="small"
                          color="#E0FEF9"
                          round
                          style={{
                            borderColor: '#E0FEF9',
                            color: '#1B967E',
                            margin: '0 4px'
                          }}
                        >
                          {item.subjectName}
                        </ElTag>
                      )}
                    </p>
                  </div>
                </div>
              ))}
            </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 />}
      </div>
    )
  }
})