import ColHeader from '@/components/col-header'
import { Button, Cell, Dialog, Icon, Image, Popup, Toast } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import request from '@/helpers/request'
import { state } from '@/state'
import shareBanner from '../images/share-banner.png'
import wxImage from '../images/wx_bg.png'
import { shareCall, initJumpNativePage } from '../share'
import { browser } from '@/helpers/utils'
import { postMessage } from '@/helpers/native-message'
import qs from 'query-string'

export const getAssetsHomeFile = (fileName: string) => {
  const path = `../../../views/member-center/images/${fileName}`
  const modules = import.meta.globEager('../../../views/member-center/images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'MemberCenter',
  data() {
    const query = this.$route.query
    query.recomUserId =
      query.userType && query.userType == 'STUDENT' ? '' : query.recomUserId
    const tmpUrl = `${location.origin}/student/#/memberCenter?${qs.stringify(
      query
    )}`
    return {
      activityId: query.activityId,
      recomUserId: query.recomUserId,
      discount: 0,
      functionList: [],
      wxStatus: false,
      jumpUrl: tmpUrl
    }
  },
  computed: {
    userInfo() {
      const users = state.user.data
      return {
        username: users?.username,
        phone: users?.phone,
        avatar: users?.heardUrl,
        id: users?.userId,
        memberRankSettingId: users?.memberRankSettingId,
        membershipDays: users?.membershipDays,
        membershipEndTime: users?.membershipEndTime
      }
    }
  },
  created() {
    initJumpNativePage(this.jumpUrl)
  },
  async mounted() {
    try {
      const res = await request.post(
        `/api-teacher/open/memberPriceSettings/vipPermissions`
      )
      const result = res.data || []
      this.functionList = result.map((item: any) => {
        return {
          title: item.paramName,
          icon: getAssetsHomeFile(`${item.paramValue}.png`)
        }
      })

      const active = await request.post(
        `/api-teacher/open/activity/state/${this.activityId}`
      )
      this.discount = active.data.check || 0
    } catch {
      //
    }
  },
  methods: {
    onShare() {
      if (browser().weixin) {
        this.wxStatus = true
        return
      }
      // 尝试拉起app
      shareCall(this.jumpUrl)
      // 不管有没有拉起app则都跳转到下载app
      setTimeout(() => {
        window.location.href = location.origin + '/student/#/download'
      }, 3000)
    }
  },
  render() {
    return (
      <div class={styles['member-center']}>
        <Image src={shareBanner} class={styles.shareBanner} />
        <div class={styles.memberContainer}>
          <div class={[styles.intro]}>
            <p>
              酷乐秀会员可使用包括平台提供的所有训练乐谱，并专享“
              <b>小酷Ai</b>
              ”八大核心功能，孩子在家就能轻松完成乐器自主规范练习。
            </p>
          </div>
          {this.functionList.length > 0 && (
            <div class={styles.memberItem}>
              <div class={styles.title}>会员功能</div>

              <div class={styles.member_function}>
                {this.functionList.map((item: any) => (
                  <div class={styles.function_item}>
                    <Icon name={item.icon} size={34} />
                    <div class={styles.function_text} v-html={item.title}></div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
        <div
          class={['btnGroup']}
          style={{ paddingTop: '12px', position: 'relative' }}
        >
          {this.discount === 1 && (
            <div class={styles.tagDiscount}>专属优惠</div>
          )}
          <Button
            block
            round
            type="primary"
            onClick={this.onShare}
            color="linear-gradient(220deg, #DFA164 0%, #FAC87E 100%)"
          >
            下载小酷Ai开始练习吧！
          </Button>
        </div>

        {this.wxStatus && (
          <div
            class={styles.wxpopup}
            onClick={() => {
              this.wxStatus = false
            }}
          >
            <img src={wxImage} alt="" />
          </div>
        )}
      </div>
    )
  }
})