import { Button, Radio, RadioGroup } from 'vant'
import qs from 'query-string'
import { defineComponent, ref } from 'vue'
import detailState from '/src/pages/detail/state'
import styles from './index.module.less'
import { useOriginSearch } from '../../uses'

export default defineComponent({
  name: 'ColexiuPart',
  setup() {
    const search = useOriginSearch()
    const index = Number(search['part-index']) || 0
    const active = ref<string>(detailState.partListNames[index])

    const setPartIndex = () => {
      const indexOf = detailState.partListNames.indexOf(active.value)
      active.value = detailState.partListNames[indexOf]
      const s = qs.stringify({
        ...search,
        'part-index': indexOf,
      })
      location.search = s
    }

    return () => {
      return (
        <div class={['containerPopups', styles.container]}>
          <div class={styles.title}>声部选择</div>
          <div class={styles.wrap}>
            <RadioGroup v-model={active.value}>
              {detailState.partListNames.map((item) => (
                <Radio name={item}>{item}</Radio>
              ))}
            </RadioGroup>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <Button class={styles.practiseBtn} onClick={setPartIndex}></Button>
          </div>
        </div>
      )
    }
  },
})
