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

export default defineComponent({
  name: 'subject-sync',
  props: {
    subjectId: {
      type: [String, Number],
      default: ''
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    const catchStore = useCatchStore();
    const message = useMessage();
    const selectSubjectIds = ref([] as any);

    const onSubmit = () => {
      if (selectSubjectIds.value.length <= 0) {
        message.error('至少选择一个声部进行同步');
        return;
      }

      emit('confirm', selectSubjectIds.value);
    };
    onMounted(async () => {
      // 获取教材分类列表
      await catchStore.getSubjects();

      if (props.subjectId) {
        selectSubjectIds.value = [Number(props.subjectId)];
      }
    });
    return () => (
      <div class={styles.subjectSync}>
        <div class={styles.tips}>
          请选择当前课件可使用的乐器
          <span>（勾选后则对应乐器下的课件内容将被当前课件内容全部替换）</span>
        </div>

        <div class={styles.subjectList}>
          {catchStore.getSubjectList.map((subject: any) => (
            <div
              class={[
                styles.subjectItem,
                selectSubjectIds.value.includes(subject.id)
                  ? styles.subjectSelect
                  : ''
              ]}
              onClick={() => {
                if (selectSubjectIds.value.includes(subject.id)) {
                  const index = selectSubjectIds.value.indexOf(subject.id);
                  selectSubjectIds.value.splice(index, 1);
                } else {
                  selectSubjectIds.value.push(subject.id);
                }
              }}>
              <div class={styles.imgSection}>
                <img src={subject.img} />

                {selectSubjectIds.value.includes(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>
    );
  }
});