import { defineComponent } from 'vue'
import { Button, Grid, GridItem } from 'vant'
import classnames from 'classnames'
import { browser } from '/src/helpers/utils'
import { postMessage } from '/src/helpers/native-message'
import Title from '/src/pages/detail/title'
import detailState from '/src/pages/detail/state'
import { heardLevel } from '/src//constant/formats'
import IconArrowLeft from '/src/pages/detail/icons/arrow-left.svg'

const browserInfo = browser()

import styles from './index.module.less'

export default defineComponent({
  props: ['data'],
  methods: {
    back() {
      // this.$router.back()
      postMessage({
        api: 'back'
      })
    }
  },
  render() {
    return (
      <div class="van-nav-bar--safe-area-inset-top">
        <div class={classnames(styles.header)}>
          <div class={styles['title-info']}>
            <Button class={styles.back} onClick={this.back} icon={IconArrowLeft}/>
            <Title onClick={() => {}} title={this.data?.sysMusicScoreName} rightView={false}/>
          </div>
          <div class={styles.grid}>
            <Grid column-num={!detailState.isPercussion ? 5 : 2} style={
              {display: this.data?.score ? '' : 'none',}
            }>
              <GridItem
                vSlots={{
                  icon: () => <span class={styles.gridinfo}>{(heardLevel as any)[(this.data?.heardLevel as any)]}</span>,
                  text: () => <span class={styles.gridname}>难度</span>,
                }}
              />
              <GridItem
                vSlots={{
                  icon: () => <span class={styles.gridinfo}>{this.data?.score}分</span>,
                  text: () => <span class={styles.gridname}>评测分数</span>,
                }}
              />
              {!detailState.isPercussion ? (
                <>
                  <GridItem
                    vSlots={{
                      icon: () => <span style={{color: '#A2FFEC'}} class={styles.gridinfo}>{this.data?.intonation}分</span>,
                      text: () => <span class={styles.gridname}>音准</span>,
                    }}
                  />
                  <GridItem
                    vSlots={{
                      icon: () => <span style={{color: '#FFC865'}} class={styles.gridinfo}>{this.data?.cadence}分</span>,
                      text: () => <span class={styles.gridname}>节奏</span>,
                    }}
                  />
                  <GridItem
                    vSlots={{
                      icon: () => <span style={{color: '#FFF1B8'}} class={styles.gridinfo}>{this.data?.integrity}分</span>,
                      text: () => <span class={styles.gridname}>完成度</span>,
                    }}
                  />
                </>
              ) : null}
            </Grid>
          </div>
        </div>
      </div>
    )
  }
})
