import { defineComponent } from 'vue';
import styles from './related.module.less';
import { NTabPane, NTabs } from 'naive-ui';
import SelectRelated from './select-related';

export default defineComponent({
  name: 'related-modal',
  emits: ['more', 'add', 'look'],
  setup(props, { emit }) {
    return () => (
      <div class={styles.related}>
        <NTabs
          animated
          paneClass={styles.paneTitle}
          paneWrapperClass={styles.paneWrapperContainer}
          justifyContent="center">
          {{
            suffix: () => (
              <div
                class={styles.iconScreen}
                onClick={() => {
                  // forms.selectMusicStatus = true;
                  // prepareStore.setSelectMusicStatus(true);
                  emit('more');
                }}>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <g fill="none">
                    <path
                      d="M5 6a1 1 0 0 1 1-1h2a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v2a1 1 0 0 0 2 0V6zm0 12a1 1 0 0 0 1 1h2a1 1 0 1 1 0 2H6a3 3 0 0 1-3-3v-2a1 1 0 1 1 2 0v2zM18 5a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0V6a3 3 0 0 0-3-3h-2a1 1 0 1 0 0 2h2zm1 13a1 1 0 0 1-1 1h-2a1 1 0 1 0 0 2h2a3 3 0 0 0 3-3v-2a1 1 0 1 0-2 0v2z"
                      fill="#198CFE"></path>
                  </g>
                </svg>
              </div>
            ),
            default: () => (
              <NTabPane name="myMusic" tab="相关课件">
                {/* <SelectMusic cardType={props.cardType} type="myMusic" /> */}
                <SelectRelated
                  onAdd={(item: any) => emit('add', item)}
                  onLook={(item: any) => emit('look', item)}
                />
              </NTabPane>
            )
          }}
        </NTabs>
      </div>
    );
  }
});
