import { defineComponent } from 'vue'
import { Button, Cell, Dialog, Icon, Image, Rate, Sticky, Toast } from 'vant'
import ColHeader from '@/components/col-header'
import styles from './index.module.less'
import { state } from '@/state'
import { postMessage } from '@/helpers/native-message'

import tips from './images/icon_tips.png'
import banner1 from './images/1.png'
import banner2 from './images/2.png'
import banner3 from './images/3.png'
import iconTeacher from '@common/images/icon_teacher.png'
import musicCert from '@common/images/music_cert.png'
import teacherCert from '@common/images/teacher_cert.png'

import request from '@/helpers/request'
import ColResult from '@/components/col-result'

export default defineComponent({
  name: 'live-cert',
  computed: {
    users() {
      return state.user.data
    },
    btnStatus() {
      // this.users?.fansNum
      // this.users?.expTime
      const users: any = this.users
      const fansNum: number = this.fansNum
      const expTime: number = this.overClassNum
      return users?.fansNum >= fansNum && users?.expTime >= expTime
    }
  },
  data() {
    return {
      fansNum: 0,
      overClassNum: 0
    }
  },
  async mounted() {
    const liveFlag = state.user.data?.liveFlag
    state.openLiveStatus = liveFlag === 1 ? true : false
    try {
      const res = await request.get(
        '/api-teacher/sysConfig/queryByParamNameList',
        {
          params: {
            paramNames: 'open_live_fans_num,open_list_over_class'
          }
        }
      )
      const result = res.data
      result.forEach((item: any) => {
        if (item.paramName === 'open_live_fans_num') {
          this.fansNum = Number(item.paramValue)
        } else if (item.paramName === 'open_list_over_class') {
          this.overClassNum = Number(item.paramValue)
        }
      })

      // 如果没有达人认证，则需要先去认证
      if (!state.user.data?.entryFlag) {
        Dialog.alert({
          message: '您尚未完成达人认证，达人认证后才可开通直播权限哦！',
          confirmButtonColor: '#2DC7AA'
        }).then(() => {
          this.$router.replace('/teacherCert')
        })
      }
    } catch {
      //
    }
  },
  methods: {
    async onOpenLive() {
      try {
        await request.get('/api-teacher/teacher/openLive', {})
        Toast('开通成功')
        setTimeout(() => {
          postMessage({ api: 'back' })
        }, 1000)
      } catch {
        //
      }
    }
  },
  render() {
    return (
      <>
        {state.openLiveStatus ? (
          <>
            <ColHeader />
            <ColResult
              classImgSize="CERT"
              type="liveCert"
              style={{ paddingTop: '60px' }}
              tips={'开通成功，快去开启直播或创建直播课吧'}
            />
          </>
        ) : (
          <div class={styles['open-live']}>
            <ColHeader background="transparent" border={false} title=" " />

            <Cell
              class={styles['open-teacher-info']}
              border={false}
              v-slots={{
                icon: () => (
                  <Image
                    class={styles.userLogo}
                    src={this.users?.headUrl || iconTeacher}
                    fit="cover"
                  />
                )
              }}
            >
              <div class={styles['teacher-info']}>
                <div class={styles['teacher-name']}>
                  {this.users?.username || `游客${this.users?.userId}`}

                  {/* {this.users?.entryFlag === 1 && (
                    <Image
                      class={styles.cert}
                      src={teacherCert}
                      fit="contain"
                    />
                  )}
                  {this.users?.musicianFlag === 1 && (
                    <Image class={styles.cert} src={musicCert} fit="contain" />
                  )} */}
                </div>
                <div class={styles.level}>
                  {this.users?.starGrade ? (
                    <Rate
                      modelValue={this.users?.starGrade}
                      iconPrefix="iconfont"
                      color="#FFC459"
                      void-icon="star_default"
                      icon="star_active"
                      size={15}
                    />
                  ) : (
                    <span style={{ fontSize: '12px', color: '#999999' }}>
                      暂无评分
                    </span>
                  )}
                </div>
              </div>
            </Cell>

            <div class={styles['teacher-desc']}>
              <div class={[styles.teacherItem]}>
                <div class={styles.content}>粉丝</div>
                <div class={styles.title}>
                  {/* {this.users?.fansNum}/ */}
                  {this.fansNum}
                </div>
              </div>
              <div class={styles.teacherItem} style={{ textAlign: 'right' }}>
                <div class={styles.content}>已上课时</div>
                <div class={styles.title}>
                  {/* {this.users?.expTime}/ */}
                  {this.overClassNum}
                </div>
              </div>
            </div>

            {!this.btnStatus ? (
              <div class={styles['open-tips']}>
                <Icon name={tips} size="16" />
                <p>你尚未达到开通直播的条件</p>
              </div>
            ) : null}

            <div class={styles['open-content']}>
              {/* <h2>开通直播能为您带来什么？</h2>
              <p class={styles['cert-text']}>
                酷乐秀对平台入驻的优秀老师开放直播及直播课程的功能，帮助老师拓展获客渠道及教学场景。
              </p>
              <p class={styles['cert-img']}>
                <Image
                  src={banner1}
                  width="100%"
                  height="150px"
                  fit="contain"
                />
              </p> */}
              <h2>直播</h2>
              <p class={styles['cert-text']}>
                开通直播功能后，您可以创建自己的直播间开启直播。
              </p>
              <p class={styles['cert-img']}>
                <Image
                  src={banner2}
                  width="100%"
                  height="150px"
                  fit="contain"
                />
              </p>
              <h2>直播课</h2>
              <p class={styles['cert-text']}>
                您可制定教学方案设置直播课程，学员购买后，您可在直播间对购买直播课的学员进行直播教学，直播课程无人数上限，可极大的提高课程收入。
              </p>
              <p class={styles['cert-img']}>
                <Image
                  src={banner3}
                  width="100%"
                  height="150px"
                  fit="contain"
                />
              </p>
            </div>

            <Sticky offsetBottom={0} position="bottom">
              <div class={[styles['header-content'], 'btnGroup']}>
                <Button
                  round
                  plain
                  block
                  disabled={!this.btnStatus}
                  class={styles.openBtn}
                  onClick={this.onOpenLive}
                ></Button>
              </div>
            </Sticky>
          </div>
        )}
      </>
    )
  }
})
