<template>
  <div style="height: 100%; padding-bottom: 20px;">
    <el-card>
      <div slot="header" style="text-align: center;">
        <b>{{ $t('global.lessonSystem') }}</b>
      </div>
    </el-card>
    <el-card v-loading="loading">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" :label="this.$t('teach.courseName')" />
        <el-table-column prop="remarks" show-overflow-tooltip :label="this.$t('teach.courseDescription')" />
        <el-table-column :label="this.$t('global.operate')">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="goLesson(scope.row)">
              {{ $t('teach.enterTheCourse') }}
            </el-button>
            <el-button v-if="project.endsWith('gzb') && isTeacher" size="mini" type="danger" @click="handleDelete(scope.row)">
              删除课程
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getSubSystemDetail } from '@/api/trainingPlatform';
import { UrlConfig } from '@/scripts/ConstDic';
import { delPublishLesson } from '@/api/jmap/lesson';
import { getSessionStorage } from '@/utils/auth';
import { lessonCreater } from '@/router/index_APP_TARGET';
import localStore from 'storejs';

export default {
    name: 'TeachHome',
    data() {
        return {
            tableData: [],
            loading: false,
            project: '',
            isTeacher: false
        };
    },
    watch: {
        '$route.params.subSystem': function(newVal) {
            this.loadInitPage();
        }
    },
    mounted() {
        this.loadInitPage();
        this.project = getSessionStorage('project');
        this.isTeacher = this.$store.state.user.roles.includes(lessonCreater);
    },
    methods: {
        loadInitPage() {
            if (this.$route.params.subSystem) {
                getSubSystemDetail(this.$route.params.subSystem).then(resp =>{
                    if (resp.data) {
                        this.tableData = resp.data.lessonList;
                    } else {
                        this.tableData = [];
                    }
                }).catch((error)=>{
                    if (error.code == 30001) {
                        const url = localStore.get('orignalTrainingPlatformRoute' + this.$store.state.user.id);
                        if (url) {
                            this.$router.push(url);
                        }
                    } else {
                        this.$messageBox(this.$t('error.obtainCourseInformationFailed'));
                    }
                });
            }
        },
        goLesson(row) {
            localStore.set('teachDetail' + this.$route.params.subSystem, `${UrlConfig.trainingPlatform.teachDetail}/${this.$route.params.subSystem}?lessonId=${row.id}&mapId=${row.mapId}&prdType=${row.prdType}`);
            this.$router.push({ path: `${UrlConfig.trainingPlatform.teachDetail}/${this.$route.params.subSystem}`, query: {lessonId: row.id, mapId: row.mapId, prdType: row.prdType}});
        },
        handleDelete(row) {
            this.$confirm('此操作将删除该类型, 是否继续?', this.$t('global.tips'), {
                confirmButtonText: this.$t('global.confirm'),
                cancelButtonText: this.$t('global.cancel'),
                type: 'warning'
            }).then(() => {
                delPublishLesson(row.id).then(response => {
                    this.$message.success(this.$t('publish.deleteSuccess'));
                    this.loadInitPage();
                }).catch((error) => {
                    this.loadInitPage();
                    this.$messageBox(this.$t('error.deleteFailed') + ':' + error.message);
                });
            }).catch(() => { });
        }
    }
};
</script>
