import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import {
  NAvatar,
  NButton,
  NCheckbox,
  NInput,
  NModal,
  NSpace,
  useMessage
} from 'naive-ui';
import commentBg from '../images/common-bg.png';
import commentTop from '../images/common-top.png';
import iconClose from '../images/icon-close-line.png';
import defultHeade from '@/components/layout/images/teacherIcon.png';
import { api_setComment } from '../../api';
import dayjs from 'dayjs';
import { storage } from '/src/utils/storage';

export default defineComponent({
  name: 'commit-work',
  props: {
    /** 评语内容 */
    comment: {
      type: String,
      default: ''
    },
    workInfo: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['close', 'confrim'],
  setup(props, { emit }) {
    const message = useMessage();

    const state = reactive({
      removeVisiable1: false,
      comment: props.comment,
      btnLoading: false,
      commentRemind: true
    });
    const onSubmit = async () => {
      const isCommentRemind = storage.get('isCommentRemind');
      if (isCommentRemind != 1) {
        state.removeVisiable1 = true;
        return;
      }

      if (!state.comment) {
        message.error('请输入评语');
        return;
      }
      state.btnLoading = true;
      try {
        await api_setComment({
          comment: state.comment,
          id: props.workInfo.studentLessonTrainingId
        });

        message.success('点评成功');
        emit('confrim');
      } catch {
        //
      }
      state.btnLoading = false;
    };

    const onSure = () => {
      if (state.commentRemind) {
        storage.set('isCommentRemind', 1);
      }
      state.removeVisiable1 = false;
      onSubmit();
    };
    return () => (
      <div class={styles.commonWork}>
        <img src={commentTop} class={styles.dingPng} alt="" />
        <img src={commentBg} class={styles.downMoveBg} alt="" />
        <img
          src={iconClose}
          class={styles.closeAble}
          onClick={() => {
            emit('close');
          }}
          alt=""
        />
        <h2>点评作业</h2>

        <div class={styles.header}>
          <NAvatar
            class={styles.navatar}
            round
            src={props.workInfo.studentAvatar || defultHeade}
          />
          <div class={styles.userInfo}>
            <h3>{props.workInfo.studentName}</h3>
            <p>
              提交时间：{dayjs(props.workInfo.submitTime).format('YYYY-MM-DD')}
            </p>
          </div>
        </div>

        <NInput
          class={styles.textarea}
          type="textarea"
          rows={10}
          maxlength={500}
          showCount
          autosize={false}
          disabled={props.workInfo.isLook}
          v-model:value={state.comment}
          placeholder="请输入评语…"
        />

        {!props.workInfo.isLook && (
          <NSpace style={{ padding: '25px 0 0 0' }} justify="center">
            <NButton round type="default" onClick={() => emit('close')}>
              取消
            </NButton>
            <NButton
              class={styles.submitAppBtn}
              round
              type="primary"
              loading={state.btnLoading}
              onClick={onSubmit}>
              确定
            </NButton>
          </NSpace>
        )}

        <NModal
          v-model:show={state.removeVisiable1}
          preset="card"
          class={['modalTitle', styles.removeVisiable1]}
          title={'提交评语'}>
          <div class={styles.studentRemove}>
            <p>
              评语提交后<span>不可修改或删除</span>，请确认是否提交
            </p>
            <div class={styles.selectBtn}>
              <NCheckbox v-model:checked={state.commentRemind}>
                下次不再提醒
              </NCheckbox>
            </div>

            <NSpace class={styles.btnGroupModal} justify="center">
              <NButton round onClick={() => (state.removeVisiable1 = false)}>
                取消
              </NButton>
              <NButton round type="primary" onClick={onSure}>
                确定
              </NButton>
            </NSpace>
          </div>
        </NModal>
      </div>
    );
  }
});