import { defineComponent, reactive, ref } from 'vue';
import styles from './index.module.less';
import SettingModal from '../setting-modal';
import Dragbom from '@/hooks/useDrag/dragbom';
import { useRoute } from 'vue-router';
import { initSelectScorePartModal, setting_modal } from '../setting';
import { getImage } from '../images/music';
import btn5 from '../images/btn-5.png';
import Draggable from 'vuedraggable';

export default defineComponent({
  name: 'setting-pc-modal',
  props: {
    /** 是否显示引导 */
    showGuide: {
      type: Boolean,
      default: false
    }
  },
  emits: ['close', 'guideDone'],
  setup(props, { emit }) {
    const route = useRoute();
    const settingModalRef = ref();
    const state = reactive({
      platform: route.query.platform,
      win: route.query.win,
      activeBeat: ''
    });
    // 拖拽临时数据
    const tempDragData = ref<any>({});

    return () => (
      <div
        class={[
          styles.settingPcModal,
          state.platform === 'modal' && state.win !== 'pc' ? styles.modal : '',
          'settingContainer_pc'
        ]}>
        <div class={[styles.iconTitBox, 'iconTitBoxMove']}></div>
        <div class={styles.conCon}>
          <div class={styles.conPreview}></div>
          <div class={styles.container}>
            {setting_modal.scorePart?.map((item: any, i: number) => (
              <div
                class={[
                  styles.beatSection,
                  setting_modal.scorePart.length >= 2 &&
                    item.length !== 1 &&
                    styles.small
                ]}>
                {item.map((child: any, jIndex: number) => (
                  <Draggable
                    modelValue={[child]}
                    itemKey="index"
                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                    // @ts-ignore
                    group={{
                      name: 'description',
                      pull: 'clone',
                      put: true
                    }}
                    animation={200}
                    sort={false}
                    componentData={{
                      draggable: 'row-nav',
                      itemKey: 'index',
                      tag: 'div',
                      pull: 'clone',
                      put: true,
                      animation: 200,
                      group: 'description'
                    }}
                    onChange={(evt: any) => {
                      console.log('111', evt);
                      tempDragData.value = evt.added || '';
                    }}
                    onAdd={() => {
                      const added = tempDragData.value?.element || {};
                      // 判断是否有数据
                      if (added.url && added.sourceFrom === 'setting-modal') {
                        setting_modal.scorePart.forEach(
                          (part: Array<any>, ci: number) => {
                            part.forEach((child: any, cj: number) => {
                              if (i === ci && jIndex === cj) {
                                child.url = added.url;
                                child.index = added.index;
                              }
                            });
                          }
                        );
                      }
                    }}
                    onStart={(evt: any) => {
                      console.log(evt, 'eweew');
                      evt.from.classList.add('onstart');
                      tempDragData.value = {};
                    }}
                    onEnd={(evt: any) => {
                      console.log(evt, 'eweew');
                      evt.from.classList.remove('onstart');
                      tempDragData.value = {};
                    }}
                    onClick={(e: any) => {
                      e.stopPropagation();
                      if (setting_modal.scorePart[i][jIndex].selected) {
                        initSelectScorePartModal();
                      } else {
                        initSelectScorePartModal(i, jIndex);
                      }
                    }}
                    class={[styles.beat, child.selected ? styles.active : '']}>
                    {/* <div
                      class={[styles.beat, child.selected ? styles.active : '']}
                      draggable={false}
                      onDragenter={(e: any) => {
                        e.preventDefault();
                      }}
                      onDragover={(e: any) => {
                        e.preventDefault();
                      }}
                      onDrop={(e: any) => {
                        let dropItem = e.dataTransfer.getData('text');
                        dropItem = dropItem ? JSON.parse(dropItem) : {};
                        console.log(e, 'event', dropItem);
                        // 判断是否有数据
                        if (dropItem.url) {
                          setting_modal.scorePart.forEach(
                            (part: Array<any>, ci: number) => {
                              part.forEach((child: any, cj: number) => {
                                if (i === ci && jIndex === cj) {
                                  child.url = dropItem.url;
                                  child.index = dropItem.index;
                                }
                              });
                            }
                          );
                        }
                      }}
                      onClick={(e: any) => {
                        e.stopPropagation();
                        if (setting_modal.scorePart[i][jIndex].selected) {
                          initSelectScorePartModal();
                        } else {
                          initSelectScorePartModal(i, jIndex);
                        }
                      }}> */}
                    {{
                      item: (element: any) => {
                        const item = element.element;
                        return (
                          <div data-id={item.key} class={styles.imgSection}>
                            <img src={getImage(child.url)} />
                          </div>
                        );
                      }
                    }}

                    {/* </div> */}
                  </Draggable>
                ))}
              </div>
            ))}
          </div>

          <img
            class={styles.btnSubmit}
            src={btn5}
            onClick={() => {
              settingModalRef.value?.onSubmit();
            }}
          />
        </div>

        <SettingModal
          class={styles.settingModalShow}
          ref={settingModalRef}
          onClose={() => emit('close')}
        />

        {route.query.platform === 'modal' && (
          <Dragbom
            showGuide={props.showGuide}
            onGuideDone={() => emit('guideDone')}></Dragbom>
        )}
      </div>
    );
  }
});
