import { Button, Divider, Radio, RadioGroup, Slider } from "vant";
import { defineComponent, ref } from "vue";
import styles from "./index.module.less";

const sliderClass = {
  "active-color": "#FFB871",
  "inactive-color": "#EAEAEA",
  "button-size": "14",
};

export default defineComponent({
  name: "ColexiuEqualizer",
  setup() {
    const tips = ref<number>(10);
    return () => (
      <div class="containerPopups">
        <div class={styles.title}>均衡器</div>
        <div class={styles.wrap}>
          <div class={styles.item}>
            <span class={styles.label}>节拍器</span>
            <Slider v-model={tips.value} {...sliderClass}></Slider>
          </div>
          <Divider />

          <div class={styles.item}>
            <span class={styles.label}>伴奏</span>
            <Slider v-model={tips.value} {...sliderClass}></Slider>
          </div>
          <Divider />

          <div class={styles.item}>
            <span class={styles.label}>长笛</span>
            <Slider v-model={tips.value} {...sliderClass}></Slider>
          </div>
          <Divider />

          <div class={styles.item}>
            <span class={styles.label}>萨克斯</span>
            <Slider v-model={tips.value} {...sliderClass}></Slider>
          </div>
          <Divider />

          <div class={styles.item}>
            <span class={styles.label}>单簧管</span>
            <Slider v-model={tips.value} {...sliderClass}></Slider>
          </div>
          <Divider />
          <div class={styles.item}>
            <span class={styles.label}>长号</span>
            <Slider v-model={tips.value} {...sliderClass}></Slider>
          </div>
        </div>
      </div>
    );
  },
});
