<template>
    <div style="height: 100%; overflow: hidden">
        <el-card>
            <div class="button_group">
                <el-button type="primary" >查询</el-button>
            </div>
        </el-card>
        <el-card v-loading="loading">
            <el-table
                :data="tableData"
                row-key="id"
                border
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                    prop="name"
                    border
                    label="课程">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                           >创建章节</el-button>
                        <el-button
                            size="mini"
                            type="primary" plain
                            v-if="scope.row.type === 'lesson'"
                            >内容排序</el-button>
                        <el-button size="mini"
                                   type="info"
                        >{{ scope.row.type==='lesson'? '编辑课程':'更新章节' }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
    import { getDraftLesson } from '@/api/designPlatform';

    export default {
        name: 'LessonHome',
        components: {
        },
        computed: {
            mapId() {
                return this.$route.params.mapId;
            }
        },
        data() {
            return {
                tableData: [],
                loading: 'false'
            };
        },

        mounted() {
            this.loading = true;
            this.loadInitData();
        },
        methods: {
            loadInitData() {
                getDraftLesson({},this.mapId).then(response=> {
                    this.tableData = response.data;
                    this.loading = false;
                });
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .draft {
        width: 400px;
        text-align: center;
        margin: 20px auto;
    }
    .button_group {
        float: right;
        margin: 10px 10px;
    }
</style>
