import { defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import { NButton, NInput, NSelect, NSwitch, NTooltip } from 'naive-ui';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
import { eventGlobal } from '/src/utils';

export default defineComponent({
  name: 'courseware-head',
  setup(props, { emit, expose }) {
    const prepareStore = usePrepareStore();
    const forms = reactive({
      subjects: [] as any,
      openFlagEnable: true, // 是否支持修改公开状态
      autoPlay: true,
      name: '',
      openFlag: false
    });

    // 全选
    const chioseAll = (list: any) => {
      forms.subjects = list.map((child: any) => {
        return child.id;
      }) as any;
    };

    const getForms = () => {
      return forms;
    };

    onMounted(() => {
      eventGlobal.on('updateCoursewareHeadInfo', (item: any) => {
        forms.subjects = item.subjects;
        forms.openFlagEnable = item.openFlagEnable;
        forms.autoPlay = item.autoPlay;
        forms.name = item.name;
        forms.openFlag = item.openFlag;
      });
    });

    expose({
      getForms
    });

    return () => (
      <>
        <div class={styles.headerTitle}>
          <i class={styles.iconBook}></i>
          <span>{prepareStore.getBaseCourseware.name}</span>
        </div>

        <div class={styles.formContainer}>
          <div class={[styles.btnItem, styles.block]}>
            <span class={[styles.btnTitle]}>
              <span>*</span>标题
            </span>
            <NInput
              placeholder="请输入课件标题"
              v-model:value={forms.name}
              maxlength={20}
              clearable
            />
          </div>
          <div class={[styles.btnItem, styles.block]}>
            <span class={[styles.btnTitle]}>
              <span>*</span>声部
            </span>
            <NSelect
              placeholder="请选择声部（可多选）"
              class={styles.btnSubjectList}
              options={prepareStore.getSubjectList}
              labelField="name"
              valueField="id"
              multiple
              maxTagCount={1}
              size="small"
              v-model:value={forms.subjects}
              clearable
              v-slots={{
                action: () => (
                  <>
                    <NButton
                      text
                      style=" --n-width: 100% "
                      size="small"
                      onClick={() => chioseAll(prepareStore.getSubjectList)}>
                      全选
                    </NButton>
                  </>
                )
              }}
            />
          </div>
          <div class={styles.btnItem}>
            <span class={styles.btnTitle}>
              自动播放
              <NTooltip style={{ maxWidth: '200px' }} showArrow={false}>
                {{
                  trigger: () => <i class={styles.iconQuestion}></i>,
                  default: () =>
                    '开启自动播放后，课件内视频、音频资源将自动播放'
                }}
              </NTooltip>
            </span>

            <NSwitch v-model:value={forms.autoPlay} />
          </div>
          <div class={styles.btnItem}>
            <span class={styles.btnTitle}>公开</span>
            {!forms.openFlagEnable ? (
              <NTooltip style={{ maxWidth: '200px' }} showArrow={false}>
                {{
                  trigger: () => (
                    <NSwitch
                      v-model:value={forms.openFlag}
                      disabled={!forms.openFlagEnable}
                    />
                  ),
                  default: () =>
                    '为尊重课件原作者，在“相关课件”中添加的课件不支持公开'
                }}
              </NTooltip>
            ) : (
              <NSwitch
                v-model:value={forms.openFlag}
                disabled={!forms.openFlagEnable}
              />
            )}
          </div>
        </div>
      </>
    );
  }
});