import { defineComponent, ref, Ref } from 'vue'
import { Cell, Dialog, Divider, Radio, RadioGroup, Switch, Toast } from 'vant'
import styles from './index.module.less'
import * as RuntimeUtils from '/src/pages/detail/runtime'
import SettingState from '/src/pages/detail/setting-state'
import detailState from '/src/pages/detail/state'
import evastyles from '../evaluating/index.module.less'
import iconTitle from '../evaluating/icons/title.svg'
import iconCancel from '../evaluating/icons/cancel.svg'
import iconConfirm from '../evaluating/icons/confirm.svg'
import { MusicSheetRef } from '../../'
import { useReload } from '../../uses'
export const confirmShow: Ref<boolean> = ref(false)
export const switchProps = {
  'active-color': '#2dc7aa',
  'inactive-color': '#CCCCCC',
  size: '20px',
}

export default defineComponent({
  name: 'ColexiuSettingPractise',
  setup() {
    return () => {
      return (
        <div>
          <div class={styles.groupBox}>
            <Cell center border={false} title="循环播放">
              <Switch v-model={SettingState.sett.loop} {...switchProps}>
                off
              </Switch>
            </Cell>
            <Divider />
            <Cell center border={false} title="显示指法">
              <Switch v-model={SettingState.sett.fingering} {...switchProps} onChange={val => {
                    SettingState.sett.fingering = val
                    RuntimeUtils.event.emit('settingFingeringChange')
                  }
                }>
                off
              </Switch>
            </Cell>
            {/* <Divider /> */}
            {/* {detailState.activeDetail?.notation ? (
              <Cell center border={false} title="展示形式">
                <div style={{ display: 'flex' }}>
                  <RadioGroup
                    iconSize={20}
                    class={styles.radioGroup}
                    v-model={SettingState.sett.type}
                    onChange={(val) => {
                      confirmShow.value = true
                    }}
                  >
                    <Radio name={'jianpu'}>简谱</Radio>
                    <Radio name={'staff'}>五线谱</Radio>
                  </RadioGroup>
                </div>
              </Cell>
            ) : null} */}
          </div>

          {/* <Dialog.Component
            teleport="body"
            class={evastyles.confirm}
            style={{
              overflow: 'initial',
            }}
            vSlots={{
              title: () => <img class={evastyles.iconTitle} src={iconTitle} />,
              footer: () => (
                <div class={evastyles.footer}>
                  <img src={iconCancel} onClick={() => (confirmShow.value = false)} />
                  <img src={iconConfirm} onClick={useReload} />
                </div>
              ),
            }}
            v-model:show={confirmShow.value}
            message={'设置成功，是否立即重新加载？'}
          /> */}
        </div>
      )
    }
  },
})
