<template>
  <div class="container">
    <Collapse v-model="activeNames">
      <CollapseItem name="option" title="选项设置">
        <div class="form">
          <Cell>musicxml文件地址：</Cell>
          <Field v-model="qupu_url" type="textarea" rows="3" autosize />
          <div class="line">
            <Button type="primary" @click="refresh()" block>渲染</Button>
          </div>
          <div class="line">
            <RadioGroup v-model="state.backend" direction="horizontal" @change="toggle">
              <Radio :name="x" v-for="x in ['svg', 'canvas']">{{x}}</Radio>
            </RadioGroup>
          </div>
          <div class="line">
            <RadioGroup v-model="state.mode" direction="horizontal" @change="toggle">
              <Radio :name="m" v-for="m in modes">{{m}}</Radio>
            </RadioGroup>
          </div>
          <div class="line">
            <div class="van-checkbox-group van-checkbox-group--horizontal">
              <Checkbox shape="square" v-model="state.drawTitle" @change="toggle">Draw Title</Checkbox>
              <Checkbox shape="square" v-model="state.drawComposer" @change="toggle">Draw Composer</Checkbox>
              <Checkbox shape="square" v-model="state.drawLyricist" @change="toggle">Draw Lyricist</Checkbox>
              <Checkbox shape="square" v-model="state.drawMetronomeMarks" @change="toggle">Draw MetronomeMarks</Checkbox>
            </div>
          </div>
        </div>
      </CollapseItem>
    </Collapse>
    <div id="osmd-container"></div>
  </div>
</template>

<script lang="ts" setup>
import {OpenSheetMusicDisplay, DrawingParametersEnum} from 'opensheetmusicdisplay'
import {Button, showFailToast, Field, Cell, Checkbox, Collapse, CollapseItem, Radio, RadioGroup} from "vant";
import {UpyunAccess} from "~/utils/upyun";
import {onMounted, reactive, ref} from "vue";

let osmd: OpenSheetMusicDisplay;


const qupu_url = ref("https://upyun.alchemy-studio.cn/test/an-die-ferne-geliebte-1.musicxml")
const state = reactive({
  backend: 'svg',
  drawTitle: true,
  mode: DrawingParametersEnum.compacttight,
  drawComposer: false,
  drawLyricist: false,
  drawMetronomeMarks: false
})

const refresh = async () => {
  if (!qupu_url.value) {
    showFailToast("请输入url")
    return;
  }
  let url = (await UpyunAccess.getSign(qupu_url.value)) as string
  osmd.load(url).then(function(){
    osmd.render();
  }).catch(e => {
    showFailToast("url load failed!");
    console.error(e);
  });
}

const modes = Object.values(DrawingParametersEnum)


onMounted(() => {
  const div = document.getElementById("osmd-container") as HTMLDivElement;
  osmd = new OpenSheetMusicDisplay(div, {
    backend: state.backend,
    drawingParameters: state.mode,
    drawTitle: state.drawTitle,
    drawComposer: state.drawComposer,
    drawLyricist: state.drawLyricist,
    drawMetronomeMarks: state.drawMetronomeMarks
  });
  refresh();
});

const toggle = () => {
  osmd.setOptions({
    drawingParameters: state.mode,
    drawTitle: state.drawTitle,
    drawComposer: state.drawComposer,
    drawLyricist: state.drawLyricist,
    drawMetronomeMarks: state.drawMetronomeMarks
  });
  osmd.render();
}

const activeNames = ref(['option'])

</script>

<style scoped lang="less">
.container {
  background: #efefef;
  height: 100%;
  overflow-y: auto;
  padding: 0.32rem 0.32rem 1rem;

  .form {

    .line {
      margin: 0.32rem 0;
      font-size: 0.32rem;

      .van-radio, .van-checkbox {
        margin: 0.1rem;
      }
    }
  }
}
</style>
