import { Button, Cell, Dialog, Image, List, Toast } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import iconStudent from '@common/images/icon_student.png'
import iconSvip from './images/icon-svip.png'
import iconVip from './images/icon-vip.png'
import request from '@/helpers/request'
import ColResult from '@/components/col-result'
import ColHeader from '@/components/col-header'

export default defineComponent({
  name: 'my-fans',
  data() {
    return {
      list: [],
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      params: {
        page: 1,
        rows: 20
      }
    }
  },
  mounted() {},
  methods: {
    async getList() {
      try {
        const params = this.params
        const res = await request.post('/api-teacher/teacher/queryMyFans', {
          data: {
            ...params
          }
        })
        this.loading = false
        const result = res.data || {}
        // 处理重复请求数据
        if (this.list.length > 0 && result.pageNo === 1) {
          return
        }
        this.list = this.list.concat(result.rows || [])
        this.finished = result.pageNo >= result.totalPage
        this.params.page = result.pageNo + 1
        this.dataShow = this.list.length > 0
      } catch {
        this.dataShow = false
        this.finished = true
      }
    },
    formatVipImg(vipType: string) {
      if (vipType === 'VIP') {
        return {
          img: iconVip,
          vip: 'VIP'
        }
      } else if (['SVIP', 'PERMANENT_SVIP'].includes(vipType)) {
        return {
          img: iconSvip,
          vip: 'SVIP'
        }
      } else {
        return {
          img: null,
          vip: ''
        }
      }
    },
    async onRemove(item: any) {
      try {
        Dialog.confirm({
          title: '提示',
          message: '确定移除该粉丝吗？',
          confirmButtonColor: 'var(--van-primary)',
          confirmButtonText: "确定"
        }).then(async () => {
          await request.post('/api-teacher/teacher/delFans/' + item.userId)
          Toast('移除成功')

          this.params.page = 1;
          this.list = []
          this.getList()
        })
      } catch {
      }
    }
  },
  render() {
    return (
      <div class={styles.myFansContainer}>
        <ColHeader />
        {this.dataShow ? (
          <List
            v-model:loading={this.loading}
            finished={this.finished}
            finishedText=" "
            class={[styles.liveList, 'mb12']}
            onLoad={this.getList}
          >
            {this.list.map((item: any) => {
              const formatImg = this.formatVipImg(item.vipType)
              return (
                <Cell
                  class={styles.myFans}
                  center
                  v-slots={{
                    icon: () => (
                      <div class={[styles.userImgSection]}>
                        <Image
                          class={[styles.userImg, formatImg.vip && styles[formatImg.vip]]}
                          src={item.avatar || iconStudent}
                          fit="cover"
                        />
                        {formatImg.img && (
                          <img class={styles.imgTag} src={formatImg.img} />
                        )}
                      </div>
                    ),
                    title: () => (
                      <div class={styles.userInfo}>
                        <div class={styles.userName}> {item.userName} </div>
                        <div class={styles.piNameSubject}>
                          <span class={styles.subject}>{item.subjectName}</span>
                        </div>
                      </div>
                    ),
                    value: () => 
                      <span class={styles.removeBtn} onClick={() => this.onRemove(item)}>移除</span>
               
                  }}
                />
              )
            })}
          </List>
        ) : (
          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无粉丝" />
        )}
      </div>
    )
  }
})
