import { defineComponent } from 'vue'
import classnames from 'classnames'
import { Cell, Switch, Button } from 'vant'
import SettingState from '/src/pages/detail/setting-state'

import { switchProps } from './set'

import styles from './index.module.less'
import { postMessage } from '/src/helpers/native-message'

export default defineComponent({
  name: 'eva-content',
  data() {
    return {
      eyeProtection: false,
    }
  },
  render() {
    return (
      <div class={classnames(styles.eva, styles.cells)}>
        <div class={styles.title}>选择评测难度</div>
        <div class={styles.tags}>
          <span
            class={classnames(styles.tag, {[styles.active]: SettingState.eva.difficulty === 'BEGINNER'})}
            onClick={() => SettingState.eva.difficulty = 'BEGINNER'}
          >
            入门级
          </span>
          <span
            class={classnames(styles.tag, {[styles.active]: SettingState.eva.difficulty === 'ADVANCED'})}
            onClick={() => SettingState.eva.difficulty = 'ADVANCED'}
          >
            进阶级
            </span>
          <span
            class={classnames(styles.tag, {[styles.active]: SettingState.eva.difficulty === 'PERFORMER'})}
            onClick={() => SettingState.eva.difficulty = 'PERFORMER'}
          >
            大师级
          </span>
        </div>
        {/* <div class={styles.title}>选择录制方式</div>
        <div class={classnames(styles.tags, styles.tagsbig)}>
          <span class={classnames(styles.tag, styles.active)}>音频录制</span>
          <span class={styles.tag}>视频录制</span>
        </div> */}
        <Cell
          title="保存到相册"
          style={{padding: 0, marginTop: '25PX'}}
          vSlots={{
            extra: () => (
              <Switch
                modelValue={SettingState.eva.save}
                onChange={val => {
                  SettingState.eva.save = val
                  postMessage({
                    api: 'checkAlbum'
                  })
                }}
                {...switchProps}
              />
            )
          }}
        />
        <Cell
          title="开启伴奏"
          style={{padding: 0, marginTop: '15PX'}}
          vSlots={{
            extra: () => (
              <Switch
                modelValue={SettingState.eva.mute}
                onChange={val => {
                  SettingState.eva.mute = val
                }}
                {...switchProps}
              />
            )
          }}
        />
      </div>
    )
  }
})
