import { PropType, computed, defineComponent, ref, toRefs, onMounted, watch, nextTick } from 'vue'
import styles from './index.module.less'
import state, { IPlatform, checkMoveNoSave } from "/src/state";
import { showToast } from 'vant'
import changeName from "./imgs/changeName.png"
import { headImg } from "/src/page-instrument/header-top/image";
import { toggleMusicSheet } from "../index"
import okBtn from "./imgs/okBtn.png"
import cancelBtn from "./imgs/cancelBtn.png"

export default defineComponent({
  name: 'choosePartName',
  props: {
    partListNames: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    partIndexs: {
      type: Array as PropType<number[]>,
      default: () => []
    },
  },
  emits: ['close'],
  setup(props, { emit }) {
    const selValues = ref([...props.partIndexs]);
    watch(
      () => toggleMusicSheet.show,
      () => {
        if (toggleMusicSheet.show) {
          selValues.value = [...props.partIndexs]
        }
      }
    );
    function hanldeSelSheet(value:number, isCombineRender = false){
      if(isCombineRender){
        selValues.value = [value]
      }else{
        // 总谱切换过来的时候
        if(selValues.value[0] === 999){
          selValues.value = []
        }
        if (state.modeType !== 'practise') {
          if (value == selValues.value[0]) {
            return
          } else {
            selValues.value = []
            selValues.value.push(value)
          }
        } else {
          const index = selValues.value.indexOf(value)
          if(index > -1){
            if(selValues.value.length > 1){
              selValues.value.splice(index, 1)
            }
          }else{
            if(selValues.value.length >=4){
              showToast({
                position: "top",
                message: "最多可选4个"
              });
              return
            }
            selValues.value.push(value)
          }
        }
      }
    }
    return () => (
      <div class={[styles.container, state.platform === IPlatform.PC && styles.pcContainer, styles[state.modeType]]}>
        <div class={[styles.head, "top_draging"]}>
          <img class={styles.headTit} src={changeName} />
          <img class={styles.closeImg} src={headImg("closeImg.png")} onClick={() => emit("close")} />
        </div>
        <div class={styles.pickerCon}>
          <div class={styles.pickerBox}>
            {
              state.isScoreRender &&
                <>
                  <div class={styles.titCon}>
                    <div class={styles.tit}>选择总谱</div>
                  </div>
                  <div class={styles.content}>
                    <div class={[styles.selBtn, selValues.value.includes(999) && styles.active]} onClick={()=>{ hanldeSelSheet(999, true) }}>总谱</div>
                  </div>
                </>
            }
            <div class={[styles.titCon, styles.stickyTit]}>
              <div class={styles.tit}>选择声部</div>
              {
                state.modeType === 'practise' && 
                <div class={styles.tips}>(最多可选4个)</div>
              }
            </div>
            <div class={[styles.content]}>
              {
                props.partListNames.map((item: any)=>{
                  return <div class={[styles.selBtn,selValues.value.includes(item.value) && styles.active]} onClick={()=>{hanldeSelSheet(item.value)}}>{item.text}</div>
                })
              }
            </div>
          </div>
          <div class={styles.btnCon}>
              <img src={ cancelBtn } class={styles.btn} onClick={async () => {
                  emit('close')
                }
              }></img>
              <img src={ okBtn } class={styles.btn} onClick={async () => {
                  await checkMoveNoSave();
                  nextTick(()=>{
                    emit('close', selValues.value)
                  })
                }
              }></img>
          </div>
        </div>
      </div>
    )
  },
})
