import ColEmpty from '@/components/col-empty'
import Pagination from '@/components/pagination'
import request from '@/helpers/request'
import { state } from '@/state'
import { ElSkeleton, ElSkeletonItem } from 'element-plus'
import { defineComponent } from 'vue'
import Item from '../components/item'

export default defineComponent({
  name: 'list',
  props: {
    auditStatus: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pageInfo: {
        // 分页规则
        limit: 9, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      list: [] as any[],
      loading: true,
      dataShow: false // 是否有数据
    }
  },
  mounted() {
    if (state.user.data?.entryFlag) {
      this.getList()
    }
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const { data } = await request.post(
          '/api-website/videoLessonGroup/page',
          {
            data: {
              auditStatus: this.auditStatus,
              page: this.pageInfo.page,
              rows: this.pageInfo.limit,
              teacherId: state.user.data?.userId
            }
          }
        )
        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)
      }
    },
    onDetail(item: any) {
      if (this.auditStatus === 'UNPASS') {
        // this.$message.error('该课程正在审核中，请等待审核结果')
        this.$router.push({
          path: '/userInfo/videoOperation',
          query: {
            type: 'edit',
            groupId: item.id
          }
        })
        return
      } else {
        // 跳转对应详情 个人中心不跳转到详情
      }
    }
  },
  render() {
    return (
      <>
        {state.user.data?.entryFlag ? (
          <>
            <div class="flex flex-wrap px-10">
              <ElSkeleton
                loading={this.loading}
                animated
                class="flex"
                count={3}
                v-slots={{
                  template: () => (
                    <div class="w-1/3">
                      <div class="flex flex-col pt-8 w-[262px] m-auto">
                        <ElSkeletonItem
                          variant="image"
                          style={{ width: '100%', height: '175px' }}
                        ></ElSkeletonItem>
                        <div class="mx-2.5 py-3.5 border-b border-b-[#F2F2F2]">
                          <div class="text-lg leading-none font-medium whitespace-nowrap overflow-hidden text-ellipsis">
                            <ElSkeletonItem variant="h3"></ElSkeletonItem>
                          </div>
                          <div class="text-sm text-[#999] pt-2.5">
                            <ElSkeletonItem
                              variant="p"
                              style={{ width: '50%' }}
                            ></ElSkeletonItem>
                          </div>
                        </div>

                        <div class="mx-2.5 py-4 flex items-center">
                          <ElSkeletonItem
                            variant="circle"
                            style={{
                              width: '22px',
                              height: '22px',
                              marginRight: '5px'
                            }}
                          ></ElSkeletonItem>
                          <ElSkeletonItem
                            variant="p"
                            style={{ width: '20%' }}
                          ></ElSkeletonItem>
                          <p style={{ width: '45%' }}></p>
                          <ElSkeletonItem
                            variant="p"
                            style={{ width: '20%' }}
                          ></ElSkeletonItem>
                        </div>
                      </div>
                    </div>
                  )
                }}
              >
                {this.list.map((item: any) => (
                  <div class="w-1/3 pt-8" onClick={() => this.onDetail(item)}>
                    <Item
                      item={{
                        backgroundPic: item.lessonCoverUrl,
                        courseGroupName: item.lessonName,
                        studentCount: item.countStudent,
                        avatar: item.avatar,
                        teacherName: item.username,
                        coursePrice: item.lessonPrice,
                        courseNum: item.lessonCount
                      }}
                    />
                  </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 />}
          </>
        ) : (
          <ColEmpty
            type="teacherCert"
            message="您还未完成达人认证，认证后才可创建视频课哦~"
            buttonVisibility
            buttonText="去认证"
            onDetail={() => {
              this.$router.push('/teacherAuth')
            }}
          />
        )}
      </>
    )
  }
})