import { defineComponent, ref } from 'vue';
import styles from './index.module.less';
import { Button } from 'vant';

export default defineComponent({
  name: 'change-voice',
  props: {
    musicalInstruments: {
      type: Array,
      default: () => []
    },
    musicalInstrumentIndex: {
      type: Number,
      default: 0
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    const musicIndex = ref(props.musicalInstrumentIndex);
    return () => (
      <div class={styles.changeVoice}>
        <div class={styles.changeVoiceContainer}>
          {props.musicalInstruments?.map((item: any, index: number) => (
            <div
              class={[styles.item, musicIndex.value === item.value && styles.active]}
              onClick={() => {
                musicIndex.value = item.value;
              }}>
              {item.text}
            </div>
          ))}
        </div>
        <div class={styles.btnGroups}>
          <Button
            round
            block
            onClick={() => {
              emit('close');
            }}>
            取消
          </Button>
          <Button
            type="primary"
            block
            round
            color="linear-gradient(90deg, #44C9FF 0%, #259CFE 100%)"
            onClick={() => {
              emit('confirm', musicIndex.value);
            }}>
            确认
          </Button>
        </div>
      </div>
    );
  }
});
