<template>
  <div style="position: relative;">
    <div class="back_box">
      <el-button type="text" @click="goBack">返回</el-button>
    </div>
    <div style="width: 100%;margin: 20px 0 50px;text-align: center;font-size: 28px;font-weight: bold;">{{ $store.state.user.companyName + '教学管理' }}</div>
    <div style="width: 80%;margin: 0 auto;overflow: hidden;">
      <el-menu
        default-active="1"
        style="width: 200px;float: left;"
        active-text-color="#00BFFF"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-menu-item index="1" @click="clickMenu">
          <img :src="classIcon" style="width: 20px;height: 20px;margin-right: 10px;">
          <span style="font-size: 20px;">班级管理</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <img :src="lessonIcon" style="width: 20px;height: 20px;margin-right: 10px;">
            <span style="font-size: 20px;">课程管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1" style="font-size: 18px;" @click="clickMenu">发布课程管理</el-menu-item>
            <el-menu-item index="2-2" style="font-size: 18px;" @click="clickMenu">草稿课程管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="3" @click="clickMenu">
          <img :src="examIcon" style="width: 20px;height: 20px;margin-right: 10px;">
          <span slot="title" style="font-size: 20px;">考试管理</span>
        </el-menu-item>
        <el-menu-item index="4" @click="clickMenu">
          <img :src="ruleIcon" style="width: 20px;height: 20px;margin-right: 10px;">
          <span slot="title" style="font-size: 20px;">评价管理</span>
        </el-menu-item>
      </el-menu>
      <div style="width: calc(100% - 200px);margin-left: 200px;">
        <div v-if="defaultActive === '1'">
          <div style="display: flex; justify-content: space-between;width: 80%;margin: 0 auto;">
            <el-form :inline="true" :model="classFormModel" size="small">
              <el-form-item label="班级名称：">
                <el-input v-model="classFormModel.className" placeholder="班级名称" />
              </el-form-item>
              <el-form-item>
                <el-button @click="classQuery">班级查询</el-button>
              </el-form-item>
            </el-form>
            <el-button type="primary" size="small" style="width: 80px;height: 32px;" @click="classCreate">新建班级</el-button>
          </div>
          <el-table :data="classData" border style="width: 80%;margin: 0 auto;">
            <el-table-column prop="name" label="班级" />
            <el-table-column prop="num" label="人数" />
            <el-table-column prop="createDate" label="创建日期" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small">导入学生</el-button>
                <el-button type="text" size="small">查看名册</el-button>
                <el-button type="text" size="small">删除</el-button>
                <el-button type="text" size="small"> 评价查询</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="defaultActive === '2-1'">
          <div style="display: flex; justify-content: space-between;width: 80%;margin: 0 auto;">
            <el-form :inline="true" :model="lessonFormModel" size="small">
              <el-form-item label="学年：">
                <el-select v-model="lessonFormModel.academicYear" placeholder="请选择" :clearable="true">
                  <el-option
                    v-for="item in academicYearList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="学期：">
                <el-select v-model="lessonFormModel.semester" placeholder="请选择" :clearable="true">
                  <el-option
                    v-for="item in semesterList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="lessonQuery">课程查询</el-button>
              </el-form-item>
            </el-form>
            <el-button type="primary" size="small" style="width: 80px;height: 32px;" @click="lessonCreate">新建课程</el-button>
          </div>
          <el-table :data="lessonData" border style="width: 80%;margin: 0 auto;">
            <el-table-column prop="name" label="课程名称" />
            <el-table-column prop="className" label="授课班级" />
            <el-table-column prop="createDate" label="创建日期" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small">删除</el-button>
                <el-button type="text" size="small">修改课程</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="defaultActive === '2-2'">
          <div style="display: flex; justify-content: space-between;width: 80%;margin: 0 auto;">
            <el-form :inline="true" :model="lessonFormModel" size="small">
              <el-form-item label="学年：">
                <el-select v-model="lessonFormModel.academicYear" placeholder="请选择" :clearable="true">
                  <el-option
                    v-for="item in academicYearList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="学期：">
                <el-select v-model="lessonFormModel.semester" placeholder="请选择" :clearable="true">
                  <el-option
                    v-for="item in semesterList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="lessonQuery">课程查询</el-button>
              </el-form-item>
            </el-form>
            <el-button type="primary" size="small" style="width: 80px;height: 32px;" @click="lessonCreate">新建课程</el-button>
          </div>
          <QueryListPage
            ref="queryListPage"
            :query-form="draftLessonQueryForm"
            :pager-config="pagerConfig"
            :query-list="draftLessonQueryList"
            style="width:80%;margin: 0 auto;"
          />
        </div>
        <div v-if="defaultActive === '3'">
          <div style="display: flex; justify-content: space-between;width: 80%;margin: 0 auto;">
            <el-form :inline="true" :model="examFormModel" size="small">
              <el-form-item label="学年：">
                <el-select v-model="examFormModel.academicYear" placeholder="请选择" :clearable="true">
                  <el-option
                    v-for="item in academicYearList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="学期：">
                <el-select v-model="examFormModel.semester" placeholder="请选择" :clearable="true">
                  <el-option
                    v-for="item in semesterList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="examQuery">考试查询</el-button>
              </el-form-item>
            </el-form>
            <el-button type="primary" size="small" style="width: 80px;height: 32px;" @click="examCreate">新建考试</el-button>
          </div>
          <el-table :data="examData" border style="width: 80%;margin: 0 auto;">
            <el-table-column prop="name" label="试卷名称" />
            <el-table-column prop="className" label="考试班级" />
            <el-table-column prop="createDate" label="创建日期" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small">成绩查询</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="defaultActive === '4'">
          <div style="display: flex; justify-content: space-between;width: 80%;margin: 0 auto;">
            <el-form :inline="true" :model="ruleFormModel" size="small">
              <el-form-item label="学年：">
                <el-select v-model="ruleFormModel.academicYear" placeholder="请选择" :clearable="true">
                  <el-option
                    v-for="item in academicYearList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="学期：">
                <el-select v-model="ruleFormModel.semester" placeholder="请选择" :clearable="true">
                  <el-option
                    v-for="item in semesterList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="ruleQuery">规则查询</el-button>
              </el-form-item>
            </el-form>
            <el-button type="primary" size="small" style="width: 100px;height: 32px;" @click="ruleCreate">新建评价规则</el-button>
          </div>
          <el-table :data="ruleData" border style="width: 80%;margin: 0 auto;">
            <el-table-column type="index" width="50" />
            <el-table-column prop="content" label="规则内容" />
            <el-table-column prop="createDate" label="创建日期" />
            <el-table-column prop="className" label="适用班级" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small">删除</el-button>
                <el-button type="text" size="small">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ClassIcon from '@/assets/teachManage/class.png';
import LessonIcon from '@/assets/teachManage/lesson.png';
import ExamIcon from '@/assets/teachManage/exam.png';
import RuleIcon from '@/assets/teachManage/rule.png';
import ConstConfig from '@/scripts/ConstConfig';
import { getLessonDrftList } from '@/api/jmap/lessondraft';
export default {
    name: 'Organization',
    data() {
        return {
            classIcon: ClassIcon,
            lessonIcon: LessonIcon,
            examIcon: ExamIcon,
            ruleIcon: RuleIcon,
            defaultActive: '1',
            classData: [{ name: '测试班级', num: 30, createDate: '2021.03.11' }],
            lessonData: [{ name: '测试课程', className: '测试班级', createDate: '2021.03.11' }],
            examData: [{ name: '测试课程', className: '测试班级', createDate: '2021.03.11' }],
            ruleData: [{ content: '平时考勤30%，考试成绩70%', createDate: '2021.03.11', className: '测试班级' }],
            academicYearList: [],
            semesterList: [{ label: '上学期', value: 'top' }, { label: '下学期', value: 'down' }],
            classFormModel: {
                className: ''
            },
            lessonFormModel: {
                academicYear: '',
                semester: ''
            },
            examFormModel: {
                academicYear: '',
                semester: ''
            },
            ruleFormModel: {
                academicYear: '',
                semester: ''
            },
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            draftLessonQueryForm: {
                show: false
            },
            draftLessonQueryList: {
                query: getLessonDrftList,
                selectCheckShow: false,
                indexShow: true,
                columns: [
                    {
                        title: this.$t('lesson.courseName'),
                        prop: 'name'
                    },
                    {
                        title: this.$t('lesson.courseDescription'),
                        prop: 'remarks'
                    },
                    {
                        title: this.$t('global.status'),
                        prop: 'status',
                        type: 'tag',
                        columnValue: (row) => {
                            return this.$convertField(row.status, ConstConfig.ConstSelect.releaseReview, ['value', 'label']);
                        },
                        tagType: (row) => { return 'success'; }
                    },
                    {
                        type: 'button',
                        title: this.$t('global.operate'),
                        width: '400',
                        buttons: [
                            {
                                name: this.$t('lesson.courseDetails'),
                                handleClick: this.goDetail,
                                type: 'primary',
                                showControl: (row) => {
                                    return row.status !== '1';
                                }
                            },
                            {
                                name: this.$t('lesson.contentSorting'),
                                handleClick: this.treeSort,
                                type: 'primary',
                                showControl: (row) => {
                                    return row.status !== '1';
                                }
                            },
                            {
                                name: this.$t('global.release'),
                                handleClick: this.publish,
                                type: 'primary',
                                showControl: (row) => {
                                    return row.status === '0' && this.hasRelease;
                                }
                            },
                            {
                                name: this.$t('lesson.applicationForRelease'),
                                handleClick: this.publish,
                                type: 'primary',
                                showControl: (row) => {
                                    return row.status === '0' && !this.hasRelease;
                                }
                            },
                            {
                                name: this.$t('lesson.review'),
                                handleClick: this.review,
                                type: 'primary',
                                showControl: (row) => {
                                    return row.status === '1';
                                }
                            },
                            {
                                name: this.$t('global.delete'),
                                handleClick: this.deleteLesson,
                                type: 'danger',
                                showControl: (row) => {
                                    return row.status !== '1';
                                }
                            },
                            {
                                name: this.$t('lesson.withdraw'),
                                handleClick: this.revertLesson,
                                type: 'danger',
                                showControl: (row) => {
                                    return row.status === '1';
                                }
                            }
                        ]
                    }
                ]
            }
        };
    },
    computed: {

    },
    mounted() {
        this.academicYearList = [];
        const nowYear = new Date().getFullYear();
        for (let i = 2020; i < nowYear + 1; i++) {
            this.academicYearList.push({ label: `${i}-${i + 1}学年`, value: i });
        }
    },
    methods:{
        handleOpen(val) {
            console.log(val, '1111');
        },
        handleClose(val) {
            console.log(val, '2222');
        },
        clickMenu(val) {
        	this.defaultActive = val.index;
        },
        goBack() {
            this.$router.go(-1);
        },
        classQuery() {

        },
        classCreate() {

        },
        lessonQuery() {

        },
        lessonCreate() {

        },
        examQuery() {

        },
        examCreate() {

        },
        ruleQuery() {

        },
        ruleCreate() {

        }
    }
};
</script>

<style scoped>
	.back_box {
		height: 20px;
		z-index: 36;
		width: 40px;
		text-align: center;
		position: absolute;
		right: 20px;
		top: -20px;
	}
</style>
