<template>
  <div style="height: 100%; padding-bottom: 20px;">
    <el-card>
      <div slot="header" style="text-align: center;">
        <b>教学系统</b>
      </div>
    </el-card>
    <el-card v-loading="loading">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          label="课程"
        />
        <el-table-column
          prop="remarks"
          show-overflow-tooltip
          label="说明"
        />
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="goLesson(scope.row)">
              进入课程
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getSubSystemDetail } from '@/api/trainingPlatform';
import { UrlConfig } from '@/router/index';
import localStore from 'storejs';

export default {
	name: 'TeachHome',
	data() {
		return {
			tableData: [],
			loading: false
		};
	},
	watch: {
		$route(newVal) {
			this.loadInitPage();
		}
	},
	mounted() {
		this.loadInitPage();
	},
	methods: {
		loadInitPage() {
			if (this.$route.params.subSystem) {
				getSubSystemDetail(this.$route.params.subSystem).then(resp =>{
					if (resp.data) {
						this.tableData = resp.data.lessonList;
					}
				}).catch(()=>{
					this.$messageBox('获取课程信息失败！');
				});
			}
		},
		goLesson(row) {
			localStore.set('teachDetail'+this.$route.params.subSystem, `${UrlConfig.trainingPlatform.teachDetail}/${this.$route.params.subSystem}?lessonId=${row.id}&mapId=${row.mapId}&prdCode=${row.prdCode}`);
			this.$router.push({ path: `${UrlConfig.trainingPlatform.teachDetail}/${this.$route.params.subSystem}`, query: {lessonId: row.id, mapId: row.mapId, prdCode: row.prdCode}});
		}
	}
};
</script>
