import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import bannerPerson from './images/bannerPerson.png';
import { NIcon, NImage, NDataTable, NButton, NModal } from 'naive-ui';
import leftDot from './images/leftDot.png';
import rightDot from './images/rightDot.png';
import lineIcon from './images/lineIcon.png';
import musicIcon from './images/musicIcon.png';
import Study from './components/study';
import Pagination from '@/components/pagination';
import headerD from './images/headerD.png';
import defultHeade from '@/components/layout/images/teacherIcon.png';
import cloundIcon from './images/cloundIcon.png';
import goClass from './images/goClass.png';
import boxIcon from './images/boxIcon.png';
import TeachList from './components/teachList';
import ChioseModal from './modals/chioseModal';
import blueArrow from './images/blueArrow.png';
import soureIcon from './images/soureIcon.png';
import { useRouter } from 'vue-router';
export default defineComponent({
  name: 'home-page',
  setup() {
    const router = useRouter();
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 4
      },
      tableList: [
        {
          teacherName: '孙忆枫',
          createTime: '2023-06-27',
          endTime: '2023-06-30',
          status: 'ing',
          studentNum: 100,
          submitNum: 100,
          quantityNum: 60,
          submitRate: 100,
          quantityRate: 60
        },
        {
          teacherName: '孙忆枫',
          createTime: '2023-06-27',
          endTime: '2023-06-30',
          status: 'ing',
          studentNum: 100,
          submitNum: 100,
          quantityNum: 60,
          submitRate: 100,
          quantityRate: 60
        },
        {
          teacherName: '孙忆枫',
          createTime: '2023-06-27',
          endTime: '2023-06-30',
          status: 'ing',
          studentNum: 100,
          submitNum: 100,
          quantityNum: 60,
          submitRate: 100,
          quantityRate: 60
        },
        {
          teacherName: '孙忆枫',
          createTime: '2023-06-25',
          endTime: '2023-06-26',
          status: 'end',
          studentNum: 100,
          submitNum: 100,
          quantityNum: 60,
          submitRate: 100,
          quantityRate: 60
        }
      ] as any,
      goCourseVisiable: false
    });
    const columns = () => {
      return [
        {
          title: '布置老师',
          key: 'teacherName'
        },
        {
          title: '布置时间',
          key: 'createTime'
        },
        {
          title: '截止时间',
          key: 'endTime'
        },
        {
          title: '训练状态',
          key: 'status',
          render(row: any) {
            return row.status == 'ing' ? (
              <div class={styles.indDot}>
                {' '}
                <span></span> 进行中
              </div>
            ) : (
              <div class={styles.endDot}>
                <span></span>已结束
              </div>
            );
          }
        },
        {
          title: '布置人数',
          key: 'studentNum'
        },
        {
          title: '提交人数',
          key: 'submitNum'
        },
        {
          title: '合格人数',
          key: 'quantityNum'
        },
        {
          title: '提交率',
          key: 'submitRate',
          render(row: any) {
            return <span>{row.submitRate}%</span>;
          }
        },
        {
          title: '合格率',
          key: 'quantityRate',
          render(row: any) {
            return <span>{row.quantityRate}%</span>;
          }
        },
        {
          title: '操作',
          key: 'id',
          render(row: any) {
            return (
              <NButton text type="primary">
                详情
              </NButton>
            );
          }
        }
      ];
    };
    const getList = () => {
      console.log('1');
    };
    return () => (
      <div class={styles.homeWrap}>
        <div class={styles.homeInfoLeft}>
          <div class={styles.homeBanner}>
            <img class={styles.bannerPerson} src={bannerPerson}></img>
            <div class={styles.bannerInfo}>
              <h3>Hi，张老师 下午好！</h3>
              <p class={styles.bannerMsg}>
                您有 <span class={styles.bannerRed}> 4 </span>
                <span class={styles.bannerRrey}> 条消息未读，</span>
                <span class={styles.bannerRed}> 3 </span>
                门课程未布置作业，请及时处理哦！
              </p>
              <div class={styles.bannerBtn}>
                立即处理{' '}
                <NIcon class={styles.rotueRight}>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path
                      d="M7.38 21.01c.49.49 1.28.49 1.77 0l8.31-8.31a.996.996 0 0 0 0-1.41L9.15 2.98c-.49-.49-1.28-.49-1.77 0s-.49 1.28 0 1.77L14.62 12l-7.25 7.25c-.48.48-.48 1.28.01 1.76z"
                      fill="currentColor"></path>
                  </svg>
                </NIcon>
              </div>
            </div>
            <NImage
              class={styles.leftDot}
              src={leftDot}
              previewDisabled></NImage>
            <NImage
              class={styles.rightDot}
              src={rightDot}
              previewDisabled></NImage>
            <NImage
              class={styles.lineIcon}
              src={lineIcon}
              previewDisabled></NImage>
            <NImage
              class={styles.musicIcon}
              src={musicIcon}
              previewDisabled></NImage>
          </div>
          <div class={styles.leftBottomWrap}>
            <Study></Study>
          </div>
        </div>
        <div class={styles.homeInfoRight}>
          <div class={styles.homeInfoRightTop}>
            <div class={styles.HeaderWrap}>
              <NImage
                previewDisabled
                class={styles.headerD}
                src={headerD}></NImage>
              <NImage
                previewDisabled
                class={styles.defultHeade}
                src={defultHeade}></NImage>
            </div>
            <div class={styles.headerInfo}>
              <p class={styles.headerTitle}>张晚意</p>
              <p class={styles.headerSubTitle}>武汉小学 | 音乐老师</p>
            </div>
            <div class={styles.quickEnter}>
              <h3 class={styles.rightTitle}>
                <div class={styles.titleDot}></div>快捷入口
              </h3>
              <div class={styles.quickList}>
                <div
                  class={styles.quickItem}
                  onClick={() => (state.goCourseVisiable = true)}>
                  <NImage
                    previewDisabled
                    class={styles.quickItemImg}
                    src={goClass}></NImage>
                  <p>开始上课</p>
                </div>

                <div class={styles.quickItem}>
                  <NImage
                    previewDisabled
                    class={styles.quickItemImg}
                    src={soureIcon}></NImage>
                  <p>布置作业</p>
                </div>
                <div
                  class={styles.quickItem}
                  onClick={() => router.push('/natural-resources')}>
                  <NImage
                    previewDisabled
                    class={styles.quickItemImg}
                    src={cloundIcon}></NImage>
                  <p>我的资源</p>
                </div>
              </div>
            </div>
          </div>
          <div class={styles.rightTeachingWrap}>
            <div class={styles.rightTeachingWrapTitle}>
              <h3 class={styles.rightTitle}>
                <div class={styles.titleDot}></div>教学进度
              </h3>
              <div class={styles.lookMore}>
                查看全部{' '}
                <NImage
                  src={blueArrow}
                  class={styles.lookMoreArrow}
                  previewDisabled></NImage>
              </div>
            </div>
            <TeachList></TeachList>
          </div>
        </div>

        <NModal
          v-model:show={state.goCourseVisiable}
          preset="card"
          class={styles.chioseModel}
          title={'选择课件'}>
          <ChioseModal
            onClose={() => (state.goCourseVisiable = false)}></ChioseModal>
        </NModal>
      </div>
    );
  }
});
