import { Button, Cell } from 'vant'
import { defineComponent } from 'vue'
import qs from 'query-string'
import { browser, getRandomKey } from '@/helpers/utils'
import styles from './index.module.less'
import { postMessage } from '@/helpers/native-message'

import iconMusic from '../images/icon_music.png'
import iconCert from '../images/icon-cert.png'
import iconDiscount from '../images/icon_discount.png'
import iconTeacher from '@/common/images/icon_teacher.png'
import request from '@/helpers/request'

export default defineComponent({
  name: 'share-music-sheet',
  data() {
    const query = this.$route.query
    return {
      id: query.id,
      recomUserId: query.recomUserId, // 分享人编号
      activityId: query.activityId || 0, // 专属优惠Id
      discounts: 0,
      musicSheet: {} as any,
      teacherName: ''
    }
  },
  async mounted() {
    try {
      const res = await request.post('/api-teacher/open/musicShareProfit', {
        data: {
          bizId: this.id,
          userId: this.recomUserId
        }
      })
      this.musicSheet = res.data.musicSheet || {}
      this.teacherName = res.data.name || ''

      // 判断是否有活动编号
      if (this.activityId) {
        const discountObj = await request.post(
          `/api-student/open/activity/state/${this.activityId}`,
          {
            data: {}
          }
        )

        this.discounts = discountObj.data.check || 0
      }
    } catch {
      //
    }
    this.onDetail()
  },
  methods: {
    onDetail() {
      const behaviorId = getRandomKey()
      const browserInfo = browser()
      const url = qs.stringifyUrl({
        url: location.origin + '/accompany',
        query: {
          id: this.id,
          recomUserId:
            this.$route.query.userType &&
            this.$route.query.userType == 'STUDENT'
              ? ''
              : this.recomUserId,
          activityId: this.activityId,
          discounts: this.discounts,
          client: browserInfo.isStudent ? 'student' : 'teacher',
          behaviorId
        }
      })
      postMessage({
        api: 'openAccompanyWebView',
        content: {
          url,
          // url: 'http://192.168.3.13:3000/colexiu.html?id=' + item.id,
          orientation: 0,
          isHideTitle: true,
          statusBarTextColor: false,
          isOpenLight: true
        }
      })
    }
  },
  render() {
    return (
      <div class={styles.musicShare}>
        <div class={styles.header}>
          <h2>
            科学的练习有助
            <br />
            于水平快速提升
          </h2>

          <p>你的水平一定能驾驭这首曲子！</p>
        </div>

        <div class={styles.section}>
          <div class={styles.music}>
            <img src={iconMusic} />
            <div>
              <h2>{this.musicSheet.musicSheetName}</h2>
              <p>作曲人: {this.musicSheet.composer}</p>
              {this.discounts == 1 && (
                <img src={iconDiscount} class={styles.discount} />
              )}
            </div>
          </div>
          <Cell
            center
            border={false}
            class={styles.shareTeacher}
            v-slots={{
              icon: () => (
                <div class={styles.teacherImg}>
                  <img
                    src={this.musicSheet.avatar || iconTeacher}
                    class={styles.img}
                    style={{ objectFit: 'cover' }}
                    crossorigin="anonymous"
                  />
                  <img class={styles.recommend} src={iconCert} />
                </div>
              ),
              title: () => (
                <div>
                  <p class={styles.name}>这个曲子挺不错！推荐给你～</p>
                  <p class={styles.titleTips}>
                    <span>{this.teacherName}</span> 老师为您推荐
                  </p>
                </div>
              )
            }}
          />
        </div>

        <div
          class={['btnGroup']}
          style={{ paddingTop: '60px', margin: '0 28px' }}
        >
          <Button
            block
            round
            type="primary"
            onClick={this.onDetail}
            class={styles.btnMore}
            color="linear-gradient(180deg, #59E5D5 0%, #2DC7AA 100%)"
          >
            打卡小酷Ai开始练习吧！
          </Button>
        </div>
      </div>
    )
  }
})
