import { defineComponent, onMounted, ref } from 'vue';
import styles from './index.module.less';
import { NButton, NSpace } from 'naive-ui';
import { useCatchStore } from '/src/store/modules/catchData';
import iconSelect from '../../../prepare-lessons/images/icon-select.png';

export default defineComponent({
  name: 'subject-sync',
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    const catchStore = useCatchStore();

    const selectSubjectId = ref(null as any);
    const subjectList = ref([] as any);

    const onSubmit = () => {
      const item = subjectList.value.find(
        (subject: any) => subject.id === selectSubjectId.value
      );

      emit('confirm', item);
    };
    onMounted(async () => {
      await catchStore.getSubjects();
      subjectList.value = catchStore.getSubjectList;
      if (subjectList.value.length > 0) {
        selectSubjectId.value = subjectList.value[0].id;
      }
    });
    return () => (
      <div class={styles.subjectSync}>
        {/* <div class={styles.tips}>
          请选择当前课件可使用的乐器
          <span>（勾选后则对应乐器下的课件内容将被当前课件内容全部替换）</span>
        </div> */}

        <div class={styles.subjectList}>
          {subjectList.value.map((subject: any) => (
            <div
              class={[
                styles.subjectItem,
                selectSubjectId.value === subject.id ? styles.subjectSelect : ''
              ]}
              onClick={() => {
                selectSubjectId.value = subject.id;
              }}>
              <div class={styles.imgSection}>
                <img src={subject.img} />

                {selectSubjectId.value === subject.id && (
                  <img src={iconSelect} class={styles.iconSelect} />
                )}
              </div>

              <p class={styles.subjectName}>{subject.name}</p>
            </div>
          ))}
        </div>

        <NSpace class={styles.btnGroupModal} justify="center">
          <NButton round onClick={() => emit('close')}>
            取消
          </NButton>
          <NButton round type="primary" onClick={onSubmit}>
            确认选择
          </NButton>
        </NSpace>
      </div>
    );
  }
});
